@charset "utf-8"; /* ================================================================== CSS information style info : PAGE ================================================================== */ /* -------------------------------------------------------- .main -------------------------------------------------------- */ .main:not(#toppage) { padding-bottom: calc(50/750*100%);} .main_inner { position: relative;} .section_inner { width: 100%; margin: 0 auto; position: relative;} .headline { margin: 0 auto;} #areaCharacter .section_inner .bx-wrapper , #areaSS .section_inner .bx-wrapper , #products .section_inner .bx-wrapper { position: relative; margin-bottom: 0; -moz-box-shadow: 0 0 0 #ccc; -webkit-box-shadow: 0 0 0 #ccc; box-shadow: 0 0 0 #ccc; border: none; background-color: transparent; } @media screen and (min-width: 641px) { .main:not(#toppage) { padding-bottom: 0;} .main_inner { } .section_inner { width: calc(1280/1366*100%); } .btn_ov 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;} .btn_ov a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} } @media screen and (min-width: 1367px) { .main_inner { } .section_inner { width: 1280px; } } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage { background: #fff;} #toppage .visualimage { position: absolute; top: 0; left: 0; width: 100%; background: #000; } #toppage .visualimage .vis_img {} #loopMovie { width: 100%; padding-top: calc(490/750*100%); opacity: 0; overflow: hidden;} #loopMovie #ytBox { position: absolute; top: 0; left: -20%; width: 140%; } #loopMovie #ytBox:after { padding-top: 56.25%; display: block; content: ""; } #loopMovie #ytBox #player { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: block; } #toppage .main_inner { position: relative; } #toppage .visual { position: relative; top: 0; left: 0; width: 100%; } #toppage .logo { display: none; } #toppage .copytext_set { position: absolute; top: 0; left: calc(44/750*100%); margin-top: calc(197/750*100%); width: calc(106/750*100%);} #toppage .copytext_set .copytext { position: absolute; top: 0; left: 0; width: 50%;} #toppage .copytext_set .ct1 { left: 50%;} #toppage .block { background: #f5f5f5; padding: calc(50/750*100%) calc(50/750*100%) 0; margin-top: calc(37/750*100%); padding-bottom: calc(60/750*100%);} #toppage .release_set { width: 100%; margin-top: calc(-99/650*100%); margin-bottom: calc(27/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .releasedate { width: calc(460/650*100%); margin-top: calc(6/650*100%); } #toppage .btn_reserv { width: calc(170/650*100%); } #toppage .bnr_estore-ue { margin-bottom: calc(30/650*100%); position: relative; background: #000;} #toppage .bnr_estore-ue .so { margin-bottom: calc(30/650*100%); } #toppage .bnr_estore-ue .so img { opacity: 0.5;} #toppage .bnr_estore-ue .so::after { content: ''; text-align: center; display: block; width: 100%; height: auto; position: absolute; top: 50%; margin-top: calc(-30/650*100%); left: 0; padding-top: calc(60/650*100%); background: rgba(0,0,0,0.7) url(../../products/_img/detail/btn_soldout.png) center center no-repeat; background-size: contain; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #toppage .bnr_bssptv { margin-bottom: calc(30/650*100%); } #toppage .bnr_mwam { margin-bottom: calc(30/650*100%); } #toppage .btn_mv { margin-bottom: calc(30/650*100%); } #toppage .twitterarea { position: relative; margin-bottom: calc(20/650*100%);} #toppage .news { border-top: 2px solid #e4e4e4; border-bottom: 2px solid #e4e4e4; background: #b4b4b4; width: calc(750/650*100%); position: relative; left: calc(-50/650*100%);} #toppage .news::before, #toppage .news::after { content: ""; display: block; width: 100%; height: 1px; background: #000; border-right: 10px solid #e6e6e6; border-left: 10px solid #e6e6e6; margin: 1px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #toppage .news::before { margin-bottom: 2px; } #toppage .news::after { margin-bottom: 1px; } #toppage .news .news_inner { background: #000; padding: calc(20/750*100%) calc(50/750*100%); position: relative; overflow: hidden;} #toppage .news .hl { width: calc(176/650*100%); margin-bottom: calc(15/650*100%); } #toppage .news .btn_more { width: calc(118/650*100%); position: absolute; top: 0; right: calc(50/750*100%); margin-top: calc(15/750*100%); } #toppage .news .news_list { width: 100%; height: 100%; overflow: hidden; } #toppage .news .news_list .news_list_item { padding-bottom: calc(20/650*100%); transition: transform .3s ease; width: 100%; font-size: 1.3rem; } #toppage .news .news_list .news_list_item dt { color: #f43739; margin-bottom: calc(10/650*100%); line-height: 1.41;} #toppage .news .news_list .news_list_item dd { color: #e5e5e5; width: 100%; line-height: 1.41;} /*#toppage .news .news_list .news_list_item dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }*/ #toppage .news .news_list .news_list_item dd a { color: #e5e5e5; } #toppage .news .news_list .news_list_item dd a:hover { color: #fff; } @media screen and (max-width: 640px) { #toppage .twitterarea iframe { min-height: 300px!important; height: 300px!important; min-width: 100%!important; width: 640px!important; max-width: 100%!important;} #toppage .news .news_list { height: 5em; } #toppage .news .news_list .news_list_item dt { height: 1em; margin-bottom: calc(10/650*100%); } #toppage .news .news_list .news_list_item dd { height: 3.9em; overflow: hidden; text-overflow: ellipsis; } } @media screen and (min-width: 641px) { #toppage { } #toppage .visualimage { } #toppage .visualimage .vis_img { position: relative; left: 50%; margin-left: calc(-960/1366*100%); width: calc(1920/1366*100%);} #toppage .visualimage .vis_img img { } #loopMovie { padding-top: calc(490/750*100%); } #loopMovie #ytBox { left: -20%; width: 140%; } #toppage .main_inner { max-width: 1366px; width: 100%; margin: 0 auto; padding-bottom: 10px;} #toppage .visual { max-width: 966px; width: calc(966/1366*100%); margin: 0 auto;} #toppage .logo { display: block; position: absolute; top: 0; left: calc(309/1366*100%); margin-top: calc(138/1366*100%); width: calc(748/1366*100%); } #toppage .copytext_set { left: calc(40/1366*100%); margin-top: calc(405/1366*100%); max-width: 508px; width: calc(508/1366*100%);} #toppage .copytext_set .copytext { position: relative; top: 0; left: 0; width: 100%;} #toppage .copytext_set .ct1 { left: 0;} #toppage .block { background-color: transparent; width: 100%; padding: 0; margin-top: calc(-500/1366*100%); padding-top: calc(1/1366*100%); position: relative; } #toppage .release_set { width: calc(340/1366*100%); display: block; margin-top: calc(0/1366*100%); margin-bottom: calc(36/1366*100%); margin-left: calc(40/1366*100%); } #toppage .releasedate { width: 100%; margin-top: 0; margin-bottom: calc(10/340*100%); } #toppage .btn_reserv { width: 100%; } #toppage .bnr_estore-ue { width: calc(340/1366*100%); margin-left: calc(40/1366*100%); margin-bottom: calc(10/1366*100%); } #toppage .bnr_bssptv { width: calc(340/1366*100%); margin-left: calc(40/1366*100%); margin-bottom: calc(0/1366*100%); } #toppage .bnr_mwam { position: absolute; top: 0; right: 0; width: calc(320/1366*100%); margin-top: calc(0/1366*100%); margin-right: calc(40/1366*100%); margin-bottom: 0; } #toppage .btn_mv { position: absolute; top: 0; right: 0; width: calc(320/1366*100%); margin-top: calc(0/1366*100%); margin-right: calc(40/1366*100%); margin-bottom: 0; } #toppage .twitterarea { position: absolute; top: 0; right: 0; width: calc(320/1366*100%); margin-top: calc(248/1366*100%); margin-right: calc(40/1366*100%); margin-bottom: 0; } #toppage .twitterarea { overflow: hidden; content: ""; display: block; height: 0; padding-top: calc(200/1366*100%); } #toppage .twitterarea .twitterarea-block { position: absolute!important; top: 0; left: 0; width: 100%; height: 100%; } #toppage .twitterarea iframe { height: 100%!important; min-height: 100%!important;} #toppage .news { width: calc(1286/1366*100%); left: 0; margin: calc(20/1366*100%) auto 0;} #toppage .news .news_inner { padding: calc(10/1286*100%) calc(20/1286*100%); overflow: hidden;} #toppage .news .hl { width: calc(106/1246*100%); margin-bottom: 0; } #toppage .news .btn_more { width: calc(98/1286*100%); right: calc(10/1286*100%); margin-top: calc(6/1286*100%); } #toppage .news .news_list { width: calc(990/1286*100%); height: 1.4em; overflow: hidden; position: absolute; top: 0; left: calc(160/1286*100%); margin-top: calc(11/1286*100%);} #toppage .news .news_list .news_list_item { padding-bottom: 0; transition: transform .3s ease; width: 100%; ; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #toppage .news .news_list .news_list_item { font-size: calc(13/1366*100vw); padding-bottom: 10px;} #toppage .news .news_list .news_list_item dt { margin-bottom: 0; margin-right: calc(20/990*100%);} #toppage .news .news_list .news_list_item dd { width: calc(100% - 6em); } #toppage .news .news_list .news_list_item dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } @media screen and (min-width: 1367px) { #toppage .visualimage { } #toppage .visualimage .vis_img { left: 50%; margin-left: -960px; width: 1920px;} #toppage .news .news_list .news_list_item { font-size: 1.3rem;} } /* ---------------------------------------------------------------------------------------------------------------- #news ---------------------------------------------------------------------------------------------------------------- */ #news { background: #0f141b url(../../news/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; padding-top: calc(216/750*100%); } #news .section_inner { } #news .headline { width: calc(116/750*100%); margin-bottom: calc(56/750*100%);} #news .newslist { width: calc(650/750*100%); margin: 0 auto; padding-bottom: calc(50/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #news .newslist .newsitem { display: -webkit-flex; display: flex; position: relative; background: #181818; overflow: hidden;} #news .newslist .newsitem { width: calc(310/650*100%); margin-bottom: calc(30/650*100%); } #news .newslist .newsitem .articleInner { display: block; position: relative; width: 100%; text-decoration: none; border-top: 4px solid #3c3c3c; border-bottom: 4px solid #3c3c3c; } #news .newslist .newsitem .articleInner::before, #news .newslist .newsitem .articleInner::after { content: ''; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #news .newslist .newsitem .articleInner::before { top: -3px;} #news .newslist .newsitem .articleInner::after { bottom: -3px;} #news .newslist .newsitem .articleInner .ni_pic { display: block; position: relative; } #news .newslist .newsitem a.articleInner.cboxMV .ni_pic::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../news/_img/icon_play.png) center center no-repeat; background-size: calc(168/310*100%);} #news .newslist .newsitem .articleInner .ni_text { display: block; position: relative; border-top: 5px solid #3c3c3c; } #news .newslist .newsitem .articleInner .ni_text::before { content: ''; display: block; position: absolute; top: -3px; left: 0; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #news .newslist .newsitem .articleInner .ni_text .ni_text_inr { display: block; padding: calc(15/310*100%);} #news .newslist .newsitem .articleInner .ni_text .ni_text_inr .text { line-height: 1.41; font-size: 1.3rem; color: #fff;} #news .newslist .newsitem .articleInner .ni_text .ni_text_inr .date { font-size: 1.1rem; color: #b5b5b5; padding-top: 0.4em; } @media screen and (min-width: 641px) { #news { background: #0f141b url(../../news/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-top: calc(165/1366*100%);} #news .section_inner { } #news .headline { width: calc(116/1280*100%); margin-bottom: calc(25/1280*100%);} #news .newslist { width: calc(1260/1280*100%); margin: 0 auto; padding-bottom: calc(50/1280*100%); -webkit-justify-content: flex-start; justify-content: flex-start; } #news .newslist .newsitem { width: calc(380/1260*100%); margin: 0 calc(19/1260*100%) calc(40/1260*100%);} #news .newslist .newsitem .articleInner .ni_pic { background: #181818; overflow: hidden; } #news .newslist .newsitem a.articleInner.cboxMV .ni_pic::after { background-size: calc(172/380*100%);} #news .newslist .newsitem .articleInner .ni_text .ni_text_inr { padding: calc(20/380*100%);} #news .newslist .newsitem .articleInner .ni_text .ni_text_inr .text { font-size: 1.8rem; } #news .newslist .newsitem .articleInner .ni_text .ni_text_inr .date { font-size: 1.3rem; padding-top: 0.4em; } #news .newslist .newsitem a.articleInner::before , #news .newslist .newsitem a.articleInner::after , #news .newslist .newsitem a.articleInner.cboxMV .ni_pic::after , #news .newslist .newsitem .articleInner .ni_text::before { transition: all 300ms ease;} #news .newslist .newsitem .articleInner .ni_pic img { transition: all 100ms ease;} #news .newslist .newsitem a.articleInner:hover::before , #news .newslist .newsitem a.articleInner:hover::after , #news .newslist .newsitem a.articleInner:hover .ni_text::before { border-right: 380px solid #c41214; border-left: 380px solid #c41214; } #news .newslist .newsitem a.articleInner:hover .ni_pic img { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.4;} #news .newslist .newsitem a.articleInner.cboxMV:hover .ni_pic::after { transform-origin: center; -webkit-transform: scale(1.5); transform: scale(1.5); } #news .newslist .newsitem a.articleInner:hover { background: #510607;} } @media screen and (min-width: 1367px) { #news { background-size: 1920px; padding-top: 165px;} } /* ---------------------------------------------------------------------------------------------------------------- #about ---------------------------------------------------------------------------------------------------------------- */ #about {} #areaStory { background: url(../../about/_img/story/story_bg_sp.jpg) top center no-repeat; background-size: 100%; padding-top: calc(216/750*100%); padding-bottom: calc(158/750*100%);} #areaStory .headline { width: calc(130/750*100%); margin-bottom: calc(40/750*100%);} #areaStory .storytext { width: calc(542/750*100%); margin: 0 auto; } #areaGame { background: url(../../about/_img/game/game_bg_sp.jpg?190115) top center no-repeat; background-size: 100%; padding-top: calc(35/750*100%); position: relative; } #areaGame .areaFooter { border-top: 2px solid rgba(0,0,0,0.3); padding-top: 1px; width: 100%; position: relative; margin-top: calc(20/750*100%);} #areaGame .areaFooter::after { content: ""; display: block; width: 100%; height: auto; padding-top: calc(60/750*100%); border-top: 1px solid rgba(255,255,255,0.1); background: url(../../about/_img/game/areafooter_sp.jpg?190115) top center no-repeat; background-size: 100%; } #areaGame .headline { width: calc(113/750*100%); margin-bottom: calc(18/750*100%);} #areaGame .catchcopy { width: calc(658/750*100%); margin: 0 auto calc(22/750*100%);} #areaGame .gametext { width: calc(666/750*100%); margin: 0 auto calc(50/750*100%);} #areaGame .gamebasiclist { position: relative; width: calc(650/750*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start;} #areaGame .gamebasiclist .item { width: calc(310/650*100%); margin-bottom: calc(26/650*100%); position: relative;} #areaGame .gamebasiclist .item:last-child { margin-bottom: 0;} #areaGame .gamebasiclist .item:nth-last-child(2) {margin-bottom: 0;} #areaGame .gamebasiclist .item a { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaGame .gamebasiclist .item a::before, #areaGame .gamebasiclist .item a::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaGame .gamebasiclist .item a::before { margin-bottom: 1px;} #areaGame .gamebasiclist .item a::after { margin-top: 1px;} #areaGame .gamebasiclist .item .ba_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #areaGame .gamebasiclist .item .ba_ti img { margin-top: 2px;} #areaGame .gamebasiclist .item .ba_ti::before { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaGame .gamebasiclist .item .ba_ti::after { content: ''; display: block; position: absolute; top: 1px; width: 100%; height: 1px; background: #3c3c3c; } #areaGame .gamebasiclist .item .ba_pic { display: block; position: relative;} #areaGame .gamebasiclist .item.upd::after { content: ''; display: block; width: calc(63/310*100%); height: auto; padding-top: calc(13/310*100%); background: url(../img/icon_upd.png) center center no-repeat; background-size: contain; position: absolute; top: 0; margin-top: calc(-5/310*100%); left: calc(20/310*100%); } #areaGame .areaGame_System { background: url(../../about/_img/game/system/gamesystem_bg_sp.jpg?190115) top center no-repeat; background-size: 100%; border-top: 1px solid #343439; border-bottom: 1px solid #343439; padding: calc(30/750*100%) 0 calc(40/750*100%); margin-top: calc(40/750*100%); position: relative; } #areaGame .areaGame_System::before, #areaGame .areaGame_System::after { content: ''; display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #111119; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaGame .areaGame_System::before { top: 1px;} #areaGame .areaGame_System::after { bottom: 1px;} #areaGame .areaGame_System .headline2 { width: calc(129/750*100%); margin: 0 auto calc(25/750*100%);} #areaGame .areaGame_System .gamesystemlist { position: relative; width: calc(650/750*100%); margin: 0 auto; } #areaGame .areaGame_System .gamesystemlist { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start;} #areaGame .areaGame_System .gamesystemlist .item { width: calc(310/650*100%); margin-bottom: calc(25/650*100%);} #areaGame .areaGame_System .gamesystemlist .item:last-child { margin-bottom: 0;} #areaGame .areaGame_System .gamesystemlist .item:nth-last-child(2) {margin-bottom: 0;} #areaGame .areaGame_System .gamesystemlist .item a { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaGame .areaGame_System .gamesystemlist .item a::before, #areaGame .areaGame_System .gamesystemlist .item a::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaGame .areaGame_System .gamesystemlist .item a::before { margin-bottom: 1px;} #areaGame .areaGame_System .gamesystemlist .item a::after { margin-top: 1px;} #areaGame .areaGame_System .gamesystemlist .item .sys_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #areaGame .areaGame_System .gamesystemlist .item .sys_ti::before { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaGame .areaGame_System .gamesystemlist .item .sys_ti::after { content: ''; display: block; position: absolute; top: 1px; width: 100%; height: 1px; background: #3c3c3c; } #areaGame .areaGame_System .gamesystemlist .item .sys_pic { display: block; position: relative;} #areaCharacter { background: url(../../about/_img/character/character_bg_r_sp.jpg) top center repeat-y; background-size: 100%; padding-top: calc(35/750*100%); position: relative;} #areaCharacter::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #areaCharacter::before { background: url(../../about/_img/character/character_bg_sp.jpg?181115) top center no-repeat; background-size: 100%; } #areaCharacter .areaFooter { border-top: 2px solid rgba(0,0,0,0.3); padding-top: 1px; width: 100%; position: relative; margin-top: calc(40/750*100%);} #areaCharacter .areaFooter::after { content: ""; display: block; width: 100%; height: auto; padding-top: calc(60/750*100%); background: rgba(29,29,29,0.4); border-top: 1px solid rgba(255,255,255,0.1);} #areaCharacter .headline { width: calc(232/750*100%); margin-bottom: calc(46/750*100%);} #areaCharacter .btnlist { width: calc(650/750*100%); margin: 0 auto calc(10/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #areaCharacter .btnlist li { width: calc(90/650*100%); margin: 0 calc(15/650*100%) calc(30/650*100%); overflow: hidden;} #areaCharacter .btnlist li a { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaCharacter .btnlist li a::before, #areaCharacter .btnlist li a::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaCharacter .btnlist li a::before { margin-bottom: 2px;} #areaCharacter .btnlist li a::after { margin-top: 2px;} #areaCharacter .btnlist li a.active::before , #areaCharacter .btnlist li a.active::after { border-right: 45px solid #c41214; border-left: 45px solid #c41214; } #areaCharacter .detaillist_wrap { width: calc(650/750*100%); margin: 0 auto;} #areaCharacter .detaillist_wrap.swiper-container { overflow: visible; } #areaCharacter .detaillist { width: 100%; } #areaCharacter .detaillist li { width: 100%; margin: 0; position: relative;} #areaCharacter .detaillist .frameWrap { background: rgba(34,34,34,0.2); } #areaCharacter .detaillist .frameWrap::before , #areaCharacter .detaillist .frameWrap::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; width: 100%; height: 1px; background: #313131; border-right: 10px solid #585858; border-left: 10px solid #585858; } #areaCharacter .detaillist .frameWrap .frameInr { border-top: 1px solid #000; border-bottom: 1px solid #000; position: relative; } #areaCharacter .detaillist .pic_box { width: calc(570/650*100%); margin: 0 auto calc(-170/650*100%); position: relative; z-index: 2; } #areaCharacter .detaillist .charaFlexbox { 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;} #areaCharacter .detaillist .charaFlexbox .detail_block { width: 100%; min-width: 100%;} #areaCharacter .detaillist .charaFlexbox .detail_block { position: relative; width: 100%; padding: 1px 0;} #areaCharacter .detaillist .detail_block .detail_block_inner { margin-top: calc(190/650*100%); margin-bottom: calc(40/650*100%); } #areaCharacter .detaillist .detail_block .name_box { position: relative; margin-bottom: calc(15/650*100%); } #areaCharacter .detaillist .detail_block .text_box { position: relative; padding-left: calc(40/650*100%); padding-right: calc(260/650*100%); line-height: 1.61; font-size: calc(20/750*100vw); color: #d0d0d0; } #areaCharacter .detaillist .chara_box { position: relative; } #areaCharacter .detaillist #charaMas .chara_box { width: calc(355/650*100%); margin-top: calc(190/650*100%); margin-left: calc(-355/650*100%); right: calc(-57/650*100%);} #areaCharacter .detaillist #charaMas .detail_block .text_box { z-index: 2;} #areaCharacter .detaillist #charaOsk .chara_box { width: calc(324/650*100%); margin-top: calc(210/650*100%); margin-left: calc(-324/650*100%); right: calc(-20/650*100%);} #areaCharacter .detaillist #charaLfo .chara_box { width: calc(372/650*100%); margin-top: calc(210/650*100%); margin-left: calc(-372/650*100%); right: calc(-125/650*100%);} #areaCharacter .detaillist #charaRai .chara_box { width: calc(308/650*100%); margin-top: calc(182/650*100%); margin-left: calc(-308/650*100%); right: calc(-65/650*100%);} #areaCharacter .detaillist #charaSga .chara_box { width: calc(256/650*100%); margin-top: calc(229/650*100%); margin-left: calc(-256/650*100%); right: calc(-27/650*100%);} #areaCharacter .detaillist #charaInz .chara_box { width: calc(285/650*100%); margin-top: calc(188/650*100%); margin-left: calc(-285/650*100%); right: calc(-30/650*100%);} #areaCharacter .detaillist #charaPl .chara_box { width: calc(326/650*100%); margin-top: calc(182/650*100%); margin-left: calc(-326/650*100%); right: calc(-62/650*100%);} #areaCharacter .detaillist #charaAlb .chara_box { width: calc(283/650*100%); margin-top: calc(182/650*100%); margin-left: calc(-283/650*100%); right: calc(-36/650*100%);} #areaCharacter .detaillist #charaJps .chara_box { width: calc(223/650*100%); margin-top: calc(205/650*100%); margin-left: calc(-223/650*100%); right: calc(-13/650*100%);} #areaWanzer { background: url(../../about/_img/wanzer/wanzer_bg_r_sp.jpg) top center repeat-y; background-size: 100%; padding-top: calc(35/750*100%); position: relative; margin-bottom: calc(40/750*100%);} #areaWanzer::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #areaWanzer::before { background: url(../../about/_img/wanzer/wanzer_bg_sp.jpg) top center no-repeat; background-size: 100%; } #areaWanzer .areaFooter { border-top: 2px solid rgba(0,0,0,0.3); padding-top: 1px; width: 100%; position: relative; margin-top: calc(40/750*100%);} #areaWanzer .areaFooter::after { content: ""; display: block; width: 100%; height: auto; padding-top: calc(60/750*100%); background: rgba(29,29,29,0.4); border-top: 1px solid rgba(255,255,255,0.1);} #areaWanzer .headline { width: calc(232/750*100%); margin-bottom: calc(39/750*100%);} #areaWanzer .readtext { width: calc(656/750*100%); margin: 0 auto calc(50/750*100%);} #areaWanzer .btnlist { width: calc(650/750*100%); margin: 0 auto calc(30/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #areaWanzer .btnlist li { width: calc(140/650*100%); margin: 0 calc(15/650*100%); overflow: hidden;} #areaWanzer .btnlist li a { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaWanzer .btnlist li a::before, #areaWanzer .btnlist li a::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaWanzer .btnlist li a::before { margin-bottom: 2px;} #areaWanzer .btnlist li a::after { margin-top: 2px;} #areaWanzer .btnlist li a.active::before , #areaWanzer .btnlist li a.active::after { border-right: 70px solid #c41214; border-left: 70px solid #c41214; } #areaWanzer .detaillist_wrap { width: calc(650/750*100%); margin: 0 auto;} #areaWanzer .detaillist_wrap.swiper-container { overflow: visible; } #areaWanzer .detaillist { width: 100%; margin-bottom: calc(60/650*100%); } #areaWanzer .detaillist li { width: 100%; margin: 0; position: relative;} #areaWanzer .detaillist .frameWrap { background: rgba(34,34,34,0.2); } #areaWanzer .detaillist .frameWrap::before , #areaWanzer .detaillist .frameWrap::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; width: 100%; height: 1px; background: #313131; border-right: 10px solid #585858; border-left: 10px solid #585858; } #areaWanzer .detaillist .frameWrap .frameInr { border-top: 1px solid #000; border-bottom: 1px solid #000; position: relative; } #areaWanzer .detaillist .pic_box { width: calc(570/650*100%); margin: 0 auto calc(-170/650*100%); position: relative; z-index: 2; } #areaWanzer .detaillist .detail_block { position: relative; width: 100%; padding: 1px 0;} #areaWanzer .detaillist .detail_block .detail_block_inner { margin-top: calc(190/650*100%); margin-bottom: calc(20/650*100%); } #areaWanzer .detaillist .detail_block .detail_block_inner::after { content: ""; display: block; width: 100%; height: auto; } #areaWanzer .detaillist .detail_block .name_box { position: relative; margin-bottom: calc(15/650*100%); } #areaWanzer .detaillist .detail_block .text_box { position: relative; padding: 0 calc(40/650*100%); line-height: 1.61; font-size: calc(20/750*100vw); color: #d0d0d0; } #areaWanzer .detaillist .chara_box { position: absolute; bottom: 0; margin-bottom: calc(20/650*100%); left: 0;} #areaWanzer .detaillist #wanzerVolk .detail_block .detail_block_inner::after { padding-top: calc(634/650*100%); }/* 機体画像の高さ */ #areaWanzer .detaillist #wanzerVolk .chara_box { width: calc(614/650*100%); left: calc(14/650*100%); } #areaWanzer .detaillist #wanzerZenith .detail_block .detail_block_inner::after { padding-top: calc(598/650*100%); } #areaWanzer .detaillist #wanzerZenith .chara_box { width: calc(609/650*100%); left: calc(20/650*100%); } #areaWanzer .detaillist #wanzerZhelaniye .detail_block .detail_block_inner::after { padding-top: calc(576/650*100%); } #areaWanzer .detaillist #wanzerZhelaniye .chara_box { width: calc(544/650*100%); left: calc(52/650*100%); } #areaWanzer .wanzerFeature { background: rgba(25,26,58,0.3); padding: calc(40/650*100%) calc(50/650*100%); position: relative;} #areaWanzer .featurelist { width: 100%; } #areaWanzer .featurelist li { width: 100%; margin: 0 0 calc(40/650*100%); position: relative;} #areaWanzer .featurelist li:last-child { margin-bottom: 0; } #areaWanzer .featurelist .frameWrap { background: rgba(34,34,34,0.2); } #areaWanzer .featurelist .frameWrap::before , #areaWanzer .featurelist .frameWrap::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; width: 100%; height: 1px; background: #313131; border-right: 10px solid #585858; border-left: 10px solid #585858; } #areaWanzer .featurelist .frameWrap .frameInr { border-top: 1px solid #000; border-bottom: 1px solid #000; position: relative; } #areaWanzer .featurelist .pic_box { width: calc(570/650*100%); margin: 0 auto calc(-170/650*100%); position: relative; z-index: 2; } #areaWanzer .featurelist .feature_block { position: relative; width: 100%; padding: 1px 0;} #areaWanzer .featurelist .feature_block .feature_block_inner { margin-top: calc(190/650*100%); margin-bottom: calc(20/650*100%); } #areaWanzer .featurelist .feature_block .feature_block_inner::after { content: ""; display: block; width: 100%; height: auto; } #areaWanzer .featurelist .feature_block .name_box { position: relative; margin-bottom: calc(15/650*100%); } #areaWanzer .featurelist .feature_block .text_box { position: relative; padding: 0 calc(40/650*100%); line-height: 1.61; font-size: calc(20/750*100vw); color: #d0d0d0; } @media screen and (min-width: 641px) { #about {} #areaStory { background: url(../../about/_img/story/story_bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding-top: calc(165/1366*100%); padding-bottom: calc(198/1366*100%);} #areaStory .section_inner {} #areaStory .headline { width: calc(130/1280*100%); margin-bottom: calc(43/1280*100%);} #areaStory .storytext { width: calc(437/1280*100%); } #areaGame { background: url(../../about/_img/game/game_bg_pc.jpg?190115) top center no-repeat; background-size: calc(1920/1366*100%); padding-top: calc(55/1366*100%); } #areaGame .areaFooter { margin-top: calc(50/1366*100%);} #areaGame .areaFooter::after { padding-top: calc(60/1366*100%); background: url(../../about/_img/game/areafooter_pc.jpg?190115) top center no-repeat; background-size: calc(1920/1366*100%); } #areaGame .section_inner {} #areaGame .headline { width: calc(113/1280*100%); margin-bottom: calc(16/1280*100%);} #areaGame .catchcopy { width: calc(686/1280*100%); margin: 0 auto calc(26/1280*100%);} #areaGame .gametext { width: calc(1090/1280*100%); margin: 0 auto calc(38/1280*100%);} #areaGame .gamebasiclist { width: calc(1240/1280*100%); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #areaGame .gamebasiclist .item { width: calc(300/1240*100%); margin-bottom: 0;} #areaGame .gamebasiclist .item a { overflow: hidden; } #areaGame .gamebasiclist .item .ba_pic { overflow: hidden;} #areaGame .gamebasiclist .item .ba_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #areaGame .gamebasiclist .item .ba_ti img { width: calc(290/300*100%); max-width: 280px; margin: 2px auto 0; } #areaGame .gamebasiclist .item a::before , #areaGame .gamebasiclist .item a::after { transition: all 150ms ease;} #areaGame .gamebasiclist .item a .ba_pic::after , #areaGame .gamebasiclist .item a .ba_pic img , #areaGame .gamebasiclist .item a .ba_ti , #areaGame .gamebasiclist .item a .ba_ti::before { transition: all 150ms ease; } #areaGame .gamebasiclist .item a:hover::before , #areaGame .gamebasiclist .item a:hover::after { border-right: 620px solid #c41214; border-left: 620px solid #c41214; } #areaGame .gamebasiclist .item a:hover .ba_ti { background: #510607;} #areaGame .gamebasiclist .item a:hover .ba_ti::before { border-right: 650px solid #c41214; border-left: 650px solid #c41214; } #areaGame .gamebasiclist .item a:hover .ba_pic::after { transform-origin: center; -webkit-transform: scale(1.3); transform: scale(1.3);} #areaGame .gamebasiclist .item a:hover .ba_pic img { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1.0;} #areaGame .gamebasiclist .item.upd::after { width: calc(63/300*100%); padding-top: calc(13/300*100%); margin-top: calc(-5/300*100%); left: calc(20/300*100%); } #areaGame .areaGame_System { background: url(../../about/_img/game/system/gamesystem_bg_pc.jpg?190115) top center no-repeat; background-size: calc(1920/1366*100%); padding: calc(30/1366*100%) 0; margin-top: calc(52/1366*100%); } #areaGame .areaGame_System .headline2 { width: calc(129/1280*100%); margin: 0 auto calc(25/1280*100%);} #areaGame .areaGame_System .gamesystemlist { width: calc(1240/1280*100%); } #areaGame .areaGame_System .gamesystemlist { -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start;} #areaGame .areaGame_System .gamesystemlist .item { width: calc(610/1240*100%); margin-bottom: calc(20/1240*100%);} #areaGame .areaGame_System .gamesystemlist .item a { overflow: hidden; } #areaGame .areaGame_System .gamesystemlist .item .sys_pic { overflow: hidden;} #areaGame .areaGame_System .gamesystemlist .item .sys_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #areaGame .areaGame_System .gamesystemlist .item .sys_ti img { width: calc(310/610*100%); max-width: 310px; margin: 0 auto; } #areaGame .areaGame_System .gamesystemlist .item a::before , #areaGame .areaGame_System .gamesystemlist .item a::after { transition: all 150ms ease;} #areaGame .areaGame_System .gamesystemlist .item a .sys_pic::after , #areaGame .areaGame_System .gamesystemlist .item a .sys_pic img , #areaGame .areaGame_System .gamesystemlist .item a .sys_ti , #areaGame .areaGame_System .gamesystemlist .item a .sys_ti::before { transition: all 150ms ease; } #areaGame .areaGame_System .gamesystemlist .item a:hover::before , #areaGame .areaGame_System .gamesystemlist .item a:hover::after { border-right: 620px solid #c41214; border-left: 620px solid #c41214; } #areaGame .areaGame_System .gamesystemlist .item a:hover .sys_ti { background: #510607;} #areaGame .areaGame_System .gamesystemlist .item a:hover .sys_ti::before { border-right: 650px solid #c41214; border-left: 650px solid #c41214; } #areaGame .areaGame_System .gamesystemlist .item a:hover .sys_pic::after { transform-origin: center; -webkit-transform: scale(1.3); transform: scale(1.3);} #areaGame .areaGame_System .gamesystemlist .item a:hover .sys_pic img { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1.0;} #areaCharacter { background: url(../../about/_img/character/character_bg_r_pc.jpg) top center repeat-y; background-size: calc(1920/1366*100%); padding-top: calc(55/1366*100%); } #areaCharacter::before { background: url(../../about/_img/character/character_bg_pc.jpg?181115) top center no-repeat; background-size: calc(1920/1366*100%); } #areaCharacter .areaFooter { margin-top: calc(30/1366*100%);} #areaCharacter .areaFooter::after { padding-top: calc(60/1366*100%); } #areaCharacter .section_inner { } #areaCharacter .headline { width: calc(232/1280*100%); margin-bottom: calc(46/1280*100%);} #areaCharacter .btnlist { width: calc(1280/1280*100%); margin: 0 auto calc(53/1280*100%);} #areaCharacter .btnlist li { width: calc(90/1280*100%); margin: 0 calc(15/1280*100%);} #areaCharacter .btnlist li { } #areaCharacter .btnlist li a::before, #areaCharacter .btnlist li a::after { } #areaCharacter .btnlist li a:hover { } #areaCharacter .btnlist li a span { display: block; overflow: hidden;} #areaCharacter .btnlist li a::before , #areaCharacter .btnlist li a::after { transition: all 100ms ease;} #areaCharacter .btnlist li a img { transition: all 100ms ease-in-out; } #areaCharacter .btnlist li a.active::before , #areaCharacter .btnlist li a.active::after , #areaCharacter .btnlist li a:hover::before , #areaCharacter .btnlist li a:hover::after { border-right: 45px solid #c41214; border-left: 45px solid #c41214; } #areaCharacter .btnlist li a:hover img { transform-origin: center; -webkit-transform: scale(1.06); transform: scale(1.06); } #areaCharacter .detaillist_wrap { width: 100%; } #areaCharacter .detaillist { } #areaCharacter .detaillist li { } #areaCharacter .detaillist .pic_box { width: calc(840/1280*100%); margin: 0 0 calc(30/1280*100%); } #areaCharacter .detaillist .charaFlexbox { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start;} #areaCharacter .detaillist .charaFlexbox .detail_block { width: auto; min-width: inherit;} #areaCharacter .detaillist .charaFlexbox .detail_block { width: calc(840/1280*100%); background: none; } #areaCharacter .detaillist .detail_block .detail_block_inner { margin-top: 0; margin-bottom: calc(30/840*100%); } #areaCharacter .detaillist .detail_block .name_box { margin-bottom: calc(10/840*100%); } #areaCharacter .detaillist .detail_block .text_box { padding-left: calc(40/840*100%); padding-right: calc(30/840*100%); line-height: 1.61; font-size: calc(15/1366*100vw); color: #d0d0d0; } #areaCharacter .detaillist .chara_box { } #areaCharacter .detaillist #charaMas .chara_box { width: calc(355/1280*100%); margin-top: calc(-502/1280*100%); margin-left: 0; right: calc(72/1280*100%);} #areaCharacter .detaillist #charaOsk .chara_box { width: calc(324/1280*100%); margin-top: calc(-473/1280*100%); margin-left: 0; right: calc(106/1280*100%);} #areaCharacter .detaillist #charaLfo .chara_box { width: calc(372/1280*100%); margin-top: calc(-486/1280*100%); margin-left: 0; right: calc(34/1280*100%);} #areaCharacter .detaillist #charaRai .chara_box { width: calc(308/1280*100%); margin-top: calc(-518/1280*100%); margin-left: 0; right: calc(78/1280*100%);} #areaCharacter .detaillist #charaSga .chara_box { width: calc(256/1280*100%); margin-top: calc(-456/1280*100%); margin-left: 0; right: calc(115/1280*100%);} #areaCharacter .detaillist #charaInz .chara_box { width: calc(285/1280*100%); margin-top: calc(-516/1280*100%); margin-left: 0; right: calc(100/1280*100%);} #areaCharacter .detaillist #charaPl .chara_box { width: calc(326/1280*100%); margin-top: calc(-522/1280*100%); margin-left: 0; right: calc(79/1280*100%);} #areaCharacter .detaillist #charaAlb .chara_box { width: calc(283/1280*100%); margin-top: calc(-516/1280*100%); margin-left: 0; right: calc(96/1280*100%);} #areaCharacter .detaillist #charaJps .chara_box { width: calc(223/1280*100%); margin-top: calc(-397/1280*100%); margin-left: 0; right: calc(146/1280*100%);} #areaWanzer { background: url(../../about/_img/wanzer/wanzer_bg_r_pc.jpg) top center repeat-y; background-size: calc(1920/1366*100%); padding-top: calc(55/1366*100%); margin-bottom: 0; } #areaWanzer::before { background: url(../../about/_img/wanzer/wanzer_bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); } #areaWanzer .areaFooter { margin-top: calc(30/1366*100%);} #areaWanzer .areaFooter::after { padding-top: calc(60/1366*100%); } #areaWanzer .section_inner { } #areaWanzer .headline { width: calc(232/1280*100%); margin-bottom: calc(30/1280*100%);} #areaWanzer .readtext { width: calc(971/1280*100%); margin: 0 auto calc(38/1280*100%);} #areaWanzer .btnlist { width: calc(1280/1280*100%); margin: 0 auto calc(40/1280*100%);} #areaWanzer .btnlist li { width: calc(140/1280*100%); margin: 0 calc(15/1280*100%);} #areaWanzer .btnlist li { } #areaWanzer .btnlist li a::before, #areaWanzer .btnlist li a::after { } #areaWanzer .btnlist li a:hover { } #areaWanzer .btnlist li a span { display: block; overflow: hidden;} #areaWanzer .btnlist li a::before , #areaWanzer .btnlist li a::after { transition: all 100ms ease;} #areaWanzer .btnlist li a img { transition: all 100ms ease-in-out; } #areaWanzer .btnlist li a.active::before , #areaWanzer .btnlist li a.active::after , #areaWanzer .btnlist li a:hover::before , #areaWanzer .btnlist li a:hover::after { border-right: 70px solid #c41214; border-left: 70px solid #c41214; } #areaWanzer .btnlist li a:hover img { transform-origin: center; -webkit-transform: scale(1.06); transform: scale(1.06); } #areaWanzer .detaillist_wrap { width: 100%; } #areaWanzer .detaillist { margin-bottom: calc(20/1280*100%); } #areaWanzer .detaillist li { } #areaWanzer .detaillist .pic_box { width: calc(590/1280*100%); margin: 0 0 calc(30/1280*100%) calc(690/1280*100%); } #areaWanzer .detaillist .charaFlexbox { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; flex-direction: row-reverse;} #areaWanzer .detaillist .charaFlexbox .detail_block { width: auto; min-width: inherit;} #areaWanzer .detaillist .charaFlexbox .detail_block { width: calc(590/1280*100%); background: none; } #areaWanzer .detaillist .detail_block .detail_block_inner { margin-top: 0; margin-bottom: calc(30/590*100%); } #areaWanzer .detaillist .detail_block .detail_block_inner::after { display: none; } #areaWanzer .detaillist .detail_block .name_box { padding-top: calc(20/590*100%); margin-bottom: calc(10/590*100%); } #areaWanzer .detaillist .detail_block .text_box { padding-left: calc(40/590*100%); padding-right: calc(30/590*100%); line-height: 1.61; font-size: calc(15/1366*100vw); color: #d0d0d0; } #areaWanzer .detaillist .chara_box { position: relative; bottom: inherit; left: 0; top: 0;} #areaWanzer .detaillist #wanzerVolk .chara_box { width: calc(687/1280*100%); margin-top: calc(-403/1280*100%); margin-left: calc(-15/1280*100%); left: 0; } #areaWanzer .detaillist #wanzerZenith .chara_box { width: calc(681/1280*100%); margin-top: calc(-374/1280*100%); margin-left: calc(-1/1280*100%); left: 0; } #areaWanzer .detaillist #wanzerZhelaniye .chara_box { width: calc(565/1280*100%); margin-top: calc(-326/1280*100%); margin-left: calc(94/1280*100%); left: 0; } #areaWanzer .wanzerFeature { padding: calc(50/1366*100%) 0;} #areaWanzer .featurelist { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: stretch; } #areaWanzer .featurelist li { width: calc(400/1280*100%); margin: 0; position: relative;} #areaWanzer .featurelist li.featurelist_item::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; width: 100%; height: 1px; background: #313131; border-right: 10px solid #585858; border-left: 10px solid #585858; position: absolute; bottom: 0;} #areaWanzer .featurelist .pic_box { width: 100%; margin: 0 auto calc(10/400*100%); } #areaWanzer .featurelist .feature_block { } #areaWanzer .featurelist .feature_block .feature_block_inner { margin-top: 0; margin-bottom: calc(20/400*100%); } #areaWanzer .featurelist .feature_block .feature_block_inner::after { } #areaWanzer .featurelist .feature_block .name_box { position: relative; margin-bottom: calc(15/400*100%); } #areaWanzer .featurelist .feature_block .text_box { position: relative; padding: 0 calc(20/400*100%); line-height: 1.61; font-size: calc(14/1366*100vw); color: #d0d0d0; } #areaWanzer .featurelist .frameWrap.feature_block { background: none; } #areaWanzer .featurelist .frameWrap.feature_block::after { display: none;} #areaWanzer .featurelist .frameWrap.feature_block .frameInr { border-bottom: none; } } @media screen and (min-width: 1367px) { #areaStory { background-size: 1920px; padding-top: 165px; padding-bottom: 198px;} #areaGame { background-size: 1920px; padding-top: 55px; } #areaGame .areaFooter { margin-top: 50px;} #areaGame .areaFooter::after { padding-top: 60px; background-size: 1920px; } #areaGame .areaGame_System { background-size: 1920px; padding: 30px 0; margin-top: 50px; } #areaCharacter { background-size: 1920px; padding-top: 55px; } #areaCharacter::before { background-size: 1920px; } #areaCharacter .areaFooter { margin-top: 30px;} #areaCharacter .areaFooter::after { padding-top: 60px; } #areaCharacter .detaillist .detail_block .text_box { font-size: 1.5rem; } #areaWanzer { background-size: 1920px; padding-top: 55px; } #areaWanzer::before { background-size: 1920px; } #areaWanzer .areaFooter { margin-top: 30px;} #areaWanzer .areaFooter::after { padding-top: 60px; } #areaWanzer .detaillist .detail_block .text_box { font-size: 1.5rem; } #areaWanzer .wanzerFeature { padding: 50px 0;} #areaWanzer .featurelist .feature_block .text_box { font-size: 1.4rem; } } /* ---------------------------------------------------------------------------------------------------------------- #media ---------------------------------------------------------------------------------------------------------------- */ #media { background: url(../../media/_img/bg_sp.jpg?181217) top center no-repeat; background-size: 100%; } #areaTrailer { padding-top: calc(216/750*100%); padding-bottom: calc(82/750*100%);} #areaTrailer .headline { width: calc(167/750*100%); margin-bottom: calc(27/750*100%);} #areaTrailer .movielist { width: calc(650/750*100%); margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #areaTrailer .movielist li { width: calc(312/650*100%); margin-bottom: calc(26/650*100%);} #areaTrailer .movielist li.large { width: 100%;} #areaTrailer .movielist li .mvbtn { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaTrailer .movielist li .mvbtn::before, #areaTrailer .movielist li .mvbtn::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaTrailer .movielist li .mvbtn::before { margin-bottom: 1px;} #areaTrailer .movielist li .mvbtn::after { margin-top: 1px;} #areaTrailer .movielist li .mvbtn .mv_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #areaTrailer .movielist li .mvbtn .mv_ti::before { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaTrailer .movielist li .mvbtn .mv_ti::after { content: ''; display: block; position: absolute; top: 1px; width: 100%; height: 1px; background: #3c3c3c; } #areaTrailer .movielist li .mvbtn .mv_ti img { width: 100%; margin: 0 auto;} #areaTrailer .movielist li.large .mvbtn .mv_ti img { width: calc(312/650*100%); } #areaTrailer .movielist li.large .mvbtn .mv_ti.long img { width: 100%; } #areaTrailer .movielist li .mvbtn .mv_pic { display: block; position: relative;} #areaTrailer .movielist li .mvbtn .mv_pic::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/trailer/icon_play.png) center center no-repeat; background-size: calc(52/312*100%);} #areaTrailer .movielist li.large .mvbtn .mv_pic::after { background-size: calc(52/650*100%);} #areaTrailer .movielist li .mvbtn.notbtn .mv_pic::after { background: rgba(0,0,0,0.75) url(../../media/_img/trailer/icon_end.png) center center no-repeat; background-size: 70%;} #areaSS { padding-top: calc(1/750*100%); background: rgba(0,0,0,0.8); padding-bottom: calc(40/750*100%); margin-bottom: calc(40/750*100%);} #areaSS .headline { width: calc(270/750*100%); margin-top: calc(-28/750*100%); margin-bottom: calc(20/750*100%);} #areaSS .piclist_wrap { width: calc(650/750*100%); margin: 0 auto; position: relative; } #areaSS .piclist_wrap .pl_btn { width: calc(40/650*100%); height: 100%; position: absolute; top: 0; } #areaSS .piclist_wrap .pl_btn a { display: block; width: 100%; height: 100%; position: relative; background: #3c3c3c; } #areaSS .piclist_wrap .pl_btn a.disabled { opacity: 0.3; } #areaSS .piclist_wrap .pl_btn a span { display: block; width: 100%; height: 100%; position: relative; } #areaSS .piclist_wrap .pl_btn.bPrev { left: calc(-50/650*100%);} #areaSS .piclist_wrap .pl_btn.bNext { right: calc(-50/650*100%);} #areaSS .piclist_wrap .pl_btn.bPrev a span { background: url(../../media/_img/ss/icon_prev.png) center center no-repeat; background-size: calc(10/40*100%);} #areaSS .piclist_wrap .pl_btn.bNext a span { background: url(../../media/_img/ss/icon_next.png) center center no-repeat; background-size: calc(10/40*100%);} #areaSS .piclist_wrap .pl_btn a span::before, #areaSS .piclist_wrap .pl_btn a span::after { content: ''; display: block; position: relative; width: 100%; height: 3px; border-right: 3px solid #636363; border-left: 3px solid #636363; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaSS .piclist_wrap .pl_btn a span::after { position: absolute; bottom: 0;} #areaSS .piclist { width: 100%; } #areaSS .piclist li { width: calc(178/650*100%); } #areaSS .piclist li a { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #areaSS .piclist li a::before, #areaSS .piclist li a::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #areaSS .piclist li a::before { margin-bottom: 2px;} #areaSS .piclist li a::after { margin-top: 2px;} #areaSS .piclist li.inew a { text-decoration: none;} #areaSS .piclist li.inew a span { display: block; position: relative;} #areaSS .piclist li.inew a span::after { content: "NEW"; position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); border-right: 1px solid #f00; color: #f00; display: inline; padding: 1px 2px; width: calc(13/750*100vw * 3); height: auto; font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, sans-serif; font-size: calc(10/750*100vw); font-weight: bold; line-height: 1; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 641px) { #media { background: url(../../media/_img/bg_pc.jpg?181217) top center no-repeat; background-size: calc(1920/1366*100%); } #areaTrailer { padding-top: calc(165/1366*100%); padding-bottom: calc(80/1366*100%);} #areaTrailer .section_inner { } #areaTrailer .headline { width: calc(167/1280*100%); margin-bottom: calc(16/1280*100%);} #areaTrailer .movielist { width: 100%; -webkit-justify-content: flex-start; justify-content: flex-start; position: relative;} #areaTrailer .movielist li { width: calc(380/1280*100%); margin-bottom: calc(30/1280*100%); margin-right: calc(70/1280*100%);} #areaTrailer .movielist li.large { width: calc(870/1280*100%);} /* #areaTrailer .movielist li:nth-child(4n) { margin-right: calc(-2/1280*100%);} #areaTrailer .movielist li.pos1 { margin-right: auto; margin-left: auto;} */ #areaTrailer .movielist li:nth-child(3n) { margin-right: 0;} #areaTrailer .movielist li.pos1 { margin-right: calc(30/1280*100%);} #areaTrailer .movielist li.pos2 { margin-right: 0;} #areaTrailer .movielist li.pos3 { margin-right: 0; position: absolute; top: 0; right: 0; margin-top: calc(277/1280*100%);} #areaTrailer .movielist li .mvbtn { overflow: hidden;} #areaTrailer .movielist li .mvbtn .mv_pic { overflow: hidden;} #areaTrailer .movielist li .mvbtn .mv_ti img { max-width: 380px; width: 100%; } #areaTrailer .movielist li.large .mvbtn .mv_ti img { width: calc(380/870*100%); } #areaTrailer .movielist li.large .mvbtn .mv_ti.long img { max-width: none; width: calc(520/870*100%); } #areaTrailer .movielist li .mvbtn .mv_pic::after { background-size: calc(52/380*100%);} #areaTrailer .movielist li.large .mvbtn .mv_pic::after { background-size: calc(52/870*100%);} #areaTrailer .movielist li a::before , #areaTrailer .movielist li a::after { transition: all 300ms ease;} #areaTrailer .movielist li a .mv_pic::after , #areaTrailer .movielist li a .mv_pic img , #areaTrailer .movielist li a .mv_ti , #areaTrailer .movielist li a .mv_ti::before { transition: all 300ms ease; } #areaTrailer .movielist li a:hover::before , #areaTrailer .movielist li a:hover::after { border-right: 650px solid #c41214; border-left: 650px solid #c41214; } #areaTrailer .movielist li a:hover .mv_ti { background: #510607;} #areaTrailer .movielist li a:hover .mv_ti::before { border-right: 650px solid #c41214; border-left: 650px solid #c41214; } #areaTrailer .movielist li a:hover .mv_pic::after { transform-origin: center; -webkit-transform: scale(1.5); transform: scale(1.5);} #areaTrailer .movielist li a:hover .mv_pic img { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.6;} #areaSS { padding-top: calc(1/1280*100%); padding-bottom: calc(30/1280*100%); margin-bottom: 0;} #areaSS .headline { width: calc(270/1280*100%); margin-top: calc(-28/1280*100%); margin-bottom: calc(24/1280*100%);} #areaSS .section_inner {} #areaSS .piclist_wrap { width: calc(1180/1280*100%); } #areaSS .piclist_wrap .pl_btn { width: calc(30/1180*100%); cursor: pointer; } #areaSS .piclist_wrap .pl_btn.bPrev { left: calc(-50/1180*100%);} #areaSS .piclist_wrap .pl_btn.bNext { right: calc(-50/1180*100%);} #areaSS .piclist_wrap .pl_btn.bPrev a span { background-size: calc(10/30*100%);} #areaSS .piclist_wrap .pl_btn.bNext a span { background-size: calc(10/30*100%);} #areaSS .piclist_wrap .pl_btn a { transition: all 100ms ease;} #areaSS .piclist_wrap .pl_btn a:not(.disabled):hover { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); } #areaSS .piclist { } #areaSS .piclist li { width: calc(178/1180*100%); } #areaSS .piclist li a { overflow: hidden;} #areaSS .piclist li a span { display: block; overflow: hidden;} #areaSS .piclist li a::before , #areaSS .piclist li a::after { transition: all 300ms ease;} #areaSS .piclist li a img { transition: all 100ms ease-in-out; } #areaSS .piclist li a:hover::before , #areaSS .piclist li a:hover::after { border-right: 150px solid #c41214; border-left: 150px solid #c41214; } #areaSS .piclist li a:hover img { transform-origin: center; -webkit-transform: scale(1.2); transform: scale(1.2); } #areaSS .piclist li.inew a span::after { padding: 1px 5px; width: auto; font-size: 1rem;} } @media screen and (min-width: 1367px) { #media { background-size: 1920px; } #areaTrailer { padding-top: 165px; padding-bottom: 80px;} } /* ---------------------------------------------------------------------------------------------------------------- #products ---------------------------------------------------------------------------------------------------------------- */ #products { background: #a0a7ad;} #products .main_inner { } #products .visual { width: 100%; } #products .logo { position: absolute; top: 0; left: calc(35/750*100%); margin-top: calc(230/750*100%); width: calc(680/750*100%);} #products .releasedate { position: absolute; top: 0; left: calc(136/750*100%); margin-top: calc(320/750*100%); width: calc(478/750*100%); } #products .speclist { position: absolute; top: 0; left: calc(50/750*100%); margin-top: calc(450/750*100%); width: calc(650/750*100%); } #products .speclist > li { margin-bottom: calc(20/650*100%); } #products .speclist > li dl { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #products .speclist > li dl { font-size: calc(20/750*100vw); } #products .speclist > li dt { width: calc(180/650*100%); text-align: center; white-space: nowrap; } #products .speclist > li dt div { border-top: 1px solid #343434; border-bottom: 1px solid #343434; background: #c41214; line-height: 1.41; } #products .speclist > li dt div::before, #products .speclist > li dt div::after { content: ""; display: block; width: 100%; height: 1px; background: #22252a; border-right: 10px solid #646464; border-left: 10px solid #646464; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .speclist > li dt div::before { margin-bottom: 4px;} #products .speclist > li dt div::after { margin-top: 3px;} #products .speclist > li dd { width: calc(470/650*100%); padding: 6px 10px 5px 10px; line-height: 1.41;} #products .speclist > li dd span { display: inline; font-size: calc(14/750*100vw);} #products .lineuplist_wrap { border-top: 3px solid #000; border-bottom: 3px solid #000; } #products .lineuplist { border: 1px solid #404040; background: #000; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #products .lineuplist li { border: 1px solid #404040; width: 50%; } #products .lineuplist li.btn_ue , #products .lineuplist li.btn_pkg { margin-bottom: 2px; } #products .lineuplist li a { display: block; padding: 1px 0; background: #303030; overflow: hidden;} #products .lineuplist li a::before, #products .lineuplist li a::after { content: ""; display: block; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .lineuplist li a::before { margin-bottom: 2px; } #products .lineuplist li a::after { margin-top: 2px; } #products .lineuplist li a span { display: block; background: #0c0c0c;} @media screen and (max-width: 640px) { #products .lineuplist li a.active::before , #products .lineuplist li a.active::after { border-right: 350px solid #c41214; border-left: 350px solid #c41214; } } @media screen and (min-width: 641px) { #products .main_inner { max-width: 1280px; width: calc(1280/1366*100%); margin: 0 auto; } #products .visual { position: relative; left: 50%; margin-left: calc(-960/1280*100%); width: calc(1920/1280*100%);} #products .visual img { max-width: none; width: 100%; } #products .logo { left: calc(-5/1280*100%); margin-top: calc(173/1280*100%); width: calc(595/1280*100%);} #products .releasedate { left: calc(-5/1280*100%); margin-top: calc(245/1280*100%); width: calc(366/1280*100%); } #products .speclist { left: 0; margin-top: calc(340/1280*100%); width: calc(650/1280*100%); } #products .speclist > li { margin-bottom: calc(10/650*100%); } #products .speclist > li dl { } #products .speclist > li dl { font-size: 1.0vw; } #products .speclist > li dt { width: calc(120/650*100%); } #products .speclist > li dt div { } #products .speclist > li dt div::before { margin-bottom: 2px;} #products .speclist > li dt div::after { margin-top: 2px;} #products .speclist > li dd { width: calc(530/650*100%); padding: 5px 15px; } #products .speclist > li dd span { font-size: 1.2rem;} #products .lineuplist_wrap { border: none; position: absolute; bottom: 0; left: 0; margin-bottom: calc(20/1280*100%); width: 100%;} #products .lineuplist { border: none; background: none;} #products .lineuplist li { border-width: 2px 0; width: calc(298/1280*100%); } #products .lineuplist li a { } #products .lineuplist li a::before , #products .lineuplist li a::after { transition: all 300ms ease;} #products .lineuplist li a span { transition: all 1000ms ease; background: #0c0c0c url(../img/bg_dot.png);} #products .lineuplist li a:hover::before , #products .lineuplist li a:hover::after , #products .lineuplist li a.active::before , #products .lineuplist li a.active::after { border-right: 350px solid #c41214; border-left: 350px solid #c41214; } } @media screen and (min-width: 1367px) { #products .visual { left: 50%; margin-left: -960px; width: 1920px;} #products .speclist > li dl { font-size: 1.4rem; } } #products .section_inner { padding-top: calc(25/750*100%); } #products .detaillist {} #products .detaillist .detail_item { } #products .detaillist .mainblock , #products .detaillist .subblock { background: #3c3c3c; padding: 1px 0;} #products .detaillist .mainblock::before, #products .detaillist .mainblock::after, #products .detaillist .subblock::before, #products .detaillist .subblock::after { content: ""; display: block; width: 100%; height: 1px; background: #22252a; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .detaillist .mainblock::before , #products .detaillist .subblock::before { margin-bottom: 2px;} #products .detaillist .mainblock::after , #products .detaillist .subblock::after { margin-top: 2px;} #products .detaillist .mainblock { margin-bottom: calc(30/750*100%);} #products .detaillist .subblock { margin-bottom: calc(50/750*100%);} #products .detaillist .subblock .subblock_inner { background: #292b2d; padding: calc(30/750*100%) calc(50/750*100%) calc(30/750*100%); position: relative; } #products .detaillist .subblock .subblock_inner.so::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #products .detaillist .subblock .subblock_inner.so::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.8) url(../../products/_img/detail/text_soldout.png) center center no-repeat; background-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .detaillist .subblock .hl { margin-bottom: calc(20/650*100%);} #products .detaillist .subblock .itemlist { } #products .detaillist .subblock .itemlist .item { margin-bottom: calc(20/650*100%); } #products .detaillist .subblock .itemlist .item:last-child { margin-bottom: 0; } #products .detaillist .subblock .noteslist { } #products .detaillist .subblock .noteslist li { text-indent: -1em; padding-left: 1em; color: #a4a4a4; line-height: 1.41; font-size: 1.0rem; margin-bottom: 0.3em; } #products .detaillist .subblock .noteslist li:last-child { margin-bottom: 0; } #products .detaillist .btnblock { margin-bottom: calc(60/750*100%);} #products .detaillist .btnblock .btnlinklist { width: calc(650/750*100%); margin: 0 auto; } #products .detaillist .btnblock .btnlinklist li { width: calc(630/650*100%); margin: 0 auto calc(20/650*100%); position: relative; overflow: hidden; } #products .detaillist .btnblock .btnlinklist li:last-child { margin-bottom: 0; } #products .detaillist .btnblock .btnlinklist li .btn { display: block; position: relative; padding: calc(10/630*100%) 0; overflow: hidden;} #products .detaillist .btnblock .btnlinklist li .btn .btntext { display: block; background: #d4d4d4; position: relative; width: calc(630/650*100%); margin: auto; } #products .detaillist .btnblock .btnlinklist li .btn .crn { display: block; position: absolute; width: 100%; height: 100%; } #products .detaillist .btnblock .btnlinklist li .btn .crn::before, #products .detaillist .btnblock .btnlinklist li .btn .crn::after { content: ''; display: block; position: absolute; border: 0 solid #000; z-index: 10; transition: all 200ms ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .detaillist .btnblock .btnlinklist li .btn .crn_t { top: 0; left: 0; } #products .detaillist .btnblock .btnlinklist li .btn .crn_b { bottom: 0; left: 0; } #products .detaillist .btnblock .btnlinklist li .btn .crn_t::before { top: 0; left: 0; width: 10px; height: 10px; border-top-width: 1px; border-left-width: 1px; } #products .detaillist .btnblock .btnlinklist li .btn .crn_t::after { top: 0; right: 0; width: 10px; height: 10px; border-top-width: 1px; border-right-width: 1px; } #products .detaillist .btnblock .btnlinklist li .btn .crn_b::before { bottom: 0; right: 0; width: 10px; height: 10px; border-bottom-width: 1px; border-right-width: 1px; } #products .detaillist .btnblock .btnlinklist li .btn .crn_b::after { bottom: 0; left: 0; width: 10px; height: 10px; border-bottom-width: 1px; border-left-width: 1px; } #products .detaillist .btnblock .btnlinklist li .so { background: #d4d4d4; } #products .detaillist .btnblock .btnlinklist li .so::after { content: ''; text-align: center; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.8) url(../../products/_img/detail/btn_soldout.png) center center no-repeat; background-size: 40%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .detaillist #dlsteam .subblock.add { margin-top: calc(-20/750*100%);} @media screen and (min-width: 641px) { #products .section_inner { padding-top: 0; } #products ul.detaillist { padding-top: calc(0/1280*100%); } #products .detaillist li.detail_item { position: relative; width: 100%;} #products .detaillist .detail_item::before , #products .detaillist .detail_item::after { content: ""; display: block; width: calc(298/1280*100%); background: transparent; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #products .detaillist .detail_item::before { padding-top: calc(14/1280*100%); margin-top: calc(21/1280*100%); margin-bottom: 1px; } #products .detaillist .detail_item::after { padding-top: calc(9/1280*100%); position: absolute; top: 0; left: 0; margin-top: calc(6/1280*100%); } #products .detaillist #ue.detail_item::before , #products .detaillist #ue.detail_item::after { background: #704f18;} #products .detaillist #pkg.detail_item::before , #products .detaillist #pkg.detail_item::after { background: #ad1717; margin-left: calc(327.3333/1280*100%);} #products .detaillist #dlps4.detail_item::before , #products .detaillist #dlps4.detail_item::after { background: #225998; margin-left: calc(654.6667/1280*100%);} #products .detaillist #dlsteam.detail_item::before , #products .detaillist #dlsteam.detail_item::after { background: #377095; margin-left: calc(982/1280*100%);} #products .detaillist .mainblock , #products .detaillist .subblock { } #products .detaillist .mainblock { margin-bottom: calc(30/1280*100%);} #products .detaillist .subblock { margin-bottom: calc(40/1280*100%);} #products .detaillist .subblock .subblock_inner { padding: calc(14/1280*100%) calc(30/1280*100%) calc(20/1280*100%);} #products .detaillist .subblock .subblock_inner.so::after { background-size: calc(450/1220*100%); background-position: center 47%; } #products .detaillist .subblock .hl { margin: 0 auto calc(20/1220*100%);} #products .detaillist .subblock .itemlist { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #products .detaillist .subblock .itemlist.cs { margin-top: calc(20/1220*100%); margin-bottom: calc(20/1220*100%); -webkit-justify-content: center; justify-content: center; } #products .detaillist .subblock .itemlist .item { width: calc(595/1220*100%); margin-bottom: calc(20/1366*100vw); } #products .detaillist .subblock .itemlist .item.itemlong { width: 100%; } #products .detaillist .subblock .noteslist { } #products .detaillist .subblock .noteslist li { line-height: 1.41; font-size: 1.2rem; margin-bottom: 0.3em; } #products .detaillist #ue .subblock .hl { width: calc(725/1220*100%); } #products .detaillist #pkg .subblock .hl { width: calc(863/1220*100%); } #products .detaillist #dlps4 .subblock .hl { width: calc(751/1220*100%); } #products .detaillist #dlsteam .subblock .hl { width: calc(655/1220*100%); } #products .detaillist #dlsteam .subblock.add { margin-top: calc(-20/1220*100%);} #products .detaillist #dlsteam .subblock.add .hl { width: calc(314/1220*100%); } #products .detaillist .btnblock { margin-bottom: calc(60/1280*100%); } #products .detaillist .btnblock .btnlinklist { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #products .detaillist .btnblock .btnlinklist li { width: calc(595/1280*100%); margin: 0 calc(20/1280*100%) 0; } #products .detaillist .btnblock .btnlinklist li .btn { padding: calc(10/595*100%) 0; } #products .detaillist .btnblock .btnlinklist li .btn .btntext { width: calc(575/595*100%); } #products .detaillist .btnblock .btnlinklist li .btn .crn { z-index: 10;} #products .detaillist .btnblock .btnlinklist li .btn .crn_t::before , #products .detaillist .btnblock .btnlinklist li .btn .crn_t::after , #products .detaillist .btnblock .btnlinklist li .btn .crn_b::before , #products .detaillist .btnblock .btnlinklist li .btn .crn_b::after { width: 20px; height: 20px; } #products .detaillist .btnblock .btnlinklist li.btn_ov2 .btn .btntext , #products .detaillist .btnblock .btnlinklist li.btn_ov2 .btn .btntext img { -webkit-transition: .1s ease-in-out .1s; transition: .1s ease-in-out .1s; -webkit-transform: scale(1); transform: scale(1); } #products .detaillist .btnblock .btnlinklist li.btn_ov2 .btn:hover .btntext { -webkit-transform: scale(1.2); transform: scale(1.2); } #products .detaillist .btnblock .btnlinklist li.btn_ov2 .btn:hover .btntext img { -webkit-transform: scale(0.86); transform: scale(0.86); } #products .detaillist .btnblock .btnlinklist li.btn_ov2:hover .crn_t::before { width: 100%; border-color: #c41214; } #products .detaillist .btnblock .btnlinklist li.btn_ov2:hover .crn_t::after { height: 100%; border-color: #c41214; } #products .detaillist .btnblock .btnlinklist li.btn_ov2:hover .crn_b::before { width: 100%; border-color: #c41214; } #products .detaillist .btnblock .btnlinklist li.btn_ov2:hover .crn_b::after { height: 100%; transition-delay: 0ms; border-color: #c41214; } } @media screen and (min-width: 1367px) { #products .detaillist .subblock .itemlist .item { margin-bottom: 20px; } } /* ---------------------------------------------------------------------------------------------------------------- #mwam ---------------------------------------------------------------------------------------------------------------- */ #mwam { background: #000 url(../../mwam/_img/bg_t_sp.jpg) top center no-repeat; background-size: 100%; position: relative;} #mwam::before { content: ""; display: block; background: url(../../mwam/_img/bg_r.png) top center repeat; background-size: calc(40/750*100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0;} #mwam .viBox { width: 100%; overflow: hidden; } #mwam .viBox .btn { display: block; position: relative; width: 100%; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; background: #3c3c3c;} #mwam .viBox .btn::before, #mwam .viBox .btn::after { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #mwam .viBox .btn::before { margin-bottom: 1px;} #mwam .viBox .btn::after { margin-top: 1px;} #mwam .viBox .btn .mv_ti { display: block; position: relative; border-top: 1px solid #3c3c3c; background: #181818;} #mwam .viBox .btn .mv_ti::before { content: ''; display: block; position: relative; width: 100%; height: 1px; background: #000; border-right: 10px solid #626262; border-left: 10px solid #626262; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #mwam .viBox .btn .mv_ti::after { content: ''; display: block; position: absolute; top: 1px; width: 100%; height: 1px; background: #3c3c3c; } #mwam .viBox .btn .mv_ti img { width: 100%; margin: 0 auto;} #mwam .viBox .btn .mv_pic { display: block; position: relative; overflow: hidden;} #mwam .viBox .btn:not(.cs) .mv_pic::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/trailer/icon_play.png) center center no-repeat; background-size: calc(52/312*100%);} #mwam #areaLead { padding-top: calc(216/750*100%); padding-bottom: calc(50/750*100%);} #mwam #areaLead .headline { width: calc(687/750*100%); margin-bottom: calc(70/750*100%);} #mwam #areaLead .column2 { width: calc(650/750*100%); margin: 0 auto; } #mwam #areaLead .leadtext { width: 100%; margin: 0 auto calc(40/750*100%);} #mwam #areaLead .leadtext .text { font-size: calc(22/750*100vw); line-height: 1.61;} #mwam #areaLead .leadtext .lyrics { font-style: italic; font-size: calc(18/750*100vw); line-height: 1.61; margin: calc(40/650*100%) 0;} #mwam #areaLead .videoBlock { width: 100%; margin: 0 auto;} #mwam #areaComment { background: #251a0f url(../../mwam/_img/comment/bg_sp.jpg) top center no-repeat; background-size: 100%; position: relative; padding: calc(30/750*100%) 0; margin-bottom: calc(40/750*100%);} #mwam #areaComment .column2 { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #mwam #areaComment .column2 { width: calc(650/750*100%); margin: 0 auto; } #mwam #areaComment .commentPic { width: calc(160/650*100%); } #mwam #areaComment .commentText { width: calc(470/650*100%); } #mwam #areaComment .commentText .ct_text dt { margin-bottom: calc(20/470*100%); color: #e5c033; font-size: calc(20/750*100vw); font-weight: bold; line-height: 1.41;} #mwam #areaComment .commentText .ct_text dd { font-size: calc(18/750*100vw); line-height: 1.81;} #mwam #areaAnnounce { position: relative; margin-bottom: calc(70/750*100%);} #mwam #areaAnnounce .column2 { width: calc(650/750*100%); margin: 0 auto; position: relative;} #mwam #areaAnnounce .announceText .hl { width: 100%; margin-bottom: calc(30/650*100%);} #mwam #areaAnnounce .announceText .text { width: calc(480/650*100%); margin-bottom: calc(20/650*100%); font-size: calc(20/750*100vw); line-height: 1.81;} #mwam #areaAnnounce .announceText .at_btn { width: 100%; } #mwam #areaAnnounce .announceText .at_btn a { display: block; width: 100%; border: 1px solid #4d4d4d;} #mwam #areaAnnounce .announceText .at_btn .btn_official { margin-bottom: calc(20/650*100%);} #mwam #areaAnnounce .announceText .at_btn .btn_official a { background: #b99304;} #mwam #areaAnnounce .announceText .at_btn .btn_official a img { width: calc(532/648*100%); margin: 0 auto;} #mwam #areaAnnounce .announceText .at_btn .btn_twitter a { background: #1da1f2;} #mwam #areaAnnounce .announceText .at_btn .btn_twitter a img { width: calc(560/648*100%); margin: 0 auto;} #mwam #areaAnnounce .announcePic { width: calc(150/650*100%); position: absolute; top: 0; margin-top: calc(95/650*100%); right: 0;} #mwam #areaAnnounce .announcePic img { border: 1px solid #2f2815;} #mwam #areaAnnounce .profileBlock { margin-top: calc(40/650*100%);} #mwam #areaAnnounce .profileBlock .pB_logo { display: none;} #mwam #areaAnnounce .profileBlock .pB_profile dt { font-size: calc(24/750*100vw); font-weight: bold; border-bottom: 1px solid #746119; padding-bottom: calc(7/650*100%); margin-bottom: calc(18/650*100%);} #mwam #areaAnnounce .profileBlock .pB_profile dd { font-size: calc(16/750*100vw); border-bottom: 1px solid #746119; padding-bottom: calc(18/650*100%); line-height: 1.61;} #mwam #areaNewtrailer { position: relative; margin-bottom: calc(70/750*100%);} #mwam #areaNewtrailer .column2 { width: calc(650/750*100%); margin: 0 auto; position: relative;} #mwam #areaNewtrailer .ntText { margin-bottom: calc(30/650*100%);} #mwam #areaNewtrailer .ntText .hl { width: 100%; margin-bottom: calc(30/650*100%);} #mwam #areaNewtrailer .ntText .text { width: 100%; margin-bottom: calc(20/650*100%); font-size: calc(20/750*100vw); line-height: 1.81;} #mwam #areaNewtrailer .ntText .nt_btn { width: 100%; } #mwam #areaNewtrailer .ntText .nt_btn .btn_live a { display: block; width: 100%; border: 1px solid #4d4d4d; background: #d62123;} #mwam #areaNewtrailer .ntText .nt_btn .btn_live a img { width: calc(532/648*100%); margin: 0 auto;} #mwam #areaNewtrailer .videoBlock { width: 100%; margin: 0 auto;} @media screen and (min-width: 641px) { #mwam { background-color: #000; background: url(../../mwam/_img/bg_t_pc.jpg) top center no-repeat, url(../../mwam/_img/bg_b_pc.jpg) bottom center no-repeat; background-size: calc(1920/1366*100%); } #mwam.main { padding-bottom: calc(90/1366*100%);} #mwam::before { background-size: calc(40/1366*100%); } #mwam .column2 { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #mwam .viBox a::before , #mwam .viBox a::after { transition: all 300ms ease;} #mwam .viBox a .mv_pic::after , #mwam .viBox a .mv_pic img , #mwam .viBox a .mv_ti , #mwam .viBox a .mv_ti::before { transition: all 300ms ease; } #mwam .viBox a:hover::before , #mwam .viBox a:hover::after { border-right: 620px solid #c41214; border-left: 620px solid #c41214; } #mwam .viBox a:hover .mv_ti { background: #510607;} #mwam .viBox a:hover .mv_ti::before { border-right: 620px solid #c41214; border-left: 620px solid #c41214; } #mwam .viBox a:hover .mv_pic::after { transform-origin: center; -webkit-transform: scale(1.3); transform: scale(1.3);} #mwam .viBox a:hover .mv_pic img { transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.6;} #mwam #areaLead { padding-top: calc(193/1366*100%); padding-bottom: calc(40/1366*100%);} #mwam #areaLead .headline { width: calc(1124/1280*100%); margin-bottom: calc(80/1280*100%);} #mwam #areaLead .column2 { width: 100%; } #mwam #areaLead .leadtext { width: calc(600/1280*100%); margin: 0;} #mwam #areaLead .leadtext .text { font-size: calc(16/1366*100vw); line-height: 1.81;} #mwam #areaLead .leadtext .lyrics { font-style: italic; font-size: calc(16/1366*100vw); line-height: 1.61; margin: calc(50/600*100%) 0;} #mwam #areaLead .videoBlock { width: calc(620/1280*100%); margin: 0;} #areaTrailer { padding-top: calc(165/1366*100%); padding-bottom: calc(80/1366*100%);} #areaTrailer .section_inner { } #areaTrailer .headline { width: calc(167/1280*100%); margin-bottom: calc(16/1280*100%);} #mwam #areaComment { background: #251a0f url(../../mwam/_img/comment/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1366*100%); padding: calc(20/1366*100%) 0; margin-bottom: calc(40/1366*100%);} #mwam #areaComment .column2 { width: 100%; } #mwam #areaComment .commentPic { width: calc(160/1280*100%); } #mwam #areaComment .commentText { width: calc(1090/1280*100%); } #mwam #areaComment .commentText .ct_text dt { margin-bottom: calc(30/1090*100%); font-size: calc(20/1366*100vw); font-weight: bold; line-height: 1.41;} #mwam #areaComment .commentText .ct_text dd { font-size: calc(16/1366*100vw); line-height: 1.81;} #mwam #areaAnnounce { margin-bottom: calc(90/1366*100%);} #mwam #areaAnnounce .column2 { width: 100%;} #mwam #areaAnnounce .announceText { width: calc(920/1280*100%);} #mwam #areaAnnounce .announceText .hl { width: 100%; margin-bottom: calc(30/920*100%);} #mwam #areaAnnounce .announceText .text { width: 100%; margin-bottom: calc(30/920*100%); font-size: calc(16/1366*100vw); line-height: 1.81;} #mwam #areaAnnounce .announceText .at_btn { width: 100%; margin-bottom: calc(20/920*100%) } #mwam #areaAnnounce .announceText .at_btn .btn_official { width: calc(434/920*100%); margin-bottom: 0;} #mwam #areaAnnounce .announceText .at_btn .btn_official a { background: #000;} #mwam #areaAnnounce .announceText .at_btn .btn_official a img { width: 100%;} #mwam #areaAnnounce .announceText .at_btn .btn_twitter { width: calc(462/920*100%); } #mwam #areaAnnounce .announceText .at_btn .btn_twitter a { background: #000;} #mwam #areaAnnounce .announceText .at_btn .btn_twitter a img { width: 100%;} #mwam #areaAnnounce .announceText .at_btn a { transition: all 200ms ease;} #mwam #areaAnnounce .announceText .at_btn .btn_official a:hover { border: 1px solid #b99304; background: #b99304;} #mwam #areaAnnounce .announceText .at_btn .btn_twitter a:hover { border: 1px solid #1da1f2; background: #1da1f2;} #mwam #areaAnnounce .announcePic { width: calc(302/1280*100%); position: relative; margin-top: 0; } #mwam #areaAnnounce .profileBlock { margin-top: calc(0/1366*100%);} #mwam #areaAnnounce .profileBlock .pB_logo { display: block; width: calc(170/1280*100%);} #mwam #areaAnnounce .profileBlock .pB_profile { width: calc(1090/1280*100%);} #mwam #areaAnnounce .profileBlock .pB_profile dt { font-size: calc(18/1366*100vw); font-weight: bold; padding-bottom: calc(7/1090*100%); margin-bottom: calc(18/1090*100%);} #mwam #areaAnnounce .profileBlock .pB_profile dd { font-size: calc(13/1366*100vw); padding-bottom: calc(18/1090*100%); line-height: 1.61;} #mwam #areaNewtrailer { margin-bottom: 0;} #mwam #areaNewtrailer .column2 { width: 100%;} #mwam #areaNewtrailer .ntText { width: calc(600/1280*100%); margin-bottom: 0;} #mwam #areaNewtrailer .ntText .hl { width: 100%; margin-bottom: calc(30/600*100%);} #mwam #areaNewtrailer .ntText .text { width: 100%; margin-bottom: calc(30/600*100%); font-size: calc(16/1366*100vw); line-height: 1.81;} /*#mwam #areaNewtrailer .ntText .nt_btn { width: 100%; } #mwam #areaNewtrailer .ntText .nt_btn .btn_live { width: calc(434/600*100%); } #mwam #areaNewtrailer .ntText .nt_btn .btn_live a { display: block; width: 100%; border: 1px solid #4d4d4d; background: #000;} #mwam #areaNewtrailer .ntText .nt_btn .btn_live a img { width: 100%;} #mwam #areaNewtrailer .ntText .nt_btn a { transition: all 200ms ease;} #mwam #areaNewtrailer .ntText .nt_btn a:hover { border: 1px solid #d62123; background: #d62123;}*/ #mwam #areaNewtrailer .videoBlock { width: calc(620/1280*100%); margin: 0;} } @media screen and (min-width: 1367px) { #mwam.main { padding-bottom: 90px;} #mwam { background-size: 1920px; } #mwam::before { background-size: 40px; } #mwam #areaLead { padding-top: 193px; padding-bottom: 40px;} #mwam #areaLead .leadtext .text { font-size: 1.6rem;} #mwam #areaLead .leadtext .lyrics { font-size: 1.6rem;} #mwam #areaComment { background-size: 1920px; position: relative; padding: 20px 0; margin-bottom: 40px;} #mwam #areaComment .commentText .ct_text dt { font-size: 2.0rem;} #mwam #areaComment .commentText .ct_text dd { font-size: 1.6rem;} #mwam #areaAnnounce { margin-bottom: 90px;} #mwam #areaAnnounce .announceText .text { font-size: 1.6rem;} #mwam #areaAnnounce .profileBlock .pB_profile dt { font-size: 1.8rem; } #mwam #areaAnnounce .profileBlock .pB_profile dd { font-size: 1.3rem;} #mwam #areaNewtrailer .ntText .text { font-size: 1.6rem;} }