@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; } @media screen and (min-width: 641px) { /*.secInner { background: rgba(255,0,0,0.3); }*/ } /* ---------------------------------------------------------------------------------------------------------------- .main ---------------------------------------------------------------------------------------------------------------- */ .pageTitle { position: absolute; top: 0; width: calc(137/750*100%); } @media screen and (min-width: 641px) { .pageTitle { position: absolute; top: 0; width: calc(137/1204*100%); } } @media screen and (min-width: 1325px) { } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage { } #toppage .hl { position: absolute; top: 0; width: calc(137/750*100%); } @media screen and (min-width: 641px) { #toppage .hl { width: calc(137/1204*100%); } } @media screen and (min-width: 1325px) { } /* .contHero ---------------------------------------------------------------------------------------------------------------- */ #toppage .contHero { width: 100%; background: #222222 url("../../_img/hero/visual_v2_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(496/750*100%); padding-bottom: calc(140/750*100%); } #toppage .cHer__logo { width: 100%; margin: 0 auto; position: relative; z-index: 10; } #toppage .cHer__chara { position: absolute; top: 0; left: 0; width: 100%; margin-top: calc(-403/750*100%); } #toppage .cHer__chara::after { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; top: 0; left: 0; } #toppage .cHer__navBlock { display: none; } #toppage .cHer__releaseBlock { width: calc(500/750*100%); margin: calc(40/750*100%) 0 0 calc(120/750*100%); position: relative; } #toppage .cHer__rB__data { width: calc(375/500*100%); } #toppage .cHer__rB__btn { width: calc(117/500*100%); position: absolute; top: 0; right: 0; margin-top: calc(14/500*100%); } #toppage .cHer__rB__btn a { display: block; background: #c90026; } #toppage .cHer__newsBlock { width: calc(650/750*100%); margin: calc(75/750*100%) auto 0; background: rgba(0,0,0,0.8); padding-top: calc(50/750*100%); position: relative; } #toppage .cHer__nB__ttl { width: calc(145/650*100%); margin: calc(-30/750*100%) 0 0 calc(30/650*100%); position: absolute; top: 0; left: 0; } #toppage .cHer__nB__list__wrap { width: 100%; padding: 0 0 calc(10/650*100%) calc(40/650*100%); } #toppage .cHer__nB__list { width: 100%; position: relative; } #toppage .cHer__nB__li__item { margin-bottom: 1em; line-height: 1.61; font-size: 3.2vw; }/* font24*/ #toppage .cHer__nB__li__item a { text-decoration: underline; color: #fff; } #toppage .cHer__nB__li__i__date { display: block; color: #ffd800; } #toppage .cHer__nB__list__wrap { height: calc(300/750*100vw); } #toppage .cHer__nB__list__wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0, 150, 255, 0.75); border-radius: 0; } #toppage .cHer__movieBlock { width: calc(650/750*100%); margin: calc(75/750*100%) auto 0; position: relative; } #toppage .cHer__mB__ttl { width: calc(265/650*100%); margin: calc(-30/750*100%) 0 0 calc(30/650*100%); position: absolute; top: 0; left: 0; z-index: 2; } #toppage .cHer__movieList__wrap { } #toppage .cHer__movieList { } #toppage .cHer__mL__item { } #toppage .cHer__mL__item .btn { display:block; position: relative; } #toppage .cHer__mL__item .btn__pic { position: relative; } #toppage .cHer__mL__item .btn__pic::after { content: ""; display: block; width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); } #toppage .cHer__mL__item .btn__text { display:block; position: absolute; right: calc(60/650*100%); bottom: 0; width: calc(590/650*100%); } #toppage .cHer__mL__item .btn__text::after { content: ""; display: block; width: calc(60/590*100%); height: 0; padding-top: calc(60/590*100%); position: absolute; right: calc(-60/590*100%); bottom: 0; background: #0096ff url("../../media/_img/video/btn_play.png") center center no-repeat; background-size: 100%; } #toppage .cHer__movieList__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #toppage .cHer__movieList__wrap .swiper-pagination-fraction { position: relative; bottom: 0px; } #toppage .cHer__movieList__wrap .baseSlider__pagination { padding-top: calc(15/650*100%); } #toppage .cHer__movieList__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(50/650*100%); height: 0; padding-top: calc(50/650*100% - 4px); border: 2px solid #606060; background-color: transparent; opacity: 1; border-radius: 0; } #toppage .cHer__movieList__wrap .baseSlider__pagination .swiper-pagination-bullet-active { background: #0096ff; border-color: #0096ff; opacity: 1; } #toppage .cHer__movieList__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(15/650*100%); } #toppage .cHer__bnrBlock { width: calc(650/750*100%); margin: calc(60/750*100%) auto 0; } #toppage .cHer__bnrBlock a { display: block; } #toppage .cHer__bnrItem { position: relative; margin-bottom: calc(60/750*100%); } #toppage .cHer__bnrList__wrap { position: relative; overflow: visible; } #toppage .cHer__bnrList { position: relative; } #toppage .cHer__bL__item { position: relative; } #toppage .cHer__bnrList__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #toppage .cHer__bnrList__wrap .swiper-pagination-fraction { position: relative; bottom: 0px; } #toppage .cHer__bnrList__wrap .baseSlider__pagination { padding-top: calc(15/650*100%); } #toppage .cHer__bnrList__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(50/650*100%); height: 0; padding-top: calc(50/650*100% - 4px); border: 2px solid #606060; background-color: transparent; opacity: 1; border-radius: 0; } #toppage .cHer__bnrList__wrap .baseSlider__pagination .swiper-pagination-bullet-active { background: #0096ff; border-color: #0096ff; opacity: 1; } #toppage .cHer__bnrList__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(15/650*100%); } #toppage .cHer__bnrBlc__twitter { width: calc(210/650*100%); margin: calc(10/650*100%) auto 0 0; position: relative; z-index: 9; } #toppage .cHer__bnrBlc__trial { width: 100%; margin: calc(40/650*100%) auto 0; position: relative; z-index: 9; } #toppage .cHer__bnrBlc__trial__btn { width: calc(208/650*100%); position: absolute; top: 0; margin-top: calc(125/650*100%); } /*#toppage .cHer__bnrBlc__trial__btn { width: calc(208/650*100%); position: absolute; top: 0; margin-top: calc(144/650*100%); }*/ #toppage .cHer__bnrBlc__trial__btn.-sw { left: calc(30/650*100%); } #toppage .cHer__bnrBlc__trial__btn.-ps { left: calc(246/650*100%); } @media screen and (min-width: 641px) { #toppage .contHero { background: #222222 url("../../_img/hero/visual_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(446/1324*100%); padding-bottom: calc(180/1324*100%); } #toppage .cHer__logo { width: calc(812/1204*100%); margin: 0 auto; } #toppage .cHer__chara { left: calc(219/1204*100%); margin-top: calc(-294/1204*100%); width: calc(849/1204*100%); } #toppage .cHer__flex { width: 100%; margin-top: calc(-37/1204*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} #toppage .cHer__navBlock { order: 1; } #toppage .cHer__newsBlock { order: 2; } #toppage .cHer__movieBlock { order: 3; } #toppage .cHer__releaseBlock { order: 4; } #toppage .cHer__bnrBlock { order: 5; } #toppage .cHer__flex::after { content: ""; display: block; width: calc(360/1204*100%); order: 6; } #toppage .cHer__navBlock { display: block; width: calc(360/1204*100%); } #toppage .cHer__navB__gnav { display: block; position: relative; } #toppage .cHer__navB__gnav::before { content: ""; display: block; width: 1px; height: 100%; background: #7a7a7c; position: absolute; top: 0; left: calc(4/360*100%); } #toppage .cHer__navB__gnav .activeLine { width: calc(10/360*100%); height: 0; padding-top: calc(40/360*100%); background: url("../img/bg_blue_g.jpg"); position: absolute; top: 0; left: calc(0/360*100%); opacity: 0; } #toppage .cHer__navB__gnav .activeLine { transition: all .2s cubic-bezier(0.25, 0.1, 0.25, 1.0); transform: translateY(0%); } #toppage .cHer__navB__gnav .activeLine[data-no] { opacity: 1; } #toppage .cHer__navB__gnav .activeLine[data-no='0'] { opacity: 0; } #toppage .cHer__navB__gnav__list { width: calc(335/360*100%); margin-left: calc(25/360*100%); position: relative; } #toppage .cHer__navB__g__l__btn { width: 100%; margin: 0 auto calc(21/335*100%); } #toppage .cHer__navB__g__l__btn:last-child { margin-bottom: 0; } #toppage .cHer__navB__g__l__btn .btn { display: block; position: relative; } #toppage .cHer__navB__g__l__btn .btn div { position: relative; } #toppage .cHer__navB__g__l__btn.-upd .btn::after { content: ""; display: block; width: calc(84/335*100%); height: 100%; background: url("../img/gnav/icon_upd_top.png") center center no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } #toppage .cHer__navB__gnav .activeLine, #toppage .cHer__navB__gnav .activeLine[data-no="0"] { margin-top: calc(-40/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="2"] { margin-top: calc(1/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="7"] { margin-top: calc(65/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="3"] { margin-top: calc(130/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="4"] { margin-top: calc(194/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="5"] { margin-top: calc(258/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="6"] { margin-top: calc(322/360*100%); } #toppage .cHer__navB__gnav .activeLine[data-no="8"] { margin-top: calc(386/360*100%); } #toppage .cHer__navB__gnav .gnb2 .btn div { width: calc(204/335*100%); } #toppage .cHer__navB__gnav .gnb7 .btn div { width: calc(272/335*100%); } #toppage .cHer__navB__gnav .gnb3 .btn div { width: calc(256/335*100%); } #toppage .cHer__navB__gnav .gnb4 .btn div { width: calc(230/335*100%); } #toppage .cHer__navB__gnav .gnb5 .btn div { width: calc(123/335*100%); } #toppage .cHer__navB__gnav .gnb6 .btn div { width: calc(182/335*100%); } #toppage .cHer__navB__gnav .gnb8 .btn div { width: calc(148/335*100%); } #toppage .cHer__navB__gnav .gnb2.-upd .btn::after { left: calc(214/335*100%); } #toppage .cHer__navB__gnav .gnb7.-upd .btn::after { left: calc(282/335*100%); } #toppage .cHer__navB__gnav .gnb3.-upd .btn::after { left: calc(266/335*100%); } #toppage .cHer__navB__gnav .gnb4.-upd .btn::after { left: calc(240/335*100%); } #toppage .cHer__navB__gnav .gnb5.-upd .btn::after { left: calc(133/335*100%); } #toppage .cHer__navB__gnav .gnb6.-upd .btn::after { left: calc(192/335*100%); } #toppage .cHer__navB__gnav .gnb8.-upd .btn::after { left: calc(158/335*100%); } #toppage .cHer__newsBlock { width: calc(360/1204*100%); margin: 0; padding-top: calc(40/1204*100%); margin-top: calc(19/1204*100%); } #toppage .cHer__nB__ttl { width: calc(102/360*100%); margin: calc(-17/360*100%) 0 0 calc(28/360*100%); } #toppage .cHer__nB__list__wrap { padding: 0 0 calc(10/360*100%) calc(28/360*100%); } #toppage .cHer__nB__list { } #toppage .cHer__nB__li__item { font-size: 1.1320vw; } #toppage .cHer__nB__li__i__date { font-size: 1.0566vw; } #toppage .cHer__nB__list__wrap { height: calc(180/1324*100vw); } #toppage .cHer__movieBlock { width: calc(360/1204*100%); margin: 0; background: rgba(0,0,0,0.8); padding-top: calc(40/1204*100%); margin-top: calc(19/1204*100%); } #toppage .cHer__mB__ttl { width: calc(186/360*100%); margin: calc(-17/360*100%) 0 0 calc(28/360*100%); } #toppage .cHer__movieList__wrap { overflow: visible; } #toppage .cHer__movieList { } #toppage .cHer__mL__item { } #toppage .cHer__mL__item .btn { } #toppage .cHer__mL__item .btn__pic { } #toppage .cHer__mL__item .btn__pic::after { display: none; } #toppage .cHer__mL__item .btn__text { position: relative; right: inherit; bottom: 0; width: 100%; } #toppage .cHer__mL__item .btn__text::after { display: none; } #toppage .cHer__movieList__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #toppage .cHer__movieList__wrap .swiper-pagination-fraction { position: absolute; margin-bottom: calc(-25/360*100%); } #toppage .cHer__movieList__wrap .baseSlider__pagination { padding-top: 0; } #toppage .cHer__movieList__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(14/360*100%); padding-top: calc(14/360*100% - 2px); border-width: 1px; } #toppage .cHer__movieList__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(5/360*100%); } #toppage .cHer__releaseBlock { width: calc(360/1204*100%); margin: calc(20/1204*100%) 0 0; } #toppage .cHer__rB__data { width: calc(283/360*100%); margin-left: calc(-10/360*100%); } #toppage .cHer__rB__btn { width: calc(88/360*100%); margin-top: calc(10/360*100%); z-index: 10; } #toppage .cHer__rB__btn a { display: block; background: #c90026; } #toppage .cHer__rB__btn a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #toppage .cHer__bnrBlock { width: calc(360/1204*100%); margin: calc(-60/1204*100%) 0 0; position: relative; } #toppage .cHer__bnrItem { position: absolute; top: 0; left: 0; margin-top: calc(-113/360*100%); margin-bottom: 0; } #toppage .cHer__bnrList__wrap { } #toppage .cHer__bnrList { z-index: 9; } #toppage .cHer__bL__item { position: relative; } #toppage .cHer__bnrList__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #toppage .cHer__bnrList__wrap .swiper-pagination-fraction {} #toppage .cHer__bnrList__wrap .baseSlider__pagination { padding-top: calc(5/360*100%); } #toppage .cHer__bnrList__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(14/360*100%); padding-top: calc(14/360*100% - 2px); border-width: 1px; } #toppage .cHer__bnrList__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(5/360*100%); } #toppage .cHer__bnrBlc__twitter { width: calc(105/360*100%); margin: calc(10/360*100%) auto 0 0; } #toppage .cHer__bnrBlc__twitter a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #toppage .cHer__bnrBlc__trial { margin: calc(-9/360*100%) 0 0; position: absolute; top: 0; right: calc(-420/360*100%); } #toppage .cHer__bnrBlc__trial__btn { width: calc(115/360*100%); margin-top: calc(54/360*100%); } /*#toppage .cHer__bnrBlc__trial__btn { width: calc(115/360*100%); margin-top: calc(64/360*100%); }*/ #toppage .cHer__bnrBlc__trial__btn.-sw { left: calc(14/360*100%); } #toppage .cHer__bnrBlc__trial__btn.-ps { left: calc(134/360*100%); } } @media screen and (min-width: 1325px) { #toppage .contHero { background-size: 1920px; padding-top: 446px; padding-bottom: 180px; } #toppage .cHer__nB__li__item { font-size: 1.4rem; } #toppage .cHer__nB__li__i__date { font-size: 1.3rem; } #toppage .cHer__nB__list__wrap { height: 180px; } } /* .contGame ---------------------------------------------------------------------------------------------------------------- */ #toppage .contGame { width: 100%; background: url("../../_img/game/bg_sp.png") top center no-repeat; background-size: 100%; margin-top: calc(-114/750*100%); padding-top: calc(592/750*100%); padding-bottom: calc(30/750*100%); } #toppage .contGame .hl { left: calc(-6/750*100%); margin-top: calc(-434/750*100%); } #toppage .cGam__chara { width: calc(645/750*100%); position: absolute; top: 0; right: calc(-217/750*100%); margin-top: calc(-433/750*100%); } #toppage .cGam__block { width: calc(672/750*100%); margin: 0 0 0 calc(37/750*100%); position: relative; } #toppage .cGam__text { width: 100%; } #toppage .cGam__btn { width: calc(304/672*100%); margin: calc(-5/672*100%) 0 0 calc(13/672*100%); position: relative; } #toppage .cGam__picList__wrap { width: calc(802/750*100%); margin: calc(76/750*100%) 0 0; overflow: visible; } #toppage .cGam__picList__wrap .swiper-wrapper { -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; margin: 0 auto; } #toppage .cGam__picList__wrap .swiper-wrapper .swiper-slide { padding-right: calc(10/802*100%); } @media screen and (min-width: 641px) { #toppage .contGame { background: url("../../_img/game/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); margin-top: calc(-312/1324*100%); padding-top: calc(300/1324*100%); padding-bottom: calc(134/1324*100%); } #toppage .contGame .hl { left: inherit; right: calc(-6/1204*100%); margin-top: calc(-170/1204*100%); } #toppage .cGam__chara { width: calc(645/1204*100%); right: calc(-162/1204*100%); margin-top: calc(2/1204*100%); z-index: 2; } #toppage .cGam__block { width: calc(885/1204*100%); margin: 0 0 0 calc(-10/1204*100%); } #toppage .cGam__text { } #toppage .cGam__btn { width: calc(256/885*100%); margin: calc(-13/885*100%) 0 0 calc(10/885*100%); } #toppage .cGam__btn a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } #toppage .cGam__picList__wrap { width: calc(2020/1204*100%); margin: calc(117/1204*100%) 0 0 calc(-358/1204*100%); } #toppage .cGam__picList__wrap .swiper-wrapper .swiper-slide { padding-right: calc(10/1614*100%); } } @media screen and (min-width: 1325px) { #toppage .contGame { background-size: 1920px; margin-top: -312px; padding-top: 300px; padding-bottom: 134px; } } /* .contAction ---------------------------------------------------------------------------------------------------------------- */ #toppage .contAction { width: 100%; background: url("../../_img/action/bg_sp.jpg") top center no-repeat; background-size: 100%; margin-top: calc(70/750*100%); padding-top: calc(538/750*100%); padding-bottom: calc(100/750*100%); } #toppage .contAction .hl { right: calc(-6/750*100%); margin-top: calc(-561/750*100%); } #toppage .cAct__charaList { position: absolute; top: 0; left: 0; width: 100%; } #toppage .cAct__cL__item { position: absolute; top: 0; } #toppage .cAct__cL__item.-i4 { left: calc(339/750*100%); margin-top: calc(-411/750*100%); width: calc(265/750*100%); } #toppage .cAct__cL__item.-i3 { left: calc(526/750*100%); margin-top: calc(-322/750*100%); width: calc(250/750*100%); } #toppage .cAct__cL__item.-i2 { left: calc(-61/750*100%); margin-top: calc(-316/750*100%); width: calc(341/750*100%); } #toppage .cAct__cL__item.-i1 { left: calc(48/750*100%); margin-top: calc(-319/750*100%); width: calc(501/750*100%); } #toppage .cAct__blockCopy { width: 100%; height: 0; position: relative; overflow: hidden; padding-top: calc(367/750*100%); } #toppage .cAct__blockCopy .cAct__bCo__grunge { width: 100%; position: absolute; top: 0; left: 0; } #toppage .cAct__blockCopy .cAct__bCo__text { width: 100%; position: absolute; top: 0; left: 0; } #toppage .cAct__blockCopy .cAct__btn { width: calc(304/750*100%); position: absolute; top: 0; left: calc(50/750*100%); margin-top: calc(196/750*100%); } @media screen and (min-width: 641px) { #toppage .contAction { background: url("../../_img/action/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); margin-top: calc(-20/1324*100%); padding-top: calc(468/1324*100%); padding-bottom: calc(150/1324*100%); } #toppage .contAction .hl { left: calc(-6/1204*100%); right: inherit; margin-top: calc(-426/1204*100%); } #toppage .cAct__charaList { } #toppage .cAct__cL__item { } #toppage .cAct__cL__item.-i4 { left: calc(605/1204*100%); margin-top: calc(-489/1204*100%); width: calc(333/1204*100%); } #toppage .cAct__cL__item.-i3 { left: calc(838/1204*100%); margin-top: calc(-377/1204*100%); width: calc(314/1204*100%); } #toppage .cAct__cL__item.-i2 { left: calc(103/1204*100%); margin-top: calc(-370/1204*100%); width: calc(428/1204*100%); } #toppage .cAct__cL__item.-i1 { left: calc(239/1204*100%); margin-top: calc(-373/1204*100%); width: calc(628/1204*100%); } #toppage .cAct__blockCopy { width: calc(1627/1204*100%); padding-top: calc(480/1204*100%); margin-left: calc(-65/1024*100%); } #toppage .cAct__blockCopy .cAct__bCo__grunge { } #toppage .cAct__blockCopy .cAct__bCo__text { width: calc(786/1627*100%); margin-top: calc(109/1627*100%); margin-left: calc(489/1627*100%); } #toppage .cAct__blockCopy .cAct__btn { width: calc(256/1627*100%); left: calc(1013/1627*100%); margin-top: calc(245/1627*100%); } #toppage .cAct__blockCopy .cAct__btn a:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } } @media screen and (min-width: 1325px) { #toppage .contAction { background-size: 1920px; margin-top: -20px; padding-top: 468px; padding-bottom: 150px; } } /* .contProduct ---------------------------------------------------------------------------------------------------------------- */ #toppage .contProduct { width: 100%; background: url("../../_img/product/bg_sp.png") top center no-repeat; background-size: 100%; margin-top: calc(-170/750*100%); padding-top: calc(80/750*100%); padding-bottom: calc(60/750*100%); overflow: hidden; } #toppage .contProduct::before { content: ""; display: block; width: 100%; height: 100%; background: url("../../_img/product/bg_r_sp.jpg") top center repeat; background-size: 100%; position: absolute; top: 0; left: 0; margin-top: calc(1500/750*100%); } #toppage .contProduct .hl { left: calc(-6/750*100%); margin-top: calc(82/750*100%); } #toppage .cPro__cont { width: calc(546/750*100%); margin-left: calc(154/750*100%); } #toppage .cPro__logo { width: calc(584/546*100%); margin-left: calc(-17/546*100%); } #toppage .cPro__release { display: none; } #toppage .sPro__selectBtn { width: 100%; margin-top: calc(5/546*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .sPro__sBtn__item { width: calc(125/546*100%); position: relative; } #toppage .sPro__sBtn__item .btntext { display: block; position: relative; cursor: pointer; } #toppage .sPro__sBtn__item.-switch .btntext { background: #e60012; } #toppage .sPro__sBtn__item.-ps4 .btntext { background: #004098; } #toppage .sPro__sBtn__item.-epic .btntext { background: #444444; } #toppage .sPro__sBtn__item.-steam .btntext { background: #1d3a5f; } #toppage .sPro__sBtn__item.active::after { content: ""; display: block; width: 100%; height: 0; padding-top: calc(6/263*100%); margin-top: calc(8/263*100%); } #toppage .sPro__sBtn__item.active.-switch::after { background: #e60012; } #toppage .sPro__sBtn__item.active.-ps4::after { background: #004098; } #toppage .sPro__sBtn__item.active.-epic::after { background: #444444; } #toppage .sPro__sBtn__item.active.-steam::after { background: #1d3a5f; } #toppage .sPro__prodList__wrap { } #toppage .sPro__prodList { } #toppage .sPro__prLi__item { } #toppage .sPro__prLi__it__detail { position: relative; width: 100%; } #toppage .sPro__prLi__it__de__pkg { width: 100%; margin-top: calc(40/546*100%); padding: calc(35/546*100%) 0; } #toppage .sPro__prLi__it__de__pkg img { width: calc(300/546*100%); margin: auto; display: block; } #toppage .sPro__prLi__it__de__ttl { width: 100%; } #toppage .sPro__prLi__it__de__priceList { width: 100%; margin-top: calc(36/546*100%); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item { border-bottom: 1px solid #404040; margin-top: calc(34/546*100%); padding-bottom: calc(7/546*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__sku { width: calc(150/546*100%); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__price { width: auto; text-align: right; color: #fff; font-size: calc(16/750*100vw); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__price .addPrice { font-size: 2em; font-weight: bold; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 { -webkit-flex-wrap: wrap; flex-wrap: wrap; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 .sPro__prLi__it__de__pL__item__sku { width: 100%; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 .sPro__prLi__it__de__pL__item__price { width: 100%; margin-top: calc(5/546*100%); padding-bottom: calc(8/546*100%); } #toppage .sPro__prLi__it__ttl { width: 100%; margin-top: calc(60/546*100%); position: relative; } #toppage .sPro__prLi__it__privi + .sPro__prLi__it__ttl { margin-top: calc(100/546*100%); } #toppage .sPro__prLi__it__privi { width: 100%; margin-top: calc(30/546*100%); position: relative; } #toppage .sPro__prLi__it__ttl + .sPro__prLi__it__privi { margin-top: calc(20/546*100%); } #toppage .sPro__prLi__it__pr__item { width: 100%; position: relative; } #toppage .sPro__prLi__it__pr__item2 { width: calc(506/546*100%); position: relative; margin: calc(-20/546*100%) auto 0; } #toppage .sPro__prLi__it__pr__price { position: absolute; bottom: 0; right: calc(40/546*100%); width: calc(485/546*100%); } #toppage .sPro__prLi__it__pr__price { text-align: right; color: #fff; font-size: calc(16/750*100vw); font-style: italic; } #toppage .sPro__prLi__it__pr__price .addPrice { font-size: 2em; font-weight: bold; font-style: italic; } #toppage .sPro__prLi__it__pr__btn { position: absolute; bottom: 0; right: calc(22/546*100%); width: calc(485/546*100%); } #toppage .sPro__prLi__it__pr__btnlist { width: 100%; position: absolute; bottom: 0; right: 0; } #toppage .-twewb .sPro__prLi__it__pr__price { margin-bottom: calc(324/546*100%); } #toppage .-amazon .sPro__prLi__it__pr__btn { margin-bottom: calc(84/546*100%); } #toppage .-estore .sPro__prLi__it__pr__btn { margin-bottom: calc(203/546*100%); } #toppage .-twewb .sPro__prLi__it__pr__btn.-es { margin-bottom: calc(236/546*100%); } #toppage .-twewb .sPro__prLi__it__pr__btn.-sn { margin-bottom: calc(85/546*100%); } #toppage .-eshop .sPro__prLi__it__pr__btn { margin-bottom: calc(229/546*100%); } #toppage .-eshop .sPro__prLi__it__pr__btn.-cs { margin-bottom: calc(229/546*100%); right: calc(32/546*100%); width: calc(475/546*100%);} #toppage .-pss .sPro__prLi__it__pr__btn { margin-bottom: calc(181/546*100%); } #toppage .sPro__prLi__it__notes { margin-top: 0.5em; font-size: 2.133vw; color: #909090; } @media screen and (min-width: 641px) { #toppage .contProduct { background: url("../../_img/product/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); margin-top: calc(-306/1324*100%); padding-top: calc(188/1324*100%); padding-bottom: calc(60/1324*100%); } #toppage .contProduct::before { background: url("../../_img/product/bg_r_pc.jpg") top center repeat; background-size: calc(500/1324*100%); margin-top: calc(1500/1324*100%); } #toppage .contProduct .hl { left: inherit; right: calc(-6/1204*100%); margin-top: calc(-46/1204*100%); } #toppage .cPro__cont { width: calc(1020/1204*100%); margin: 0; position: relative; } #toppage .cPro__logo { width: calc(595/1020*100%); margin-left: 0; } #toppage .cPro__release { display: block; width: calc(291/1020*100%); position: absolute; top: 0; left: calc(725/1020*100%); margin-top: calc(173/1020*100%); } #toppage .sPro__selectBtn { margin-top: calc(-8/1020*100%); } #toppage .sPro__sBtn__item { width: calc(245/1020*100%); } #toppage .sPro__sBtn__item .btntext { text-align: center; } #toppage .sPro__sBtn__item .btntext img { width: calc(300/330*100%); } #toppage .sPro__sBtn__item.active::after { padding-top: calc(4/330*100%); margin-top: calc(7/330*100%); } #toppage .sPro__sBtn__item { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block; } #toppage .sPro__sBtn__item:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #toppage .sPro__prodList__wrap { } #toppage .sPro__prodList { } #toppage .sPro__prLi__item { } #toppage .sPro__prLi__it__detail { margin-top: calc(40/1020*100%); } #toppage .sPro__prLi__it__de__pkg { width: calc(300/1020*100%); margin-top: calc(-10/1020*100%); padding: 0; position: absolute; top: 0; left: 0; } #toppage .sPro__prLi__it__de__pkg img { width: 100%; } #toppage .sPro__prLi__it__de__ttl { width: calc(357/1020*100%); margin-left: calc(360/1020*100%); } #toppage .sPro__prLi__it__de__priceList { width: calc(660/1020*100%); margin-top: calc(37/1020*100%); margin-left: calc(360/1020*100%); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item { margin-top: calc(29/660*100%); padding-bottom: calc(1/660*100%); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__sku { width: calc(150/660*100%); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__price { font-size: calc(16/1324*100vw); } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__price .addPrice { font-size: 2em; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 { } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 .sPro__prLi__it__de__pL__item__sku { } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item.-i3 .sPro__prLi__it__de__pL__item__price { margin-top: calc(10/660*100%); padding-bottom: calc(6/660*100%); } #toppage .sPro__prLi__it__ttl { margin-top: calc(80/1020*100%); } #toppage .sPro__prLi__it__privi + .sPro__prLi__it__ttl { margin-top: calc(100/1020*100%); } #toppage .sPro__prLi__it__privi { margin-top: calc(20/1020*100%); } #toppage .sPro__prLi__it__ttl + .sPro__prLi__it__privi { margin-top: calc(20/1020*100%); } #toppage .sPro__prLi__it__pr__item { } #toppage .sPro__prLi__it__pr__item2 { width: calc(960/1020*100%); margin: calc(-10/1020*100%) auto 0; } #toppage .sPro__prLi__it__pr__price { right: calc(50/1020*100%); width: calc(430/1020*100%); font-size: calc(16/1324*100vw); } #toppage .sPro__prLi__it__pr__price .addPrice { font-size: 2em; } #toppage .sPro__prLi__it__pr__btn { width: calc(430/1020*100%); right: calc(40/1020*100%); } #toppage .sPro__prLi__it__pr__btnlist { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-end; justify-content: flex-end; } #toppage .-twewb .sPro__prLi__it__pr__price { margin-bottom: calc(162/1020*100%); } #toppage .-amazon .sPro__prLi__it__pr__btn { margin-bottom: calc(37/1020*100%); } #toppage .-estore .sPro__prLi__it__pr__btn { margin-bottom: calc(72/1020*100%); } #toppage .-twewb .sPro__prLi__it__pr__btn.-es { margin-bottom: calc(106/1020*100%); } #toppage .-twewb .sPro__prLi__it__pr__btn.-sn { margin-bottom: calc(20/1020*100%); } #toppage .-eshop .sPro__prLi__it__pr__btn { margin-bottom: calc(72/1020*100%); } #toppage .-eshop .sPro__prLi__it__pr__btn.-cs { margin-bottom: calc(79/1020*100%); right: calc(47/1020*100%); width: calc(423/1020*100%);} #toppage .-pss .sPro__prLi__it__pr__btn { margin-bottom: calc(62/1020*100%); } #toppage .sPro__prLi__it__pr__btn:not(.-cs):hover { -webkit-transform: scale(1.06); transform: scale(1.06); } #toppage .sPro__prLi__it__notes { font-size: 0.9063vw; margin-left: calc(50/1020*100%); } } @media screen and (min-width: 1325px) { #toppage .contProduct { background-size: 1920px; margin-top: -306px; padding-top: 188px; padding-bottom: 60px; } #toppage .contProduct::before { background-size: 500px; margin-top: 1500px; } #toppage .sPro__prLi__it__de__priceList .sPro__prLi__it__de__pL__item .sPro__prLi__it__de__pL__item__price { font-size: 1.6rem; } #toppage .sPro__prLi__it__notes { font-size: 1.2rem; } #toppage .sPro__prLi__it__pr__price { font-size: 1.6rem; } } /* .contSpec ---------------------------------------------------------------------------------------------------------------- */ #toppage .contSpec { width: 100%; background: url("../../_img/product/bg_r_sp.jpg") top center repeat; background-size: 100%; border-top: 2px solid #404040; padding-top: calc(60/750*100%); padding-bottom: calc(180/750*100%); } #toppage .contSpec .sSpe__ttl { width: calc(650/750*100%); margin: 0 auto; } #toppage .sSpe__list { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; } #toppage .sSpe__li__item { margin-bottom: calc(20/650*100%); } #toppage .sSpe__li__item:last-child { margin-bottom: 0; } #toppage .sSpe__li__item { width: 100%; position: relative; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-pack: justify; justify-content: space-between; } #toppage .sSpe__li__item__name { width: calc(200/650*100%); display: -webkit-box; display: flex; align-items: center; background: #5b5b5b; } #toppage .sSpe__li__item__conts { width: calc(430/650*100%); display: -webkit-box; display: flex; align-items: center; flex-wrap: wrap; font-size: calc(20/750*100vw); } #toppage .sSpe__li__item__conts__dl { position: relative; width: 100%; } #toppage .sSpe__li__item__conts__dl dt { border-bottom: 1px solid #3c3c3c; padding-bottom: 0.1em; } #toppage .sSpe__li__item__conts__dl dd { margin-top: 0.5em; width: 100%; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; } #toppage .sSpe__li__item__conts__ul { position: relative; width: 100%; } #toppage .sSpe__li__item__conts__ul li { line-height: 1.61; } #toppage .sSpe__item__notes { font-size: calc(16/750*100vw); color: #ccc; } #toppage .sSpe__li__item.-i1 .sSpe__item__notes { text-indent: -1em; padding-left: 1em; line-height: 1.41; } #toppage .sSpe__li__item.-i2 .sSpe__li__item__conts { display: block; } #toppage .sSpe__li__item__conts__dl.-ps4, #toppage .sSpe__li__item__conts__dl.-epic, #toppage .sSpe__li__item__conts__dl.-steam { margin-top: 1.4em; } @media screen and (min-width: 641px) { #toppage .contSpec { background: url("../../_img/product/bg_r_pc.jpg") top center repeat; background-size: calc(500/1324*100%); border-top: none; padding-top: calc(60/1324*100%); padding-bottom: calc(90/1324*100%); } #toppage .contSpec .sSpe__ttl { width: calc(529/1204*100%); margin: 0; } #toppage .sSpe__list { width: 100%; margin: calc(20/1204*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: stretch; } #toppage .sSpe__li__item { margin-bottom: calc(10/1204*100%); margin-right: calc(20/1204*100%); -webkit-justify-content: space-between; justify-content: space-between; } #toppage .sSpe__li__item:last-child { margin-bottom: calc(10/1204*100%); } #toppage .sSpe__li__item__conts { font-size: calc(14/1324*100vw); } #toppage .sSpe__li__item.-i1 { order: 1; width: calc(460/1204*100%); } #toppage .sSpe__li__item.-i1 .sSpe__li__item__name { width: calc(130/460*100%); } #toppage .sSpe__li__item.-i1 .sSpe__li__item__conts { width: calc(320/460*100%); padding-top: 0.3em; } #toppage .sSpe__li__item.-i2 { order: 5; width: calc(800/1204*100%); } #toppage .sSpe__li__item.-i2 .sSpe__li__item__name { width: calc(130/800*100%); } #toppage .sSpe__li__item.-i2 .sSpe__li__item__conts { width: calc(660/800*100%); padding-top: 0.3em; padding-bottom: 0.3em; } #toppage .sSpe__li__item.-i3 { order: 6; width: calc(380/1204*100%); margin-right: 0; } #toppage .sSpe__li__item.-i3 .sSpe__li__item__name { width: calc(130/380*100%); } #toppage .sSpe__li__item.-i3 .sSpe__li__item__conts { width: calc(240/380*100%); } #toppage .sSpe__li__item.-i4 { order: 2; width: calc(320/1204*100%); } #toppage .sSpe__li__item.-i4 .sSpe__li__item__name { width: calc(130/320*100%); } #toppage .sSpe__li__item.-i4 .sSpe__li__item__conts { width: calc(180/320*100%); } #toppage .sSpe__li__item.-i5 { order: 3; width: calc(180/1204*100%); } #toppage .sSpe__li__item.-i5 .sSpe__li__item__name { width: calc(130/180*100%); } #toppage .sSpe__li__item.-i5 .sSpe__li__item__conts { width: calc(40/180*100%); } #toppage .sSpe__li__item.-i6 { order: 4; width: calc(180/1204*100%); margin-right: 0; } #toppage .sSpe__li__item.-i6 .sSpe__li__item__name { width: calc(130/180*100%); } #toppage .sSpe__li__item.-i6 .sSpe__li__item__conts { width: calc(40/180*100%); } #toppage .sSpe__li__item__conts__dl { width: calc(320/660*100%); } #toppage .sSpe__li__item__conts__dl dt { padding-bottom: 0em; } #toppage .sSpe__li__item__conts__dl dd { margin-top: 0.5em; width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .sSpe__li__item__conts__ul {} #toppage .sSpe__item__notes { font-size: calc(12/1324*100vw); } #toppage .sSpe__li__item.-i2 .sSpe__li__item__conts { display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .sSpe__li__item__conts__dl.-ps4 { margin-top: 0; } #toppage .sSpe__li__item__conts__dl.-epic, #toppage .sSpe__li__item__conts__dl.-steam { margin-top: 1.0em; } } @media screen and (min-width: 1325px) { #toppage .contSpec { background-size: 500px; padding-top: 60px; padding-bottom: 90px; } #toppage .sSpe__li__item__conts { font-size: 1.4rem; } #toppage .sSpe__item__notes { font-size: 1.2rem; } } /* ---------------------------------------------------------------------------------------------------------------- MODAL ---------------------------------------------------------------------------------------------------------------- */ .modalArea { position: relative; width: 100%; margin: 0 auto; padding: calc(50/750*100%) 0; } .mArea__inner { position: relative; width: 100%; } .mArea__block { position: relative; width: 100%; } #trialModal .mArea__pic { position: relative; width: 100%; } #trialModal .mArea__btnList { position: relative; width: 100%; } #trialModal .mArea__bL__item { position: relative; } #trialModal .mArea__btnList { margin-top: calc(-96/750*100%); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #trialModal .mArea__bL__item { width: calc(255/750*100%); } #trialModal .mArea__bL__item.-sw { margin-left: calc(105/750*100%); } #trialModal .mArea__bL__item.-ps { margin-left: calc(38/750*100%); margin-top: calc(-43/750*100%); } @media screen and (min-width: 641px) { .modalArea { padding: calc(50/1324*100%) 0; margin: 0 auto; } .mArea__inner { width: calc(1204/1324*100%); margin: 0 auto; } .mArea__block { margin: 0 auto; } #trialModal.modalArea { width: calc(1160/1324*100%); } #trialModal .mArea__inner { width: 100%; } #trialModal .mArea__block { width: 100%; } #trialModal .mArea__pic { width: 100%; margin: 0 auto; } #trialModal .mArea__btnList { margin-top: calc(-162/1160*100%); } #trialModal .mArea__bL__item { width: calc(388/1160*100%); } #trialModal .mArea__bL__item.-sw { margin-left: calc(165/1160*100%); } #trialModal .mArea__bL__item.-ps { margin-left: calc(63/1160*100%); margin-top: calc(-68/1160*100%); } } @media screen and (min-width: 1325px) { .modalArea { width: 1324px; padding: 50px 0; } .mArea__inner { width: 1204px; } #trialModal.modalArea { width: 1160px; } #trialModal .mArea__inner { width: 1160px; } } /* ---------------------------------------------------------------------------------------------------------------- #overview ---------------------------------------------------------------------------------------------------------------- */ #overview { padding-bottom: calc(120/750*100%); } #overview .hl { position: absolute; top: 0; width: calc(137/750*100%); } #overview .baseCopy { width: 100%; height: 0; position: relative; overflow: hidden; } #overview .baseCopy .baseCopy__grunge { width: 100%; position: absolute; top: 0; left: 0; } #overview .baseCopy .baseCopy__text { width: 100%; position: absolute; top: 0; left: 0; } @media screen and (min-width: 641px) { #overview { padding-bottom: 0; } #overview .hl { position: absolute; top: 0; width: calc(137/1204*100%); } } @media screen and (min-width: 1325px) { } /* .contStory ---------------------------------------------------------------------------------------------------------------- */ #overview .contStory { width: 100%; background: url("../../overview/_img/story/bg_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(94/750*100%); padding-bottom: calc(30/750*100%); } #overview .pageTitle { margin-top: calc(35/750*100%); right: calc(-6/750*100%); } #overview .cStr__blockCopy { width: calc(700/750*100%); padding-top: calc(374/750*100%); } #overview .cStr__char { width: calc(427/750*100%); position: absolute; top: 0; right: calc(-30/750*100%); margin-top: calc(311/750*100%); } #overview .cStr__text1 { width: calc(667/750*100%); margin-top: calc(194/750*100%); margin-left: calc(35/750*100%); position: relative; } #overview .cStr__text2 { width: calc(685/750*100%); margin-top: calc(235/750*100%); margin-left: calc(35/750*100%); position: relative; } #overview .cStr__img { width: calc(398/750*100%); position: absolute; top: 0; left: calc(32/750*100%); margin-top: calc(864/750*100%); } @media screen and (min-width: 641px) { #overview .contStory { background: url("../../overview/_img/story/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(100/1324*100%); padding-bottom: calc(330/1324*100%); } #overview .pageTitle { margin-top: calc(34/1204*100%); right: calc(-6/1204*100%); } #overview .cStr__blockCopy { width: calc(880/1204*100%); padding-top: calc(403/1204*100%); left: calc(-185/1204*100%); } #overview .cStr__blockCopy .cStr__bCo__grunge { } #overview .cStr__blockCopy .cStr__bCo__text { width: calc(645/880*100%); left: calc(182/880*100%); margin-top: calc(71/880*100%); } #overview .cStr__char { width: calc(407/1204*100%); right: calc(85/1204*100%); margin-top: calc(39/1204*100%); } #overview .cStr__text1 { width: calc(819/1204*100%); margin-top: calc(-53/1204*100%); margin-left: calc(-4/1204*100%); } #overview .cStr__text2 { width: calc(844/1204*100%); margin-top: calc(-28/1204*100%); margin-left: calc(367/1204*100%); z-index: 3; } #overview .cStr__img { width: calc(441/1204*100%); left: calc(-32/1204*100%); margin-top: calc(691/1204*100%); } } @media screen and (min-width: 1325px) { #overview .contStory { background-size: 1920px; padding-top: 100px; padding-bottom: 330px; } } /* .contField ---------------------------------------------------------------------------------------------------------------- */ #overview .contField { width: 100%; background: url("../../overview/_img/field/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(118/750*100%); padding-bottom: calc(20/750*100%); } #overview .contField .hl { margin-top: calc(18/750*100%); left: calc(-6/750*100%); z-index: 10; } #overview .cFld__piclist__wrap { width: calc(659/750*100%); margin: 0 0 0 auto; } #overview .cFld__piclist { } #overview .cFld__pl__item { position: relative; } #overview .cFld__pl__item .text { position: absolute; right: calc(13/659*100%); bottom: 0; width: calc(265/659*100%); margin-bottom: calc(38/659*100%); } #overview .cFld__blockCopy { width: calc(722/750*100%); padding-top: calc(330/750*100%); margin: calc(-58/750*100%) 0 0 auto; position: relative; z-index: 3; } #overview .cFld__btnlist__wrap { background: url("../../overview/_img/field/nav_line_sp.png") top center no-repeat; background-size: 100%; margin: calc(89/750*100%) auto 0; position: relative; z-index: 10; } #overview .cFld__btnlist { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: flex-start; } #overview .cFld__bl__item { width: calc(154/750*100%); margin-right: calc(11/750*100%); position: relative; } #overview .cFld__bl__item.-i1 { margin-top: calc(-126/750*100%); margin-left: calc(133/750*100%); } #overview .cFld__bl__item.-i2 { margin-top: calc(-149/750*100%); } #overview .cFld__bl__item.-i3 { margin-top: calc(-172/750*100%); } #overview .cFld__bl__item.-i4 { margin-top: calc(-2/750*100%); margin-left: calc(50/750*100%); } #overview .cFld__bl__item.-i5 { margin-top: calc(-26/750*100%); } #overview .cFld__bl__item.-i6 { margin-top: calc(-49/750*100%); } #overview .cFld__bl__item.-i7 { margin-top: calc(-72/750*100%); } #overview .cFld__bl__item::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../overview/_img/field/btn_on.png") center center no-repeat; background-size: 100%; opacity: 0; } #overview .cFld__bl__item.active::after { opacity: 1; } @media screen and (min-width: 641px) { #overview .contField { background: url("../../overview/_img/field/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(153/1324*100%); padding-bottom: calc(0/1324*100%); margin-top: calc(-196/1324*100%); } #overview .contField .hl { margin-top: calc(27/1204*100%); right: calc(-6/1204*100%); } #overview .cFld__piclist__wrap { width: calc(1112/1204*100%); overflow: visible; } #overview .cFld__piclist { } #overview .cFld__pl__item { } #overview .cFld__pl__item .text { right: calc(-51/1112*100%); width: calc(331/1112*100%); margin-bottom: calc(128/1112*100%); } #overview .cFld__blockCopy { width: calc(1810/1204*100%); padding-top: calc(474/1204*100%); margin: calc(-152/1204*100%) 0 0; left: calc(-358/1204*100%); } #overview .cFld__blockCopy .cFld__bCo__grunge { } #overview .cFld__blockCopy .cFld__bCo__text { width: calc(1200/1810*100%); left: calc(356/1810*100%); margin-top: calc(126/1810*100%); } #overview .cFld__btnlist__wrap { background: url("../../overview/_img/field/nav_line_pc.png") top center no-repeat; background-size: 100%; margin: calc(-140/1204*100%) 0 0 calc(-358/1204*100%); width: calc(1920/1204*100%); padding-top: calc(125/1204*100%); padding-bottom: calc(30/1204*100%); } #overview .cFld__btnlist { width: calc(1204/1920*100%); -webkit-justify-content: space-between; justify-content: space-between; margin: 0 auto; } #overview .cFld__bl__item { width: calc(154/1204*100%); margin: 0 calc(10/1204*100%); } #overview .cFld__bl__item.-i1 { margin-top: 0; margin-left: 0; } #overview .cFld__bl__item.-i2 { margin-top: calc(-25/1204*100%); } #overview .cFld__bl__item.-i3 { margin-top: calc(-50/1204*100%); } #overview .cFld__bl__item.-i4 { margin-top: calc(-74/1204*100%); margin-left: auto; } #overview .cFld__bl__item.-i5 { margin-top: calc(-99/1204*100%); } #overview .cFld__bl__item.-i6 { margin-top: calc(-124/1204*100%); } #overview .cFld__bl__item.-i7 { margin-top: calc(-149/1204*100%); } #overview .cFld__bl__item::after { background: url("../../overview/_img/field/btn_on.png") center center no-repeat; background-size: 100%; } #overview .cFld__bl__item { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block; } #overview .cFld__bl__item:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #overview .cFld__bl__item.active::after , #overview .cFld__bl__item:hover::after { opacity: 1; } } @media screen and (min-width: 1325px) { #overview .contField { background-size: 1920px; padding-top: 153px; padding-bottom: 0px; margin-top: -196px; } #overview .cFld__btnlist__wrap { background-size: 1920px; } } /* .contScan ---------------------------------------------------------------------------------------------------------------- */ #overview .contScan { width: 100%; background: url("../../overview/_img/scan/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(1/750*100%); padding-bottom: calc(85/750*100%); margin-top: calc(-37/750*100%); } #overview .contScan .hl { margin-top: calc(52/750*100%); right: calc(-6/750*100%); z-index: 3; } #overview .cScn__blockCopy { width: calc(642/750*100%); padding-top: calc(316/750*100%); margin-top: calc(-21/750*100%); position: relative; z-index: 4; } #overview .cScn__mainpic { width: calc(660/750*100%); margin-top: calc(-35/750*100%); position: relative; } #overview .cScn__itemlist { width: 100%; margin-top: calc(40/750*100%); position: relative; } #overview .cScn__il__item { width: calc(600/750*100%); position: relative; } #overview .cScn__il__item__pic { width: 100%; position: relative; } #overview .cScn__il__item__text { width: calc(606/600*100%); position: relative; margin-top: calc(-122/600*100%); } #overview .cScn__il__item__btn { width: calc(304/600*100%); position: absolute; right: 0; bottom: 0; margin-right: calc(72/600*100%); margin-bottom: calc(6/600*100%); } #overview .cScn__il__item.-i1 { margin: 0 0 0 auto; } #overview .cScn__il__item.-i1 .cScn__il__item__text { margin-left: calc(-53/600*100%); } #overview .cScn__il__item.-i2 { margin: calc(48/750*100%) auto 0 0; } #overview .cScn__il__item.-i2 .cScn__il__item__text { margin-left: calc(47/600*100%); } @media screen and (min-width: 641px) { #overview .contScan { background: url("../../overview/_img/scan/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(42/1324*100%); padding-bottom: calc(190/1324*100%); margin-top: calc(-148/1324*100%); } #overview .contScan .hl { margin-top: calc(67/1204*100%); right: calc(-6/1204*100%); } #overview .cScn__blockCopy { width: calc(1440/1204*100%); padding-top: calc(418/1204*100%); margin: 0; left: calc(-358/1204*100%); } #overview .cScn__blockCopy .cScn__bCo__grunge { } #overview .cScn__blockCopy .cScn__bCo__text { width: calc(962/1440*100%); left: calc(356/1440*100%); margin-top: calc(94/1440*100%); } #overview .cScn__mainpic { width: calc(982/1204*100%); margin: calc(-164/1204*100%) auto 0; } #overview .cScn__itemlist { margin-top: calc(50/1204*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #overview .cScn__il__item { width: calc(576/1204*100%); } #overview .cScn__il__item__pic { } #overview .cScn__il__item__text { width: calc(582/576*100%); margin-top: calc(-93/576*100%); } #overview .cScn__il__item__btn { width: calc(256/576*100%); margin-right: calc(23/576*100%); margin-bottom: calc(17/576*100%); } #overview .cScn__il__item.-i1 { margin: 0; } #overview .cScn__il__item.-i1 .cScn__il__item__text { margin-left: calc(16/576*100%); } #overview .cScn__il__item.-i2 { margin: 0; } #overview .cScn__il__item.-i2 .cScn__il__item__text { margin-left: calc(16/576*100%); } } @media screen and (min-width: 1325px) { #overview .contScan { background-size: 1920px; padding-top: 42px; padding-bottom: 190px; margin-top: -148px; } } /* .contSystem ---------------------------------------------------------------------------------------------------------------- */ #overview .contSystem { width: 100%; background: url("../../overview/_img/system/bg_v2_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(216/750*100%); padding-bottom: calc(32/750*100%); margin-top: calc(-32/750*100%); } #overview .contSystem .hl { margin-top: calc(-155/750*100%); left: calc(-6/750*100%); } #overview .cSys__pic { width: calc(409/750*100%); margin: 0 0 0 calc(159/750*100%); } #overview .cSys__blockCopy { width: calc(696/750*100%); padding-top: calc(435/750*100%); margin-top: calc(9/750*100%); margin-left: calc(25/750*100%); position: relative; } #overview .cSys__bCo__btn { width: calc(304/696*100%); margin-top: calc(-211/696*100%); margin-left: calc(159/696*100%); position: relative; z-index: 4; } #overview .cSys__chara { width: calc(437/750*100%); position: absolute; top: 0; right: calc(-85/750*100%); margin-top: calc(-221/750*100%); } @media screen and (min-width: 641px) { #overview .contSystem { background: url("../../overview/_img/system/bg_v2_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(146/1324*100%); padding-bottom: calc(72/1324*100%); margin-top: calc(-217/1324*100%); } #overview .contSystem .hl { margin-top: calc(-51/1204*100%); left: calc(-6/1204*100%); } #overview .cSys__pic { width: calc(576/1204*100%); margin: 0 0 0 calc(186/1204*100%); } #overview .cSys__blockCopy { width: calc(696/1204*100%); padding-top: calc(435/1204*100%); margin-top: 1px; margin-left: calc(150/1204*100%); } #overview .cSys__blockCopy .cSys__bCo__grunge { } #overview .cSys__blockCopy .cSys__bCo__text { width: calc(314/696*100%); left: calc(153/696*100%); margin-top: calc(142/696*100%); } #overview .cSys__bCo__btn { width: calc(256/696*100%); margin-top: calc(-197/696*100%); margin-left: calc(276/696*100%); } #overview .cSys__chara { width: calc(546/1204*100%); margin-top: calc(-134/1204*100%); right: calc(-4/1204*100%); } } @media screen and (min-width: 1325px) { #overview .contSystem { background-size: 1920px; padding-top: 146px; padding-bottom: 72px; margin-top: -217px; } } /* .contEventScene ---------------------------------------------------------------------------------------------------------------- */ #overview .contEventScene { width: 100%; background: url("../../overview/_img/scene/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(1/750*100%); padding-bottom: calc(273/750*100%); margin-top: calc(15/750*100%); } #overview .contEventScene .hl { margin-top: calc(-20/750*100%); right: calc(-6/750*100%); z-index: 3; } #overview .cES__blockCopy { width: calc(655/750*100%); padding-top: calc(288/750*100%); margin-top: calc(17/750*100%); position: relative; z-index: 4; } #overview .cES__mainpic { width: calc(660/750*100%); margin-top: calc(-19/750*100%); position: relative; } @media screen and (min-width: 641px) { #overview .contEventScene { background: url("../../overview/_img/scene/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(74/1324*100%); padding-bottom: calc(190/1324*100%); margin-top: calc(-174/1324*100%); } #overview .contEventScene .hl { margin-top: calc(-45/1204*100%); right: calc(-6/1204*100%); } #overview .cES__blockCopy { width: calc(1280/1204*100%); padding-top: calc(390/1204*100%); margin: 0; left: calc(-358/1204*100%); } #overview .cES__blockCopy .cES__bCo__grunge { } #overview .cES__blockCopy .cES__bCo__text { width: calc(674/1280*100%); left: calc(356/1280*100%); margin-top: calc(73/1280*100%); } #overview .cES__mainpic { width: calc(982/1204*100%); margin: calc(-156/1204*100%) auto 0; } } @media screen and (min-width: 1325px) { #overview .contEventScene { background-size: 1920px; padding-top: 74px; padding-bottom: 190px; margin-top: -174px; } } /* .contStaff ---------------------------------------------------------------------------------------------------------------- */ #overview .contStaff { width: 100%; background: url("../../overview/_img/staff/bg_sp.png?210514") top center no-repeat; background-size: 100%; padding-top: calc(145/750*100%); padding-bottom: calc(53/750*100%); margin-top: calc(-136/750*100%); } #overview .contStaff .hl { margin-top: calc(0/750*100%); left: calc(-6/750*100%); } #overview .cStf__list__wrap { width: calc(416/750*100%); margin-left: calc(183/750*100%); } #overview .cStf__list { width: 100%; position: relative; } #overview .cStf__list__item { width: 100%; position: relative; } #overview .cStf__list__item.-i1 { } #overview .cStf__list__item.-i2 { } #overview .cStf__list__item.-i3 { margin-top: calc(-18/416*100%); } #overview .cStf__list__item.-i4 { margin-top: calc(-18/416*100%); } #overview .cStf__list__item.-i5 { margin-top: calc(-3/416*100%); } #overview .cStf__list__item.-i6 { margin-top: calc(-29/416*100%); } #overview .cStf__list__item.-i7 { margin-top: calc(-18/416*100%); width: calc(338/416*100%); } #overview .cStf__list__item.-i8 { margin-top: calc(-29/416*100%); } @media screen and (min-width: 641px) { #overview .contStaff { background: url("../../overview/_img/staff/bg_pc.png?210514") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(209/1324*100%); padding-bottom: calc(80/1324*100%); margin-top: calc(-225/1324*100%); } #overview .contStaff .hl { margin-top: calc(-45/1204*100%); right: calc(-6/1204*100%); } #overview .cStf__list__wrap { width: calc(416/1204*100%); margin-left: calc(246/1204*100%); } #overview .cStf__list { } #overview .cStf__list__item { } #overview .cStf__list__item.-i1 { } #overview .cStf__list__item.-i2 { } #overview .cStf__list__item.-i3 { margin-top: calc(-18/416*100%); } #overview .cStf__list__item.-i4 { margin-top: calc(-18/416*100%); } #overview .cStf__list__item.-i5 { margin-top: calc(-62/416*100%); position: absolute; right: calc(-507/416*100%); top: 0; } #overview .cStf__list__item.-i6 { margin-top: calc(14/416*100%); position: absolute; right: calc(-507/416*100%); top: 0; } #overview .cStf__list__item.-i7 { margin-top: calc(-18/416*100%); } #overview .cStf__list__item.-i8 { margin-top: 0; position: absolute; right: calc(-507/416*100%); bottom: 0; margin-bottom: calc(66/416*100%); } } @media screen and (min-width: 1325px) { #overview .contStaff { background-size: 1920px; padding-top: 209px; padding-bottom: 80px; margin-top: -225px; } } /* ---------------------------------------------------------------------------------------------------------------- #gamesystem ---------------------------------------------------------------------------------------------------------------- */ #gamesystem .hl { position: absolute; top: 0; width: calc(137/750*100%); } #gamesystem .baseCopy { width: 100%; height: 0; position: relative; overflow: hidden; } #gamesystem .baseCopy__grunge { width: 100%; position: absolute; top: 0; left: 0; } #gamesystem .baseCopy__text { width: 100%; position: absolute; top: 0; left: 0; } #gamesystem .swiper-controlBtn { top: 0; height: 100%; margin-top: 0; background: none; } #gamesystem .swiper-controlBtn::after { content: ""; height: 0; display: block; position: absolute; top: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #gamesystem .swiper-controlBtn.swiper-button-prev::after { background: url("../img/btn_prev.png") center center no-repeat; background-size: 100%; left: 0; } #gamesystem .swiper-controlBtn.swiper-button-next::after { background: url("../img/btn_next.png") center center no-repeat; background-size: 100%; right: 0; } #gamesystem .swiper-controlBtn.swiper-button-disabled { opacity: 0.5; } #gamesystem .swiper-controlBtn.swiper-button-prev { left: 0; } #gamesystem .swiper-controlBtn.swiper-button-next { right: 0; } @media screen and (min-width: 641px) { #gamesystem { padding-bottom: 0; } #gamesystem .hl { position: absolute; top: 0; width: calc(137/1204*100%); } } /* .contGSystem ---------------------------------------------------------------------------------------------------------------- */ #gamesystem .contGSystem { width: 100%; background: url("../../gamesystem/_img/system/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(103/750*100%); padding-bottom: calc(128/750*100%); } #gamesystem .pageTitle { margin-top: calc(27/750*100%); left: calc(-6/750*100%); z-index: 3; } #gamesystem .cGSys__blockCopy { padding-top: calc(243/750*100%); } #gamesystem .cGSys__bCo__grunge {} #gamesystem .cGSys__bCo__text {} #gamesystem .cGSys__itemlist__wrap { width: calc(478/750*100%); margin: calc(10/750*100%) 0 0 calc(188/750*100%); overflow: visible; } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn { width: calc(50/478*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn::after { width: calc(43/50*100%); padding-top: calc(66/50*100%); margin-top: calc(197/50*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn.swiper-button-prev { left: calc(-50/478*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn.swiper-button-next { right: calc(-80/478*100%); } #gamesystem .cGSys__itemlist { width: 100%; } #gamesystem .cGSys__il__item { width: 100%; position: relative; } #gamesystem .cGSys__il__item__pic { width: 100%; } #gamesystem .cGSys__il__item__hd { width: calc(521/478*100%); margin-top: calc(-80/478*100%); margin-left: calc(-23/478*100%); position: relative; z-index: 2; } #gamesystem .cGSys__il__item__text { width: calc(489/478*100%); margin-top: calc(-123/478*100%); margin-left: calc(9/478*100%); position: relative; } #gamesystem .cGSys__il__item { opacity: 0.3; } #gamesystem .cGSys__il__item.swiper-slide-active { opacity: 1; } @media screen and (min-width: 641px) { #gamesystem .contGSystem { background: url("../../gamesystem/_img/system/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(117/1324*100%); padding-bottom: calc(188/1324*100%); } #gamesystem .pageTitle { margin-top: calc(19/1204*100%); left: calc(-6/1204*100%); } #gamesystem .cGSys__blockCopy { width: calc(996/1204*100%); padding-top: calc(271/1204*100%); margin-left: calc(-79/1204*100%); } #gamesystem .cGSys__bCo__grunge {} #gamesystem .cGSys__bCo__text { width: calc(462/996*100%); left: calc(274/996*100%); margin-top: calc(7/996*100%); } #gamesystem .cGSys__itemlist__wrap { width: calc(1006/1204*100%); margin: calc(10/1204*100%) 0 0 calc(198/1204*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn { width: calc(50/1006*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn::after { width: calc(41/50*100%); padding-top: calc(65/50*100%); margin-top: calc(268/50*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn.swiper-button-prev { left: calc(-50/1006*100%); } #gamesystem .cGSys__itemlist__wrap .swiper-controlBtn.swiper-button-next { right: calc(-60/1006*100%); } #gamesystem .cGSys__itemlist {} #gamesystem .cGSys__il__item { width: calc(478/1006*100%); } #gamesystem .cGSys__il__item__pic {} #gamesystem .cGSys__il__item__hd {} #gamesystem .cGSys__il__item__text {} #gamesystem .cGSys__il__item.swiper-slide-active , #gamesystem .cGSys__il__item.swiper-slide-next { opacity: 1; } } @media screen and (min-width: 1325px) { #gamesystem .contGSystem { background-size: 1920px; padding-top: 117px; padding-bottom: 188px; } } /* .contFood ---------------------------------------------------------------------------------------------------------------- */ #gamesystem .contFood { width: 100%; background: url("../../gamesystem/_img/food/bg_sp.png") top calc(137/750*100vw) center no-repeat; background-size: 100%; padding-bottom: calc(42/750*100%); margin-top: calc(-7/750*100%); } #gamesystem .contFood .hl { margin-top: calc(-40/750*100%); right: calc(-6/750*100%); z-index: 3; } #gamesystem .cFood__blockCopy { padding-top: calc(318/750*100%); } #gamesystem .cFood__bCo__grunge {} #gamesystem .cFood__bCo__text {} #gamesystem .cFood__piclist { width: 100%; position: relative; margin-top: calc(2/750*100%); } #gamesystem .cFood__pl__item { position: relative; } #gamesystem .cFood__pl__item.-i1 { width: calc(660/750*100%); } #gamesystem .cFood__pl__item.-i2 { width: calc(540/750*100%); margin-top: calc(20/750*100%); margin-left: calc(114/750*100%); } #gamesystem .cFood__icon { width: calc(572/750*100%); margin-top: calc(-17/750*100%); margin-left: calc(7/750*100%); position: relative; } #gamesystem .cFood__text { width: calc(666/750*100%); margin-top: calc(-44/750*100%); margin-left: calc(48/750*100%); position: relative; } @media screen and (min-width: 641px) { #gamesystem .contFood { background: url("../../gamesystem/_img/food/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(57/1324*100%); padding-bottom: calc(78/1324*100%); margin-top: calc(-156/1324*100%); } #gamesystem .contFood .hl { width: calc(137/1204*100%); margin-top: calc(64/1204*100%); right: calc(-6/1204*100%); } #gamesystem .cFood__blockCopy { width: calc(1504/1204*100%); padding-top: calc(390/1204*100%); margin-left: calc(-358/1204*100%); } #gamesystem .cFood__bCo__grunge { } #gamesystem .cFood__bCo__text { width: calc(409/1504*100%); left: calc(356/1504*100%); margin-top: calc(49/1504*100%); } #gamesystem .cFood__piclist { margin-top: calc(-69/1204*100%); } #gamesystem .cFood__pl__item.-i1 { width: calc(720/1204*100%); } #gamesystem .cFood__pl__item.-i2 { width: calc(540/1204*100%); margin-top: calc(-126/1204*100%); margin-left: calc(497/1204*100%); } #gamesystem .cFood__icon { width: calc(381/1204*100%); margin-top: calc(167/1204*100%); margin-left: calc(680/1204*100%); position: absolute; top: 0; left: 0; } #gamesystem .cFood__text { width: calc(545/1204*100%); margin-top: calc(-206/1204*100%); margin-left: calc(-2/1204*100%); } } @media screen and (min-width: 1325px) { #gamesystem .contFood { background-size: 1920px; padding-top: 57px; padding-bottom: 78px; margin-top: -156px; } } /* .contFashion ---------------------------------------------------------------------------------------------------------------- */ #gamesystem .contFashion { width: 100%; background: url("../../gamesystem/_img/fashion/bg_sp.png") top calc(88/750*100vw) center no-repeat; background-size: 100%; padding-bottom: calc(189/750*100%); margin-top: calc(-17/750*100%); } #gamesystem .cFsn__blockCopy { padding-top: calc(315/750*100%); } #gamesystem .cFsn__bCo__grunge {} #gamesystem .cFsn__bCo__text {} #gamesystem .cFsn__mainpic { width: calc(700/750*100%); position: relative; margin-top: calc(3/750*100%); margin-left: calc(50/750*100%); } #gamesystem .cFsn__icon { width: calc(533/750*100%); margin-top: calc(-25/750*100%); margin-left: calc(40/750*100%); position: relative; } #gamesystem .cFsn__text { width: calc(670/750*100%); margin-top: calc(-34/750*100%); margin-left: calc(48/750*100%); position: relative; } @media screen and (min-width: 641px) { #gamesystem .contFashion { background: url("../../gamesystem/_img/fashion/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(35/1324*100%); padding-bottom: calc(97/1324*100%); margin-top: calc(-143/1324*100%); } #gamesystem .cFsn__blockCopy { width: calc(1669/1204*100%); padding-top: calc(407/1204*100%); margin-left: calc(-358/1204*100%); } #gamesystem .cFsn__bCo__grunge { } #gamesystem .cFsn__bCo__text { width: calc(645/1669*100%); left: calc(355/1669*100%); margin-top: calc(44/1669*100%); } #gamesystem .cFsn__mainpic { width: calc(720/1204*100%); margin-top: calc(-139/1204*100%); margin-left: calc(317/1204*100%); } #gamesystem .cFsn__icon { width: calc(383/1204*100%); margin-top: calc(319/1204*100%); margin-left: calc(-38/1204*100%); position: absolute; top: 0; left: 0; } #gamesystem .cFsn__text { width: calc(968/1204*100%); margin-top: calc(-60/1204*100%); margin-left: calc(-4/1204*100%); } } @media screen and (min-width: 1325px) { #gamesystem .contFashion { background-size: 1920px; padding-top: 35px; padding-bottom: 97px; margin-top: -143px; } } /* ---------------------------------------------------------------------------------------------------------------- #teambattle ---------------------------------------------------------------------------------------------------------------- */ #teambattle .contTeamBattle { width: 100%; background: url("../../teambattle/_img/tb/bg_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(156/750*100%); padding-bottom: calc(127/750*100%); } #teambattle .pageTitle { margin-top: calc(-30/750*100%); left: calc(-6/750*100%); } #teambattle .cTB__mainpic { width: calc(660/750*100%); margin: 0 0 0 auto; } #teambattle .cTB__block { width: 100%; margin: calc(171/750*100%) auto 0; position: relative; } #teambattle .cTB__char { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cTB__char__item { position: absolute; top: 0; } #teambattle .cTB__char__item.-i1 { width: calc(265/750*100%); right: calc(128/750*100%); margin-top: calc(-227/750*100%); } #teambattle .cTB__char__item.-i2 { width: calc(250/750*100%); right: calc(-44/750*100%); margin-top: calc(-138/750*100%); } #teambattle .cTB__char__item.-i3 { width: calc(342/750*100%); left: calc(-44/750*100%); margin-top: calc(-132/750*100%); } #teambattle .cTB__char__item.-i4 { width: calc(501/750*100%); left: calc(66/750*100%); margin-top: calc(-135/750*100%); } #teambattle .cTB__blockText { width: calc(715/750*100%); height: 0; padding-top: calc(405/750*100%); position: relative; margin-left: calc(35/750*100%); } #teambattle .cTB__blockText .cTB__bTxt__grunge { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cTB__bTxt__text { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cTB__blockText { overflow: hidden; } #teambattle .cTB__itemlist__wrap { width: 100%; margin-top: calc(92/750*100%); position: relative; } #teambattle .cTB__itemlist { width: 100%; position: relative; } #teambattle .cTB__il__item { width: calc(650/750*100%); margin: 0 auto; position: relative; } #teambattle .cTB__il__i__hd { width: calc(453/650*100%); margin-left: calc(-66/650*100%); position: relative; z-index: 2; } #teambattle .cTB__il__i__pic { margin-top: calc(-67/650*100%); position: relative; } #teambattle .cTB__il__i__text { margin-top: calc(20/650*100%); position: relative; } #teambattle .cTB__il__item.-i1::after { content: ""; display: block; width: calc(60/650*100%); height: 0; padding-top: calc(50/650*100%); position: absolute; left: 50%; bottom: 0; margin-left: calc(-30/650*100%); margin-bottom: calc(-86/650*100%); background: url("../../teambattle/_img/tb/arrow_sp.png") center center no-repeat; background-size: 100%; } #teambattle .cTB__il__item.-i2 { margin-top: calc(105/750*100%); } #teambattle .cTB__piclist__wrap { width: 100%; position: relative; overflow: visible; } #teambattle .cTB__piclist { width: 100%; position: relative; } #teambattle .cTB__pl__item {} #teambattle .cTB__piclist__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #teambattle .cTB__piclist__wrap .swiper-pagination-fraction { bottom: 0px; } #teambattle .cTB__piclist__wrap .baseSlider__pagination { margin-bottom: calc(-230/650*100%); } #teambattle .cTB__piclist__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(50/650*100%); height: 0; padding-top: calc(50/650*100% - 4px); border: 2px solid #606060; background-color: transparent; opacity: 1; border-radius: 0; } #teambattle .cTB__piclist__wrap .baseSlider__pagination .swiper-pagination-bullet-active { background: #0096ff; border-color: #0096ff; opacity: 1; } #teambattle .cTB__piclist__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(15/650*100%); } @media screen and (min-width: 641px) { #teambattle .contTeamBattle { background: url("../../teambattle/_img/tb/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(178/1324*100%); padding-bottom: calc(230/1324*100%); } #teambattle .pageTitle { margin-top: calc(-46/1204*100%); left: calc(-6/1204*100%); } #teambattle .cTB__mainpic { width: calc(1093/1204*100%); } #teambattle .cTB__block { margin: calc(47/1204*100%) auto 0; } #teambattle .cTB__char { } #teambattle .cTB__char__item.-i1 { width: calc(332/1204*100%); right: calc(149/1204*100%); margin-top: calc(-250/1204*100%); } #teambattle .cTB__char__item.-i2 { width: calc(313/1204*100%); right: calc(-65/1204*100%); margin-top: calc(-138/1204*100%); } #teambattle .cTB__char__item.-i3 { width: calc(428/1204*100%); left: calc(221/1204*100%); margin-top: calc(-131/1204*100%); } #teambattle .cTB__char__item.-i4 { width: calc(627/1204*100%); left: calc(358/1204*100%); margin-top: calc(-135/1204*100%); } #teambattle .cTB__blockText { width: calc(1698/1204*100%); padding-top: calc(497/1204*100%); margin-left: calc(-358/1204*100%); } #teambattle .cTB__blockText .cTB__bTxt__grunge { } #teambattle .cTB__bTxt__text { width: calc(953/1698*100%); left: calc(529/1698*100%); margin-top: calc(105/1698*100%); } #teambattle .cTB__itemlist__wrap { margin-top: calc(119/1204*100%); } #teambattle .cTB__itemlist { 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;} #teambattle .cTB__il__item { width: calc(570/1204*100%); margin: 0; } #teambattle .cTB__il__i__hd { width: calc(394/570*100%); margin-left: calc(-56/570*100%); } #teambattle .cTB__il__i__pic { margin-top: calc(-54/570*100%); } #teambattle .cTB__il__i__text { margin-top: calc(20/570*100%); } #teambattle .cTB__il__item.-i1::after { width: calc(50/570*100%); padding-top: calc(50/570*100%); left: 100%; bottom: inherit; top: 0; margin-left: calc(9/570*100%); margin-top: calc(192/570*100%); background: url("../../teambattle/_img/tb/arrow_pc.png") center center no-repeat; background-size: 100%; z-index: 5; } #teambattle .cTB__il__item.-i2 { margin-top: 0; } #teambattle .cTB__piclist__wrap.swiper-container-horizontal > .swiper-pagination-bullets, #teambattle .cTB__piclist__wrap .swiper-pagination-fraction { } #teambattle .cTB__piclist__wrap .baseSlider__pagination { margin-bottom: calc(-150/570*100%); } #teambattle .cTB__piclist__wrap .baseSlider__pagination .swiper-pagination-bullet { width: calc(14/570*100%); padding-top: calc(14/570*100% - 2px); border-width: 1px; } #teambattle .cTB__piclist__wrap.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(5/570*100%); } } @media screen and (min-width: 1325px) { #teambattle .contTeamBattle { background-size: 1920px; padding-top: 178px; padding-bottom: 230px; } } /* .contBadge ---------------------------------------------------------------------------------------------------------------- */ #teambattle .contBadge { width: 100%; background: url("../../teambattle/_img/badge/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(67/750*100%); padding-bottom: calc(159/750*100%); } #teambattle .contBadge .hl { position: absolute; top: 0; width: calc(137/750*100%); margin-top: calc(-61/750*100%); right: calc(-6/750*100%); z-index: 3; } #teambattle .cBge__mainpic { width: calc(660/750*100%); } #teambattle .cBge__blockText { width: calc(656/750*100%); height: 0; padding-top: calc(335/750*100%); position: relative; margin-top: calc(-45/750*100%); } #teambattle .cBge__blockText .cBge__bTxt__grunge { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cBge__bTxt__text { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cBge__itemlist__wrap { width: calc(540/750*100%); margin: calc(-50/750*100%) auto 0; position: relative; overflow: visible; } #teambattle .cBge__itemlist { position: relative; } #teambattle .cBge__il__item { position: relative; opacity: 0.5; } #teambattle .cBge__il__i__hd { width: calc(529/540*100%); margin-left: calc(-35/540*100%); position: relative; z-index: 2; } #teambattle .cBge__il__i__pic { width: 100%; margin-top: calc(-86/540*100%); } #teambattle .cBge__il__i__text { width: 100%; margin-top: calc(17/540*100%); } #teambattle .cBge__il__item.swiper-slide-active { opacity: 1; } #teambattle .swiper-controlBtn { top: 0; height: 0; margin-top: calc(70/540*100%); padding-top: calc(304/540*100%); width: calc(105/540*100%); background: none; } #teambattle .swiper-controlBtn::after { content: ""; width: calc(43/105*100%); height: 100%; display: block; position: absolute; top: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #teambattle .swiper-controlBtn.swiper-button-prev::after { background: url("../img/btn_prev.png") center center no-repeat; background-size: 100%; right: calc(34/105*100%); } #teambattle .swiper-controlBtn.swiper-button-next::after { background: url("../img/btn_next.png") center center no-repeat; background-size: 100%; left: calc(34/105*100%); } #teambattle .swiper-controlBtn.swiper-button-disabled { opacity: 0.5; } #teambattle .swiper-controlBtn.swiper-button-prev { left: calc(-105/540*100%); } #teambattle .swiper-controlBtn.swiper-button-next { right: calc(-105/540*100%); } @media screen and (min-width: 641px) { #teambattle .contBadge { background: url("../../teambattle/_img/badge/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(175/1324*100%); padding-bottom: calc(350/1324*100%); margin-top: calc(-163/1324*100%); } #teambattle .contBadge .hl { width: calc(137/1204*100%); margin-top: calc(-124/1204*100%); right: calc(-6/1204*100%); } #teambattle .cBge__mainpic { width: calc(1112/1204*100%); } #teambattle .cBge__blockText { width: calc(1474/1204*100%); padding-top: calc(408/1204*100%); margin-top: calc(-156/1204*100%); margin-left: calc(-358/1204*100%); } #teambattle .cBge__blockText .cBge__bTxt__grunge { } #teambattle .cBge__bTxt__text { width: calc(985/1474*100%); left: calc(355/1474*100%); margin-top: calc(103/1474*100%); } #teambattle .cBge__itemlist__wrap { width: calc(1020/1204*100%); margin: calc(-92/1204*100%) 0 0 calc(55/1204*100%); position: relative; overflow: visible; } #teambattle .cBge__itemlist { } #teambattle .cBge__il__item { } #teambattle .cBge__il__i__hd { width: calc(480/490*100%); margin-left: calc(-31/490*100%); } #teambattle .cBge__il__i__pic { margin-top: calc(-78/490*100%); } #teambattle .cBge__il__i__text { margin-top: calc(16/490*100%); } #teambattle .cBge__il__item.swiper-slide-active , #teambattle .cBge__il__item.swiper-slide-next { opacity: 1; } #teambattle .swiper-controlBtn { margin-top: calc(64/1020*100%); padding-top: calc(276/1020*100%); width: 100%; } #teambattle .swiper-controlBtn::after { width: calc(43/1020*100%); } #teambattle .swiper-controlBtn.swiper-button-prev::after { right: calc(12/1020*100%); } #teambattle .swiper-controlBtn.swiper-button-next::after { left: calc(87/1020*100%); } #teambattle .swiper-controlBtn.swiper-button-disabled { opacity: 0.5; } #teambattle .swiper-controlBtn.swiper-button-prev { left: -100%; } #teambattle .swiper-controlBtn.swiper-button-next { right: -100%; } #teambattle .swiper-controlBtn:hover::after { -webkit-transform: scale(1.15); transform: scale(1.15); } } @media screen and (min-width: 1325px) { #teambattle .contBadge { background-size: 1920px; padding-top: 175px; padding-bottom: 350px; margin-top: -163px; } } /* .contEnemies ---------------------------------------------------------------------------------------------------------------- */ #teambattle .contEnemies { width: 100%; background: url("../../teambattle/_img/enemies/bg_sp.png") top center no-repeat; background-size: 100%; padding-top: calc(609/750*100%); padding-bottom: calc(717/750*100%); margin-top: calc(-106/750*100%); } #teambattle .contEnemies .hl { position: absolute; top: 0; width: calc(137/750*100%); margin-top: calc(-595/750*100%); left: calc(-6/750*100%); } #teambattle .cEnm__text { width: 100%; position: relative; } #teambattle .cEnm__itemlist { width: 100%; position: absolute; top: 0; left: 0; } #teambattle .cEnm__il__item { position: absolute; top: 0; } #teambattle .cEnm__il__item.-i1 { width: calc(429/750*100%); left: calc(-63/750*100%); margin-top: calc(352/750*100%); } #teambattle .cEnm__il__item.-i2 { width: calc(562/750*100%); right: calc(-43/750*100%); margin-top: calc(406/750*100%); } #teambattle .cEnm__il__item.-i3 { width: calc(304/750*100%); right: calc(83/750*100%); margin-top: calc(773/750*100%); } @media screen and (min-width: 641px) { #teambattle .contEnemies { background: url("../../teambattle/_img/enemies/bg_pc.png") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(655/1324*100%); padding-bottom: calc(600/1324*100%); margin-top: calc(-300/1324*100%); } #teambattle .contEnemies .hl { width: calc(137/1204*100%); margin-top: calc(-527/1204*100%); left: calc(-6/1204*100%); } #teambattle .cEnm__text { width: calc(1110/1204*100%); margin-left: calc(-3/1204*100%); } #teambattle .cEnm__itemlist { } #teambattle .cEnm__il__item { } #teambattle .cEnm__il__item.-i1 { width: calc(536/1204*100%); left: calc(-45/1204*100%); margin-top: calc(280/1204*100%); } #teambattle .cEnm__il__item.-i2 { width: calc(702/1204*100%); right: calc(-23/1204*100%); margin-top: calc(160/1204*100%); } #teambattle .cEnm__il__item.-i3 { width: calc(378/1204*100%); right: calc(102/1204*100%); margin-top: calc(607/1204*100%); } } @media screen and (min-width: 1325px) { #teambattle .contEnemies { background-size: 1920px; padding-top: 655px; padding-bottom: 600px; margin-top: -300px; } } /* ---------------------------------------------------------------------------------------------------------------- #characterTop ---------------------------------------------------------------------------------------------------------------- */ #characterTop .contCharacterTop { background-image: url("../../character/_img/index/bg_t_sp.png"), url("../../character/_img/index/bg_b_sp.png"); background-position: top center, bottom calc(30/750*100vw) center; background-repeat: no-repeat; background-size: 100%; padding-bottom: calc(130/750*100%); } #characterTop .pageTitle { margin-top: calc(130/750*100%); right: calc(-6/750*100%); } #characterTop .cChaT__team__wrap { width: calc(650/750*100%); position: relative; margin: calc(106/750*100%) auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #characterTop .cChaT__team { width: 100%; position: relative; margin: 0; } #characterTop .cChaT__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #characterTop .cCT__lst__item { position: relative; } #characterTop .cCT__lst__item .btn { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; } #characterTop .cChaT__icon { position: absolute; bottom: 0; left: 0; } @media screen and (max-width: 640px) { #characterTop .-t1 .cCT__lst__item { width: calc(266/650*100%); } #characterTop .-t1 .cCT__lst__item.-i2 { margin-top: calc(-27/650*100%); margin-right: calc(95/650*100%); } #characterTop .-t1 .cCT__lst__item.-i3 { margin-top: calc(-24/650*100%); } #characterTop .-t1 .cCT__lst__item.-i4 { margin-top: calc(-65/650*100%); margin-right: calc(95/650*100%); } #characterTop .-t1 .cChaT__icon { width: calc(170/650*100%); left: calc(175/650*100%); margin-bottom: calc(525/650*100%); } #characterTop .cChaT__team.-t2 { margin-top: calc(-10/650*100%); } #characterTop .-t2 .cCT__lst__item { width: calc(315/650*100%); } #characterTop .-t2 .cCT__lst__item.-i2 { margin-top: calc(-48/650*100%); } #characterTop .-t2 .cChaT__icon { width: calc(148/650*100%); left: calc(253/650*100%); margin-bottom: calc(111/650*100%); } #characterTop .cChaT__team.-t3 { margin-top: calc(1/650*100%); width: calc(203/650*100%); } #characterTop .-t3 .cCT__lst__item { width: 100%; } #characterTop .-t3 .cChaT__icon { width: calc(117/203*100%); left: calc(45/203*100%); margin-bottom: calc(73/203*100%); } #characterTop .cChaT__team.-t4 { margin-top: calc(-31/650*100%); width: calc(203/650*100%); } #characterTop .-t4 .cCT__lst__item { width: 100%; } #characterTop .-t4 .cChaT__icon { width: calc(121/203*100%); left: calc(43/203*100%); margin-bottom: calc(69/203*100%); } #characterTop .cChaT__team.-t5 { margin-top: calc(-62/650*100%); width: calc(203/650*100%); } #characterTop .-t5 .cCT__lst__item { width: 100%; } #characterTop .-t5 .cChaT__icon { width: calc(124/203*100%); left: calc(41/203*100%); margin-bottom: calc(75/203*100%); } #characterTop .cChaT__team.-t6 { margin-top: 0; } #characterTop .-t6 .cCT__lst__item { width: calc(203/650*100%); } #characterTop .-t6 .cCT__lst__item.-i2 { margin-top: calc(-31/650*100%); } #characterTop .-t6 .cCT__lst__item.-i3 { margin-top: calc(-62/650*100%); } #characterTop .-t6 .cChaT__icon { width: calc(455/650*100%); left: calc(112/650*100%); margin-bottom: calc(84/650*100%); } #characterTop .cChaT__team.-t7 { margin-top: 0; } #characterTop .-t7 .cCT__lst__item { width: calc(203/650*100%); } #characterTop .-t7 .cCT__lst__item.-i2 { margin-top: calc(-31/650*100%); } #characterTop .-t7 .cCT__lst__item.-i3 { margin-top: calc(-62/650*100%); } #characterTop .-t7 .cChaT__icon { width: calc(455/650*100%); left: calc(112/650*100%); margin-bottom: calc(84/650*100%); } #characterTop .cChaT__team.-t7_2 { margin-top: 0; } #characterTop .-t7_2 .cCT__lst__item { width: calc(203/650*100%); } #characterTop .-t7_2 .cCT__lst__item.-i1 { display: none; } #characterTop .-t7_2 .cCT__lst__item.-i2 { } #characterTop .-t7_2 .cCT__lst__item.-i3 { margin-top: calc(-31/650*100%); } #characterTop .-t7_2 .cCT__lst__item.-i4 { margin-top: calc(-62/650*100%); } #characterTop .-t7_2 .cChaT__icon { display: none; } #characterTop .cChaT__team.-t8 { margin-top: 0; width: calc(203/650*100%); } #characterTop .-t8 .cCT__lst__item { width: 100%; } #characterTop .-t8 .cChaT__icon { width: calc(223/203*100%); left: calc(-8/203*100%); margin-bottom: calc(60/203*100%); } #characterTop .cChaT__team.-t9 { margin-top: calc(-31/650*100%); width: calc(426/650*100%); } #characterTop .-t9 .cCT__lst__item { width: calc(203/426*100%); } #characterTop .-t9 .cCT__lst__item.-i2 { margin-top: calc(-31/426*100%); } #characterTop .-t9 .cChaT__icon { width: calc(455/426*100%); left: calc(-13/426*100%); margin-bottom: calc(68/426*100%); } #characterTop .cChaT__team.-t9_2 { margin-top: 0; } #characterTop .-t9_2 .cCT__lst__item { width: calc(203/650*100%); } #characterTop .-t9_2 .cCT__lst__item.-i1 { } #characterTop .-t9_2 .cCT__lst__item.-i2 { margin-top: calc(-31/650*100%); } #characterTop .-t9_2 .cCT__lst__item.-i3 { margin-top: calc(-62/650*100%); } #characterTop .-t9_2 .cChaT__icon { display: none; } } @media screen and (min-width: 641px) { #characterTop .contCharacterTop { background: url("../../character/_img/index/bg_v2_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); padding-bottom: calc(53/1324*100%); } #characterTop .pageTitle { margin-top: calc(136/1204*100%); right: calc(-5/1204*100%); } #characterTop .cChaT__team__wrap { width: calc(1045/1204*100%); margin: calc(186/1204*100%) 0 0; } #characterTop .cChaT__team {} #characterTop .cChaT__list {} #characterTop .cCT__lst__item {} #characterTop .cCT__lst__item .btn {} #characterTop .cChaT__icon {} #characterTop .cCT__lst__item img{ -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #characterTop .cCT__lst__item .btn:hover + img { -webkit-transform: scale(1.05); transform: scale(1.05); } #characterTop .-t1 .cCT__lst__item { width: calc(250/1045*100%); } #characterTop .-t1 .cCT__lst__item.-i2 { margin-top: calc(-38/1045*100%); } #characterTop .-t1 .cCT__lst__item.-i3 { margin-top: calc(-75/1045*100%); } #characterTop .-t1 .cCT__lst__item.-i4 { margin-top: calc(-112/1045*100%); } #characterTop .-t1 .cChaT__icon { width: calc(170/1045*100%); left: calc(440/1045*100%); margin-bottom: calc(125/1045*100%); } #characterTop .cChaT__team.-t2 { width: calc(409/1045*100%); margin-top: calc(-21/1045*100%); } #characterTop .-t2 .cCT__lst__item { width: calc(197/409*100%); } #characterTop .-t2 .cCT__lst__item.-i2 { margin-top: calc(-30/409*100%); } #characterTop .-t2 .cChaT__icon { width: calc(148/409*100%); left: calc(132/409*100%); margin-bottom: calc(75/409*100%); } #characterTop .cChaT__team.-t3 { width: calc(197/1045*100%); margin-top: calc(-80/1045*100%); } #characterTop .-t3 .cCT__lst__item { width: 100%; } #characterTop .-t3 .cChaT__icon { width: calc(117/197*100%); left: calc(42/197*100%); margin-bottom: calc(59/197*100%); } #characterTop .cChaT__team.-t4 { width: calc(197/1045*100%); margin-top: calc(-110/1045*100%); } #characterTop .-t4 .cCT__lst__item { width: 100%; } #characterTop .-t4 .cChaT__icon { width: calc(121/197*100%); left: calc(40/197*100%); margin-bottom: calc(63/197*100%); } #characterTop .cChaT__team.-t5 { width: calc(197/1045*100%); margin-top: calc(-140/1045*100%); } #characterTop .-t5 .cCT__lst__item { width: 100%; } #characterTop .-t5 .cChaT__icon { width: calc(124/197*100%); left: calc(38/197*100%); margin-bottom: calc(57/197*100%); } #characterTop .cChaT__team.-t6 { width: calc(621/1045*100%); margin-top: calc(-20/1045*100%); } #characterTop .-t6 .cCT__lst__item { width: calc(197/621*100%); } #characterTop .-t6 .cCT__lst__item.-i2 { margin-top: calc(-30/621*100%); } #characterTop .-t6 .cCT__lst__item.-i3 { margin-top: calc(-60/621*100%); } #characterTop .-t6 .cChaT__icon { width: calc(364/621*100%); left: calc(77/621*100%); margin-bottom: calc(65/621*100%); } #characterTop .cChaT__team.-t7 { width: calc(409/1045*100%); margin-top: calc(-109/1045*100%); } #characterTop .-t7 .cCT__lst__item { width: calc(197/409*100%); } #characterTop .-t7 .cCT__lst__item.-i2 { margin-top: calc(-30/409*100%); } #characterTop .-t7 .cCT__lst__item.-i3 { display: none; } #characterTop .-t7 .cChaT__icon { width: calc(364/409*100%); left: calc(24/409*100%); margin-bottom: calc(61/409*100%); } #characterTop .cChaT__team.-t7_2 { width: calc(833/1045*100%); margin-top: calc(-19/1045*100%); } #characterTop .-t7_2 .cCT__lst__item { width: calc(197/833*100%); } #characterTop .-t7_2 .cCT__lst__item.-i2 { margin-top: calc(-40/833*100%); } #characterTop .-t7_2 .cCT__lst__item.-i3 { margin-top: calc(-59/833*100%); } #characterTop .-t7_2 .cCT__lst__item.-i4 { margin-top: calc(-89/833*100%); } #characterTop .-t7_2 .cChaT__icon { width: calc(364/833*100%); left: calc(236/833*100%); margin-bottom: calc(91/833*100%); } #characterTop .cChaT__team.-t8 { width: calc(197/1045*100%); margin-top: calc(-140/1045*100%); } #characterTop .-t8 .cCT__lst__item { width: 100%; } #characterTop .-t8 .cChaT__icon { width: calc(219/197*100%); left: calc(-10/197*100%); margin-bottom: calc(50/197*100%); } #characterTop .cChaT__team.-t9 { width: calc(409/1045*100%); margin-top: calc(-19/1045*100%); } #characterTop .-t9 .cCT__lst__item { width: calc(197/409*100%); } #characterTop .-t9 .cCT__lst__item.-i2 { margin-top: calc(-30/409*100%); } #characterTop .-t9 .cChaT__icon { display: none; } #characterTop .cChaT__team.-t9_2 { width: calc(621/1045*100%); margin-top: calc(-79/1045*100%); } #characterTop .-t9_2 .cCT__lst__item { width: calc(197/621*100%); } #characterTop .-t9_2 .cCT__lst__item.-i2 { margin-top: calc(-30/621*100%); } #characterTop .-t9_2 .cCT__lst__item.-i3 { margin-top: calc(-60/621*100%); } #characterTop .-t9_2 .cChaT__icon { width: calc(342/621*100%); left: calc(-82/621*100%); margin-bottom: calc(45/621*100%); } } @media screen and (min-width: 1325px) { #characterTop .contCharacterTop { background-size: 1920px; padding-bottom: 53px; } } /* ---------------------------------------------------------------------------------------------------------------- #character ---------------------------------------------------------------------------------------------------------------- */ #character .contCharacter { position: relative; } #character .pageTitle { margin-top: calc(130/750*100%); right: calc(-6/750*100%); } #character .cCha__full { position: absolute; top: 0; } #character .cCha__detail { position: relative; width: calc(650/750*100%); margin: 0 auto; padding-top: calc(385/750*100%); } #character .cCha__speech { width: 100%; position: relative; } #character .cCha__name { width: calc(670/650*100%); position: relative; margin-top: calc(-60/650*100%); margin-left: calc(-2/650*100%); } #character .cCha__text { width: 100%; position: relative; margin-top: calc(-46/650*100%); margin-left: calc(-4/650*100%); } #character .cCha__imgBlock { width: 100%; position: relative; margin-top: calc(-20/650*100%); margin-left: calc(-5/650*100%); } #character .cCha__iB__item { width: calc(368/650*100%); position: relative; } #character .cCha__iB__item .btn { display: block; width: 100%; height: 0; padding-top: calc(240/368*100%); position: relative; background: url("../../character/_img/picframe.png") center center no-repeat; background-size: 100%; } #character .cCha__iB__item .btn .images { display: block; width: calc(348/368*100%); position: absolute; top: 0; left: calc(10/368*100%); margin-top: calc(21/368*100%); transform: rotate(-8deg); } #character .cA__subNav__area { display: block; width: 100%; position: relative; margin-top: calc(100/750*100%); padding-bottom: calc(130/750*100%); background: url("../../character/_img/subnav/bg_sp.png") center top no-repeat; background-size: 100%; background-position: center top; } #character .cA__subNav__wrap { width: 100%; margin: 0 auto; position: relative; } #character .cA__subNav { width: 100%; margin: 0 auto; position: relative; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; } #character .cA__sN__item { width: calc(122/750*100%); position: relative; margin-right: calc(7/750*100%); } #character .cA__sN__item.-icon { width: calc(124/750*100%); margin-right: calc(2/750*100%); } #character .cA__sN__item .btn { display: block; position: relative; } #character .cA__sN__item .btn::after { content: ""; display: block; width: 100%; height: 100%; background: url("../../character/_img/subnav/btn_on_sp.png") center center no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; opacity: 0; } #character .cA__sN__item.current .btn::after { opacity: 1; } #character .cA__btnBack { width: calc(263/750*100%); margin: 0 auto; } #character .cCha__btn { width: calc(35/750*100%); position: absolute; top: 0; } #character .cCha__btn.-prev { left: calc(8/750*100%); margin-top: calc(49/750*100%); } #character .cCha__btn.-next { right: calc(6/750*100%); margin-top: calc(-43/750*100%); } #character .cA__sN__item:last-child { margin-right: calc(47/750*100%); } #character .cA__sN__item.-i4 { margin-top: calc(-23/750*100%); } #character .cA__sN__item.-i3 { margin-top: calc(-41/750*100%); } #character .cA__sN__item.-i2 { margin-top: calc(-59/750*100%); } #character .cA__sN__item.-i1 { margin-top: calc(-78/750*100%); margin-right: calc(47/750*100%); } #character .cA__sN__item.-i8 { margin-top: calc(-23/750*100%); } #character .cA__sN__item.-i7 { margin-top: calc(-41/750*100%); } #character .cA__sN__item.-i6 { margin-top: calc(-59/750*100%); } #character .cA__sN__item.-i5 { margin-top: calc(-78/750*100%); } #character .-team1 .cA__sN__item.-icon { margin-top: calc(-13/750*100%); } #character .-team1 .cA__btnBack { margin-top: calc(23/750*100%); } #character .-team2 .cA__sN__item.-icon { margin-top: calc(-51/750*100%); } #character .-team2 .cA__btnBack { margin-top: calc(60/750*100%); } #character .-team3 .cA__sN__item.-icon { margin-top: calc(-69/750*100%); } #character .-team3 .cA__btnBack { margin-top: calc(78/750*100%); } #character .-team4 .cA__sN__item.-icon { margin-top: calc(-69/750*100%); } #character .-team4 .cA__btnBack { margin-top: calc(78/750*100%); } #character .-team5 .cA__sN__item.-icon { margin-top: calc(-69/750*100%); } #character .-team5 .cA__btnBack { margin-top: calc(78/750*100%); } #character .-team6 .cA__sN__item.-icon { margin-top: calc(-33/750*100%); } #character .-team6 .cA__btnBack { margin-top: calc(42/750*100%); } #character .-team7 .cA__subNav { -ms-flex-wrap: wrap; flex-wrap: wrap;} #character .-team7 .cA__sN__item.-icon { margin-top: calc(-13/750*100%); } #character .-team7 .cA__btnBack { margin-top: calc(23/750*100%); } #character .-team8 .cA__sN__item.-icon { margin-top: calc(-69/750*100%); } #character .-team8 .cA__btnBack { margin-top: calc(78/750*100%); } #character .-team9 .cA__subNav { -ms-flex-wrap: wrap; flex-wrap: wrap;} #character .-team9 .cA__sN__item.-icon { margin-top: calc(-13/750*100%); } #character .-team9 .cA__btnBack { margin-top: calc(23/750*100%); } #character .secFirstScreen { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(13,26,72,0.8) url("../img/bg_dot.png"); z-index: 100; } #character .sFS__item { width: 100%; height: 0; padding-top: calc(930/750*100%); position: relative; overflow: hidden; transform-origin: top left; margin-top: calc(165/750*100%); } #character .sFS__item img { max-width: none; width: 100%; position: absolute; top: 0; right: 0; transform-origin: top left; } #rindo.contCharacter { background: url("../../character/_img/rindo/bg_sp.jpg") center top no-repeat; background-size: 100%; } #rindo .cCha__full { width: calc(382/750*100%); right: calc(-14/750*100%); margin-top: calc(291/750*100%); } #fret.contCharacter { background: url("../../character/_img/fret/bg_sp.jpg") center top no-repeat; background-size: 100%; } #fret .cCha__full { width: calc(396/750*100%); right: calc(-65/750*100%); margin-top: calc(306/750*100%); } #nagi.contCharacter { background: url("../../character/_img/nagi/bg_sp.jpg") center top no-repeat; background-size: 100%; } #nagi .cCha__full { width: calc(273/750*100%); right: calc(-9/750*100%); margin-top: calc(331/750*100%); } #minamimoto.contCharacter { background: url("../../character/_img/minamimoto/bg_sp.jpg") center top no-repeat; background-size: 100%; } #minamimoto .cCha__full { width: calc(386/750*100%); right: calc(-37/750*100%); margin-top: calc(279/750*100%); } #shiba.contCharacter { background: url("../../character/_img/shiba/bg_sp.jpg") center top no-repeat; background-size: 100%; } #shiba .cCha__full { width: calc(284/750*100%); right: calc(25/750*100%); margin-top: calc(275/750*100%); } #shoka.contCharacter { background: url("../../character/_img/shoka/bg_sp.jpg") center top no-repeat; background-size: 100%; } #shoka .cCha__full { width: calc(326/750*100%); right: calc(-36/750*100%); margin-top: calc(366/750*100%); } #shoka .cA__subNav__area { margin-top: calc(29/750*100%); } #kariya.contCharacter { background: url("../../character/_img/kariya/bg_sp.jpg") center top no-repeat; background-size: 100%; } #kariya .cCha__full { width: calc(535/750*100%); right: calc(-134/750*100%); margin-top: calc(352/750*100%); } #yashiro.contCharacter { background: url("../../character/_img/yashiro/bg_sp.jpg") center top no-repeat; background-size: 100%; } #yashiro .cCha__full { width: calc(436/750*100%); right: calc(-47/750*100%); margin-top: calc(333/750*100%); } #coco.contCharacter { background: url("../../character/_img/coco/bg_sp.jpg") center top no-repeat; background-size: 100%; } #coco .cCha__full { width: calc(415/750*100%); right: calc(-51/750*100%); margin-top: calc(332/750*100%); } #susukichi.contCharacter { background: url("../../character/_img/susukichi/bg_sp.jpg") center top no-repeat; background-size: 100%; } #susukichi .cCha__full { width: calc(538/750*100%); right: calc(-114/750*100%); margin-top: calc(322/750*100%); } #tsugumi.contCharacter { background: url("../../character/_img/tsugumi/bg_sp.jpg") center top no-repeat; background-size: 100%; } #tsugumi .cCha__full { width: calc(282/750*100%); right: calc(-7/750*100%); margin-top: calc(324/750*100%); } #fuya.contCharacter { background: url("../../character/_img/fuya/bg_sp.jpg") center top no-repeat; background-size: 100%; } #fuya .cCha__full { width: calc(288/750*100%); right: calc(20/750*100%); margin-top: calc(307/750*100%); } #kanon.contCharacter { background: url("../../character/_img/kanon/bg_sp.jpg") center top no-repeat; background-size: 100%; } #kanon .cCha__full { width: calc(439/750*100%); right: calc(-64/750*100%); margin-top: calc(326/750*100%); } #motoi.contCharacter { background: url("../../character/_img/motoi/bg_sp.jpg") center top no-repeat; background-size: 100%; } #motoi .cCha__full { width: calc(511/750*100%); right: calc(-23/750*100%); margin-top: calc(307/750*100%); } #ayano.contCharacter { background: url("../../character/_img/ayano/bg_sp.jpg") center top no-repeat; background-size: 100%; } #ayano .cCha__full { width: calc(413/750*100%); right: calc(-34/750*100%); margin-top: calc(324/750*100%); } #kaie.contCharacter { background: url("../../character/_img/kaie/bg_sp.jpg") center top no-repeat; background-size: 100%; } #kaie .cCha__full { width: calc(359/750*100%); right: calc(-14/750*100%); margin-top: calc(224/750*100%); } #kubou.contCharacter { background: url("../../character/_img/kubou/bg_sp.jpg") center top no-repeat; background-size: 100%; } #kubou .cCha__full { width: calc(512/750*100%); right: calc(-57/750*100%); margin-top: calc(244/750*100%); } #hishima.contCharacter { background: url("../../character/_img/hishima/bg_sp.jpg") center top no-repeat; background-size: 100%; } #hishima .cCha__full { width: calc(292/750*100%); right: calc(17/750*100%); margin-top: calc(267/750*100%); } #mikagi.contCharacter { background: url("../../character/_img/mikagi/bg_sp.jpg") center top no-repeat; background-size: 100%; } #mikagi .cCha__full { width: calc(302/750*100%); right: calc(28/750*100%); margin-top: calc(275/750*100%); } #neku.contCharacter { background: url("../../character/_img/neku/bg_sp.jpg") center top no-repeat; background-size: 100%; } #neku .cCha__full { width: calc(378/750*100%); right: calc(21/750*100%); margin-top: calc(265/750*100%); } #beat.contCharacter { background: url("../../character/_img/beat/bg_sp.jpg") center top no-repeat; background-size: 100%; } #beat .cCha__full { width: calc(640/750*100%); right: calc(-149/750*100%); margin-top: calc(268/750*100%); } #shiki.contCharacter { background: url("../../character/_img/shiki/bg_sp.jpg") center top no-repeat; background-size: 100%; } #shiki .cCha__full { width: calc(222/750*100%); right: calc(105/750*100%); margin-top: calc(295/750*100%); } #rhyme.contCharacter { background: url("../../character/_img/rhyme/bg_sp.jpg") center top no-repeat; background-size: 100%; } #rhyme .cCha__full { width: calc(223/750*100%); right: calc(59/750*100%); margin-top: calc(288/750*100%); } #joshua.contCharacter { background: url("../../character/_img/joshua/bg_sp.jpg") center top no-repeat; background-size: 100%; } #joshua .cCha__full { width: calc(299/750*100%); right: calc(28/750*100%); margin-top: calc(272/750*100%); } @media screen and (min-width: 641px) { #character .contCharacter { } #character .pageTitle { margin-top: calc(136/1204*100%); right: calc(-5/1204*100%); } #character .cCha__full { } #character .cCha__detail { width: calc(750/1204*100%); margin: 0; padding-top: calc(256/1204*100%); } #character .cCha__speech { width: calc(650/750*100%); } #character .cCha__name { width: calc(670/750*100%); margin-top: calc(-60/750*100%); margin-left: calc(-1/750*100%); } #character .cCha__text { width: 100%; margin-top: calc(-47/750*100%); margin-left: calc(-7/750*100%); } #character .cCha__imgBlock { margin-top: calc(0/750*100%); margin-left: calc(-14/750*100%); z-index: 10; } #character .cCha__iB__item { width: calc(410/750*100%); } #character .cCha__iB__item .btn { padding-top: calc(266/410*100%); } #character .cCha__iB__item .btn .images { width: calc(384/410*100%); left: calc(13/410*100%); margin-top: calc(25/410*100%); transform: rotate(-8deg); } #character .cA__subNav__area { margin-top: calc(-74/1324*100%); padding-bottom: calc(80/1324*100%); background: url("../../character/_img/subnav/bg_pc.png") center top no-repeat; background-size: calc(1920/1324*100%); background-position: center top; } #character .cA__subNav__wrap { width: calc(1204/1324*100%); } #character .cA__subNav {} #character .cA__sN__item { width: calc(92/1204*100%); margin-right: calc(14/1204*100%); } #character .cA__sN__item.-icon { width: calc(126/1204*100%); margin-right: calc(5/1204*100%); } #character .cA__sN__item .btn {} #character .cA__sN__item .btn::after { background: url("../../character/_img/subnav/btn_on_pc.png") center center no-repeat; background-size: 100%; } #character .cA__btnBack { width: calc(159/1204*100%); margin: 0 0 0 auto; } #character .cCha__btn { width: calc(35/1204*100%); } #character .cCha__btn.-prev { left: calc(-52/1204*100%); margin-top: calc(-438/1204*100%); } #character .cCha__btn.-next { right: calc(-53/1204*100%); margin-top: calc(-438/1204*100%); } #character .cCha__btn.btn_ov a:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } #character .cA__sN__item:last-child { margin-right: calc(-3/1204*100%); } #character .cA__sN__item.-i4 { margin-top: calc(35/1204*100%); } #character .cA__sN__item.-i3 { margin-top: calc(20/1204*100%); } #character .cA__sN__item.-i2 { margin-top: calc(5/1204*100%); } #character .cA__sN__item.-i1 { margin-top: calc(-10/1204*100%); } #character .cA__sN__item .btn { -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; } #character .cA__sN__item .btn:hover::after , #character .cA__sN__item.current .btn::after { opacity: 1; } #character .cA__sN__item:not(.current) .btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #character .-team1 .cA__sN__item.-icon { margin-top: calc(28/1204*100%); } #character .-team1 .cA__btnBack { margin-top: calc(-36/1204*100%); } #character .-team2 .cA__sN__item.-icon { margin-top: calc(-2/1204*100%); } #character .-team2 .cA__btnBack { margin-top: calc(-6/1204*100%); } #character .-team3 .cA__sN__item.-icon { margin-top: calc(-17/1204*100%); } #character .-team3 .cA__btnBack { margin-top: calc(9/1204*100%); } #character .-team4 .cA__sN__item.-icon { margin-top: calc(-17/1204*100%); } #character .-team4 .cA__btnBack { margin-top: calc(9/1204*100%); } #character .-team5 .cA__sN__item.-icon { margin-top: calc(-17/1204*100%); } #character .-team5 .cA__btnBack { margin-top: calc(9/1204*100%); } #character .-team6 .cA__sN__item.-icon { margin-top: calc(13/1204*100%); } #character .-team6 .cA__btnBack { margin-top: calc(-21/1204*100%); } #character .-team7 .cA__subNav { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #character .-team7 .cA__sN__item.-icon { margin-top: calc(58/1204*100%); } #character .-team7 .cA__sN__item.-i4 { margin-top: calc(65/1204*100%); } #character .-team7 .cA__sN__item.-i3 { margin-top: calc(50/1204*100%); } #character .-team7 .cA__sN__item.-i2 { margin-top: calc(35/1204*100%); } #character .-team7 .cA__sN__item.-i1 { margin-top: calc(20/1204*100%); margin-right: calc(14/1204*100%); } #character .-team7 .cA__sN__item.-i6 { margin-top: calc(5/1204*100%); } #character .-team7 .cA__sN__item.-i5 { margin-top: calc(-10/1204*100%); margin-right: calc(-3/1204*100%); } #character .-team7 .cA__btnBack { margin-top: calc(-66/1204*100%); } #character .-team8 .cA__sN__item.-icon { margin-top: calc(-17/1204*100%); } #character .-team8 .cA__btnBack { margin-top: calc(9/1204*100%); } #character .-team9 .cA__subNav { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #character .-team9 .cA__sN__item.-icon { margin-top: calc(43/1204*100%); } #character .-team9 .cA__sN__item.-i4 { margin-top: calc(50/1204*100%); } #character .-team9 .cA__sN__item.-i3 { margin-top: calc(35/1204*100%); } #character .-team9 .cA__sN__item.-i2 { margin-top: calc(20/1204*100%); } #character .-team9 .cA__sN__item.-i1 { margin-top: calc(5/1204*100%); margin-right: calc(14/1204*100%); } #character .-team9 .cA__sN__item.-i5 { margin-top: calc(-10/1204*100%); margin-right: calc(-3/1204*100%); } #character .-team9 .cA__btnBack { margin-top: calc(-51/1204*100%); } #character .secFirstScreen { } #character .sFS__item { width: calc(1920/1324*100%); padding-top: calc(940/1324*100%); left: 50%; margin-left: calc(-960/1324*100%); margin-top: calc(146/1324*100%); } #character .sFS__item img { } #rindo.contCharacter { background: url("../../character/_img/rindo/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #rindo .cCha__full { width: calc(382/1204*100%); right: calc(206/1204*100%); margin-top: calc(129/1204*100%); } #fret.contCharacter { background: url("../../character/_img/fret/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #fret .cCha__full { width: calc(397/1204*100%); right: calc(118/1204*100%); margin-top: calc(155/1204*100%); } #nagi.contCharacter { background: url("../../character/_img/nagi/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #nagi .cCha__full { width: calc(273/1204*100%); right: calc(156/1204*100%); margin-top: calc(200/1204*100%); } #minamimoto.contCharacter { background: url("../../character/_img/minamimoto/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #minamimoto .cCha__full { width: calc(387/1204*100%); right: calc(181/1204*100%); margin-top: calc(122/1204*100%); } #shiba.contCharacter { background: url("../../character/_img/shiba/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #shiba .cCha__full { width: calc(286/1204*100%); right: calc(221/1204*100%); margin-top: calc(124/1204*100%); } #shoka.contCharacter { background: url("../../character/_img/shoka/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #shoka .cCha__full { width: calc(327/1204*100%); right: calc(122/1204*100%); margin-top: calc(195/1204*100%); } #kariya.contCharacter { background: url("../../character/_img/kariya/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #kariya .cCha__full { width: calc(536/1204*100%); right: calc(75/1204*100%); margin-top: calc(137/1204*100%); } #yashiro.contCharacter { background: url("../../character/_img/yashiro/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #yashiro .cCha__full { width: calc(437/1204*100%); right: calc(104/1204*100%); margin-top: calc(174/1204*100%); } #coco.contCharacter { background: url("../../character/_img/coco/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #coco .cCha__full { width: calc(415/1204*100%); right: calc(91/1204*100%); margin-top: calc(183/1204*100%); } #susukichi.contCharacter { background: url("../../character/_img/susukichi/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #susukichi .cCha__full { width: calc(538/1204*100%); right: calc(87/1204*100%); margin-top: calc(151/1204*100%); } #tsugumi.contCharacter { background: url("../../character/_img/tsugumi/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #tsugumi .cCha__full { width: calc(282/1204*100%); right: calc(183/1204*100%); margin-top: calc(167/1204*100%); } #fuya.contCharacter { background: url("../../character/_img/fuya/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #fuya .cCha__full { width: calc(288/1204*100%); right: calc(207/1204*100%); margin-top: calc(136/1204*100%); } #kanon.contCharacter { background: url("../../character/_img/kanon/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #kanon .cCha__full { width: calc(439/1204*100%); right: calc(73/1204*100%); margin-top: calc(147/1204*100%); } #motoi.contCharacter { background: url("../../character/_img/motoi/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #motoi .cCha__full { width: calc(511/1204*100%); right: calc(65/1204*100%); margin-top: calc(138/1204*100%); } #ayano.contCharacter { background: url("../../character/_img/ayano/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #ayano .cCha__full { width: calc(413/1204*100%); right: calc(114/1204*100%); margin-top: calc(118/1204*100%); } #kaie.contCharacter { background: url("../../character/_img/kaie/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #kaie .cCha__full { width: calc(359/1204*100%); right: calc(183/1204*100%); margin-top: calc(75/1204*100%); } #kubou.contCharacter { background: url("../../character/_img/kubou/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #kubou .cCha__full { width: calc(512/1204*100%); right: calc(93/1204*100%); margin-top: calc(168/1204*100%); } #hishima.contCharacter { background: url("../../character/_img/hishima/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #hishima .cCha__full { width: calc(292/1204*100%); right: calc(211/1204*100%); margin-top: calc(109/1204*100%); } #mikagi.contCharacter { background: url("../../character/_img/mikagi/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #mikagi .cCha__full { width: calc(302/1204*100%); right: calc(185/1204*100%); margin-top: calc(110/1204*100%); } #neku.contCharacter { background: url("../../character/_img/neku/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #neku .cCha__full { width: calc(378/1204*100%); right: calc(186/1204*100%); margin-top: calc(110/1204*100%); } #beat.contCharacter { background: url("../../character/_img/beat/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #beat .cCha__full { width: calc(640/1204*100%); right: calc(-8/1204*100%); margin-top: calc(125/1204*100%); } #shiki.contCharacter { background: url("../../character/_img/shiki/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #shiki .cCha__full { width: calc(222/1204*100%); right: calc(229/1204*100%); margin-top: calc(160/1204*100%); } #rhyme.contCharacter { background: url("../../character/_img/rhyme/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #rhyme .cCha__full { width: calc(223/1204*100%); right: calc(194/1204*100%); margin-top: calc(170/1204*100%); } #joshua.contCharacter { background: url("../../character/_img/joshua/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1324*100%); } #joshua .cCha__full { width: calc(297/1204*100%); right: calc(169/1204*100%); margin-top: calc(119/1204*100%); } } @media screen and (min-width: 1325px) { #character .contCharacter { background-size: 1920px!important; } #character .cA__subNav__area { margin-top: -74px; padding-bottom: 80px; background-size: 1920px; } #character .cA__subNav__wrap { width: 1204px; } #character .sFS__item { width: 1920px; padding-top: 940px; margin-left: -960px; margin-top: 146px; } } /* ---------------------------------------------------------------------------------------------------------------- #media ---------------------------------------------------------------------------------------------------------------- */ #media { } #media .hl { position: absolute; top: 0; width: calc(137/750*100%); } @media screen and (min-width: 641px) { #media { padding-bottom: 0; } #media .hl { width: calc(137/1204*100%); } } @media screen and (min-width: 1325px) { } /* .contVideo ---------------------------------------------------------------------------------------------------------------- */ #media .contVideo { width: 100%; background: url("../../media/_img/video/bg_sp.jpg") top center no-repeat; background-size: 100%; padding-top: calc(156/750*100%); padding-bottom: calc(150/750*100%); } #media .pageTitle { margin-top: calc(-25/750*100%); left: calc(-6/750*100%); z-index: 2; } #media .cVid__cateList { width: calc(544/750*100%); margin-left: calc(158/750*100%); margin-bottom: calc(32/750*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #media .cVid__caLi__item { width: calc(164/544*100%); } #media .cVid__caLi__item div { padding: calc(20/164*100%) 0 calc(28/164*100%); background-image: url("../../media/_img/video/btn_off_sp.png"), url("../../media/_img/video/btn_on_sp.png"); background-position: top center, top -200px center; background-repeat: no-repeat; background-size: 100%; } #media .cVid__caLi__item.active div { background-position: top -200px center, top center; } #media .cVid__list { width: calc(650/750*100%); position: relative; } #media .cVid__li__item { width: 100%; position: relative; margin-top: calc(60/650*100%); } #media .cVid__li__item.-large { margin-top: 0; margin-left: calc(100/650*100%); } #media .cVid__li__item.-even { margin-left: calc(100/650*100%); } #media .cVid__li__item .btn { display:block; position: relative; } #media .cVid__li__item .btn__pic { position: relative; } #media .cVid__li__item .btn__pic::after { content: ""; display: block; width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); } #media .cVid__li__item .btn__text { display:block; position: absolute; right: calc(60/650*100%); bottom: 0; width: calc(590/650*100%); } #media .cVid__li__item .btn__text::after { content: ""; display: block; width: calc(60/590*100%); height: 0; padding-top: calc(60/590*100%); position: absolute; right: calc(-60/590*100%); bottom: 0; background: #0096ff url("../../media/_img/video/btn_play.png") center center no-repeat; background-size: 100%; } @media screen and (min-width: 641px) { #media .contVideo { background: url("../../media/_img/video/bg_pc.jpg") top center no-repeat; background-size: calc(1920/1324*100%); padding-top: calc(116/1324*100%); padding-bottom: calc(80/1324*100%); } #media .pageTitle { margin-top: calc(21/1204*100%); left: calc(-6/1204*100%); } #media .cVid__cateList { width: calc(964/1204*100%); margin-left: calc(243/1204*100%); margin-bottom: calc(18/1204*100%); } #media .cVid__caLi__item { width: calc(304/964*100%); cursor: pointer; } #media .cVid__caLi__item div { padding: calc(11/304*100%) calc(70/304*100%) calc(20/304*100%); background-image: url("../../media/_img/video/btn_off_pc.png"), url("../../media/_img/video/btn_on_pc.png"); background-position: top center, top -200px center; background-repeat: no-repeat; background-size: 100%; } #media .cVid__caLi__item.active div { background-position: top -200px center, top center; } #media .cVid__caLi__item { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; } #media .cVid__caLi__item:not(.active):hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #media .cVid__list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: top; -ms-flex-align: top; align-items: top; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #media .cVid__li__item { width: calc(580/1204*100%); margin-top: calc(40/1204*100%); } #media .cVid__li__item.-large { width: calc(960/1204*100%); margin-left: auto; } #media .cVid__li__item.-even { margin-left: auto; } #media .cVid__li__item.-odd { margin-right: auto; } #media .cVid__li__item .btn { overflow: hidden; } #media .cVid__li__item .btn__pic { background: #000; } #media .cVid__li__item .btn__pic::after { height: 30%; } #media .cVid__li__item .btn__text { right: calc(60/580*100%); width: calc(590/580*100%); } #media .cVid__li__item .btn__text img { position: relative; } #media .cVid__li__item.-large .btn__text { right: calc(60/960*100%); width: calc(590/960*100%); } #media .cVid__li__item .btn__pic img { -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; } #media .cVid__li__item .btn:hover .btn__pic img { /*-webkit-transform: scale(1.05); transform: scale(1.05);*/ opacity: 0.7; } #media .cVid__li__item .btn__text::before { content: ""; display: block; width: 10%; height: 0; padding-top: calc(60/590*100%); position: absolute; right: -10%; bottom: 0; background: #0096ff; opacity: 0.3; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;} #media .cVid__li__item .btn:hover .btn__text::before { -webkit-transform: scaleX(50); transform: scaleX(50); } } @media screen and (min-width: 1325px) { #media .contVideo { background-size: 1920px; padding-top: 116px; padding-bottom: 80px; } } /* ---------------------------------------------------------------------------------------------------------------- #fankit ---------------------------------------------------------------------------------------------------------------- */ #fankit { padding-bottom: calc(150/750*100%); } #fankit .baseCopy { width: 100%; height: 0; position: relative; overflow: hidden; } #fankit .baseCopy__grunge { width: 100%; position: absolute; top: 0; left: 0; } #fankit .baseCopy__text { width: 100%; position: absolute; top: 0; left: 0; } @media screen and (min-width: 641px) { #fankit { padding-bottom: 0; } #fankit .hl { position: absolute; top: 0; width: calc(137/1204*100%); } } @media screen and (min-width: 1932px) { #fankit .secConts { overflow: visible; } } /* .contSnsIcon ---------------------------------------------------------------------------------------------------------------- */ #fankit .contSnsIcon { width: 100%; padding-top: calc(132/750*100%); padding-bottom: calc(0/750*100%); } #fankit .pageTitle { margin-top: calc(-4/750*100%); right: calc(-6/750*100%); z-index: 3; } #fankit .cSnsI__wrap { width: 100%; position: relative; padding-bottom: calc(80/750*100%); } #fankit .cSnsI__wrap::before { content: ""; display: block; background: rgba(3,67,78,0.5); width: 100%; height: calc(100% - 103/750*100vw); position: absolute; top: 0; left: 0; margin-top: calc(103/750*100%); transform: skew(0deg,-8deg); } #fankit .cSnsI__leadtext { width: calc(546/750*100%); margin-left: calc(50/750*100%); line-height: 1.61; font-size: calc(21/750*100vw); } #fankit .cSnsI__leadtext a { color: #01b4fe; } #fankit .cSnsI__blockCopy { width: calc(718/750*100%); padding-top: calc(242/750*100%); margin-top: calc(25/750*100%); } #fankit .cSnsI__bCo__grunge {} #fankit .cSnsI__bCo__text {} #fankit .cSnsI__itemlist { width: calc(546/750*100%); margin: calc(-2/750*100%) 0 0 calc(50/750*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #fankit .cSnsI__il__item { width: calc(160/546*100%); margin: calc(0/546*100%) calc(33/546*100%) 0 0; } @media screen and (max-width: 640px) { #fankit .cSnsI__il__item:nth-child(n+4) { margin-top: calc(33/546*100%); } #fankit .cSnsI__il__item:nth-child(3n) { margin-right: 0; } } @media screen and (min-width: 641px) { #fankit .contSnsIcon { padding-top: calc(130/1324*100%); padding-bottom: calc(0/1324*100%); } #fankit .pageTitle { margin-top: calc(4/1204*100%); right: calc(-6/1204*100%); } #fankit .cSnsI__wrap { padding-bottom: calc(25/1204*100%); } #fankit .cSnsI__wrap::before { width: calc(1920/1204*100%); height: calc(100% - 90/1324*100vw); margin-top: calc(90/1204*100%); margin-left: calc(-358/1204*100%); } #fankit .cSnsI__leadtext { width: calc(1020/1204*100%); margin-left: 0; line-height: 1.61; font-size: 1.132vw; } #fankit .cSnsI__blockCopy { width: calc(996/1204*100%); padding-top: calc(271/1204*100%); margin-left: calc(-234/1204*100%); } #fankit .cSnsI__bCo__grunge {} #fankit .cSnsI__bCo__text { width: calc(460/996*100%); left: calc(232/996*100%); margin-top: calc(55/996*100%); } #fankit .cSnsI__itemlist { width: calc(1020/1204*100%); margin: calc(-12/1204*100%) 0 0 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #fankit .cSnsI__il__item { width: calc(160/1020*100%); margin: 0; } #fankit .cSnsI__il__item:nth-child(n+7) { margin-top: calc(12/1020*100%); } #fankit .cSnsI__itemlist 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; } #fankit .cSnsI__itemlist a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 9; position: relative; } } @media screen and (min-width: 1325px) { #fankit .contSnsIcon { padding-top: 130px; padding-bottom: 0px; } #fankit .contSnsHeader::before { height: calc(100% - 90px); margin-top: 90px; } #fankit .cSnsI__wrap::before { height: calc(100% - 90px); } #fankit .cSnsI__leadtext { font-size: 1.6rem; } } /* .contSnsHeader ---------------------------------------------------------------------------------------------------------------- */ #fankit .contSnsHeader { width: 100%; margin-top: calc(-20/750*100%); padding-bottom: calc(80/750*100%); position: relative; } #fankit .contSnsHeader::before { content: ""; display: block; background: rgba(161,75,12,0.5); width: 100%; height: calc(100% - 103/750*100vw); position: absolute; top: 0; left: 0; margin-top: calc(103/750*100%); transform: skew(0deg,-8deg); } #fankit .cSnsH__blockCopy { width: calc(718/750*100%); padding-top: calc(242/750*100%); } #fankit .cSnsH__bCo__grunge {} #fankit .cSnsH__bCo__text {} #fankit .cSnsH__itemlist { width: calc(546/750*100%); margin: calc(-2/750*100%) 0 0 calc(50/750*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #fankit .cSnsH__il__item { width: calc(546/546*100%); margin: calc(30/546*100%) 0 0 0; } #fankit .cSnsH__il__item:first-child { margin-top: 0; } @media screen and (min-width: 641px) { #fankit .contSnsHeader { margin-top: calc(10/1324*100%); padding-bottom: calc(125/1324*100%); } #fankit .contSnsHeader::before { height: calc(100% - 90/1324*100vw); margin-top: calc(90/1324*100%); transform: skew(0deg,-8deg); } #fankit .cSnsH__blockCopy { width: calc(996/1204*100%); padding-top: calc(271/1204*100%); margin-left: calc(-234/1204*100%); } #fankit .cSnsH__bCo__grunge {} #fankit .cSnsH__bCo__text { width: calc(594/996*100%); left: calc(233/996*100%); margin-top: calc(38/996*100%); } #fankit .cSnsH__itemlist { width: calc(1020/1204*100%); margin: calc(-4/1204*100%) 0 0 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #fankit .cSnsH__il__item { width: calc(500/1020*100%); margin: calc(20/1204*100%) 0 0; } #fankit .cSnsH__il__item:first-child , #fankit .cSnsH__il__item:nth-child(2) { margin-top: 0; } #fankit .cSnsH__il__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; } #fankit .cSnsH__il__item a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 9; position: relative; } } @media screen and (min-width: 1325px) { #fankit .contSnsHeader { margin-top: 10px; padding-bottom: 125px; } #fankit .contSnsHeader::before { height: calc(100% - 90px); margin-top: 90px; } } /* .contWallPaper ---------------------------------------------------------------------------------------------------------------- */ #fankit .contWallPaper { width: 100%; margin-top: calc(-20/750*100%); padding-bottom: calc(80/750*100%); position: relative; } #fankit .contWallPaper::before { content: ""; display: block; background: rgba(101,0,33,0.5); width: 100%; height: calc(100% - 103/750*100vw); position: absolute; top: 0; left: 0; margin-top: calc(103/750*100%); transform: skew(0deg,-8deg); } #fankit .cWallPa__blockCopy { width: calc(718/750*100%); padding-top: calc(242/750*100%); } #fankit .cWallPa__bCo__grunge {} #fankit .cWallPa__bCo__text {} #fankit .cWallPa__itemlist { width: calc(546/750*100%); margin: calc(-2/750*100%) 0 0 calc(50/750*100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } #fankit .cWallPa__il__item { width: calc(546/546*100%); margin: calc(40/546*100%) 0 0 0; } #fankit .cWallPa__il__item:first-child { margin-top: 0; } #fankit .cWallPa__il__item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #fankit .cWallPa__il__item a:first-child { display: block; margin-bottom: calc(10/546*100%); } #fankit .cWallPa__il__item a:nth-child(n+2) { display: inline-block; background: #80003f; color: #fff; text-decoration: none; border-radius: 100px; padding: 0.4em 0.5em 0.3em; margin: 0 calc(10/546*100%); } #fankit .cWallPa__il__item a { font-size: calc(20/750*100vw); } @media screen and (min-width: 641px) { #fankit .contWallPaper { margin-top: calc(10/1324*100%); padding-bottom: calc(125/1324*100%); } #fankit .contWallPaper::before { height: calc(100% - 90/1324*100vw); margin-top: calc(90/1324*100%); transform: skew(0deg,-8deg); } #fankit .cWallPa__blockCopy { width: calc(996/1204*100%); padding-top: calc(271/1204*100%); margin-left: calc(-234/1204*100%); } #fankit .cWallPa__bCo__grunge {} #fankit .cWallPa__bCo__text { width: calc(574/996*100%); left: calc(231/996*100%); margin-top: calc(42/996*100%); } #fankit .cWallPa__itemlist { width: calc(1020/1204*100%); margin: calc(-4/1204*100%) 0 0 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #fankit .cWallPa__il__item { width: calc(500/1020*100%); margin: calc(30/1204*100%) 0 0; } #fankit .cWallPa__il__item:first-child , #fankit .cWallPa__il__item:nth-child(2) { margin-top: 0; } #fankit .cWallPa__il__item { } #fankit .cWallPa__il__item a:first-child { margin-bottom: calc(10/500*100%); } #fankit .cWallPa__il__item a:nth-child(n+2) { padding: 0.4em 0.5em 0.3em; margin: 0 calc(7/500*100%); } #fankit .cWallPa__il__item a { font-size: calc(18/1324*100vw); } #fankit .cWallPa__il__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; } #fankit .cWallPa__il__item a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 9; position: relative; } } @media screen and (min-width: 1325px) { #fankit .contWallPaper { margin-top: 10px; padding-bottom: 125px; } #fankit .contWallPaper::before { height: calc(100% - 90px); margin-top: 90px; } #fankit .cWallPa__il__item a { font-size: 1.8rem; } }