@charset "utf-8"; /* ================================================================== CSS information style info : PAGE ================================================================== */ .not-available { text-align: center; font-size: 1.5em; margin-top: 10%; } .title_wrapper { max-width: 450px; margin: 25px auto 66px; } @media screen and (max-width: 641px) { .title_wrapper { margin: 0 50px; } } .btn { text-decoration: none; } .chapter-title { text-align: center; margin-top: 10px; color: white; line-height: initial; font-weight: bold; @media screen and (max-width: 641px) { font-size: 0.7em; } } /* ---------------------------------------------------------------------------------------------------------------- OVER WRITE ---------------------------------------------------------------------------------------------------------------- */ .barbaWrapper > div { position: relative; } .soundjudge .soundjudge__text { background: url(../img/soundjudge/bgmtext.png) center center no-repeat; background-size: auto 100%; } .btnOv .btnOvOn { display: none; position: absolute; top: 0; left: 0; opacity: 0; } .secPagetop { z-index: 99; } @media screen and (min-width: 641px) { .btnOv a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } .btnOv a .btnOvOn { -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; display: block; } .btnOv a { display: block; } .btnOv a:hover { -webkit-transform: scale(1.1); transform: scale(1.1);} .btnOv a:hover .btnOvOn { opacity: 1; } } /* -------------------------------------------------------- .secHeader -------------------------------------------------------- */ .secHeader { position: fixed; top: 40px; right: 0; width: 100%; z-index: 9951; } .secHeader.fixed { position: fixed; top: 40px; } .secHeader.usePrologue { transform: translateY(-100px); } .sHead__logo { width: calc(393/750*100%); margin-top: calc(16/750*100%); margin-left: calc(25/750*100%); position: relative; } .sHead__logo a { display: block; } .useTop .sHead__logo { display: none; } /* .sHead__spmenu -------------------------------------------------------- */ .sHead__spmenu { display: block; cursor: pointer; position: absolute; top: 0; right: 0; width: calc(100/750*100%); z-index: 2; background: -webkit-linear-gradient(top, #dc5466 0%,#bf2c5d 15%,#ac175d 50%,#ac247c 85%,#b648b3 100%); background: linear-gradient(to bottom, #dc5466 0%,#bf2c5d 15%,#ac175d 50%,#ac247c 85%,#b648b3 100%); } .sHead__spmenu { padding: calc(47/750*100%) calc(23/750*100%);} .sHead__spmenu .sHead__spmenu__icon, .sHead__spmenu .sHead__spmenu__icon::after, .sHead__spmenu .sHead__spmenu__icon::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; height: auto; background-color: #fff; -webkit-transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .sHead__spmenu .sHead__spmenu__icon { position: relative; margin: 0 auto; padding-top: calc(6/54*100%); } .sHead__spmenu .sHead__spmenu__icon:after, .sHead__spmenu .sHead__spmenu__icon:before { position: absolute; top: 0; left: 0; content: ''; height: 100%; } .sHead__spmenu .sHead__spmenu__icon:before { margin-top: calc(-14/54*100%); } .sHead__spmenu .sHead__spmenu__icon:after { margin-top: calc(14/54*100%); } .sHead__spmenu.active .sHead__spmenu__icon { background-color: transparent;} .sHead__spmenu.active .sHead__spmenu__icon:after, .sHead__spmenu.active .sHead__spmenu__icon:before { margin-top: 0; } .sHead__spmenu.active .sHead__spmenu__icon:before { -webkit-transform: rotate(45deg); transform: rotate(135deg); width: 100%; left: 0; } .sHead__spmenu.active .sHead__spmenu__icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-135deg); width: 100%; left: 0; } /* .sHead__gnav -------------------------------------------------------- */ .sHead__gnav__wrap { position: absolute; top: 0; right: 0; width: calc(460/750*100%); height: 100vh; padding: calc(130/750*100%) 0 calc(50/750*100%); z-index: 1; } .sHead__gnav { position: relative; width: 100%; } .gnavList { width: calc(460/460*100%); margin: auto; display: flex; flex-direction: column; } .gnavList .gL__btn { margin: 0 0 calc(30/460*100%) auto; position: relative; width: 100%; } .gnavList .gL__btn:last-child { margin-bottom: 0; } .gnavList .gL__btn img { vertical-align: bottom; position: relative; } .gnavList .gL__btn .btn { display: flex; position: relative; justify-content: center;} .gnavList .gL__btn.current .btn { display: flex; position: relative; background: #ac175d; } @media screen and (max-width: 640px) { .sHead__gnav__wrap { background: rgba(96,34,188,0.9); box-shadow: -3px 0px 50px 0px #000; -webkit-box-shadow: -3px 0px 50px 0px #000; -ms-box-shadow: -3px 0px 50px 0px #000; } .sHead__gnav__wrap { visibility: hidden; opacity: 0; transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1.0); transform-origin: top center; transform: translateX(100%); } .open .sHead__gnav__wrap{ visibility: visible; opacity: 1; transform: translateX(0%);} } @media screen and (min-width: 641px) { .sHead__logo { display: none; } .sHead__spmenu { display: none; } .sHead__gnav__wrap { left: 50%; transform: translateX(-50%); right: inherit; width: calc(1400/1400*100%); height: auto; padding: 0; } .gnavList { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; flex-direction: row; } .gnavList .gL__btn { margin: 0 calc(5/1920*100%); width: auto; } .gnavList .gL__btn:last-child { margin-bottom: 0; } .gnavList .gL__btn .btn { display: block; } .gnavList .gL__btn.current .btn { display: block; background: none; } .gnavList .gL__btn .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .gnavList .gL__btn.gnb0 .btn::before { background: url(/images/gnav/btn0_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb1 .btn::before { background: url(/images/gnav/btn1_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb2 .btn::before { background: url(/images/gnav/btn2_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb3 .btn::before { background: url(/images/gnav/btn3_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb6 .btn::before { background: url(/images/gnav/btn6_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb4 .btn::before { background: url(/images/gnav/btn4_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb5 .btn::before { background: url(/images/gnav/btn5_bg_pc.png) center top no-repeat; } .gnavList .gL__btn.gnb0 .btn::before , .gnavList .gL__btn.gnb1 .btn::before , .gnavList .gL__btn.gnb2 .btn::before , .gnavList .gL__btn.gnb3 .btn::before, .gnavList .gL__btn.gnb6 .btn::before , .gnavList .gL__btn.gnb4 .btn::before , .gnavList .gL__btn.gnb5 .btn::before { background-size: 100%; background-position: center 100%; opacity: 0; } .gnavList .gL__btn.current .btn::before { opacity: 1; } .gnavList .gL__btn:not(.current) .btn::before { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: .2s cubic-bezier(.65,.01,.4,2.6); transition: .2s cubic-bezier(.65,.01,.4,2.6); backface-visibility: hidden; pointer-events : auto; transform-origin: top; } .gnavList .gL__btn .btn:hover::before { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; } } @media screen and (min-width: 1401px) { /*.sHead__gnav__wrap { width: 1400px; }*/ } @media screen and (min-width: 1921px) { .sHead__gnav__wrap { width: 1920px; } } /* ---------------------------------------------------------------------------------------------------------------- COMMON ---------------------------------------------------------------------------------------------------------------- */ .secMainHead { padding: calc(95/750*100%) 0 0; } .pagettl { width: 100%; margin: 0 auto; text-align: center; } .secMain , .secMain2 { position: relative; padding-bottom: calc(200/750*100%); } .flexbox { position: relative; } @media screen and (min-width: 641px) { .secMainHead { padding: calc(87/1400*100%) 0 0; } .pagettl { width: calc(750/1240*100%); } .secMain , .secMain2 { padding-bottom: calc(50/1920*100%); } .flexbox { display: -webkit-flex; display: flex; } } @media screen and (min-width: 1401px) { .secMainHead { padding: 87px 0 0; } .secMain , .secMain2 { padding-bottom: 50px; } } section { color: #FFFFFF; } /* -------------------------------------------------------- #prologue -------------------------------------------------------- */ #prologue .secHero { position: relative; } #prologue .secHero .bg { position: relative; } #prologue .secHero .bg .bg1 { position: absolute; top: 0; left: 0; opacity: 0.1; width: 100%; } #prologue .secHero .bg .bg2 { position: relative; opacity: 0; width: 100%; } #prologue .secHero .bg .bg3 { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; } #prologue .secHero .secInner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #prologue .scene { width: 100%; position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;} #prologue .sentence_text_wrap { position: relative; width: 100%; margin-bottom: 0; margin: 5px 0; } #prologue .sentence_text { width: 100%; text-align: center;} #prologue .scene .blur { width: 100%; top: 0; left: 0; opacity: 0; } #prologue .scene.s2 .sentence_text_wrap:nth-child(2)::before { padding-top: calc(166/750*100%);} #prologue .btn_skip { width: calc(228/750*100%); position: absolute; bottom: 0; left: 50%; margin-bottom: calc(36/750*100%); margin-left: calc(-114/750*100%); } @media screen and (max-width: 640px) { #prologue .secHero .bg .bg3 { left: 50%; margin-left: -50%; width: calc(1920/750*100%); max-width: none; } } @media screen and (min-width: 641px) { #prologue .secHero .bg { width: calc(1920/1400*100%); left: 50%; margin-left: calc(-960/1400*100%); } #prologue .secHero .secInner { left: 50%; margin-left: calc(-700/1400*100%);} #prologue .scene { padding: 0 30%; } #prologue .btn_skip { width: calc(228/1400*100%); margin-bottom: calc(46/1400*100%); margin-left: calc(-114/1400*100%); } } @media screen and (min-width: 1401px) { #prologue .secHero .bg { width: 1920px; margin-left: -960px; } #prologue .secHero .secInner { width: 1400px; margin-left: -700px;} #prologue .sentence_text img { width: 740px; } } /* -------------------------------------------------------- #toppage -------------------------------------------------------- */ #toppage.main { overflow: hidden;} /*#toppage { transform-style: preserve-3d; perspective: 1000px; }*/ /* #toppage > common -------------------------------------------------------- */ #toppage .basicFrame { display: block; } #toppage .basicFrame .bF__frame { display: block; width: 100%; position: relative; }/* 449px 前提 */ #toppage .basicFrame .bF__frame .bF__fr__thumb { background: url(/images/movie/thumbnail_sp.png) center center no-repeat; background-size: cover; position: relative; width: 100%; padding: calc(5/449*100%) calc(9/449*100%) calc(9/449*100%) calc(5/449*100%); } #toppage .basicFrame .bF__frame .bF__fr__thumb img { border-radius: 5px; } #toppage .basicFrame .bF__frame .bF__fr__text { display: block; margin-top: calc(-43/449*100%); margin-left: calc(23/449*100%); width: calc(404/449*100%); position: relative; background: url(/images/movie/btn_sp.png) center center no-repeat; background-size: 100%; min-height: 51px; z-index: 1; } #toppage .basicFrame .bF__frame .bF__fr__text .first-trailer { color: #FFFFFF; padding: 4% 0 0 14%; font-size: 0.7em; text-shadow: 2px 2px 4px #000000; } #toppage .basicFrame .bF__frame .bF__fr__text p { color: #FFFFFF; padding: 5% 0 0 15%; font-size: 0.7em; text-shadow: 2px 2px 4px #000000; } #toppage .swiper-controlBtn { top: 0; height: 100%; margin-top: 0; background: none; } #toppage .swiper-controlBtn::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #toppage .swiper-button-prev::after { background: url(/images/btn_prev.png) center center no-repeat; background-size: 100%; } #toppage .swiper-button-next::after { background: url(/images/btn_next.png) center center no-repeat; background-size: 100%; } #toppage .swiper-controlBtn.swiper-button-disabled { opacity: 0.2;} #toppage .swiper-button-prev { left: 0; right: auto; } #toppage .swiper-button-next { right: 0; left: auto; } @media screen and (min-width: 641px) { #toppage .basicFrame .bF__frame .bF__fr__thumb { background: url(/images/movie/thumbnail_pc.png) center center no-repeat; background-size: cover; padding: calc(5/394*100%) calc(9/449*100%) calc(9/394*100%) calc(5/394*100%); } #toppage .basicFrame .bF__frame .bF__fr__text { margin-top: calc(-30/394*100%); margin-left: calc(25/394*100%); width: calc(344/394*100%); background: url(/images/movie/btn_pc.png) center center no-repeat; background-size: 100% 100%; } #toppage .basicFrame .bF__frame .bF__fr__text::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(/images/movie/btn_on_pc.png) center center no-repeat; background-size: 100% 100%; opacity: 0;} #toppage .basicFrame .bF__frame .bF__fr__text img { margin-left: calc(4/344*100%); width: calc(272/344*100%); position: relative; } #toppage a.basicFrame:hover .bF__fr__text::before { opacity: 1; z-index: -1; } #toppage .swiper-controlBtn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #toppage .swiper-controlBtn:hover { -webkit-transform: scale(1.1); transform: scale(1.1);} } @media screen and (min-width: 1401px) { } /* #toppage > bgvideoArea -------------------------------------------------------- */ #toppage .bgvideoArea { position: fixed; left: 0; right: 0; top: 0; bottom: 0; } #toppage .bvA__player { position: absolute; } @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) { #toppage .bvA__player { width: 100%; top: 50%; transform: translateY(-50%); } } @media (max-aspect-ratio: 16/9) { #toppage .bvA__player { height: 100%; left: 50%; transform: translateX(-50%); } } #toppage .bgvideoArea .shadowBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 80%); background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 80%); opacity: 1!important; background: rgba(0,0,0,0.6); } @media screen and (min-width: 1921px) { #toppage .bgvideoArea::before , #toppage .bgvideoArea::after { content: ""; display: block; background: rgba(0,0,0,1); width: calc(50vw - 960px); height: 100%; position: absolute; top: 0; z-index: 1;} #toppage .bgvideoArea::before { left: 0; } #toppage .bgvideoArea::after { right: 0; } } /* #toppage > secHero -------------------------------------------------------- */ #toppage .secHero { position: relative; } #toppage .secHero .sH__bg { position: relative; } #toppage .secHero .sH__bg .sH__bg__bg2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #toppage .secHero .sH__cast { position: absolute; top: 0; left: 0; width: 100%; } #toppage .secHero .sH__cast .sH__cast__item { position: absolute; top: 0; } #toppage .secHero .sH__cast .sH__c-baran { width: calc(490/750*100%); left: calc(2/750*100%); margin-top: calc(103/750*100%); } #toppage .secHero .sH__cast .sH__c-cast1 { width: calc(276/750*100%); right: calc(-13/750*100%); margin-top: calc(308/750*100%); } #toppage .secHero .sH__cast .sH__c-cast2 { width: calc(391/750*100%); right: calc(-26/750*100%); margin-top: calc(448/750*100%); } #toppage .secHero .sH__cast .sH__c-cast3 { width: calc(625/750*100%); right: calc(-126/750*100%); margin-top: calc(543/750*100%); } #toppage .secHero .sH__logo { position: absolute; top: 0; left: 50%; margin-top: calc(63/750*100%); margin-left: calc(-168/750*100%); width: calc(527/750*100%); } #toppage .secHero .sH__block { background: #1d008b; position: relative; padding-top: 1px; padding-bottom: calc(90/750*100%); } #toppage .secHero .sH__release { width: 100%; position: relative; margin-top: calc(-146/750*100%); } #toppage .secHero .sH__video { width: 100%; position: relative; margin-top: calc(10/750*100%); } #toppage .secHero .sH__video .sH__video__slider__wrap { width: calc(449/750*100%); margin: 0 auto; overflow: visible; } #toppage .secHero .sH__video .swiper-controlBtn { width: calc(72/449*100%); } #toppage .secHero .sH__video .swiper-button-prev { left: calc(-124/449*100%); } #toppage .secHero .sH__video .swiper-button-next { right: calc(-124/449*100%); } #toppage .secHero .sH__banner { margin: calc(50/750*100%) auto 0; width: calc(650/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #toppage .secHero .sH__banner .sH__bnr__item { margin-left: calc(20/750*100%); width: calc(314/650*100%); } #toppage .secHero .sH__banner .sH__bnr__item:first-child { margin-left: 0; } @media screen and (max-width: 640px) { } @media screen and (min-width: 641px) { #toppage .secHero { overflow: hidden; } #toppage .secHero .sH__cast .sH__c-baran { width: calc(953/1920*100%); left: calc(100/1920*100%); margin-top: calc(8/1920*100%); } #toppage .secHero .sH__cast .sH__c-cast1 { width: calc(521/1920*100%); right: calc(134/1920*100%); margin-top: calc(9/1920*100%); } #toppage .secHero .sH__cast .sH__c-cast2 { width: calc(737/1920*100%); right: calc(110/1920*100%); margin-top: calc(273/1920*100%); } #toppage .secHero .sH__cast .sH__c-cast3 { width: calc(1182/1920*100%); right: calc(-81/1920*100%); margin-top: calc(453/1920*100%); } #toppage .secHero .sH__logo { margin-top: calc(59/1920*100%); margin-left: calc(-378/1920*100%); width: calc(760/1920*100%); } #toppage .secHero .sH__block { background: none; position: absolute; bottom: 0; width: 100%; padding-top: 0; padding-bottom: 0; } #toppage .secHero .secInner { padding-bottom: 1px; } #toppage .secHero .sH__release { width: calc(925/1300*100%); margin-left: calc(-74/1300*100%); } #toppage .secHero .sH__video { width: 100%; margin-top: calc(-11/1300*100%); margin-left: calc(73/1300*100%); margin-bottom: calc(11/1300*100%); } #toppage .secHero .sH__video .sH__video__slider__wrap { width: calc(394/1300*100%); margin: 0; } #toppage .secHero .sH__video .swiper-controlBtn { width: calc(72/394*100%); } #toppage .secHero .sH__video .swiper-button-prev { left: calc(-60/394*100%); } #toppage .secHero .sH__video .swiper-button-next { right: calc(-60/394*100%); } #toppage .secHero .sH__video .btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #toppage .secHero .sH__banner { position: absolute; bottom: 0; left: 50%; margin: 0 0 calc(8/1300*100%) calc(-127/1300*100%); width: calc(650/1300*100%); } #toppage .secHero .sH__banner .sH__bnr__item { margin-left: calc(25/650*100%); width: calc(284/650*100%); } #toppage .secHero .sH__banner .sH__bnr__item:first-child { margin-left: 0; } #toppage .secHero .sH__banner .sH__bnr__item.btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} } @media screen and (min-width: 1401px) { #toppage .secHero .stage { width: 1920px; margin-left: -960px; } } /* #toppage > secIntroduction -------------------------------------------------------- */ #toppage .secIntroduction { position: relative; padding-top: calc(50/750*100%); padding-bottom: calc(130/750*100%); text-align: center; } #toppage .secIntroduction .sIn__ttl { width: calc(552/750*100%); margin: 0 auto; } #toppage .secIntroduction .sIn__copy { width: calc(648/750*100%); margin: calc(33/750*100%) auto 0; } #toppage .secIntroduction .sIn__text { width: calc(650/750*100%); margin: calc(28/750*100%) auto 0; position: relative; } #toppage .secIntroduction .sIn__btn { width: calc(224/750*100%); margin: calc(64/750*100%) auto 0; } @media screen and (min-width: 641px) { #toppage .secIntroduction { padding-top: calc(46/1400*100%); padding-bottom: 0; } #toppage .secIntroduction .sIn__ttl { width: calc(552/1300*100%); } #toppage .secIntroduction .sIn__copy { width: calc(858/1300*100%); margin: calc(32/1300*100%) auto 0; } #toppage .secIntroduction .sIn__text { width: calc(985/1300*100%); margin: calc(44/1300*100%) auto 0; } #toppage .secIntroduction .sIn__btn { width: calc(224/1300*100%); margin: calc(38/1300*100%) auto 0; } } @media screen and (min-width: 1401px) { #toppage .secIntroduction { padding-top: 46px; } } /* #toppage > secCostume -------------------------------------------------------- */ #toppage .secCostume { position: relative; background: url(/images/costume/bg_sp.png) center top no-repeat; background-size: 100%; padding-top: 1px; padding-bottom: calc(80/750*100%); } #toppage .secCostume .sCos__ttl { width: calc(358/750*100%); margin: calc(-13/750*100%) auto 0; } #toppage .secCostume .sCos__copy { width: calc(650/750*100%); margin: calc(22/750*100%) auto 0; } #toppage .secCostume .sCos__pic { width: calc(725/750*100%); margin: calc(23/750*100%) auto 0; } #toppage .secCostume .sCos__text { width: calc(663/750*100%); margin: calc(28/750*100%) auto 0; color: #FFFFFF; text-align: center; text-shadow: 2px 2px 4px #000; } @media screen and (min-width: 641px) { #toppage .secCostume { background: url(/images/costume/bg_pc.png) center top no-repeat; background-size: cover; padding-top: calc(60/1400*100%); padding-bottom: calc(76/1400*100%); } #toppage .secCostume .sCos__ttl { width: calc(358/1300*100%); margin: 0 auto 0; } #toppage .secCostume .sCos__copy { width: calc(862/1300*100%); margin: calc(27/1300*100%) auto 0; } #toppage .secCostume .sCos__pic { width: calc(1319/1300*100%); margin: calc(31/1300*100%) 0 0 calc(-3/1300*100%); } #toppage .secCostume .sCos__text { width: calc(959/1300*100%); margin: calc(36/1300*100%) auto 0; } } @media screen and (min-width: 1401px) { #toppage .secCostume { background-size: 1920px; padding-top: 60px; padding-bottom: 76px; } } /* #toppage > secStory -------------------------------------------------------- */ #toppage .secStory { position: relative; background: url(/images/story/bg_sp.jpg) center top no-repeat; background-size: cover; padding-top: calc(48/750*100%); padding-bottom: calc(100/750*100%); } #toppage .secStory .sSto__ttl { width: calc(301/750*100%); margin: 0 auto; } #toppage .secStory .sSto__copy { width: calc(508/750*100%); margin: calc(40/750*100%) 0 0 calc(50/750*100%); } #toppage .secStory .sSto__text { width: calc(669/750*100%); margin: calc(27/750*100%) 0 0 calc(48/750*100%); color: #FFFFFF; text-align: center; text-shadow: 2px 2px 4px #000; } #toppage .secStory .sSto__piclist { width: calc(650/750*100%); margin: calc(35/750*100%) auto 0; } #toppage .secStory .sSto__piclist .sSto__pl__item { width: calc(394/650*100%); position: relative; } #toppage .secStory .sSto__piclist .sSto__pl__item .sSto__pl__i__btn { display: block; background: url(/images/story/btn.png) center center no-repeat; background-size: cover; padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #toppage .secStory .sSto__piclist .sSto__pl__item .sSto__pl__i__btn .sSto__pl__i__thumb { display: block; vertical-align: top; border-radius: 5px;} #toppage .secStory .sSto__piclist .sSto__pl-p1 { margin-left: calc(40/650*100%); } #toppage .secStory .sSto__piclist .sSto__pl-p2 { margin-top: calc(-48/650*100%); margin-left: calc(260/650*100%); } #toppage .secStory .sSto__piclist .sSto__pl-p3 { margin-top: calc(-39/650*100%); } #toppage .secStory .sSto__btn { width: calc(224/750*100%); margin-top: calc(-73/750*100%); margin-left: calc(480/750*100%); } @media screen and (min-width: 641px) { #toppage .secStory { background: url(/images/story/bg_pc.jpg) center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(50/1400*100%); padding-bottom: calc(170/1400*100%); } #toppage .secStory .sSto__ttl { width: calc(301/1300*100%); } #toppage .secStory .sSto__copy { width: calc(672/1300*100%); margin: calc(20/1300*100%) 0 0 calc(31/1300*100%); } #toppage .secStory .sSto__text { width: calc(652/1300*100%); margin: calc(12/1300*100%) 0 0 calc(29/1300*100%); } #toppage .secStory .sSto__piclist { width: calc(394/1300*100%); position: absolute; top: 0; right: 0; margin: calc(64/1300*100%) calc(80/1300*100%) 0 0; } #toppage .secStory .sSto__piclist .sSto__pl__item { width: 100%; } #toppage .secStory .sSto__piclist .sSto__pl-p1 { margin-left: 0; } #toppage .secStory .sSto__piclist .sSto__pl-p2 { margin-top: calc(-28/394*100%); margin-left: calc(-111/394*100%); } #toppage .secStory .sSto__piclist .sSto__pl-p3 { margin-top: calc(-29/394*100%); margin-left: calc(54/394*100%); } #toppage .secStory .sSto__piclist .btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #toppage .secStory .sSto__btn { width: calc(224/1300*100%); margin-top: calc(46/1300*100%); margin-left: calc(30/1300*100%); } } @media screen and (min-width: 1401px) { #toppage .secStory { background-size: 1920px; padding-top: 58px; padding-bottom: 350px; } } /* #toppage > secCast -------------------------------------------------------- */ #toppage .secCast { position: relative; padding-top: 1px; padding-bottom: calc(35/750*100%); background: -webkit-linear-gradient(top, #0d6b9f 0%,#361a93 100%); background: linear-gradient(to bottom, #0d6b9f 0%,#361a93 100%); } #toppage .secCast .sCast__ttl { width: calc(258/750*100%); margin: calc(-41/750*100%) auto 0; } #toppage .secCast .sCast__castlist { width: calc(650/750*100%); margin: calc(22/750*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secCast .sCast__castlist .sCast__cl__item { position: relative; width: calc(318/650*100%); } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn { display: block; width: 100%; height: 0; padding-top: 100%; position: relative; z-index: 9; border-radius: 100%; } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn img { display: none; } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn__img { position: absolute; top: 0; left: 0; max-width: none; } #toppage .secCast .sCast__castlist .sCast__cl-c1 { margin-left: calc(-4/650*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c1 .sCast__cl__i__btn__img { width: calc(344/318*100%); margin-top: calc(-16/318*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c2 { margin-right: calc(-4/650*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c2 .sCast__cl__i__btn__img { width: calc(354/318*100%); margin-top: calc(-27/318*100%); margin-left: calc(-10/318*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c3 { margin-top: calc(41/650*100%); margin-right: calc(166/650*100%); margin-left: calc(166/650*100%); z-index: 3; } #toppage .secCast .sCast__castlist .sCast__cl-c3 .sCast__cl__i__btn__img { width: calc(351/318*100%); margin-top: calc(-102/318*100%); margin-left: calc(-7/318*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c4 { margin-top: calc(11/650*100%); margin-left: calc(-4/650*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c4 .sCast__cl__i__btn__img { width: calc(346/318*100%); margin-top: calc(-9/318*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c5 { margin-top: calc(11/650*100%); margin-right: calc(-6/650*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c5 .sCast__cl__i__btn__img { width: calc(334/318*100%); margin-top: 0; } @media screen and (min-width: 641px) { #toppage .secCast { padding-top: 1px; padding-bottom: calc(38/1400*100%); } #toppage .secCast .sCast__ttl { width: calc(258/1300*100%); margin: calc(-41/1300*100%) auto 0; } #toppage .secCast .sCast__castlist { width: 100%; margin: calc(50/1300*100%) auto 0; -webkit-justify-content: center; justify-content: center; } #toppage .secCast .sCast__castlist .sCast__cl__item { width: calc(400/1300*100%); } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn { overflow: hidden; } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn img { display: block; position: absolute; top: 0;left: 0; width: 100%; opacity: 0; border-radius: 100%;} #toppage .secCast .sCast__castlist .sCast__cl__item::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/cast/btn_on_bg.png); background-size: cover; opacity: 0; } #toppage .secCast .sCast__castlist .sCast__cl__item { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn img { -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #toppage .secCast .sCast__castlist .sCast__cl__item , #toppage .secCast .sCast__castlist .sCast__cl__item::before , #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn img { pointer-events: none; } #toppage .secCast .sCast__castlist .sCast__cl__item:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #toppage .secCast .sCast__castlist .sCast__cl__item:hover::before { opacity: 1; } #toppage .secCast .sCast__castlist .sCast__cl__item:hover .sCast__cl__i__btn img { opacity: 1; } #toppage .secCast .sCast__castlist .sCast__cl__item .sCast__cl__i__btn { pointer-events: auto; } #toppage .secCast .sCast__castlist .sCast__cl-c1 { margin-left: calc(100/1300*100%); margin-right: calc(12/1300*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c1 .sCast__cl__i__btn__img { width: calc(420/400*100%); margin-top: calc(-16/400*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c2 { margin-left: calc(12/1300*100%); margin-right: calc(100/1300*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c2 .sCast__cl__i__btn__img { width: calc(426/400*100%); margin-top: calc(-28/400*100%); margin-left: calc(-7/400*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c3 { margin-top: calc(-14/1300*100%); margin-left: 0; margin-right: calc(12/1300*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c3 .sCast__cl__i__btn__img { width: calc(425/400*100%); margin-top: calc(-120/400*100%); margin-left: calc(-5/400*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c4 { margin-top: calc(-14/1300*100%); margin-left: calc(12/1300*100%); margin-right: calc(12/1300*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c4 .sCast__cl__i__btn__img { width: calc(427/400*100%); margin-top: calc(-6/400*100%); } #toppage .secCast .sCast__castlist .sCast__cl-c5 { margin-top: calc(-14/1300*100%); margin-left: calc(12/1300*100%); margin-right: 0; } #toppage .secCast .sCast__castlist .sCast__cl-c5 .sCast__cl__i__btn__img { width: calc(422/400*100%); margin-top: 0; } } @media screen and (min-width: 1401px) { #toppage .secCast { padding-bottom: 38px; } } /* #toppage > secChapter -------------------------------------------------------- */ #toppage .secChapter { position: relative; background: #080506 url(/images/chapter/bg_sp.jpg) center top no-repeat; background-size: cover; padding-top: calc(50/750*100%); padding-bottom: 80px; } #toppage .secChapter .sChp__ttl {width: calc(630/750*100%); margin: calc(-41/750*100%) auto 0; } #toppage .sChp__chaptermenu__wraper { width: calc(1350/750*100%); height: 0; padding-top: calc(650/750*100%); margin: calc(40/750*100%) 0 0 calc(-300/750*100%); position: relative; } #toppage .sChp__chaptermenu__wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #toppage .sChp__chaptermenu { width: 100%; height: 100%; position: relative; } #toppage .sChp__chaptermenu .sChp__chpm__item { width: calc(330/1350*100%); height: 100%; } #toppage .sChp__chaptermenu .sChp__chpm__item .btn { display: block; position: relative; -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #toppage .sChp__chaptermenu .sChp__chpm__item .btn .text { opacity: 0; filter: blur(0); -webkit-filter: blur(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn { -webkit-transform: scale(1.3); transform: scale(1.3); } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span { display: block; position: relative; border-left: 2px solid #8c6805; border-right: 2px solid #8c6805; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span img { display: block; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::before , #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::after { content: ""; display: block; width: calc(100% + 4px); height: 2px; position: absolute; left: -2px; background: #f8c008; background: -webkit-linear-gradient(left, #8c6805 0%,#f8c008 50%,#8c6805 100%); background: linear-gradient(to right, #8c6805 0%,#f8c008 50%,#8c6805 100%); } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::before { top: 0; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::after { bottom: 0; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn .text { opacity: 1; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .btn { width: 30%; height: 80%; position: absolute; top: 0; z-index: 5000; opacity: 0.8; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .next { right: 0; background: url(/images/btn_next.png) center left no-repeat; background-size: 20%; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .prev { left: 0; background: url(/images/btn_prev.png) center right no-repeat; background-size: 20%; } @media screen and (min-width: 641px) { #toppage .secChapter { background: #080506 url(/images/chapter/bg_pc.jpg) center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(56/1400*100%); padding-bottom: calc(56/1400*100%); } #toppage .secChapter .sChp__ttl { width: calc(650/1300*100%); margin: calc(-20/750*100%) auto 0; } #toppage .sChp__chaptermenu__wraper { max-width: 1920px; width: calc(1600/1300*100%); padding-top: calc(700/1300*100%); margin: calc(40/1300*100%) 0 0 calc(-150/1300*100%); } #toppage .sChp__chaptermenu .sChp__chpm__item { width: calc(340/1600*100%); } #toppage .sChp__chaptermenu .roundabout-in-focus .btn { -webkit-transform: scale(1.45); transform: scale(1.45); } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span { border-left: 5px solid #8c6805; border-right: 5px solid #8c6805; } #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::before , #toppage .sChp__chaptermenu .roundabout-in-focus .btn span::after { width: calc(100% + 10px); height: 5px; left: -5px; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .btn { width: calc(140/1600*100%); height: 100%; opacity: 0.8; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .next { right: calc(50/1600*100%); background-size: 50%; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .prev { left: calc(50/1600*100%); background-size: 50%; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .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; } #toppage .sChp__chaptermenu__wrap .sChp__chaptermenu__navi .btn:hover { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (min-width: 1401px) { #toppage .secChapter { background-size: 1920px; padding-top: 56px; padding-bottom: 56px; } } /* #toppage > secMovie -------------------------------------------------------- */ #toppage .secMovie { position: relative; padding-top: calc(97/750*100%); padding-bottom: calc(50/750*100%); } #toppage .secMovie .sMov__ttl { width: calc(301/750*100%); margin: calc(-41/750*100%) auto 0; } #toppage .secMovie .sMov__movielist { width: calc(550/750*100%); position: relative; margin: calc(20/750*100%) auto 0; } #toppage .secMovie .sMov__movielist .sMov__movie__slider__wrap { width: 100%; margin: 0 auto; overflow: visible; } #toppage .secMovie .sMov__movielist .swiper-controlBtn { width: calc(72/550*100%); } #toppage .secMovie .sMov__movielist .swiper-button-prev { left: calc(-74/550*100%); } #toppage .secMovie .sMov__movielist .swiper-button-next { right: calc(-74/550*100%); } @media screen and (min-width: 641px) { #toppage .secMovie { padding-top: calc(62/1400*100%); padding-bottom: calc(67/1400*100%); } #toppage .secMovie .sMov__ttl { width: calc(301/1300*100%); margin: 0 auto 0; } #toppage .secMovie .sMov__movielist { width: calc(1244/1300*100%); margin: calc(24/1300*100%) auto 0; } #toppage .secMovie .sMov__movielist.type2 { width: calc(819/1300*100%); margin: calc(24/1300*100%) auto 0; } #toppage .secMovie .sMov__movielist .btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #toppage .secMovie .sMov__movielist .swiper-controlBtn { width: calc(346/1244*100%) ;} #toppage .secMovie .sMov__movielist .swiper-button-prev { right: 50%; margin-right: calc(614/1244*100%); left: auto; transform-origin: right; } #toppage .secMovie .sMov__movielist .swiper-button-next { left: 50%; margin-left: calc(614/1244*100%); transform-origin: left; } #toppage .secMovie .sMov__movielist .swiper-button-prev::after { background-size: calc(72/346*100%); background-position: center right; } #toppage .secMovie .sMov__movielist .swiper-button-next::after { background-size: calc(72/346*100%); background-position: center left; } #toppage .secMovie .sMov__movielist.type2 .swiper-controlBtn { width: calc(346/819*100%) ;} #toppage .secMovie .sMov__movielist.type2 .swiper-button-prev { right: 50%; margin-right: calc(394/819*100%); left: auto; transform-origin: right; } #toppage .secMovie .sMov__movielist.type2 .swiper-button-next { left: 50%; margin-left: calc(394/819*100%); transform-origin: left; } } @media screen and (min-width: 1401px) { #toppage .secMovie { padding-top: 62px; padding-bottom: 67px; } } /* #toppage > secStore -------------------------------------------------------- */ #toppage .secStore { position: relative; padding-top: calc(50/750*100%); } #toppage .secStore .sStr__ttl { width: calc(296/750*100%); margin: 0 auto calc(-44/750*100%); position: relative; z-index: 10; } @media screen and (min-width: 641px) { #toppage .secStore { background: #0d6b9f; padding-top: calc(43/1400*100%); } #toppage .secStore .sStr__ttl { width: fit-content; margin: 0 auto; } } @media screen and (min-width: 1401px) { #toppage .secStore { padding-top: 43px; } } /* #toppage > secStore > sStr__blockT -------------------------------------------------------- */ #toppage .secStore .sStr__blockT { position: relative; padding-top: calc(72/750*100%); padding-bottom: calc(100/750*100%); background: -webkit-linear-gradient(top, #0d6b9f 0%,#361a93 100%); background: linear-gradient(to bottom, #0d6b9f 0%,#361a93 100%); } #toppage .secStore .sStr__selectbtnList { width: 100%; margin: 0 auto 0; border-bottom: 1px solid #be8e49; padding: 0 0 calc(10/750*100%); position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #toppage .secStore .sStr__selectbtnList::before , #toppage .secStore .sStr__selectbtnList::after { content: ""; display: block; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; } #toppage .secStore .sStr__selectbtnList::after { background: #6022bc; padding-top: calc(5/750*100%); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.6); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item { width: calc(159/750*100%); margin: 0 calc(3/750*100%); cursor: pointer; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.cs { cursor: auto; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:nth-child(n+4) { margin-top: calc(6/750*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:first-child { margin-left: calc(100/750*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:nth-child(3) { margin-right: calc(100/750*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item .btn { display: block; position: relative; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item .btn img { position: relative; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.cs .btn img { opacity: 0.6; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(/images/store/tab/btn_sp.png), url(/images/store/tab/btn_on_sp.png); background-repeat: no-repeat; background-size: 100%; background-position: center top, center 100px; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.cs .btn::before { background-image: url(/images/store/tab/btn_cs_sp.png); background-repeat: no-repeat; background-size: 100%; background-position: center top; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.current .btn::before { background-position: center 100px, center top; } #toppage .secStore .sStr__productsSlider__wrap { width: calc(650/750*100%); margin: 0 auto; padding-top: calc(46/750*100%); } #toppage .secStore .sStr__pS__detail { width: 100%; margin: 0 auto; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__ttl { width: 100%; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__pkg { width: 100%; margin-top: calc(37/650*100%); display: flex; justify-content: center; align-items: center; flex-direction: column;} #toppage .secStore .sStr__pS__detail .sStr__pS__de__pkg .notes { display: block; width: 100%; margin-top: 0.5em; font-size: calc(19/750*100vw); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__boxset { width: 100%; margin-top: calc(45/650*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box { width: 100%; margin-top: calc(45/650*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box:first-child { margin-top: 0; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box__price { width: 100%; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box__btn { width: 100%; margin-top: calc(14/650*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box__btn .btn { width: calc(654/650*100%); } @media screen and (min-width: 641px) { #toppage .secStore .sStr__blockT { padding-top: calc(37/1400*100%); padding-bottom: calc(100/1400*100%); } #toppage .secStore .sStr__selectbtnList { margin: 0 auto; padding: 0 0 calc(5/1400*100%); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #toppage .secStore .sStr__selectbtnList::before { background: #3581e1; padding-top: calc(25/1400*100%); } #toppage .secStore .sStr__selectbtnList::after { background: #6022bc; padding-top: calc(5/1400*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item { width: calc(171/1400*100%); margin: 0 calc(4/1400*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:nth-child(n+4) { margin-top: 0; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:first-child { margin-left: calc(4/1400*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:nth-child(3) { margin-right: calc(4/1400*100%); } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item .btn::before { background-image: url(/images/store/tab/btn_pc.png), url(/images/store/tab/btn_on_pc.png); background-repeat: no-repeat; background-size: 100%; background-position: center top, center 200px; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.cs .btn::before { background-image: url(/images/store/tab/btn_cs_pc.png); background-repeat: no-repeat; background-size: 100%; background-position: center top; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item.current .btn::before { background-position: center 200px, center top; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:not(.current):not(.cs) .btn:hover::before { background-position: center 200px, center top; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item .btn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: transform .1s ease-in-out; transition: transform .1s ease-in-out; backface-visibility: hidden; pointer-events : auto; transform-origin: bottom; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item:not(.current):not(.cs) .btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #toppage .secStore .sStr__productsSlider__wrap { width: calc(1240/1300*100%); padding-top: calc(60/1300*100%); overflow: visible; } #toppage .secStore .sStr__pS__detail { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__ttl { width: calc(600/1240*100%); position: absolute; top: 0; right: 0; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__pkg { width: calc(600/1240*100%); margin-top: 0; margin-right: calc(40/1240*100%); display: flex; justify-content: center; align-items: center; flex-direction: column; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__pkg .notes { position: absolute; left: 0; bottom: 0; margin-bottom: -1.5em; font-size: 0.92857vw; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__boxset { width: calc(600/1240*100%); margin-top: 90px; margin-bottom: calc(-4/1240*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box { margin-top: calc(39/600*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box:first-child { margin-top: 0; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box__btn { margin-top: calc(15/600*100%); } #toppage .secStore .sStr__pS__detail .sStr__pS__de__box__btn .btn { width: calc(604/600*100%); } } @media screen and (min-width: 1401px) { #toppage .secStore .sStr__blockT { padding-top: 37px; padding-bottom: 100px; } #toppage .secStore .sStr__selectbtnList { margin: 3px auto 0; padding: 0 0 5px; } #toppage .secStore .sStr__selectbtnList::before { padding-top: 25px; } #toppage .secStore .sStr__selectbtnList::after { padding-top: 5px; } #toppage .secStore .sStr__selectbtnList .sStr__sbL__item { width: 171px; margin: 0 4px; } #toppage .secStore .sStr__pS__detail .sStr__pS__de__pkg .notes { font-size: 1.3rem; } } /* #toppage > secStore > sStr__blockB.sStr__estore -------------------------------------------------------- */ #toppage .secStore .sStr__blockB.sStr__estore { position: relative; padding-top: 1px; padding-bottom: calc(90/750*100%); background: -webkit-linear-gradient(top, #42001e 0%,#780024 50%); background: linear-gradient(to bottom, #42001e 0%,#780024 50%); } #toppage .secStore .sStr__estore .sStr__estore__hl { width: calc(650/750*100%); margin: calc(-23/750*100%) auto 0; position: relative; } #toppage .secStore .sStr__estore .sStr__estore__catchcopy { width: calc(658/750*100%); margin: calc(31/750*100%) auto 0; text-align: center;} #toppage .secStore .sStr__estore .flexbox { margin: calc(59/750*100%) auto 0; width: calc(650/750*100%); } #toppage .secStore .sStr__estore .sStr__estore__ttl { width: 100%; margin: 0 auto 0; } #toppage .secStore .sStr__estore .sStr__estore__pkg { width: 100%; margin: calc(39/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__detail { width: 100%; margin: calc(60/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__detail .sStr__estore__de__item { margin: calc(30/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__box { width: 100%; margin: calc(27/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__price { width: calc(600/650*100%); margin: 0 0 0 auto; } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__price:lang(en-au) { width: calc(600/650*100%); margin: 0 0 0 auto; text-align: right; } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__price:lang(en-nz) { width: calc(600/650*100%); margin: 0 0 0 auto; text-align: right; } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__btn { width: calc(654/650*100%); margin: calc(35/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__notesBlock { width: calc(650/750*100%); margin: calc(30/650*100%) auto 0; font-size: calc(19/750*100vw); } #toppage .secStore .sStr__estore .sStr__estr__nB__dt { width: 100%; } #toppage .secStore .sStr__estore .sStr__estr__nB__dd { width: 100%; margin: 0.5em auto 0; } #toppage .secStore .sStr__estore .sStr__estr__nB__dd li { text-indent: -1em; padding-left: 1em; line-height: 1.41; margin-top: 0.3em; } #toppage .secStore .sStr__estore .sStr__estore__notesList { width: calc(650/750*100%); margin: calc(20/650*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estr__nL__item { text-indent: -1em; padding-left: 1em; line-height: 1.41; margin-top: 0.3em; font-size: calc(19/750*100vw); } @media screen and (min-width: 641px) { #toppage .secStore .sStr__blockB.sStr__estore { padding-bottom: calc(50/1400*100%); } #toppage .secStore .sStr__estore .sStr__estore__hl { width: calc(640/1300*100%); margin: calc(-23/1300*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__catchcopy { width: calc(1110/1300*100%); margin: calc(29/1300*100%) auto 0; text-align: center;} #toppage .secStore .sStr__estore .flexbox { margin: calc(30/1300*100%) auto 0; width: calc(1240/1300*100%); -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secStore .sStr__estore .sStr__estore__ttl { width: calc(600/1240*100%); margin: 0; } #toppage .secStore .sStr__estore .sStr__estore__pkg { width: calc(600/1240*100%); margin: 0; } #toppage .secStore .sStr__estore .sStr__estore__detail { width: calc(600/1240*100%); margin: calc(-240/1240*100%) 0 0; } #toppage .secStore .sStr__estore .sStr__estore__detail .sStr__estore__de__item { margin: calc(15/600*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__detail .sStr__estore__de__item:first-child { margin: calc(20/600*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__box { width: calc(600/1240*100%); margin: calc(27/1240*100%) 0 0; align-self: flex-end; } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__price { width: calc(490/600*100%); } #toppage .secStore .sStr__estore .sStr__estore__box .sStr__estore__btn { width: calc(604/600*100%); margin: calc(16/600*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estore__notesBlock { width: calc(1240/1300*100%); margin: calc(25/1300*100%) auto 0; font-size: 0.92857vw; } #toppage .secStore .sStr__estore .sStr__estore__notesList { width: calc(1240/1300*100%); margin: calc(15/1300*100%) auto 0; } #toppage .secStore .sStr__estore .sStr__estr__nL__item { font-size: 0.92857vw; } } @media screen and (min-width: 1401px) { #toppage .secStore .sStr__blockB.sStr__estore { background-size: 1920px; padding-bottom: 50px; } #toppage .secStore .sStr__estore .sStr__estore__notesBlock , #toppage .secStore .sStr__estore .sStr__estr__nL__item { font-size: 1.3rem; } } /* #toppage > secSpec -------------------------------------------------------- */ #toppage .secSpec { position: relative; padding-top: calc(60/750*100%); padding-bottom: calc(100/750*100%); background: -webkit-linear-gradient(top, #195093 0%,#2d2997 100%); background: linear-gradient(to bottom, #195093 0%,#2d2997 100%); } #toppage .secSpec .secInner { color: #FFFFFF; } #toppage .secSpec .sSpec__wrap { width: calc(650/750*100%); margin: 0 auto; } #toppage .secSpec .sSpec__wrap .sSpec__w__item { position: relative; } #toppage .secSpec .sSpec__logo { width: calc(473/650*100%); margin: 0 auto; } #toppage .secSpec .sSpec__ttl { width: calc(329/650*100%); margin: calc(11/650*100%) 0 0 calc(-2/650*100%); font-weight: 100; } #toppage .secSpec .sSpec__list { width: 100%; margin-top: calc(34/650*100%); font-size: initial; } #toppage .secSpec .sSpec__list > li { margin-bottom: calc(20/650*100%); } #toppage .secSpec .sSpec__list > li:last-child { margin-bottom: 0; } #toppage .secSpec .sSpec__list > li dl { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #toppage .secSpec .sSpec__list > li dl { font-size: calc(22/750*100vw); } #toppage .secSpec .sSpec__list > li dt { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: center; } #toppage .secSpec .sSpec__list > li dt { min-width: 100px; padding: 6px 10px 3px 10px; text-align: left; background: #4d23e8; border-radius: 3px; box-shadow:0px 0px 3px 0px rgba(87,66,241,0.8) inset, 0px 0px 8px 0px rgba(255,255,255,0.2) inset; font-size: initial; } #toppage .secSpec .sSpec__list > li dt span { display: block; font-size: 0.8em;} #toppage .secSpec .sSpec__list > li dd { width: calc(470/650*100%); padding: 6px 10px 3px 10px; line-height: 1.41; font-size: initial;} #toppage .secSpec .sSpec__notesList { margin-top: calc(30/650*100%); } #toppage .secSpec .sSpec__notesList .sSpec__nL__item { text-indent: -1em; padding-left: 1em; font-size: 0.8em; line-height: 1.41;} @media screen and (min-width: 641px) { #toppage .secSpec { padding-top: calc(50/1400*100%); padding-bottom: calc(70/1400*100%); } #toppage .secSpec .sSpec__wrap { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #toppage .secSpec .sSpec__wrap .sSpec__w__item:last-child { width: calc(850/1300*100%); } #toppage .secSpec .sSpec__logo { width: calc(413/1300*100%); margin: calc(54/1300*100%) 0 0 calc(16/1300*100%); } #toppage .secSpec .sSpec__ttl { width: calc(265/850*100%); margin: 0 0 0 calc(-2/850*100%); font-weight: 100; } #toppage .secSpec .sSpec__list { margin-top: calc(24/850*100%); } #toppage .secSpec .sSpec__list > li { margin-bottom: calc(14/850*100%); } #toppage .secSpec .sSpec__list > li:last-child { margin-bottom: 0; } #toppage .secSpec .sSpec__list > li dl { font-size: 1.0714vw; } #toppage .secSpec .sSpec__list > li dd { width: calc(730/850*100%); padding: 6px 10px 3px 1.4rem; } #toppage .secSpec .sSpec__notesList { margin-top: calc(16/850*100%); } } @media screen and (min-width: 1401px) { #toppage .secSpec { padding-top: 57px; padding-bottom: 40px; } #toppage .secSpec .sSpec__list > li dl { font-size: 1.5rem; } #toppage .secSpec .sSpec__notesList .sSpec__nL__item { font-size: 1.2rem; } } /* #toppage > secBalanCompany -------------------------------------------------------- */ #toppage .secBalanCompany { position: relative; background: #0a061f; padding-top: 1px; padding-bottom: calc(150/750*100%);} #toppage .secBalanCompany .sBC__ttl { background: #fff; padding: calc(10/750*100%) calc(20/750*100%); margin-top: calc(-15/750*100%); margin-left: calc(50/750*100%); width: calc(436/750*100%); } #toppage .secBalanCompany .sBC__block { position: relative; margin-top: calc(40/750*100%); width: 100%; } #toppage .secBalanCompany .sBC__logo { position: relative; margin: 0 auto; width: calc(119/750*100%); } #toppage .secBalanCompany .sBC__logo .sBC__logo__blink { display: block; position: absolute; top: 0; left: calc(34/119*100%); margin-top: calc(77/119*100%); width: calc(44/119*100%); } #toppage .secBalanCompany .sBC__logo .sBC__logo__blink img { display: block; vertical-align: top; } #toppage .secBalanCompany .sBC__logo .sBC__logo__blink .sBC__l__b-b1 { opacity: 0; } #toppage .secBalanCompany .sBC__logo .sBC__logo__blink .sBC__l__b-b2 { opacity: 0; position: absolute; top: 0; left: 0;} #toppage .secBalanCompany .sBC__text { position: relative; margin: calc(55/750*100%) auto 0; width: calc(650/750*100%); color: #FFFFFF; text-shadow: 2px 2px 4px #000; } @media screen and (min-width: 641px) { #toppage .secBalanCompany { padding-bottom: calc(40/1400*100%);} #toppage .secBalanCompany .sBC__ttl { padding: calc(12/1300*100%) calc(30/1300*100%); margin-top: calc(-20/1300*100%); margin-left: calc(40/1300*100%); width: calc(325/1300*100%); } #toppage .secBalanCompany .sBC__block { margin-top: calc(25/1300*100%); } #toppage .secBalanCompany .sBC__block { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; align-items: center; } #toppage .secBalanCompany .sBC__logo { width: calc(101/1300*100%); margin: 0 0 0 calc(165/1300*100%); } #toppage .secBalanCompany .sBC__logo .sBC__logo__blink { margin-top: calc(76/119*100%); } #toppage .secBalanCompany .sBC__text { margin: 0 0 0 calc(115/1300*100%); width: calc(796/1300*100%); } } @media screen and (min-width: 1401px) { #toppage .secBalanCompany { padding-bottom: 170px;} } /* ---------------------------------------------------------------------------------------------------------------- #SYSTEM ---------------------------------------------------------------------------------------------------------------- */ #system .bgvideoArea { position: fixed; left: 0; right: 0; top: 0; bottom: 0; } #system .bvA__player { position: absolute; opacity: 0; } @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) { #system .bvA__player { width: 100%; top: 50%; transform: translateY(-50%); } } @media (max-aspect-ratio: 16/9) { #system .bvA__player { height: 100%; left: 50%; transform: translateX(-50%); } } #system .bgvideoArea .shadowBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 1!important; } @media screen and (min-width: 1921px) { #system .bgvideoArea::before , #system .bgvideoArea::after { content: ""; display: block; background: rgba(0,0,0,1); width: calc(50vw - 960px); height: 100%; position: absolute; top: 0; z-index: 1;} #system .bgvideoArea::before { left: 0; } #system .bgvideoArea::after { right: 0; } } #system .sMH__naviBtn { width: 100%; margin: calc(16/750*100%) auto 0; border-bottom: 1px solid #be8e49; padding: calc(10/750*100%) 0 calc(10/750*100%); position: relative; background: rgba(53,129,225,0.6); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #system .sMH__naviBtn::before , #system .sMH__naviBtn::after { content: ""; display: block; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; } #system .sMH__naviBtn::after { background: #6022bc; padding-top: calc(5/750*100%); } #system .sMH__naviBtn__item { width: calc(204/750*100%); margin: 0 calc(3/750*100%); } #system .sMH__naviBtn__item:nth-child(n+4) { margin-top: calc(6/750*100%); } #system .sMH__naviBtn__item .btn { display: block; position: relative; } #system .sMH__naviBtn__item .btn img { position: relative; } #system .sMH__naviBtn__item .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-image: url(/images/system/navi/btn_sp.png), url(/images/system/navi/btn_on_sp.png); background-repeat: no-repeat; background-size: 100%; background-position: center top, center 100px; } #system .sMH__naviBtn__item.current .btn::before { background-position: center 100px, center top; } #system .navi-text { color: #e6e6ef; min-height: 56px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; text-shadow: -3px 1px 1px rgb(0 0 0 / 34%); max-width: 170px; text-align: center; } #system .sMa__hl { background: url(/images/system/hl_bg.png) center top no-repeat; background-size: 100%; width: calc(629/750*100%); margin-left: calc(-52/750*100%);} @media screen and (min-width: 641px) { #system .sMH__naviBtn { margin: calc(3/1400*100%) auto 0; padding: 0 0 calc(5/1400*100%); background: none; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #system .sMH__naviBtn::before { background: #3581e1; padding-top: calc(25/1400*100%); } #system .sMH__naviBtn::after { background: #6022bc; padding-top: calc(5/1400*100%); } #system .sMH__naviBtn__item { width: calc(171/1400*100%); margin: 0 calc(4/1400*100%); } #system .sMH__naviBtn__item:nth-child(n+4) { margin-top: 0; } #system .sMH__naviBtn__item .btn::before { background-image: url(/images/system/navi/btn_pc.png), url(/images/system/navi/btn_on_pc.png); background-repeat: no-repeat; background-size: 100%; background-position: center top, center 200px; } #system .sMH__naviBtn__item.current .btn::before { background-position: center 200px, center top; } #system .sMH__naviBtn__item:not(.current) .btn:hover::before { background-position: center 200px, center top; } #system .sMH__naviBtn__item .btn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: transform .1s ease-in-out; transition: transform .1s ease-in-out; backface-visibility: hidden; pointer-events : auto; transform-origin: bottom; } #system .sMH__naviBtn__item:not(.current) .btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #system .sMa__hl { width: calc(629/1240*100%); margin-left: calc(-128/1240*100%);} } @media screen and (min-width: 1401px) { #system .sMH__naviBtn { margin: 3px auto 0; padding: 0 0 5px; } #system .sMH__naviBtn::before { padding-top: 25px; } #system .sMH__naviBtn::after { padding-top: 5px; } #system .sMH__naviBtn__item { width: 171px; margin: 0 4px; } } /* #SYSTEM1 ---------------------------------------------------------------------------------------------------------------- */ #system1 .sMa__leadtext { width: calc(650/750*100%); margin: calc(41/750*100%) auto 0; } #system1 .sMa__route { width: calc(650/750*100%); margin: calc(115/750*100%) auto 0; } #system1 .sMa__route .sMa__route__item { width: calc(394/650*100%); position: relative; } #system1 .sMa__route .sMa__route__item::before { content: ""; display: block; position: absolute; top: 0; height: 0; } #system1 .sMa__route .sMa__route__item .sMa__rut__i__hl { position: relative; z-index: 2; } #system1 .sMa__route .sMa__route__item .sMa__rut__i__pic { position: relative; z-index: 1; margin-top: calc(-19/394*100%); } #system1 .sMa__route .sMa__route__item .sMa__rut__i__pic img { border-radius: 4px; } #system1 .sMa__route .sMa__route__item .sMa__rut__i__pic .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system1 .sMa__route .sMa__route__item .sMa__rut__i__text { margin-top: calc(4/394*100%); position: relative; } #system1 .sMa__route .item1::before { background: url(/images/system/sys1/itemarrow_1_sp.png) no-repeat; background-size: contain; width: calc(242/394*100%); padding-top: calc(295/394*100%); left: calc(370/394*100%); margin-top: calc(195/394*100%); } #system1 .sMa__route .item2 { margin-top: calc(60/650*100%); margin-left: auto; } #system1 .sMa__route .item2::before { background: url(/images/system/sys1/itemarrow_2_sp.png) no-repeat; background-size: contain; width: calc(225/394*100%); padding-top: calc(377/394*100%); left: calc(140/394*100%); margin-top: calc(233/394*100%); } #system1 .sMa__route .item3 { margin-top: calc(38/650*100%); } #system1 .sMa__route .item3::before { background: url(/images/system/sys1/itemarrow_3_sp.png) no-repeat; background-size: contain; width: calc(246/394*100%); padding-top: calc(539/394*100%); left: calc(2/394*100%); margin-top: calc(-480/394*100%); } @media screen and (min-width: 641px) { #system1 .sMa__leadtext { width: calc(700/1240*100%); position: absolute; top: 0; left: 50%; margin: calc(65/1240*100%) 0 0 calc(-51/1240*100%); } #system1 .sMa__route { width: 100%; margin: calc(28/1240*100%) auto 0; } #system1 .sMa__route .sMa__route__item { width: calc(394/1240*100%); left: 50%; } #system1 .sMa__route .sMa__route__item .sMa__rut__i__hl a { transform-origin: left; } #system1 .sMa__route .item1 { margin-left: calc(-369/1240*100%); } #system1 .sMa__route .item1::before { background: url(/images/system/sys1/itemarrow_1_pc.png) no-repeat; background-size: contain; width: calc(647/394*100%); padding-top: calc(289/394*100%); left: calc(-30/394*100%); margin-top: calc(7/394*100%); } #system1 .sMa__route .item2 { margin-top: calc(-277/1240*100%); margin-left: calc(228/1240*100%); } #system1 .sMa__route .item2::before { background: url(/images/system/sys1/itemarrow_2_pc.png) no-repeat; background-size: contain; width: calc(259/394*100%); padding-top: calc(416/394*100%); left: calc(-7/394*100%); margin-top: calc(81/394*100%); } #system1 .sMa__route .item3 { margin-top: calc(-71/1240*100%); margin-left: calc(-190/1240*100%); } #system1 .sMa__route .item3::before { background: url(/images/system/sys1/itemarrow_3_pc.png) no-repeat; background-size: contain; width: calc(682/394*100%); padding-top: calc(269/394*100%); left: calc(-340/394*100%); margin-top: calc(-41/394*100%); } } /* #SYSTEM2 ---------------------------------------------------------------------------------------------------------------- */ #system2 .secMain { padding-bottom: calc(70/750*100%); } #system2 .sMa__mainpic { width: calc(604/750*100%); margin: calc(33/750*100%) auto 0; position: relative; } #system2 .sMa__mainpic img { border-radius: 4px; } #system2 .sMa__mainpic .btn { display: block; background: url(/images/system/pic_l_bg.png) center center no-repeat; background-size: contain; padding: calc(5/604*100%) calc(9/604*100%) calc(9/604*100%) calc(5/604*100%); } #system2 .sMa__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; } #system2 .sMa__timpic { width: calc(259/750*100%); position: absolute; top: 0; right: 0; margin: calc(-51/750*100%) calc(80/750*100%) 0 0; z-index: 2; } #system2 .sMa__piclist { width: calc(650/750*100%); margin: calc(70/750*100%) auto 0; } #system2 .sMa__piclist .sMa__piclist__item { width: calc(394/650*100%); position: relative; } #system2 .sMa__piclist .sMa__piclist__item img { border-radius: 4px; } #system2 .sMa__piclist .sMa__piclist__item .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system2 .sMa__piclist .sMa__piclist__item.item2 { margin-top: calc(-75/650*100%); margin-left: auto; } #system2 .sMa__tim { width: calc(650/750*100%); margin: calc(-95/750*100%) auto 0; } #system2 .sMa__tim .sMa__tim__hl { width: calc(251/650*100%); } #system2 .sMa__tim .sMa__tim__text { width: 100%; margin-top: calc(20/650*100%); } #system2 .sMa__subitem { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; } #system2 .sMa__subitem .sMa__subitem__ttl { width: 100%; } #system2 .sMa__subitem .sMa__subitem__text { width: 100%; margin-top: calc(8/650*100%); } #system2 .secMain2 { background: url(/images/system/sys2/c2_bg_sp.png) center top no-repeat; background-size: 100%; padding-top: calc(50/750*100%); } #system2 .sMa2__hl { width: calc(453/750*100%); margin-left: calc(46/750*100%); position: relative; } #system2 .sMa2__leadtext { width: calc(650/750*100%); margin: calc(17/750*100%) auto 0; } #system2 .sMa2__piclist { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } #system2 .sMa2__piclist .sMa2__piclist__item { width: calc(340/650*100%); position: relative; } #system2 .sMa2__piclist .sMa2__piclist__item img { border-radius: 4px; } #system2 .sMa2__piclist .sMa2__piclist__item .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/340*100%) calc(9/340*100%) calc(9/340*100%) calc(5/340*100%); } #system2 .sMa2__piclist .sMa2__piclist__item.item2 { margin-top: calc(-163/650*100%); margin-right: calc(-4/650*100%); margin-left: auto; } #system2 .sMa2__subitem { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system2 .sMa2__subitem .sMa2__subitem__ttl { width: 100%; order: 1; } #system2 .sMa2__subitem .sMa2__subitem__pic { width: calc(340/650*100%); margin-top: calc(16/650*100%); margin-right: calc(-4/650*100%); order: 3; } #system2 .sMa2__subitem .sMa2__subitem__pic img { border-radius: 4px; } #system2 .sMa2__subitem .sMa2__subitem__pic .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/340*100%) calc(9/340*100%) calc(9/340*100%) calc(5/340*100%); } #system2 .sMa2__subitem .sMa2__subitem__text { width: calc(300/650*100%); margin-top: calc(16/650*100%); order: 2; } @media screen and (min-width: 641px) { #system2 .secMain { padding-bottom: calc(50/1400*100%); } #system2 .sMa__mainpic { width: calc(604/1240*100%); margin: calc(41/1240*100%) 0 0; position: absolute; top: 0; right: 0; } #system2 .sMa__leadtext { width: calc(620/1240*100%); margin: calc(34/1240*100%) 0 0; } #system2 .secMain .flexbox { width: 100%; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: calc(105/1240*100%); } #system2 .sMa__timpic { width: calc(259/1240*100%); margin: calc(-123/1240*100%) calc(96/1240*100%) 0 0; } #system2 .sMa__piclist { width: calc(759/1240*100%); margin: 0; } #system2 .sMa__piclist .sMa__piclist__item { width: calc(394/759*100%); } #system2 .sMa__piclist .sMa__piclist__item.item2 { margin-top: calc(-188/759*100%); margin-left: auto; } #system2 .sMa__tim { width: calc(440/1240*100%); margin: calc(107/1240*100%) calc(7/1240*100%) 0 auto; } #system2 .sMa__tim .sMa__tim__hl { width: 100%; } #system2 .sMa__tim .sMa__tim__text { width: 100%; margin-top: calc(15/440*100%); } #system2 .sMa__subitem { width: 100%; margin: calc(23/1240*100%) 0 0; } #system2 .sMa__subitem .sMa__subitem__ttl { width: calc(360/1240*100%); } #system2 .sMa__subitem .sMa__subitem__text { width: calc(920/1240*100%); margin-top: calc(9/1240*100%); } #system2 .secMain2 { background: url(/images/system/sys2/c2_bg_pc.png) center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(67/1400*100%); padding-bottom: calc(70/1400*100%); } #system2 .sMa2__hl { width: calc(453/1240*100%); margin-left: calc(-6/1240*100%); } #system2 .sMa2__leadtext { width: calc(460/1240*100%); margin: calc(16/1240*100%) 0 0; } #system2 .sMa2__piclist { width: calc(759/1240*100%); margin: calc(20/1240*100%) 0 0; position: absolute; top: 0; right: 0;} #system2 .sMa2__piclist .sMa2__piclist__item { width: calc(394/759*100%); position: relative; } #system2 .sMa2__piclist .sMa2__piclist__item .btn { padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system2 .sMa2__piclist .sMa2__piclist__item.item2 { margin-top: calc(-188/759*100%); margin-left: auto; } #system2 .sMa2__subitem { width: 100%; margin: calc(30/1240*100%) auto 0; -webkit-justify-content: flex-start; justify-content: flex-start; position: relative; } #system2 .sMa2__subitem .sMa2__subitem__ttl { width: calc(530/1240*100%); position: absolute; top: 0; left: calc(422/1240*100%); margin-top: calc(42/1240*100%); } #system2 .sMa2__subitem .sMa2__subitem__pic { width: calc(394/1240*100%); margin-top: 0; order: 2; } #system2 .sMa2__subitem .sMa2__subitem__pic .btn { padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system2 .sMa2__subitem .sMa2__subitem__text { width: calc(530/1240*100%); margin-top: calc(86/1240*100%); margin-left: calc(27/1240*100%); order: 3; } } @media screen and (min-width: 1401px) { #system2 .secMain { padding-bottom: 50px; } #system2 .secMain2 { background-size: 1920px; padding-top: 67px; padding-bottom: 70px; } } /* #SYSTEM3 ---------------------------------------------------------------------------------------------------------------- */ #system3 .secMain { padding-bottom: calc(80/750*100%); } #system3 .sMa__mainpic { width: calc(604/750*100%); margin: calc(33/750*100%) auto 0; position: relative; } #system3 .sMa__mainpic img { border-radius: 4px; } #system3 .sMa__mainpic .btn { display: block; background: url(/images/system/pic_l_bg.png) center center no-repeat; background-size: contain; padding: calc(5/604*100%) calc(9/604*100%) calc(9/604*100%) calc(5/604*100%); } #system3 .sMa__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; } #system3 .sMa__piclist { width: calc(650/750*100%); margin: calc(28/750*100%) auto 0; } #system3 .sMa__piclist .sMa__piclist__item { width: calc(340/650*100%); position: relative; } #system3 .sMa__piclist .sMa__piclist__item img { border-radius: 4px; } #system3 .sMa__piclist .sMa__piclist__item .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/340*100%) calc(9/340*100%) calc(9/340*100%) calc(5/340*100%); } #system3 .sMa__piclist .sMa__piclist__item.item2 { margin-top: calc(-147/650*100%); margin-left: auto; } #system3 .sMa__piclist .sMa__piclist__item.item3 { margin-top: calc(-35/650*100%); margin-left: auto; margin-right: auto; } #system3 .secMain2 { background: url(/images/system/sys3/c2_bg_sp.png) center top no-repeat; background-size: 100%; padding-top: 1px; } #system3 .sMa2__negapic { width: calc(587/750*100%); margin: calc(-68/750*100%) 0 0 calc(88/750*100%); } #system3 .sMa__nega { width: calc(650/750*100%); margin: calc(14/750*100%) auto 0; } #system3 .sMa__nega .sMa__nega__hl { width: calc(540/750*100%); } #system3 .sMa__nega .sMa__nega__text { width: 100%; margin: calc(15/650*100%) auto 0; } @media screen and (min-width: 641px) { #system3 .secMain { padding-bottom: calc(70/1400*100%); } #system3 .sMa__mainpic { width: calc(604/1240*100%); margin: calc(41/1240*100%) 0 0; position: absolute; top: 0; right: 0; } #system3 .sMa__leadtext { width: calc(620/1240*100%); margin: calc(34/1240*100%) 0 0; } #system3 .sMa__piclist { width: 100%; margin: calc(73/1240*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system3 .sMa__piclist .sMa__piclist__item { width: calc(394/1240*100%); } #system3 .sMa__piclist .sMa__piclist__item .btn { padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system3 .sMa__piclist .sMa__piclist__item.item2 { margin: 0; } #system3 .sMa__piclist .sMa__piclist__item.item3 { margin: 0; } #system3 .secMain2 { background: url(/images/system/sys3/c2_bg_pc.png) center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(59/1400*100%); padding-bottom: calc(20/1400*100%); } #system3 .flexbox { -webkit-justify-content: flex-start; justify-content: flex-start; } #system3 .sMa2__negapic { width: calc(491/1240*100%); margin: calc(-122/1240*100%) 0 0 calc(54/1240*100%); order: 2; } #system3 .sMa__nega { width: calc(540/1240*100%); margin: 0; order: 1; } #system3 .sMa__nega .sMa__nega__hl { width: 100%; } #system3 .sMa__nega .sMa__nega__text { width: 100%; margin: calc(19/540*100%) auto 0; } } @media screen and (min-width: 1401px) { #system3 .secMain { padding-bottom: 70px; } #system3 .secMain2 { background-size: 1920px; padding-top: 59px; padding-bottom: 20px; } } /* #SYSTEM4 ---------------------------------------------------------------------------------------------------------------- */ #system4 .secMain { padding-bottom: calc(56/750*100%); } #system4 .sMa__chara { width: 100%; position: absolute; top: 0; left: 0; } #system4 .sMa__chara__item { position: absolute; top: 0; } #system4 .sMa__chara__item.cha1 { width: calc(716/750*100%); margin-top: calc(120/750*100%); right: calc(-57/750*100%); } #system4 .sMa__chara__item.cha2 { width: calc(716/750*100%); margin-top: calc(168/750*100%); right: calc(-202/750*100%); } #system4 .sMa__leadtext { width: calc(650/750*100%); margin: calc(296/750*100%) auto 0; position: relative; } #system4 .sMa__leadtext::before { content: ""; display: block; width: calc(750/650*100%); height: 0; padding-top: calc(433/650*100%); position: absolute; top: 0; left: calc(-50/650*100%); margin-top: calc(-161/750*100%); background: url(/images/system/sys4/leadtext_bg_sp.png) center center no-repeat; background-size: 100%; } #system4 .sMa__leadtext img { position: relative; } #system4 .sMa__piclist { width: calc(650/750*100%); margin: calc(28/750*100%) auto 0; } #system4 .sMa__piclist .sMa__piclist__item { width: calc(340/650*100%); position: relative; } #system4 .sMa__piclist .sMa__piclist__item img { border-radius: 4px; } #system4 .sMa__piclist .sMa__piclist__item .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/340*100%) calc(9/340*100%) calc(9/340*100%) calc(5/340*100%); } #system4 .sMa__piclist .sMa__piclist__item.item2 { margin-top: calc(-147/650*100%); margin-left: auto; } #system4 .sMa__piclist .sMa__piclist__item.item3 { margin-top: calc(-35/650*100%); margin-left: auto; margin-right: auto; } #system4 .secMain2 { background: url(/images/system/sys4/c2_bg_sp.png) center top no-repeat; background-size: 100%; padding-top: calc(54/750*100%); } #system4 .sMa2__hl { width: calc(650/750*100%); margin: 0 auto; position: relative; } #system4 .sMa2__leadtext { width: calc(650/750*100%); margin: calc(17/750*100%) auto 0; position: relative; } #system4 .sMa2__piclist { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } #system4 .sMa2__piclist .sMa2__piclist__item { width: calc(340/650*100%); position: relative; } #system4 .sMa2__piclist .sMa2__piclist__item img { border-radius: 4px; } #system4 .sMa2__piclist .sMa2__piclist__item .btn { display: block; background: url(/images/system/pic_bg.png) center center no-repeat; background-size: contain; padding: calc(5/340*100%) calc(9/340*100%) calc(9/340*100%) calc(5/340*100%); } #system4 .sMa2__piclist .sMa2__piclist__item.item2 { margin-top: calc(-163/650*100%); margin-left: auto; } @media screen and (min-width: 641px) { #system4 .secMain { padding-bottom: calc(84/1400*100%); } #system4 .sMa__chara__item.cha1 { width: calc(716/1240*100%); margin-top: calc(16/1240*100%); right: calc(70/1240*100%); } #system4 .sMa__chara__item.cha2 { width: calc(716/1240*100%); margin-top: calc(124/1240*100%); right: calc(-115/1240*100%); } #system4 .sMa__leadtext { width: calc(620/1240*100%); margin: calc(34/1240*100%) 0 0; } #system4 .sMa__leadtext::before { display: none; } #system4 .sMa__piclist { width: 100%; margin: calc(90/1240*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system4 .sMa__piclist .sMa__piclist__item { width: calc(394/1240*100%); } #system4 .sMa__piclist .sMa__piclist__item .btn { padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system4 .sMa__piclist .sMa__piclist__item.item2 { margin: 0; } #system4 .sMa__piclist .sMa__piclist__item.item3 { margin: 0; } #system4 .secMain2 { background: url(/images/system/sys4/c2_bg_pc.png) center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(182/1400*100%); padding-bottom: calc(85/1400*100%); } #system4 .sMa2__hl { width: calc(650/1240*100%); margin: 0 auto; position: relative; z-index: 2; } #system4 .sMa2__leadtext { width: calc(850/1240*100%); margin: calc(14/1240*100%) auto 0; z-index: 3; } #system4 .sMa2__piclist { width: 100%; margin: 0; position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #system4 .sMa2__piclist .sMa2__piclist__item { width: calc(394/1240*100%); position: relative; } #system4 .sMa2__piclist .sMa2__piclist__item .btn { padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #system4 .sMa2__piclist .sMa2__piclist__item.item1 , #system4 .sMa2__piclist .sMa2__piclist__item.item2 { margin: calc(-203/1240*100%) calc(15/1240*100%) 0; } } @media screen and (min-width: 1401px) { #system4 .secMain { padding-bottom: 84px; } #system4 .secMain2 { background-size: 1920px; padding-top: 182px; padding-bottom: 85px; } } /* #SYSTEM5 ---------------------------------------------------------------------------------------------------------------- */ #system5 .sMa__leadtext { width: calc(650/750*100%); margin: calc(33/750*100%) auto 0; position: relative; } #system5 .sMa__stepSlider__wrap { width: calc(604/750*100%); margin: calc(35/750*100%) auto 0; position: relative; overflow: visible; } #system5 .sMa__stepSlider { position: relative; } #system5 .sMa__stepSlider .sMa__sS__item { position: relative; } #system5 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__no { width: calc(56/604*100%); margin: 0 0 calc(7/604*100%) auto; } #system5 .sMa__stepSlider .sMa__sS__item .btn img { border-radius: 4px; } #system5 .sMa__stepSlider .sMa__sS__item .btn { display: block; background: url(/images/system/pic_ll_bg.png) center center no-repeat; background-size: contain; padding: calc(5/604*100%) calc(9/604*100%) calc(9/604*100%) calc(5/604*100%); } #system5 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__text { margin-top: calc(9/604*100%); } #system5 .swiper-controlBtn { top: 0; width: calc(72/604*100%); height: 90%; margin-top: 0; background: none; } #system5 .swiper-controlBtn::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #system5 .swiper-button-prev::after { background: url(/images/btn_prev.png) center center no-repeat; background-size: 100%; } #system5 .swiper-button-next::after { background: url(/images/btn_next.png) center center no-repeat; background-size: 100%; } #system5 .swiper-controlBtn.swiper-button-disabled { opacity: 0.2;} #system5 .swiper-button-prev { left: calc(-72/604*100%); right: auto; } #system5 .swiper-button-next { right: calc(-72/604*100%); left: auto; } #system5 .sMa__stepSliderPagenation, #system5 .sMa__stepSliderPagenation .swiper-pagination-fraction { position: relative; bottom: 0px; } #system5 .sMa__stepSliderPagenation { position: relative; bottom: 0px; padding-top: calc(25/604*100%); } #system5 .sMa__stepSliderPagenation .swiper-pagination-bullet { width: calc(46/604*100%); height: auto; margin: 0 calc(11/604*100%); background: #3b10ad; opacity: 1; cursor: pointer; box-shadow:0px 0px 10px 0px rgba(255,255,255,0.3) inset,0px 0px 5px 0px rgba(255,255,255,0.2) inset,2px 1px 3px 0px rgba(0,0,0,0.7); } #system5 .sMa__stepSliderPagenation .swiper-pagination-bullet-active { background: #7013cb; opacity: 1; } #system5 .sMa__charaList { width: calc(650/750*100%); margin: calc(20/750*100%) auto 0; position: relative; } #system5 .sMa__charaList .sMa__cL__item { width: 100%; position: relative; padding-top: 1px;} #system5 .sMa__charaList .sMa__cL__item__detail { width: calc(310/650*100%); position: absolute; top: 0; } #system5 .sMa__charaList .sMa__cL__item__detail .sMa__cL__i__de__name { border-bottom: 2px solid #fff; padding-bottom: calc(8/310*100%); } #system5 .sMa__charaList .sMa__cL__item__detail .sMa__cL__i__de__text { margin-top: calc(12/310*100%); } #system5 .sMa__charaList .item1 .sMa__cL__item__pic { width: calc(258/650*100%); margin: 0 calc(32/650*100%) 0 auto; } #system5 .sMa__charaList .item1 .sMa__cL__item__detail { left: 0; margin-top: calc(86/650*100%); } #system5 .sMa__charaList .item1 .sMa__cL__item__detail .sMa__cL__i__de__name { border-color: #ff873a; } #system5 .sMa__charaList .item2 .sMa__cL__item__pic { width: calc(232/650*100%); margin: calc(-178/650*100%) auto 0 calc(79/650*100%) ; } #system5 .sMa__charaList .item2 .sMa__cL__item__detail { right: 0; margin-top: calc(17/650*100%); } #system5 .sMa__charaList .item2 .sMa__cL__item__detail .sMa__cL__i__de__name { border-color: #c71c5a; } @media screen and (min-width: 641px) { #system5 .secMain { padding-bottom: calc(110/1400*100%); } #system5 .sMa__leadtext { width: calc(600/1240*100%); position: absolute; top: 0; right: 0; margin: calc(40/1240*100%) 0 0; } #system5 .sMa__stepSlider__wrap { width: calc(714/1240*100%); margin: calc(30/1240*100%) auto 0; } #system5 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__no { width: calc(56/714*100%); margin: 0 calc(2/714*100%) calc(11/714*100%) auto; } #system5 .sMa__stepSlider .sMa__sS__item .btn { padding: calc(5/714*100%) calc(9/714*100%) calc(9/714*100%) calc(5/714*100%); } #system5 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__text { margin-top: calc(10/714*100%); } #system5 .sMa__stepSlider .sMa__sS__item.btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #system5 .swiper-controlBtn { width: calc(72/714*100%); height: 90%; } #system5 .swiper-button-prev { left: calc(-72/714*100%); right: auto; } #system5 .swiper-button-next { right: calc(-72/714*100%); left: auto; } #system5 .swiper-controlBtn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #system5 .swiper-controlBtn:hover { -webkit-transform: scale(1.2); transform: scale(1.2);} #system5 .sMa__stepSliderPagenation { padding-top: calc(40/714*100%); } #system5 .sMa__stepSliderPagenation .swiper-pagination-bullet { width: calc(30/714*100%); margin: 0 calc(8/714*100%); box-shadow:0px 0px 8px 0px rgba(255,255,255,0.2) inset,0px 0px 5px 0px rgba(255,255,255,0.2) inset,2px 1px 3px 0px rgba(0,0,0,0.7); } #system5 .sMa__stepSliderPagenation .swiper-pagination-bullet { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #system5 .sMa__stepSliderPagenation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { background: #7013cb; -webkit-transform: scale(1.2); transform: scale(1.2);} #system5 .sMa__charaList { width: 100%; margin: 0; position: absolute; top: 0; left: 0; margin-top: calc(260/1240*100%); } #system5 .sMa__charaList .sMa__cL__item { width: calc(235/1240*100%); position: absolute; top: 0; } #system5 .sMa__charaList .sMa__cL__item__pic { position: absolute; top: 0; } #system5 .sMa__charaList .sMa__cL__item__detail { width: 100%; position: relative; margin-top: calc(1/235*100%); } #system5 .sMa__charaList .sMa__cL__item__detail .sMa__cL__i__de__name { border-width: 4px; padding-bottom: calc(6/235*100%); } #system5 .sMa__charaList .sMa__cL__item__detail .sMa__cL__i__de__text { margin-top: calc(16/235*100%); } #system5 .sMa__charaList .item1 { left: 0; } #system5 .sMa__charaList .item1 .sMa__cL__item__pic { width: calc(258/235*100%); left: 0; margin: calc(-112/235*100%) 0 0 calc(-12/235*100%); } #system5 .sMa__charaList .item1 .sMa__cL__item__detail { margin-top: calc(356/235*100%); } #system5 .sMa__charaList .item1 .sMa__cL__item__detail .sMa__cL__i__de__name img { width: calc(247/235*100%); max-width: none; } #system5 .sMa__charaList .item2 { right: 0; } #system5 .sMa__charaList .item2 .sMa__cL__item__pic { width: calc(232/235*100%); right: 0; margin: calc(36/235*100%) calc(-33/235*100%) 0 0; } #system5 .sMa__charaList .item2 .sMa__cL__item__detail { margin-top: calc(356/235*100%); } } @media screen and (min-width: 1401px) { #system5 .secMain { padding-bottom: 110px; } } /* #SYSTEM6 ---------------------------------------------------------------------------------------------------------------- */ #system6 .secMain { padding-bottom: calc(140/750*100%); } #system6 .sMa__leadtext { width: calc(650/750*100%); margin: calc(33/750*100%) 0 0 calc(50/750*100%); position: relative; line-height: initial; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); } #system6 .sMa__chara { width: calc(666/750*100%); position: absolute; top: 0; left: 0; margin-top: calc(92/750*100%); margin-left: calc(380/750*100%); } #system6 .sMa__stepSlider__wrap { width: calc(604/750*100%); margin: calc(24/750*100%) auto 0; position: relative; overflow: visible; } #system6 .sMa__stepSlider { position: relative; } #system6 .sMa__stepSlider .sMa__sS__item { position: relative; } #system6 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__no { width: calc(56/604*100%); margin: 0 0 calc(7/604*100%) auto; } #system6 .sMa__stepSlider .sMa__sS__item .btn img { border-radius: 4px; } #system6 .sMa__stepSlider .sMa__sS__item .btn { display: block; background: url(/images/system/pic_ll_bg.png) center center no-repeat; background-size: contain; padding: calc(5/604*100%) calc(9/604*100%) calc(9/604*100%) calc(5/604*100%); } #system6 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__text { margin-top: calc(9/604*100%); } #system6 .swiper-controlBtn { top: 0; width: calc(72/604*100%); height: 90%; margin-top: 0; background: none; } #system6 .swiper-controlBtn::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #system6 .swiper-button-prev::after { background: url(/images/btn_prev.png) center center no-repeat; background-size: 100%; } #system6 .swiper-button-next::after { background: url(/images/btn_next.png) center center no-repeat; background-size: 100%; } #system6 .swiper-controlBtn.swiper-button-disabled { opacity: 0.2;} #system6 .swiper-button-prev { left: calc(-72/604*100%); right: auto; } #system6 .swiper-button-next { right: calc(-72/604*100%); left: auto; } #system6 .sMa__stepSliderPagenation, #system6 .sMa__stepSliderPagenation .swiper-pagination-fraction { position: relative; bottom: 0px; } #system6 .sMa__stepSliderPagenation { position: relative; bottom: 0px; padding-top: calc(25/604*100%); } #system6 .sMa__stepSliderPagenation .swiper-pagination-bullet { width: calc(46/604*100%); height: auto; margin: 0 calc(11/604*100%); background: #3b10ad; opacity: 1; cursor: pointer; box-shadow:0px 0px 10px 0px rgba(255,255,255,0.3) inset,0px 0px 5px 0px rgba(255,255,255,0.2) inset,2px 1px 3px 0px rgba(0,0,0,0.7); } #system6 .sMa__stepSliderPagenation .swiper-pagination-bullet-active { background: #7013cb; opacity: 1; } @media screen and (min-width: 641px) { #system6 .secMain { padding-bottom: calc(130/1400*100%); } #system6 .sMa__leadtext { width: calc(600/1240*100%); position: absolute; top: 0; right: 0; margin: calc(40/1240*100%) 0 0; } #system6 .sMa__chara { width: calc(407/1240*100%); position: absolute; top: 0; left: 0; margin-top: calc(133/1240*100%); margin-left: calc(34/1240*100%); } #system6 .sMa__stepSlider__wrap { width: calc(714/1240*100%); margin: calc(21/1240*100%) 0 0 calc(488/1240*100%); } #system6 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__no { width: calc(56/714*100%); margin: 0 calc(2/714*100%) calc(11/714*100%) auto; } #system6 .sMa__stepSlider .sMa__sS__item .btn { padding: calc(5/714*100%) calc(9/714*100%) calc(9/714*100%) calc(5/714*100%); } #system6 .sMa__stepSlider .sMa__sS__item .sMa__sS__item__text { margin-top: calc(10/714*100%); } #system6 .sMa__stepSlider .sMa__sS__item.btnOv a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);} #system6 .swiper-controlBtn { width: calc(72/714*100%); height: 90%; } #system6 .swiper-button-prev { left: calc(-72/714*100%); right: auto; } #system6 .swiper-button-next { right: calc(-72/714*100%); left: auto; } #system6 .swiper-controlBtn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #system6 .swiper-controlBtn:hover { -webkit-transform: scale(1.2); transform: scale(1.2);} #system6 .sMa__stepSliderPagenation { padding-top: calc(65/714*100%); } #system6 .sMa__stepSliderPagenation .swiper-pagination-bullet { width: calc(30/714*100%); margin: 0 calc(8/714*100%); box-shadow:0px 0px 8px 0px rgba(255,255,255,0.2) inset,0px 0px 5px 0px rgba(255,255,255,0.2) inset,2px 1px 3px 0px rgba(0,0,0,0.7); } #system6 .sMa__stepSliderPagenation .swiper-pagination-bullet { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #system6 .sMa__stepSliderPagenation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { background: #7013cb; -webkit-transform: scale(1.2); transform: scale(1.2);} } @media screen and (min-width: 1401px) { #system6 .secMain { padding-bottom: 130px; } } /* ---------------------------------------------------------------------------------------------------------------- #CHAPTER ---------------------------------------------------------------------------------------------------------------- */ #chapter .secMainHead { padding-bottom: calc(165/750*100%); position: relative; } #chapter .sMH__hl { font-size: 1.2em; text-align: center; margin: 10px; } #chapter .sMH__hl_2 { text-align: center; } #chapter .sMH__poster { width: calc(280/750*100%); position: absolute; bottom: 0; left: 50%; margin: 0 0 calc(-260/765*100%) calc(-303/750*100%); } #chapter .sMH__naviBtn { width: 100%; position: absolute; top: 0; left: 0; margin-top: calc(205/750*100%); } #chapter .sMH__naviBtn .sMH__naviBtn__item { width: calc(72/750*100%); position: absolute; top: 0; } #chapter .sMH__naviBtn .sMH__naviBtn__item .btn { opacity: 0.3; display: block;} #chapter .sMH__naviBtn .sMH__naviBtn__item a.btn { opacity: 1; } #chapter .sMH__naviBtn .btn_prev { left: calc(50/750*100%); } #chapter .sMH__naviBtn .btn_next { right: calc(50/750*100%); } #chapter .picFrame { display: block; width: 100%; position: relative; } #chapter .picFrame .pF__frame { display: block; width: 100%; position: relative; }/* 394px 前提 */ #chapter .picFrame .pF__frame .pF__fr__thumb { background: url(/images/chapters/pic_bg.png) center center no-repeat; background-size: cover; position: relative; width: 100%; padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #chapter .picFrame .pF__frame .pF__fr__thumb img { border-radius: 5px; } #chapter .secMain { margin-top: calc(337/750*100%); padding-bottom: calc(90/750*100%); } #chapter .sMa__charimage , #chapter .sMa__ci__item { position: absolute; top: 0; right: 0; width: 100%; transform: translateX(0px); } #chapter .sMa__ci__item.off { opacity: 0; } #chapter .sMa__detail { width: calc(650/750*100%); margin: 0 auto; position: relative; } #chapter .sMa__de__name { width: 100%; margin-left: calc(-6/650*100%); } #chapter .sMa__de__text { width: 100%; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial;} #chapter .sMa__detail .sMa__btnChange { width: calc(96/650*100%); margin-left: calc(-3/650*100%); position: relative; } #chapter .sMa__detail .sMa__btnChange .btn { width: 100%; position: relative; } #chapter .sMa__detail .sMa__btnChange .btn3d { position: absolute; top: 0; left: 0; width: 100%; } #chapter .sMa__detail .sMa__btnChange .off { opacity: 0; } #chapter .sMa__detail .sMa__btnChange { margin-top: calc(30/650*100%); } #chapter .sMa__video__wrap , #chapter .sMa__video { position: relative; width: 100%; } #chapter .sMa__video__wrap { width: calc(604/750*100%); margin: calc(78/750*100%) auto 0; } #chapter .sMa__vi__item { position: relative; } #chapter .videoFrame { display: block; width: 100%; position: relative; } #chapter .videoFrame .vF__frame { display: block; width: 100%; position: relative; }/* 604px 前提 */ #chapter .videoFrame .vF__frame .vF__fr__thumb { background: url(/images/chapters/btn_video_bg.png) center center no-repeat; background-size: cover; position: relative; width: 100%; padding: calc(5/604*100%) calc(9/604*100%) calc(9/604*100%) calc(5/604*100%); } #chapter .videoFrame .vF__frame .vF__fr__thumb::after { content: ""; display: block; width: 100%; height: 100%; background: url(/images/chapters/btn_play.png) center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; } #chapter .videoFrame .vF__frame .vF__fr__thumb img { border-radius: 5px; } #chapter .secMain2 { padding-bottom: calc(90/750*100%); position: relative; } #chapter .secMain2 .secInner_s { padding-top: 1px; } #chapter .sMa2__catchcopy { width: 100%; margin-top: calc(-30/750*100%); } #chapter .sMa2__piclist { position: relative; width: 100%; } #chapter .sMa2__pl__item { position: relative; } #chapter .sMa2__charimage { position: absolute; top: 0; right: 0; } #chapter .sMa2__detail { width: calc(650/750*100%); margin: calc(375/750*100%) auto 0; position: relative; } #chapter .sMa2__de__name { width: 100%; margin-left: calc(-6/650*100%); } #chapter .sMa2__de__text { width: 100%; margin-left: calc(-2/650*100%); font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial;} #chapter .sMa2__piclist { width: calc(394/750*100%); margin: calc(30/750*100%) 0 0 calc(50/750*100%); position: relative; } #chapter .secMain3 { padding-top: calc(45/750*100%); padding-bottom: calc(70/750*100%); position: relative; } #chapter .sMa3__hl__wrap { width: 100%; position: relative; } #chapter .sMa3__hl__wrap::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(26/750*100%); position: absolute; left: 0; bottom: 0; } #chapter .sMa3__hl { width: 100%; position: relative; padding: 0 15px; text-align: center;} #chapter .sMa3__leadtext { width: calc(650/750*100%); margin: calc(28/750*100%) auto 0; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial; padding: 0 15px; text-align: center;} #chapter .sMa3__leadtext img { max-width: none; width: calc(750/650*100%); margin-left: calc(-50/650*100%); } #chapter .sMa3__catchcopy { width: 100%; margin-top: calc(702/750*100%); } #chapter .sMa3__piclist { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } #chapter .sMa3__pl__item { width: calc(394/650*100%); margin-top: calc(25/650*100%); position: relative; } #chapter .sMa3__pl__item:first-child { margin-top: 0; } #chapter .sMa3__pl__item .sMa3__pl__i__pic { width: 100%; } #chapter .sMa3__pl__item .sMa3__pl__i__text { width: calc(350/394*100%); position: absolute; left: 0; bottom: 0; margin-bottom: calc(34/394*100%); } #chapter .sMa3__pl__item.item1 .sMa3__pl__i__text { margin-left: calc(300/394*100%); } #chapter .sMa3__pl__item.item2 { margin-left: calc(260/650*100%); } #chapter .sMa3__pl__item.item2 .sMa3__pl__i__text { margin-left: calc(-260/394*100%); } #chapter .sMa3__pl__item.item3 .sMa3__pl__i__text { margin-left: calc(300/394*100%); } #chapter .secMain4 { padding-bottom: calc(120/750*100%); position: relative; } #chapter .secMain4 .secInner_s { padding-top: 1px; } #chapter .sMa4__hl__wrap { width: 100%; position: relative; } #chapter .sMa4__hl__wrap::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(26/750*100%); position: absolute; left: 0; bottom: 0; } #chapter .sMa4__hl { width: 100%; position: relative; } #chapter .sMa4__leadtext { width: calc(650/750*100%); margin: calc(37/750*100%) auto 0; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial; padding: 0 15px;} #chapter .sMa4__leadtext img { max-width: none; width: calc(750/650*100%); margin-left: calc(-50/650*100%); } #chapter .sMa4__cosSlider__wrap { width: calc(598/750*100%); position: relative; margin: calc(60/750*100%) auto 0; overflow: visible; } #chapter .sMa4__cS__item { position: relative; } #chapter .sMa4__cS__item .sMa4__cS__i__pic { width: calc(450/598*100%); margin-left: calc(9/598*100%); } #chapter .sMa4__cS__item .sMa4__cS__i__detail { width: 100%; margin-top: calc(11/598*100%); position: relative; } #chapter .sMa4__cS__item .sMa4__cS__i__de__chara { position: absolute; top: 0; right: 0; } #chapter .sMa4__cS__item .sMa4__cS__i__de__text { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; } #chapter .sMa4__cosSlider__wrap .swiper-controlBtn { top: 0; width: calc(72/598*100%); height: 100%; margin-top: 0; background: none; } #chapter .sMa4__cosSlider__wrap .swiper-controlBtn::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #chapter .sMa4__cosSlider__wrap .swiper-button-prev::after { background: url(/images/btn_prev.png) center center no-repeat; background-size: 100%; } #chapter .sMa4__cosSlider__wrap .swiper-button-next::after { background: url(/images/btn_next.png) center center no-repeat; background-size: 100%; } #chapter .sMa4__cosSlider__wrap .swiper-controlBtn.swiper-button-disabled { opacity: 0.3; } #chapter .sMa4__cosSlider__wrap .swiper-button-prev { left: calc(-72/598*100%); right: auto; } #chapter .sMa4__cosSlider__wrap .swiper-button-next { right: calc(-72/598*100%); left: auto; } @media screen and (min-width: 769px) { #chapter .secMainHead { width: 100%; padding-bottom: calc(197/1400*100%); position: relative; } #chapter .sMH__hl { font-size: 1.7em; } #chapter .sMH__poster { width: calc(210/1400*100%); top: 0; bottom: inherit; margin: calc(97/1400*100%) 0 0 calc(340/1400*100%); } #chapter .sMH__naviBtn { margin-top: calc(208/1400*100%); } #chapter .sMH__naviBtn .sMH__naviBtn__item { width: calc(58/1400*100%); } #chapter .sMH__naviBtn .btn_prev { left: calc(78/1400*100%); } #chapter .sMH__naviBtn .btn_next { right: calc(78/1400*100%); } #chapter .sMH__naviBtn .sMH__naviBtn__item .btn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #chapter .sMH__naviBtn .sMH__naviBtn__item a:hover { -webkit-transform: scale(1.2); transform: scale(1.2);} #chapter .secMain { margin-top: calc(120/1400*100%); padding-bottom: calc(70/1400*100%); } #chapter .sMa__detail { width: calc(600/1240*100%); margin: 0; } #chapter .sMa__de__name { margin-left: calc(-9/600*100%); } #chapter .sMa__de__text { margin-top: calc(8/600*100%); margin-left: calc(-2/600*100%);} #chapter .sMa__detail .sMa__btnChange { width: calc(88/600*100%); margin-top: calc(14/600*100%); margin-left: calc(-2/600*100%); cursor: pointer; } #chapter .sMa__detail .sMa__btnChange { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; backface-visibility: hidden; } #chapter .sMa__detail .sMa__btnChange:hover { -webkit-transform: scale(1.10); transform: scale(1.10);} #chapter .sMa__video__wrap { position: absolute; top: 0; right: 0; width: calc(604/1240*100%); margin: calc(-70/1240*100%) calc(-4/1240*100%) 0 0; } #chapter .secMain2 { padding-bottom: calc(42/1400*100%); margin-bottom: calc(40/1400*100%); } #chapter .secMain2 .secInner_s { padding-top: 1px; } #chapter .sMa2__catchcopy { margin-top: calc(-30/1240*100%); margin-left: calc(-180/1240*100%); } #chapter .sMa2__detail { width: calc(600/1240*100%); margin: calc(69/1240*100%) 0 0; } #chapter .sMa2__de__name { margin-left: calc(-5/600*100%); } #chapter .sMa2__de__text { margin-top: calc(9/600*100%); margin-left: calc(-1/600*100%); font-weight: bold; line-height: initial; text-shadow: 2px 1px rgb(0 0 0 / 26%);} #chapter .sMa2__piclist { width: calc(394/1240*100%); margin: calc(26/1240*100%) 0 0 0; } #chapter .secMain3 { padding-top: calc(64/1400*100%); padding-bottom: calc(60/1400*100%); } #chapter .sMa3__hl__wrap { width: calc(1920/1240*100%); margin-left: calc(-340/1240*100%); } #chapter .sMa3__hl__wrap::before { padding-top: calc(26/1920*100%); } #chapter .sMa3__hl { width: calc(652/1920*100%); margin: 0 auto; } #chapter .sMa3__leadtext {width: calc(800/1240*100%); margin: calc(13/1240*100%) auto 0; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%);} #chapter .sMa3__leadtext img { max-width: 100%; width: 100%; margin: 0; } #chapter .sMa3__catchcopy { margin-top: calc(531/1240*100%); margin-left: calc(-300/1240*100%); } #chapter .sMa3__piclist { width: 100%; margin: calc(30/1240*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #chapter .sMa3__pl__item { width: calc(394/1240*100%); margin-top: 0; } #chapter .sMa3__pl__item .sMa3__pl__i__text { position: relative; margin-top: calc(-36/394*100%); margin-bottom: 0; } #chapter .sMa3__pl__item.item1 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter .sMa3__pl__item.item2 { margin-left: 0; } #chapter .sMa3__pl__item.item2 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter .sMa3__pl__item.item3 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter .secMain4 { padding-bottom: calc(120/1400*100%); } #chapter .sMa4__hl__wrap { width: calc(1920/1240*100%); margin-left: calc(-340/1240*100%); } #chapter .sMa4__hl__wrap::before { padding-top: calc(26/1920*100%); } #chapter .sMa4__hl { width: calc(652/1920*100%); margin: 0 auto; } #chapter .sMa4__leadtext { width: calc(900/1240*100%); margin: calc(22/1240*100%) auto 0; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%);} #chapter .sMa4__leadtext img { max-width: 100%; width: 100%; margin: 0; } #chapter .sMa4__cosSlider__wrap { width: 100%; margin: calc(28/1240*100%) auto 0; } #chapter .sMa4__cosSlider { width: 100%; } #chapter .sMa4__cS__item { width: calc(598/1240*100%); } #chapter .sMa4__cS__item .sMa4__cS__i__de__text { min-height: 175px; } #chapter .sMa4__cosSlider__wrap .swiper-controlBtn { width: calc(72/1240*100%); } #chapter .sMa4__cosSlider__wrap .swiper-button-prev { left: calc(-72/1240*100%); right: auto; } #chapter .sMa4__cosSlider__wrap .swiper-button-next { right: calc(-72/1240*100%); left: auto; } #chapter .sMa4__cS__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.6; } } @media screen and (min-width: 1401px) { #chapter .secMainHead { width: 1400px; padding-bottom: 197px; margin: 0 auto; } #chapter .secMain { margin-top: 120px; padding-bottom: 100px; } #chapter .secMain2 { padding-bottom: 42px; margin-bottom: 40px; } #chapter .secMain3 { padding-top: 64px; padding-bottom: 60px; } #chapter .secMain4 { padding-bottom: 120px; } } /* #CHAPTER1 ---------------------------------------------------------------------------------------------------------------- */ #chapter1.main { background-image: url(/images/chapters/chp01/bg_main_sp.jpg),url(/images/chapters/chp01/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter1 .secMainHead { background: url(/images/chapters/chp01/tag_sp.png) top no-repeat; background-size: contain; } #chapter1 .sMa__charimage .c2d { width: calc(445/750*100%); left: calc(282/750*100%); margin-top: calc(-444/750*100%); } #chapter1 .sMa__charimage .c3d { width: calc(416/750*100%); left: calc(325/750*100%); margin-top: calc(-449/750*100%); } #chapter1 .sMa__de__name { width: 100%; margin-left: calc(-6/650*100%); } #chapter1 .sMa__de__text { width: 100%; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial; margin-top: 50px; text-shadow: 2px 1px rgb(0 0 0 / 26%); } #chapter1 .sMa__detail .sMa__btnChange { margin-top: calc(30/650*100%); } #chapter1 .sMa__video__wrap { width: calc(604/750*100%); margin: calc(78/750*100%) auto 0; } #chapter1 .sMH__hl_2 { color: #c6ff00; } #chapter1 .secMain2 { background: url(/images/chapters/chp01/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter1 .sMa2__charimage { position: absolute; top: 0; right: 0; width: calc(1026/750*100%); margin-top: calc(52/750*100%); margin-right: calc(-315/750*100%); } #chapter1 .sMa2__detail { width: calc(650/750*100%); margin: calc(375/750*100%) auto 0; position: relative; } #chapter1 .sMa2__de__name { width: 100%; margin-left: calc(-6/650*100%); } #chapter1 .sMa2__de__text { width: 100%; margin-left: calc(-2/650*100%); font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); line-height: initial; margin-top: 50px;} #chapter1 .sMa2__piclist { width: calc(394/750*100%); margin: calc(30/750*100%) 0 0 calc(50/750*100%); position: relative; } #chapter1 .secMain3 { background: url(/images/chapters/chp01/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter1 .sMa3__hl__wrap { width: 100%; position: relative; border-bottom: 2px solid #2c571a; } #chapter1 .sMa3__hl__wrap::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(26/750*100%); background: #376c20; position: absolute; left: 0; bottom: 0; } #chapter1 .sMa3__hl { width: 100%; position: relative; text-align: center;} #chapter1 .sMa3__leadtext { width: 100%; margin-top: calc(28/750*100%); font-weight: bold; text-shadow: 2px 1px rgb(255 255 255 / 43%); color: #000000; line-height: initial; padding: 0 15px;} #chapter1 .sMa3__piclist { width: calc(650/750*100%); margin: calc(30/750*100%) auto 0; } #chapter1 .sMa3__pl__item { width: calc(394/650*100%); margin-top: calc(25/650*100%); position: relative; } #chapter1 .sMa3__pl__item:first-child { margin-top: 0; } #chapter1 .sMa3__pl__item .sMa3__pl__i__pic { width: 100%; } #chapter1 .sMa3__pl__item .sMa3__pl__i__text { width: calc(350/394*100%); position: absolute; left: 0; bottom: 0; margin-bottom: calc(34/394*100%); } #chapter1 .sMa3__pl__item.item1 .sMa3__pl__i__text { margin-left: calc(300/394*100%); } #chapter1 .sMa3__pl__item.item2 { margin-left: calc(260/650*100%); } #chapter1 .sMa3__pl__item.item2 .sMa3__pl__i__text { margin-left: calc(-260/394*100%); } #chapter1 .sMa3__pl__item.item3 .sMa3__pl__i__text { margin-left: calc(300/394*100%); } #chapter1 .sMa4__hl__wrap { width: 100%; position: relative; border-bottom: 2px solid #2c571a; } #chapter1 .sMa4__hl__wrap::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(26/750*100%); background: #376c20; position: absolute; left: 0; bottom: 0; } #chapter1 .sMa4__hl { width: 100%; position: relative; text-align: center; } #chapter1 .sMa4__leadtext { width: 100%; margin-top: calc(37/750*100%); line-height: initial; padding: 0 15px; } #chapter1 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp01/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter1 .secMain4 .item1 .sMa4__cS__i__de__chara { width: calc(274/598*100%); margin-top: calc(-170/598*100%); margin-right: calc(22/598*100%); } #chapter1 .secMain4 .item2 .sMa4__cS__i__de__chara { width: calc(218/598*100%); margin-top: calc(-182/598*100%); margin-right: calc(27/598*100%); } #chapter1 .secMain4 .item3 .sMa4__cS__i__de__chara { width: calc(196/598*100%); margin-top: calc(-148/598*100%); margin-right: calc(25/598*100%); } #chapter1 .secMain4 .item4 .sMa4__cS__i__de__chara { width: calc(215/598*100%); margin-top: calc(-137/598*100%); margin-right: calc(29/598*100%); } #chapter1 .secMain4 .item5 .sMa4__cS__i__de__chara { width: calc(186/598*100%); margin-top: calc(-189/598*100%); margin-right: calc(27/598*100%); } @media screen and (min-width: 769px) { #chapter1.main { background-image: url(/images/chapters/chp01/bg_main_pc.jpg),url(/images/chapters/chp01/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/750*100%); } #chapter1 .secMainHead { background: url(/images/chapters/chp01/tag_pc.png) top center no-repeat; } #chapter1 .sMa__charimage .c2d { width: calc(381/1240*100%); left: calc(3/1240*100%); margin-top: calc(-419/1240*100%); } #chapter1 .sMa__charimage .c3d { width: calc(356/1240*100%); left: calc(52/1240*100%); margin-top: calc(-420/1240*100%); } #chapter1 .sMa__de__name { margin-left: calc(-9/600*100%); } #chapter1 .sMa__de__text { margin-top: 20px; margin-bottom:50px; margin-left: calc(-2/600*100%); font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%);} #chapter1 .sMa__detail .sMa__btnChange { margin-top: calc(14/600*100%); } #chapter1 .sMa__video__wrap { width: calc(604/1240*100%); margin: calc(-70/1240*100%) calc(-4/1240*100%) 0 0; } #chapter1 .secMain2 { background: url(/images/chapters/chp01/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter1 .sMa2__charimage { width: calc(789/1240*100%); margin-top: calc(-40/1240*100%); margin-right: calc(-246/1240*100%); } #chapter1 .sMa2__detail { width: calc(600/1240*100%); margin: calc(69/1240*100%) 0 0; } #chapter1 .sMa2__de__name { margin-left: calc(-5/600*100%); } #chapter1 .sMa2__de__text { margin-top: calc(9/600*100%); margin-left: calc(-1/600*100%); } #chapter1 .sMa2__piclist { width: calc(394/1240*100%); margin: calc(26/1240*100%) 0 0 0; } #chapter1 .secMain3 { background: url(/images/chapters/chp01/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter1 .sMa3__hl__wrap { width: calc(1920/1240*100%); margin-left: calc(-340/1240*100%); border-bottom: 4px solid #2c571a; } #chapter1 .sMa3__hl__wrap::before { padding-top: calc(26/1920*100%); background: #376c20; } #chapter1 .sMa3__hl { width: calc(652/1920*100%); margin: 0 auto; } #chapter1 .sMa3__leadtext { width: calc(600/1240*100%); margin: calc(13/1240*100%) auto 0; } #chapter1 .sMa3__piclist { width: 100%; margin: calc(30/1240*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #chapter1 .sMa3__pl__item { width: calc(394/1240*100%); margin-top: 0; } #chapter1 .sMa3__pl__item .sMa3__pl__i__text { position: relative; margin-top: calc(-36/394*100%); margin-bottom: 0; } #chapter1 .sMa3__pl__item.item1 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter1 .sMa3__pl__item.item2 { margin-left: 0; } #chapter1 .sMa3__pl__item.item2 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter1 .sMa3__pl__item.item3 .sMa3__pl__i__text { margin-left: calc(22/394*100%); } #chapter1 .sMa4__hl__wrap { width: calc(1920/1240*100%); margin-left: calc(-340/1240*100%); border-bottom: 4px solid #2c571a; } #chapter1 .sMa4__hl__wrap::before { background: #376c20; } #chapter1 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp01/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } #chapter1 .sMa4__hl { width: calc(652/1920*100%); margin: 0 auto; } #chapter1 .sMa4__leadtext { width: calc(900/1240*100%); margin: calc(22/1240*100%) auto 0; font-weight: bold; text-shadow: 2px 1px rgb(0 0 0 / 26%); } } @media screen and (min-width: 1401px) { #chapter1.main { background-size: 1920px, 320px; } #chapter1 .secMainHead { background-size: 1280px; } #chapter1 .secMain2 { background-size: 1920px; } #chapter1 .secMain3 { background-size: 1920px; } } /* #CHAPTER2 ---------------------------------------------------------------------------------------------------------------- */ #chapter2.main { background-image: url(/images/chapters/chp02/bg_main_sp.jpg),url(/images/chapters/chp02/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter2 .secMainHead { background: url(/images/chapters/chp02/tag_sp.png) top no-repeat; background-size: contain; } #chapter2 .sMa__charimage .c2d { width: calc(275/750*100%); left: calc(448/750*100%); margin-top: calc(-496/750*100%); } #chapter2 .sMa__charimage .c3d { width: calc(281/750*100%); left: calc(441/750*100%); margin-top: calc(-493/750*100%); } #chapter2 .sMH__hl_2 { color: #00d2ff; } #chapter2 .secMain2 { background: url(/images/chapters/chp02/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter2 .sMa2__charimage { width: calc(719/750*100%); margin-top: calc(87/750*100%); margin-right: calc(-159/750*100%); } #chapter2 .secMain3 { background: url(/images/chapters/chp02/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter2 .sMa3__hl__wrap { border-bottom: 2px solid #15356b; } #chapter2 .sMa3__hl__wrap::before { background: #084782; } #chapter2 .sMa4__hl__wrap { border-bottom: 2px solid #15356b; } #chapter2 .sMa4__hl__wrap::before { background: #084782; } #chapter2 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp02/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter2 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(177/598*100%); margin-top: calc(-215/598*100%); margin-right: calc(26/598*100%); } #chapter2 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(163/598*100%); margin-top: calc(-147/598*100%); margin-right: calc(24/598*100%); } #chapter2 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(183/598*100%); margin-top: calc(-180/598*100%); margin-right: calc(23/598*100%); } #chapter2 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(173/598*100%); margin-top: calc(-141/598*100%); margin-right: calc(27/598*100%); } #chapter2 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(127/598*100%); margin-top: calc(-133/598*100%); margin-right: calc(41/598*100%); } #chapter2 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } @media screen and (min-width: 768px) { #chapter2.main { background-image: url(/images/chapters/chp02/bg_main_pc.jpg),url(/images/chapters/chp02/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter2 .secMainHead { background: url(/images/chapters/chp02/tag_pc.png) top no-repeat; background-size: contain; } #chapter2 .sMa__charimage .c2d { width: calc(234/1240*100%); left: calc(104/1240*100%); margin-top: calc(-460/1240*100%); } #chapter2 .sMa__charimage .c3d { width: calc(239/1240*100%); left: calc(98/1240*100%); margin-top: calc(-458/1240*100%); } #chapter2 .secMain2 { background: url(/images/chapters/chp02/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter2 .sMa2__catchcopy { width: calc(1092/1240*100%); } #chapter2 .sMa2__charimage { width: calc(591/1240*100%); margin-top: calc(-11/1240*100%); margin-right: calc(-15/1240*100%); } #chapter2 .secMain3 { background: url(/images/chapters/chp02/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter2 .sMa3__hl__wrap { border-bottom: 4px solid #15356b; } #chapter2 .sMa3__hl__wrap::before { background: #084782; } #chapter2 .sMa3__catchcopy { width: calc(1012/1240*100%); } #chapter2 .sMa4__hl__wrap { border-bottom: 4px solid #15356b; } #chapter2 .sMa4__hl__wrap::before { background: #084782; } #chapter2 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp02/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } #chapter2 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; } } @media screen and (min-width: 1401px) { #chapter2.main { background-size: 1920px, 320px; } #chapter2 .secMainHead { background-size: contain; } #chapter2 .secMain2 { background-size: 1920px; } #chapter2 .secMain3 { background-size: 1920px; } } /* #CHAPTER3 ---------------------------------------------------------------------------------------------------------------- */ #chapter3.main { background-image: url(/images/chapters/chp03/bg_main_sp.jpg),url(/images/chapters/chp03/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter3 .secMainHead { background: url(/images/chapters/chp03/tag_sp.png) top no-repeat; background-size: contain; } #chapter3 .sMa__charimage .c2d { width: calc(221/750*100%); left: calc(457/750*100%); margin-top: calc(-354/750*100%); } #chapter3 .sMa__charimage .c3d { width: calc(228/750*100%); left: calc(453/750*100%); margin-top: calc(-359/750*100%); } #chapter3 .sMH__hl_2 { color: #d977fd; } #chapter3 .secMain2 { background: url(/images/chapters/chp03/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter3 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter3 .sMa2__charimage { width: calc(606/750*100%); margin-top: calc(-27/750*100%); margin-right: calc(-114/750*100%); } #chapter3 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter3 .secMain3 { background: url(/images/chapters/chp03/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter3 .sMa3__hl__wrap { border-bottom: 2px solid #35237c; } #chapter3 .sMa3__hl__wrap::before { background: #441ea3; } #chapter3 .sMa4__hl__wrap { border-bottom: 2px solid #35237c; } #chapter3 .sMa4__hl__wrap::before { background: #441ea3; } #chapter3 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp03/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter3 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(174/598*100%); margin-top: calc(-142/598*100%); margin-right: calc(25/598*100%); } #chapter3 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(168/598*100%); margin-top: calc(-189/598*100%); margin-right: calc(24/598*100%); } #chapter3 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(188/598*100%); margin-top: calc(-167/598*100%); margin-right: calc(31/598*100%); } #chapter3 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(169/598*100%); margin-top: calc(-228/598*100%); margin-right: calc(34/598*100%); } #chapter3 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(114/598*100%); margin-top: calc(-89/598*100%); margin-right: calc(22/598*100%); } #chapter3 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } @media screen and (min-width: 768px) { #chapter3.main { background-image: url(/images/chapters/chp03/bg_main_pc.jpg),url(/images/chapters/chp03/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter3 .secMainHead { background: url(/images/chapters/chp03/tag_pc.png) top no-repeat; background-size: contain; } #chapter3 .sMa__charimage .c2d { width: calc(184/1240*100%); left: calc(146/1240*100%); margin-top: calc(-325/1240*100%); } #chapter3 .sMa__charimage .c3d { width: calc(190/1240*100%); left: calc(143/1240*100%); margin-top: calc(-329/1240*100%); } #chapter3 .secMain2 { background: url(/images/chapters/chp03/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); padding-bottom: 100px; } #chapter3 .sMa2__catchcopy { width: calc(1092/1240*100%); } #chapter3 .sMa2__charimage { width: calc(606/1240*100%); margin-top: calc(-57/1240*100%); margin-right: calc(1/1240*100%); z-index: 3; } #chapter3 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter3 .secMain3 { background: url(/images/chapters/chp03/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter3 .sMa3__hl__wrap { border-bottom: 4px solid #35237c; } #chapter3 .sMa3__hl__wrap::before { background: #441ea3; } #chapter3 .sMa3__catchcopy { width: calc(1012/1240*100%); } #chapter3 .sMa4__hl__wrap { border-bottom: 4px solid #35237c; } #chapter3 .sMa4__hl__wrap::before { background: #441ea3; } #chapter3 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp03/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } #chapter3 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; } } @media screen and (min-width: 1401px) { #chapter3.main { background-size: 1920px, 320px; } #chapter3 .secMainHead { background-size: 1280px; } #chapter3 .secMain2 { background-size: 1920px; } #chapter3 .secMain3 { background-size: 1920px; } } /* #CHAPTER4 ---------------------------------------------------------------------------------------------------------------- */ #chapter4.main { background-image: url(/images/chapters/chp04/bg_main_sp.jpg),url(/images/chapters/chp04/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter4 .secMainHead { background: url(/images/chapters/chp04/tag_sp.png) top no-repeat; background-size: contain; } #chapter4 .sMH__hl_2 { color: #77effd; } #chapter4 .sMa__charimage .c2d { width: calc(423/750*100%); left: calc(317/750*100%); margin-top: calc(-417/750*100%); } #chapter4 .sMa__charimage .c3d { width: calc(390/750*100%); left: calc(335/750*100%); margin-top: calc(-422/750*100%); } #chapter4 .secMain2 { background: url(/images/chapters/chp04/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter4 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter4 .sMa2__charimage { width: calc(743/750*100%); margin-top: calc(73/750*100%); margin-right: calc(-70/750*100%); } #chapter4 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter4 .secMain3 { background: url(/images/chapters/chp04/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter4 .sMa3__hl__wrap { border-bottom: 2px solid #183b83; } #chapter4 .sMa3__hl__wrap::before { background: #024f9d; } #chapter4 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter4 .sMa4__hl__wrap { border-bottom: 2px solid #183b83; } #chapter4 .sMa4__hl__wrap::before { background: #024f9d; } #chapter4 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp04/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter4 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(170/598*100%); margin-top: calc(-142/598*100%); margin-right: calc(9/598*100%); } #chapter4 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(214/598*100%); margin-top: calc(-155/598*100%); margin-right: calc(9/598*100%); } #chapter4 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(184/598*100%); margin-top: calc(-163/598*100%); margin-right: calc(27/598*100%); } #chapter4 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(202/598*100%); margin-top: calc(-140/598*100%); margin-right: calc(26/598*100%); } #chapter4 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(137/598*100%); margin-top: calc(-175/598*100%); margin-right: calc(26/598*100%); } @media screen and (min-width: 769px) { #chapter4.main { background-image: url(/images/chapters/chp04/bg_main_pc.jpg),url(/images/chapters/chp04/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter4 .secMainHead { background: url(/images/chapters/chp04/tag_pc.png) top no-repeat; background-size: contain; } #chapter4 .sMa__charimage .c2d { width: calc(370/1240*100%); left: calc(60/1240*100%); margin-top: calc(-404/1240*100%); } #chapter4 .sMa__charimage .c3d { width: calc(337/1240*100%); left: calc(65/1240*100%); margin-top: calc(-406/1240*100%); } #chapter4 .secMain2 { background: url(/images/chapters/chp04/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter4 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter4 .sMa2__charimage { width: calc(1000/1240*100%); margin-top: calc(170/1240*100%); margin-right: calc(-550/1240*100%); z-index: 3; } #chapter4 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter4 .secMain3 { background: url(/images/chapters/chp04/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter4 .sMa3__hl__wrap { border-bottom: 4px solid #183b83; } #chapter4 .sMa3__hl__wrap::before { background: #024f9d; } #chapter4 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter4 .sMa4__hl__wrap { border-bottom: 4px solid #183b83; } #chapter4 .sMa4__hl__wrap::before { background: #024f9d; } #chapter4 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp04/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } #chapter4 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; } } @media screen and (min-width: 1401px) { #chapter4.main { background-size: 1920px, 320px; } #chapter4 .secMainHead { background-size: 1280px; } #chapter4 .secMain2 { background-size: 1920px; } #chapter4 .secMain3 { background-size: 1920px; } } /* #CHAPTER5 ---------------------------------------------------------------------------------------------------------------- */ #chapter5.main { background-image: url(/images/chapters/chp05/bg_main_sp.jpg),url(/images/chapters/chp05/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter5 .secMainHead { background: url(/images/chapters/chp05/tag_sp.png) top no-repeat; background-size: contain; } #chapter5 .sMH__hl_2 { color: #6fff4e; } #chapter5 .sMa__charimage .c2d { width: calc(351/750*100%); left: calc(347/750*100%); margin-top: calc(-475/750*100%); } #chapter5 .sMa__charimage .c3d { width: calc(344/750*100%); left: calc(350/750*100%); margin-top: calc(-484/750*100%); } #chapter5 .secMain2 { background: url(/images/chapters/chp05/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter5 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter5 .sMa2__charimage { width: calc(583/750*100%); margin-top: calc(76/750*100%); margin-right: calc(11/750*100%); } #chapter5 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter5 .secMain3 { background: url(/images/chapters/chp05/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter5 .sMa3__hl__wrap { border-bottom: 2px solid #1f6b19; } #chapter5 .sMa3__hl__wrap::before { background: #185d13; } #chapter5 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter5 .sMa4__hl__wrap { border-bottom: 2px solid #1f6b19; } #chapter5 .sMa4__hl__wrap::before { background: #185d13; } #chapter5 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp05/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter5 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(120/598*100%); margin-top: calc(-176/598*100%); margin-right: calc(36/598*100%); } #chapter5 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(167/598*100%); margin-top: calc(-114/598*100%); margin-right: calc(-5/598*100%); } #chapter5 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(182/598*100%); margin-top: calc(-125/598*100%); margin-right: calc(27/598*100%); } #chapter5 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(259/598*100%); margin-top: calc(-191/598*100%); margin-right: calc(-7/598*100%); } #chapter5 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(185/598*100%); margin-top: calc(-205/598*100%); margin-right: calc(26/598*100%); } @media screen and (min-width: 769px) { #chapter5.main { background-image: url(/images/chapters/chp05/bg_main_pc.jpg),url(/images/chapters/chp05/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter5 .secMainHead { background: url(/images/chapters/chp05/tag_pc.png) top center no-repeat; background-size: contain; } #chapter5 .sMa__charimage .c2d { width: calc(293/1240*100%); left: calc(84/1240*100%); margin-top: calc(-429/1240*100%); } #chapter5 .sMa__charimage .c3d { width: calc(285/1240*100%); left: calc(88/1240*100%); margin-top: calc(-434/1240*100%); } #chapter5 .secMain2 { background: url(/images/chapters/chp05/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter5 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter5 .sMa2__charimage { width: calc(500/1240*100%); margin-top: calc(50/1240*100%); margin-right: calc(-13/1240*100%); z-index: 3; } #chapter5 .sMa2__charimage img {width: 80%; } #chapter5 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter5 .secMain3 { background: url(/images/chapters/chp05/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter5 .sMa3__hl__wrap { border-bottom: 4px solid #1f6b19; } #chapter5 .sMa3__hl__wrap::before { background: #185d13; } #chapter5 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter5 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; } #chapter5 .sMa4__hl__wrap { border-bottom: 4px solid #1f6b19; } #chapter5 .sMa4__hl__wrap::before { background: #185d13; } #chapter5 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp05/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } } @media screen and (min-width: 1401px) { #chapter5.main { background-size: 1920px, 320px; } #chapter5 .secMainHead { background-size: 1280px; } #chapter5 .secMain2 { background-size: 1920px; } #chapter5 .secMain3 { background-size: 1920px; } } /* #CHAPTER6 ---------------------------------------------------------------------------------------------------------------- */ #chapter6.main { background-image: url(/images/chapters/chp06/bg_main_sp.jpg),url(/images/chapters/chp06/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter6 .secMainHead { background: url(/images/chapters/chp06/tag_sp.png) top no-repeat; background-size: contain; } #chapter6 .sMH__hl_2 { color: #eda3ff; } #chapter6 .sMa__charimage .c2d { width: calc(396/750*100%); left: calc(337/750*100%); margin-top: calc(-327/750*100%); } #chapter6 .sMa__charimage .c3d { width: calc(430/750*100%); left: calc(315/750*100%); margin-top: calc(-310/750*100%); } #chapter6 .secMain2 { background: url(/images/chapters/chp06/c2/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter6 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter6 .sMa2__charimage { width: calc(882/750*100%); margin-top: calc(58/750*100%); margin-right: calc(-177/750*100%); } #chapter6 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter6 .secMain3 { background: url(/images/chapters/chp06/c3/bg_sp.jpg) top center no-repeat; background-size: 100%; } #chapter6 .sMa3__hl__wrap { border-bottom: 2px solid #8c124e; } #chapter6 .sMa3__hl__wrap::before { background: #b41764; } #chapter6 .sMa3__leadtext { color: #000000; } #chapter6 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter6 .sMa4__hl__wrap { border-bottom: 2px solid #8c124e; } #chapter6 .sMa4__hl__wrap::before { background: #b41764; } #chapter6 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp06/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter6 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(193/598*100%); margin-top: calc(-122/598*100%); margin-right: calc(2/598*100%); } #chapter6 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(140/598*100%); margin-top: calc(-203/598*100%); margin-right: calc(-6/598*100%); } #chapter6 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(181/598*100%); margin-top: calc(-131/598*100%); margin-right: calc(-21/598*100%); } #chapter6 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(138/598*100%); margin-top: calc(-141/598*100%); margin-right: calc(21/598*100%); } #chapter6 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(184/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(-20/598*100%); } @media screen and (min-width: 769px) { #chapter6.main { background-image: url(/images/chapters/chp06/bg_main_pc.jpg),url(/images/chapters/chp06/bg.jpg); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter6 .secMainHead { background: url(/images/chapters/chp06/tag_pc.png) top center no-repeat; background-size: contain; } #chapter6 .sMa__charimage .c2d { width: calc(332/1240*100%); left: calc(113/1240*100%); margin-top: calc(-298/1240*100%); } #chapter6 .sMa__charimage .c3d { width: calc(359/1240*100%); left: calc(98/1240*100%); margin-top: calc(-284/1240*100%); } #chapter6 .secMain2 { background: url(/images/chapters/chp06/c2/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter6 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter6 .sMa2__charimage { width: calc(882/1240*100%); margin-top: calc(-65/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter6 .sMa2__charimage img {width: 75%;} #chapter6 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter6 .secMain3 { background: url(/images/chapters/chp06/c3/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter6 .sMa3__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter6 .sMa3__hl__wrap::before { background: #b41764; } #chapter6 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter6 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; } #chapter6 .sMa4__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter6 .sMa4__hl__wrap::before { background: #b41764; } #chapter6 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp06/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } } @media screen and (min-width: 1401px) { #chapter6.main { background-size: 1920px, 320px; } #chapter6 .secMainHead { background-size: 1280px; } #chapter6 .secMain2 { background-size: 1920px; } #chapter6 .secMain3 { background-size: 1920px; } } /* #CHAPTER7 ---------------------------------------------------------------------------------------------------------------- */ #chapter7.main { background-image: url(/images/chapters/chp07/bg_main_sp.png),url(/images/chapters/chp07/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter7 .secMainHead { background: url(/images/chapters/chp07/tag_sp.png) top no-repeat; background-size: contain; } #chapter7 .sMH__hl_2 { color: white; } #chapter7 .sMa__charimage .c2d { width: calc(260/750*100%); margin-top: calc(-500/750*100%); } #chapter7 .sMa__charimage .c3d { width: calc(260/750*100%); margin-top: calc(-520/750*100%); } #chapter7 .secMain2 { background: url(/images/chapters/chp07/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter7 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter7 .sMa2__charimage { width: calc(800/750*100%); text-align: right; } #chapter7 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter7 .secMain3 { background: url(/images/chapters/chp07/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter7 .sMa3__hl__wrap { border-bottom: 2px solid #aa6812; } #chapter7 .sMa3__hl__wrap::before { background:#aa6812; } #chapter7 .sMa3__leadtext { color: white; } #chapter7 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter7 .sMa4__hl__wrap { border-bottom: 2px solid#aa6812; } #chapter7 .sMa4__hl__wrap::before { background: #aa6812; } #chapter7 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp07/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100% 100% !important; } #chapter7 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-140/598*100%); margin-right: calc(24/598*100%); } #chapter7 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-160/598*100%); margin-right: calc(15/598*100%); } #chapter7 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-190/598*100%); margin-right: calc(5/598*100%); } #chapter7 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-170/598*100%); margin-right: calc(28/598*100%); } #chapter7 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(18/598*100%); } @media screen and (min-width: 769px) { #chapter7.main { background-image: url(/images/chapters/chp07/bg_main_pc.png),url(/images/chapters/chp07/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter7 .secMainHead { background: url(/images/chapters/chp07/tag_pc.png) top center no-repeat; background-size: contain; } #chapter7 .sMa__charimage .c2d { width: calc(220/1240*100%); left: calc(110/1240*100%); margin-top: calc(-340/1240*100%); } #chapter7 .sMa__charimage .c3d { width: calc(220/1240*100%); left: calc(98/1240*100%); margin-top: calc(-362/1240*100%); } #chapter7 .secMain2 { background: url(/images/chapters/chp07/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter7 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter7 .sMa2__charimage { width: calc(750/1240*100%); margin-top: calc(-65/1240*100%); margin-right: -50px; z-index: 3; text-align: center;} #chapter7 .sMa2__charimage img {width: 75%;} #chapter7 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter7 .secMain3 { background: url(/images/chapters/chp07/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter7 .sMa3__hl__wrap { border-bottom: 4px solid #cd7f32; } #chapter7 .sMa3__hl__wrap::before { background: #cd7f32; } #chapter7 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter7 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0;} #chapter7 .sMa4__hl__wrap { border-bottom: 4px solid #cd7f32; } #chapter7 .sMa4__hl__wrap::before { background: #cd7f32; } #chapter7 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp07/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100% 100% !important; } } @media screen and (min-width: 1401px) { #chapter7.main { background-size: 1920px, 320px; } #chapter7 .secMainHead { background-size: 1280px; } #chapter7 .secMain2 { background-size: 1920px; } #chapter7 .secMain3 { background-size: 1920px; } } /* #CHAPTER8 ---------------------------------------------------------------------------------------------------------------- */ #chapter8.main { background-image: url(/images/chapters/chp08/bg_main_sp.png),url(/images/chapters/chp08/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter8 .secMainHead { background: url(/images/chapters/chp08/tag_sp.png) top no-repeat; background-size: contain; } #chapter8 .sMH__hl_2 { color: white; } #chapter8 .sMa__charimage .c2d { width: calc(230/750*100%); left: calc(420/750*100%); margin-top: calc(-500/750*100%); } #chapter8 .sMa__charimage .c3d { width: calc(240/750*100%); left: calc(420/750*100%); margin-top: calc(-500/750*100%); } #chapter8 .secMain2 { background: url(/images/chapters/chp08/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter8 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter8 .sMa2__charimage { width: calc(700/750*100%); text-align: right; } #chapter8 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter8 .secMain3 { background: url(/images/chapters/chp08/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter8 .sMa3__hl__wrap { border-bottom: 2px solid #a60fb4; } #chapter8 .sMa3__hl__wrap::before { background: #a60fb4; } #chapter8 .sMa3__leadtext { color: white; } #chapter8 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter8 .sMa4__hl__wrap { border-bottom: 2px solid #a60fb4; } #chapter8 .sMa4__hl__wrap::before { background: #a60fb4; } #chapter8 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp08/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100% 100% !important; } #chapter8 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(180/598*100%); margin-top: calc(-145/598*100%); margin-right: calc(35/598*100%); } #chapter8 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(140/598*100%); margin-top: calc(-190/598*100%); margin-right: calc(45/598*100%); } #chapter8 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(140/598*100%); margin-top: calc(-200/598*100%); margin-right: calc(30/598*100%); } #chapter8 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(200/598*100%); margin-top: calc(-141/598*100%); margin-right: calc(21/598*100%); } #chapter8 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(160/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(20/598*100%); } @media screen and (min-width: 769px) { #chapter8.main { background-image: url(/images/chapters/chp08/bg_main_pc.png),url(/images/chapters/chp08/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter8 .secMainHead { background: url(/images/chapters/chp08/tag_pc.png) top center no-repeat; background-size: contain; } #chapter8 .sMa__charimage .c2d { width: calc(200/1240*100%); left: calc(98/1240*100%); margin-top: calc(-360/1240*100%); } #chapter8 .sMa__charimage .c3d { width: calc(200/1240*100%); left: calc(98/1240*100%); margin-top: calc(-400/1240*100%); } #chapter8 .secMain2 { background: url(/images/chapters/chp08/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter8 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter8 .sMa2__charimage { width: calc(900/1240*100%); margin-top: calc(-15/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter8 .sMa2__charimage img {width: 75%;} #chapter8 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter8 .secMain3 { background: url(/images/chapters/chp08/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter8 .sMa3__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter8 .sMa3__hl__wrap::before { background: #b41764; } #chapter8 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter8 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0;} #chapter8 .sMa4__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter8 .sMa4__hl__wrap::before { background: #b41764; } #chapter8 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp08/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100% 100% !important; } } @media screen and (min-width: 1401px) { #chapter8.main { background-size: 1920px, 320px; } #chapter8 .secMainHead { background-size: 1280px; } #chapter8 .secMain2 { background-size: 1920px; } #chapter8 .secMain3 { background-size: 1920px; } } /* #CHAPTER9 ---------------------------------------------------------------------------------------------------------------- */ #chapter9.main { background-image: url(/images/chapters/chp09/bg_main_sp.png),url(/images/chapters/chp09/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter9 .secMainHead { background: url(/images/chapters/chp09/tag_sp.png) top no-repeat; background-size: contain; } #chapter9 .sMH__hl_2 { color: white; } #chapter9 .sMa__charimage .c2d { width: calc(430/750*100%); left: calc(340/750*100%); margin-top: calc(-450/750*100%); } #chapter9 .sMa__charimage .c3d { width: calc(550/750*100%); left: calc(310/750*100%); margin-top: calc(-450/750*100%); } #chapter9 .secMain2 { background: url(/images/chapters/chp09/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter9 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter9 .sMa2__charimage { width: calc(1000/750*100%); margin-right: -230px; } @media screen and (max-width: 460px) { #chapter9 .sMa2__charimage { width: calc(1000/750*100%); margin-right: -260px; } } @media screen and (max-width: 375px) { #chapter9 .sMa2__charimage { width: calc(1000/750*100%); margin-right: -230px; } } #chapter9 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter9 .secMain3 { background: url(/images/chapters/chp09/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter9 .sMa3__hl__wrap { border-bottom: 2px solid #c02155; } #chapter9 .sMa3__hl__wrap::before { background: #c02155; } #chapter9 .sMa3__leadtext { color: white; } #chapter9 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; } #chapter9 .sMa4__hl__wrap { border-bottom: 2px solid #c02155; } #chapter9 .sMa4__hl__wrap::before { background: #c02155; } #chapter9 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp09/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100% 100% !important; } #chapter9 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(193/598*100%); margin-top: calc(-190/598*100%); margin-right: calc(15/598*100%); } #chapter9 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(170/598*100%); margin-top: calc(-150/598*100%); margin-right: calc(30/598*100%); } #chapter9 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(181/598*100%); margin-top: calc(-180/598*100%); margin-right: calc(15/598*100%); } #chapter9 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(138/598*100%); margin-top: calc(-141/598*100%); margin-right: calc(21/598*100%); } #chapter9 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(184/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(-20/598*100%); } #chapter9 .sMa4__cS__item.item6 .sMa4__cS__i__de__chara { width: calc(184/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(-20/598*100%); } @media screen and (min-width: 769px) { #chapter9.main { background-image: url(/images/chapters/chp09/bg_main_pc.png),url(/images/chapters/chp09/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter9 .secMainHead { background: url(/images/chapters/chp09/tag_pc.png) top center no-repeat; background-size: contain; } #chapter9 .sMa__charimage .c2d { width: calc(370/1240*100%); left: calc(98/1240*100%); margin-top: calc(-350/1240*100%); } #chapter9 .sMa__charimage .c3d { width: calc(470/1240*100%); left: calc(98/1240*100%); margin-top: calc(-350/1240*100%); } #chapter9 .secMain2 { background: url(/images/chapters/chp09/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter9 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter9 .sMa2__charimage { width: calc(882/1240*100%); margin-top: calc(-65/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter9 .sMa2__charimage img {width: 75%;} #chapter9 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter9 .secMain3 { background: url(/images/chapters/chp09/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter9 .sMa3__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter9 .sMa3__hl__wrap::before { background: #b41764; } #chapter9 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter9 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; width: 100%; } #chapter9 .sMa4__hl__wrap { border-bottom: 4px solid #8c124e; } #chapter9 .sMa4__hl__wrap::before { background: #b41764; } #chapter9 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp09/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100% 100% !important; } } @media screen and (min-width: 1401px) { #chapter9.main { background-size: 1920px, 320px; } #chapter9 .secMainHead { background-size: 1280px; } #chapter9 .secMain2 { background-size: 1920px; } #chapter9 .secMain3 { background-size: 1920px; } } /* #CHAPTER10 ---------------------------------------------------------------------------------------------------------------- */ #chapter10.main { background-image: url(/images/chapters/chp10/bg_main_sp.png),url(/images/chapters/chp10/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter10 .secMainHead { background: url(/images/chapters/chp10/tag_sp.png) top no-repeat; background-size: contain; } #chapter10 .sMH__hl_2 { color: white; } #chapter10 .sMa__charimage .c2d { width: calc(396/750*100%); left: calc(337/750*100%); margin-top: calc(-327/750*100%); } #chapter10 .sMa__charimage .c3d { width: calc(430/750*100%); left: calc(315/750*100%); margin-top: calc(-310/750*100%); } #chapter10 .secMain2 { background: url(/images/chapters/chp10/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter10 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter10 .sMa2__charimage { width: calc(750/750*100%); margin-top: calc(180/750*100%); text-align: right; } #chapter10 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter10 .secMain3 { background: url(/images/chapters/chp10/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter10 .sMa3__hl__wrap { border-bottom: 2px solid #940062; } #chapter10 .sMa3__hl__wrap::before { background: #940062; } #chapter10 .sMa3__leadtext { color: white; } #chapter10 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; height: 110px; } #chapter10 .sMa4__hl__wrap { border-bottom: 2px solid #8c124e; } #chapter10 .sMa4__hl__wrap::before { background: #940062; } #chapter10 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp10/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter10 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(170/598*100%); margin-top: calc(-140/598*100%); margin-right: calc(2/598*100%); } #chapter10 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(120/598*100%); margin-top: calc(-150/598*100%); margin-right: calc(25/598*100%); } #chapter10 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(181/598*100%); margin-top: calc(-131/598*100%); margin-right: calc(21/598*100%); } #chapter10 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(138/598*100%); margin-top: calc(-141/598*100%); margin-right: calc(21/598*100%); } #chapter10 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(110/598*100%); margin-top: calc(-180/598*100%); margin-right: calc(25/598*100%); } @media screen and (min-width: 769px) { #chapter10.main { background-image: url(/images/chapters/chp10/bg_main_pc.png),url(/images/chapters/chp10/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter10 .secMainHead { background: url(/images/chapters/chp10/tag_pc.png) top center no-repeat; background-size: contain; } #chapter10 .sMa__charimage .c2d { width: calc(332/1240*100%); left: calc(113/1240*100%); margin-top: calc(-298/1240*100%); } #chapter10 .sMa__charimage .c3d { width: calc(400/1240*100%); left: calc(98/1240*100%); margin-top: calc(-295/1240*100%); } #chapter10 .secMain2 { background: url(/images/chapters/chp10/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter10 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter10 .sMa2__charimage { width: calc(800/1240*100%); margin-top: calc(30/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter10 .sMa2__charimage img {width: 75%;} #chapter10 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter10 .secMain3 { background: url(/images/chapters/chp10/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter10 .sMa3__hl__wrap { border-bottom: 4px solid #940062; } #chapter10 .sMa3__hl__wrap::before { background:#940062; } #chapter10 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter10 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; height: 0px; } #chapter10 .sMa4__hl__wrap { border-bottom: 4px solid #940062; } #chapter10 .sMa4__hl__wrap::before { background: #940062; } #chapter10 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp10/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } } @media screen and (min-width: 1401px) { #chapter10.main { background-size: 1920px, 320px; } #chapter10 .secMainHead { background-size: 1280px; } #chapter10 .secMain2 { background-size: 1920px; } #chapter10 .secMain3 { background-size: 1920px; } } /* #CHAPTER11 ---------------------------------------------------------------------------------------------------------------- */ #chapter11.main { background-image: url(/images/chapters/chp11/bg_main_sp.png),url(/images/chapters/chp11/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter11 .secMainHead { background: url(/images/chapters/chp11/tag_sp.png) top no-repeat; background-size: contain; } #chapter11 .sMH__hl_2 { color: white; } #chapter11 .sMa__charimage .c2d { width: calc(300/750*100%); left: calc(380/750*100%); margin-top: calc(-420/750*100%); } #chapter11 .sMa__charimage .c3d { width: calc(270/750*100%); left: calc(420/750*100%); margin-top: calc(-470/750*100%); } #chapter11 .secMain2 { background: url(/images/chapters/chp11/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter11 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter11 .sMa2__charimage { width: calc(882/750*100%); margin-top: calc(150/750*100%); text-align: right; } #chapter11 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter11 .secMain3 { background: url(/images/chapters/chp11/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter11 .sMa3__hl__wrap { border-bottom: 2px solid #c54608; } #chapter11 .sMa3__hl__wrap::before { background: #c54608; } #chapter11 .sMa3__leadtext { color: white; } #chapter11 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; height: 110px; } #chapter11 .sMa4__hl__wrap { border-bottom: 2px solid #c54608; } #chapter11 .sMa4__hl__wrap::before { background: #c54608; } #chapter11 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp11/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter11 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(153/598*100%); margin-top: calc(-190/598*100%); margin-right: calc(7/598*100%); } #chapter11 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(150/598*100%); margin-top: calc(-150/598*100%); margin-right: calc(6/598*100%); } #chapter11 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(161/598*100%); margin-top: calc(-140/598*100%); margin-right: calc(21/598*100%); } #chapter11 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(110/598*100%); margin-top: calc(-165/598*100%); margin-right: calc(26/598*100%); } #chapter11 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(170/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(20/598*100%); } #chapter11 .sMa4__cS__item.item6 .sMa4__cS__i__de__chara { width: calc(184/598*100%); margin-top: calc(-154/598*100%); margin-right: calc(-20/598*100%); } @media screen and (min-width: 769px) { #chapter11.main { background-image: url(/images/chapters/chp11/bg_main_pc.png),url(/images/chapters/chp11/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter11 .secMainHead { background: url(/images/chapters/chp11/tag_pc.png) top center no-repeat; background-size: contain; } #chapter11 .sMa__charimage .c2d { width: calc(190/1240*100%); left: calc(150/1240*100%); margin-top: calc(-298/1240*100%); } #chapter11 .sMa__charimage .c3d { width: calc(180/1240*100%); left: calc(150/1240*100%); margin-top: calc(-340/1240*100%); } #chapter11 .secMain2 { background: url(/images/chapters/chp11/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter11 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter11 .sMa2__charimage { width: calc(882/1240*100%); margin-top: calc(-10/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter11 .sMa2__charimage img {width: 75%;} #chapter11 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter11 .secMain3 { background: url(/images/chapters/chp11/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter11 .sMa3__hl__wrap { border-bottom: 4px solid #c54608; } #chapter11 .sMa3__hl__wrap::before { background: #c54608; } #chapter11 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter11 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; height: 0px; } #chapter11 .sMa4__hl__wrap { border-bottom: 4px solid #c54608; } #chapter11 .sMa4__hl__wrap::before { background: #c54608; } #chapter11 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp11/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } } @media screen and (min-width: 1401px) { #chapter11.main { background-size: 1920px, 320px; } #chapter11 .secMainHead { background-size: 1280px; } #chapter11 .secMain2 { background-size: 1920px; } #chapter11 .secMain3 { background-size: 1920px; } } /* #CHAPTER12 ---------------------------------------------------------------------------------------------------------------- */ #chapter12.main { background-image: url(/images/chapters/chp12/bg_main_sp.png),url(/images/chapters/chp12/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: 100%, calc(320/750*100%); } #chapter12 .secMainHead { background: url(/images/chapters/chp12/tag_sp.png) top no-repeat; background-size: contain; } #chapter12 .sMH__hl_2 { color: white; } #chapter12 .sMa__charimage .c2d { width: calc(340/750*100%); left: calc(370/750*100%); margin-top: calc(-450/750*100%); } #chapter12 .sMa__charimage .c3d { width: calc(320/750*100%); left: calc(410/750*100%); margin-top: calc(-430/750*100%); } #chapter12 .secMain2 { background: url(/images/chapters/chp12/c2/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter12 .sMa2__catchcopy { position: relative; z-index: 2;} #chapter12 .sMa2__charimage { width: calc(800/750*100%); margin-top: calc(100/750*100%); text-align: right; } #chapter12 .sMa2__detail { margin: calc(323/750*100%) auto 0; } #chapter12 .secMain3 { background: url(/images/chapters/chp12/c3/bg_sp.png) top center no-repeat; background-size: 100%; } #chapter12 .sMa3__hl__wrap { border-bottom: 2px solid #561a78; } #chapter12 .sMa3__hl__wrap::before { background: #561a78; } #chapter12 .sMa3__leadtext { color: white; } #chapter12 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 20px; height: 110px; } #chapter12 .sMa4__hl__wrap { border-bottom: 2px solid #561a78; } #chapter12 .sMa4__hl__wrap::before { background: #561a78; } #chapter12 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp12/c4/cos_textbg1_sp.png) top center no-repeat; background-size: 100%; } #chapter12 .sMa4__cS__item.item1 .sMa4__cS__i__de__chara { width: calc(193/598*100%); margin-top: calc(-140/598*100%); margin-right: calc(2/598*100%); } #chapter12 .sMa4__cS__item.item2 .sMa4__cS__i__de__chara { width: calc(120/598*100%); margin-top: calc(-180/598*100%); margin-right: calc(2/598*100%); } #chapter12 .sMa4__cS__item.item3 .sMa4__cS__i__de__chara { width: calc(160/598*100%); margin-top: calc(-160/598*100%); margin-right: calc(2/598*100%); } #chapter12 .sMa4__cS__item.item4 .sMa4__cS__i__de__chara { width: calc(170/598*100%); margin-top: calc(-180/598*100%); margin-right: calc(21/598*100%); } #chapter12 .sMa4__cS__item.item5 .sMa4__cS__i__de__chara { width: calc(160/598*100%); margin-top: calc(-190/598*100%); margin-right: calc(2/598*100%); } @media screen and (min-width: 769px) { #chapter12.main { background-image: url(/images/chapters/chp12/bg_main_pc.png),url(/images/chapters/chp12/bg.png); background-position: top center; background-repeat: no-repeat, repeat; background-size: calc(1920/1400*100%), calc(320/1400*100%); } #chapter12 .secMainHead { background: url(/images/chapters/chp12/tag_pc.png) top center no-repeat; background-size: contain; } #chapter12 .sMa__charimage .c2d { width: calc(250/1240*100%); left: calc(113/1240*100%); margin-top: calc(-320/1240*100%); } #chapter12 .sMa__charimage .c3d { width: calc(230/1240*100%); left: calc(130/1240*100%); margin-top: calc(-320/1240*100%); } #chapter12 .secMain2 { background: url(/images/chapters/chp12/c2/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter12 .sMa2__catchcopy { width: calc(1580/1240*100%); } #chapter12 .sMa2__charimage { width: calc(800/1240*100%); margin-top: calc(10/1240*100%); margin-right: -130px; z-index: 3; text-align: center;} #chapter12 .sMa2__charimage img {width: 75%;} #chapter12 .sMa2__detail { margin: calc(17/1240*100%) 0 0; } #chapter12 .secMain3 { background: url(/images/chapters/chp12/c3/bg_pc.png) top center no-repeat; background-size: calc(1920/1400*100%); } #chapter12 .sMa3__hl__wrap { border-bottom: 4px solid #561a78; } #chapter12 .sMa3__hl__wrap::before { background: #561a78; } #chapter12 .sMa3__catchcopy { width: calc(1580/1240*100%); } #chapter12 .sMa4__cS__item .sMa4__cS__i__de__text { padding: 0; height: 0px; } #chapter12 .sMa4__hl__wrap { border-bottom: 4px solid #561a78; } #chapter12 .sMa4__hl__wrap::before { background: #561a78; } #chapter12 .sMa4__cS__item .sMa4__cS__i__detail { background: url(/images/chapters/chp12/c4/cos_textbg1_pc.png) top center no-repeat; background-size: 100%; } } @media screen and (min-width: 1401px) { #chapter12.main { background-size: 1920px, 320px; } #chapter12 .secMainHead { background-size: 1280px; } #chapter12 .secMain2 { background-size: 1920px; } #chapter12 .secMain3 { background-size: 1920px; } } /* ---------------------------------------------------------------------------------------------------------------- #TRIAL ---------------------------------------------------------------------------------------------------------------- */ #trial.main { background: url("/images/trial/main/bg_sp.jpg") center top no-repeat; background-size: 100%; background-color: black !important;} #trial .picFrame { display: block; width: 100%; position: relative; } #trial .picFrame .pF__frame { display: block; width: 100%; position: relative; }/* 394px 前提 */ #trial .picFrame .pF__frame .pF__fr__thumb { background: url("/images/trial/pic_bg.png") center center no-repeat; background-size: cover; position: relative; width: 100%; padding: calc(5/394*100%) calc(9/394*100%) calc(9/394*100%) calc(5/394*100%); } #trial .picFrame .pF__frame .pF__fr__thumb img { border-radius: 5px; } #trial .itemList { width: calc(650/750*100%); position: relative; } #trial .iL__item { width: 100%; position: relative; } #trial .iL__item .iL__i__text { width: calc(343/650*100%); position: absolute; } #trial .iL__item .iL__i__pic { width: calc(394/650*100%); } #trial .iL__item.item1 .iL__i__text { top: 0; right: calc(-43/650*100%); margin-top: calc(-18/650*100%); } #trial .iL__item.item2 { margin-top: calc(-34/650*100%); } #trial .iL__item.item2 .iL__i__text { bottom: 0; left: calc(-43/650*100%); margin-bottom: calc(-14/650*100%); } #trial .iL__item.item2 .iL__i__pic { margin-left: calc(260/650*100%); } #trial .secMain { padding-top: calc(115/750*100%); padding-bottom: calc(140/750*100%); } #trial .sMa__detail { width: 100%; margin: 0 auto; position: relative; } #trial .sMa__catchcopy1 { width: calc(420/750*100%); margin-left: calc(290/750*100%); } #trial .sMa__logo { width: calc(398/750*100%); margin: calc(142/750*100%) auto 0; } #trial .sMa__catchcopy2 { width: calc(700/750*100%); margin: calc(-12/750*100%) auto 0; } #trial .sMa__de__text1 { width: calc(700/750*100%); margin: calc(25/750*100%) auto 0; } #trial .sMa__de__text2 { width: 100%; margin: calc(17/750*100%) auto 0; } #trial .secMain2 { background: #290a57 url("/images/trial/chapter/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(36/750*100%); padding-bottom: calc(40/750*100%); position: relative; } #trial .sMa2__picList { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #trial .sMa2__pL__item { width: calc(100%/3); } #trial .sMa2__hl { width: calc(653/750*100%); margin: calc(-25/750*100%) auto 0; position: relative; } #trial .sMa2__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa2__chpSlider__wrap { width: calc(650/750*100%); margin: calc(38/750*100%) auto 0; position: relative; overflow: visible; } #trial .sMa2__cS__item { position: relative; } #trial .sMa2__cS__item a { display: block; position: relative; } #trial .sMa2__cS__item .notes { width: 100%; position: absolute; top: 0; left: 0; margin-top: calc(390/270*100%);} #trial .sMa2__cS__item .notes:lang(de) { width: 30%; position: absolute; top: 0; left: 30%; margin-top: calc(390/270*100%);} @media screen and (min-width: 1440px){#trial .sMa2__cS__item .notes:lang(fr) { margin-top: calc(403/317*100%);}} @media screen and (min-width: 1440px){#trial .sMa2__cS__item .notes:lang(es) { margin-top: calc(403/317*100%);}} @media(min-width: 1025px) {#trial .sMa2__cS__item .notes:lang(de) {top: -10%; }} #trial .sMa2__cS__item .notes:lang(it) { width: 30%; position: absolute; top: 0; left: 35%; margin-top: calc(390/270*100%);} #trial .sMa2__cS__item .btn { display: block; width: calc(174/270*100%); margin: calc(38/270*100%) auto 0; } #trial .sMa2__cS__item .btn:lang(it) { display: block; width: calc(200/270*100%); margin: calc(38/270*100%) auto 0; } #trial .sMa2__cS__item .btn:lang(de) { display: block; width: calc(155/270*100%); margin: calc(38/270*100%) auto 0; } @media(max-width: 826px) {#trial .sMa2__cS__item .btn:lang(de) { display: block; width: calc(174/270*100%); margin: calc(38/270*100%) auto 0; }} @media(min-width: 1024px) {al .sMa2__cS__item .btn { display: block; width: calc(174/270*100%); margin: calc(38/270*100%) auto 0; margin-right: 40px}} #trial .secMain3 { background: #0dca30 url("/images/trial/isleoftims/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa3__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa3__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa3__itemList { margin: calc(14/750*100%) auto 0; } #trial .sMa3__itemList .iL__item.item1 { margin-top: calc(42/650*100%); } #trial .sMa3__text { width: 100%; margin: calc(57/750*100%) auto 0; } #trial .sMa3__btn { width: calc(244/750*100%); margin: calc(40/750*100%) auto 0; } #trial .secMain4 { background: #250c57 url("/images/trial/statue/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa4__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa4__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa4__itemList { margin: calc(37/750*100%) auto 0; } #trial .sMa4__text { width: 100%; margin: calc(57/750*100%) auto 0; } #trial .secMain5 { background: #021f2d url("/images/trial/challenge/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa5__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa5__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa5__itemList { margin: calc(37/750*100%) auto 0; } #trial .sMa5__btn { width: calc(244/750*100%); margin: calc(40/750*100%) auto 0; } #trial .secMain6 { background: #01938e url("/images/trial/co-op/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa6__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa6__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa6__itemList { margin: calc(37/750*100%) auto 0; } #trial .sMa6__itemList .iL__item .iL__i__chara { position: absolute; top: 0; } #trial .sMa6__itemList .iL__item.item1 .iL__i__chara { width: calc(134/650*100%); left: calc(-40/650*100%); margin-top: calc(-32/650*100%); } #trial .sMa6__itemList .iL__item.item2 .iL__i__chara { width: calc(129/650*100%); right: calc(-40/650*100%); margin-top: calc(28/650*100%); } #trial .sMa6__text { width: 100%; margin: calc(57/750*100%) auto 0; } #trial .sMa6__btn { width: calc(244/750*100%); margin: calc(40/750*100%) auto 0; } #trial .secMain7 { background: #2a1178 url("/images/trial/privilege/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa7__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa7__leadtext { width: calc(650/750*100%); margin: calc(27/750*100%) auto 0; position: relative; } #trial .sMa7__itemList { width: calc(600/750*100%); margin: calc(37/750*100%) auto 0; } #trial .sMa7__itemList .sMa7__iL__item { margin-top: calc(75/600*100%); position: relative; } #trial .sMa7__itemList .sMa7__iL__item:first-child { margin-top: 0; } #trial .sMa7__itemList .sMa7__iL__i__hl { width: 100%; } #trial .sMa7__itemList .sMa7__iL__i__pic { width: calc(394/600*100%); margin: calc(20/600*100%) 0 0 calc(200/600*100%); } #trial .sMa7__itemList .sMa7__iL__i__image { width: calc(242/600*100%); position: absolute; top: 0; left: calc(-22/600*100%); margin-top: calc(70/600*100%); } #trial .secMain8 { background: #2a1178; padding-top: calc(40/750*100%); padding-bottom: calc(60/750*100%); position: relative; } #trial .sMa8__hl { width: calc(650/750*100%); margin: 0 auto; position: relative; } #trial .sMa8__stepList { width: calc(650/750*100%); margin: calc(22/750*100%) auto 0; } #trial .sMa8__sL__item { margin-top: calc(40/650*100%); position: relative; } #trial .sMa8__sL__item:first-child { margin-top: 0; } #trial .sMa8__sL__item .sMa8__sL__i__text { width: 100%; } #trial .sMa8__sL__item .sMa8__sL__i__notes { margin: calc(15/600*100%) 0 0 calc(36/600*100%); text-indent: -1em; padding-left: 1em; line-height: 1.61; font-size: 2.66vw; }/* font 20pt */ #trial .sMa8__sL__item .sMa8__sL__i__notes:nth-child(n+3) { margin-top: calc(4/600*100%); } #trial .secMain9 { background: #34276c url("/images/trial/operation/bg_sp.jpg") center top no-repeat; background-size: 100%; padding-top: calc(55/750*100%); padding-bottom: calc(480/750*100%); position: relative; } #trial .sMa9__hl { width: calc(653/750*100%); margin: 0 auto; position: relative; } #trial .sMa9__selectbtnList__wrap { width: 100%; margin: calc(27/750*100%) auto 0; } #trial .sMa9__selectbtnList { width: 100%; margin: 0 auto 0; border-bottom: 1px solid #be8e49; padding: calc(13/750*100%) 0 calc(10/750*100%); position: relative; background: rgba(8,25,64,0.6); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #trial .sMa9__selectbtnList::after { content: ""; display: block; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; } #trial .sMa9__selectbtnList::after { background: #6022bc; padding-top: calc(5/750*100%); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.6); } #trial .sMa9__sbL__item { width: calc(324/750*100%); margin: 0 calc(3/750*100%) 0; position: relative; } #trial .sMa9__sbL__item:nth-child(n+3) { margin-top: calc(6/750*100%); } #trial .sMa9__sbL__item .on { position: absolute; top: 0;left: 0; width: 100%; opacity: 0; } #trial .sMa9__sbL__item.current .on { opacity: 1; } #trial .sMa9__controllerSlider__wrap { width: 100%; margin: 0 auto; padding-top: calc(50/750*100%); } #trial .sMa9__controllerSlider { width: 100%; margin: 0 auto; } #trial .sMa9__notes { width: 100%; margin: calc(50/750*100%) auto 0; } @media screen and (min-width: 641px) { #trial.main { background: url("/images/trial/main/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-bottom: calc(180/1400*100%); background-color: black; } #trial .itemList { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #trial .iL__item { width: calc(394/1240*100%); } #trial .iL__item .iL__i__text { width: calc(428/394*100%); position: relative; margin-bottom: calc(-74/394*100%); } #trial .iL__item .iL__i__text img { width: 100%; max-width: none; } #trial .iL__item .iL__i__pic { width: 100%; } #trial .iL__item.item1 .iL__i__text { right: 0; margin-left: calc(-17/394*100%); margin-top: 0; } #trial .iL__item.item2 { margin-top: 0; } #trial .iL__item.item2 .iL__i__text { left: 0; margin-left: calc(-17/394*100%); margin-bottom: calc(-74/394*100%); } #trial .iL__item.item2 .iL__i__pic { margin-left: 0; } @media(min-width: 1024px) { #trial .iL__item.item2 .iL__i__pic:lang(de) {margin-left: 0; margin-top: 12px;}} @media(min-width: 1024px) { #trial .iL__item .iL__i__pic:lang(de) {margin-left: 0; margin-top: 12px;}} @media(min-width: 1024px) { #trial .iL__item.item2 .iL__i__pic:lang(dk) {margin-left: 0; margin-top: 10px;}} @media(min-width: 1024px) { #trial .iL__item .iL__i__pic:lang(dk) {margin-left: 0; margin-top: 10px;}} #trial .secMain { padding-top: calc(120/1400*100%); padding-bottom: calc(100/1400*100%); } #trial .sMa__detail { width: calc(732/1240*100%); margin-left: calc(497/1240*100%); } #trial .sMa__catchcopy1 { width: 100%; margin-left: 0; } #trial .sMa__logo { width: calc(532/732*100%); margin: calc(6/732*100%) auto 0; } #trial .sMa__catchcopy2 { width: 100%; margin: calc(-8/732*100%) auto 0; } #trial .sMa__de__text1 { width: 100%; margin: calc(38/732*100%) auto 0; } #trial .sMa__de__text2 { width: 100%; margin: calc(21/732*100%) auto 0; } #trial .secMain2 { background: #290a57 url("/images/trial/chapter/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(40/1400*100%); padding-bottom: calc(60/1400*100%); } #trial .sMa2__hl { width: calc(653/1240*100%); margin: calc(-34/1240*100%) auto 0; } #trial .sMa2__leadtext { width: 100%; margin: calc(25/1240*100%) auto 0; } #trial .sMa2__chpSlider__wrap { width: calc(1140/1240*100%); margin: calc(35/1240*100%) auto 0; } #trial .sMa2__cS__item .notes { margin-top: calc(458/317*100%);} #trial .sMa2__cS__item .btn { width: calc(174/317*100%); margin: calc(35/317*100%) auto 0; } #trial .secMain3 { background: #0dca30 url("/images/trial/isleoftims/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1400*100%); padding-bottom: calc(46/1400*100%); } #trial .sMa3__hl { width: calc(653/1240*100%); } #trial .sMa3__leadtext { width: 100%; margin: calc(23/1240*100%) auto 0; } #trial .sMa3__itemList { margin: calc(43/1240*100%) auto 0; } #trial .sMa3__itemList .iL__item.about { width: calc(355/1240*100%); margin-top: calc(-19/1240*100%); } #trial .sMa3__itemList .iL__item.item1 { margin: 0 calc(84/1240*100%) 0 calc(15/1240*100%); } #trial .sMa3__itemList .iL__item.item1::after { content: ""; display: block; width: calc(42/394*100%); height: 0; padding-top: calc(92/394*100%); background: url("/images/trial/arrow.png") center center no-repeat; background-size: contain; position: absolute; bottom: 0; right: calc(-64/394*100%); margin-bottom: calc(68/394*100%); } #trial .sMa3__text { margin: calc(47/1240*100%) auto 0; } #trial .sMa3__btn { width: calc(244/1240*100%); margin: calc(30/1240*100%) auto 0; } #trial .secMain4 { background: #250c57 url("/images/trial/statue/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1400*100%); padding-bottom: calc(50/1400*100%); } #trial .sMa4__hl { width: calc(653/1240*100%); } #trial .sMa4__leadtext { width: 100%; margin: calc(23/1240*100%) auto 0; } #trial .sMa4__itemList { margin: calc(39/1240*100%) auto 0; } #trial .sMa4__itemList .iL__item { margin: 0 calc(42/1240*100%); } #trial .sMa4__text { margin: calc(36/1240*100%) auto 0; } #trial .secMain5 { background: #021f2d url("/images/trial/challenge/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1400*100%); padding-bottom: calc(46/1400*100%); } #trial .sMa5__hl { width: calc(653/1240*100%); } #trial .sMa5__leadtext { width: 100%; margin: calc(23/1240*100%) auto 0; } #trial .sMa5__itemList { margin: calc(47/1240*100%) auto 0; } #trial .sMa5__itemList .iL__item { margin: 0 calc(42/1240*100%); } #trial .sMa5__itemList .iL__item.item1::after { content: ""; display: block; width: calc(42/394*100%); height: 0; padding-top: calc(92/394*100%); background: url("/images/trial/arrow.png") center center no-repeat; background-size: contain; position: absolute; bottom: 0; right: calc(-64/394*100%); margin-bottom: calc(68/394*100%); } #trial .sMa5__btn { width: calc(244/1240*100%); margin: calc(30/1240*100%) auto 0; } #trial .secMain6 { background: #01938e url("/images/trial/co-op/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1400*100%); padding-bottom: calc(46/1400*100%); } #trial .sMa6__hl { width: calc(653/1240*100%); } #trial .sMa6__leadtext { width: 100%; margin: calc(23/1240*100%) auto 0; } #trial .sMa6__itemList { margin: calc(37/1240*100%) auto 0; } #trial .sMa6__itemList .iL__item { margin: 0 calc(42/1240*100%); } #trial .sMa6__itemList .iL__item .iL__i__text { margin-bottom: calc(-64/394*100%); } #trial .sMa6__itemList .iL__item.item1::after { content: ""; display: block; width: calc(42/394*100%); height: 0; padding-top: calc(92/394*100%); background: url("/images/trial/arrow.png") center center no-repeat; background-size: contain; position: absolute; bottom: 0; right: calc(-64/394*100%); margin-bottom: calc(68/394*100%); } #trial .sMa6__itemList .iL__item.item1 .iL__i__chara { width: calc(278/394*100%); left: calc(-257/394*100%); margin-top: calc(-26/394*100%); } #trial .sMa6__itemList .iL__item.item2 .iL__i__chara { width: calc(269/394*100%); right: calc(-233/394*100%); margin-top: calc(-42/394*100%); } #trial .sMa6__text { margin: calc(41/1240*100%) auto 0; } #trial .sMa6__btn { width: calc(244/1240*100%); margin: calc(30/1240*100%) auto 0; } #trial .secMain7 { background: #2a1178 url("/images/trial/privilege/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1400*100%); padding-bottom: calc(60/1400*100%); } #trial .sMa7__hl { width: calc(653/1240*100%); } #trial .sMa7__leadtext { width: 100%; margin: calc(23/1240*100%) auto 0; } #trial .sMa7__itemList { width: 100%; margin: calc(48/1240*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #trial .sMa7__itemList .sMa7__iL__item { width: calc(600/1240*100%); margin-top: calc(111/1240*100%); } #trial .sMa7__itemList .sMa7__iL__item:nth-child(-n+2) { margin-top: 0; } #trial .secMain8 { background: #2a1178; padding-top: calc(30/1240*100%); padding-bottom: calc(60/1240*100%); } #trial .sMa8__hl { width: calc(620/1240*100%); margin: 0; } #trial .sMa8__stepList { width: 100%; margin: calc(17/1240*100%) auto 0; } #trial .sMa8__sL__item { margin-top: calc(30/1240*100%); } #trial .sMa8__sL__item:first-child { margin-top: 0; } #trial .sMa8__sL__item .sMa8__sL__i__notes { margin: calc(10/1240*100%) 0 0 calc(30/1240*100%); line-height: 1.61; font-size: 1vw; }/* font 14pt */ #trial .sMa8__sL__item .sMa8__sL__i__notes:nth-child(n+3) { margin-top: calc(2/1240*100%); } #trial .secMain9 { background: #34276c url("/images/trial/operation/bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); padding-top: calc(55/1240*100%); padding-bottom: calc(100/1240*100%); } #trial .sMa9__hl { width: calc(653/1240*100%); } #trial .sMa9__selectbtnList__wrap { margin: calc(27/1400*100%) auto 0; } #trial .sMa9__selectbtnList { padding: 0 0 calc(5/1400*100%); background: none; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #trial .sMa9__selectbtnList::after { padding-top: calc(5/1400*100%); } #trial .sMa9__sbL__item { width: calc(284/1400*100%); margin: 0 calc(18/1400*100%) 0; } #trial .sMa9__sbL__item:nth-child(n+3) { margin-top: 0; } #trial .sMa9__sbL__item .btn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: transform .1s ease-in-out; transition: transform .1s ease-in-out; backface-visibility: hidden; pointer-events : auto; transform-origin: bottom; } #trial .sMa9__sbL__item:not(.current) .btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #trial .sMa9__sbL__item:not(.current) .btn:hover .on { opacity: 1; } #trial .sMa9__controllerSlider__wrap { width: calc(1240/1240*100%); padding-top: calc(40/1240*100%); } #trial .sMa9__notes { margin: calc(50/1240*100%) auto 0; } } @media screen and (min-width: 1401px) { #trial.main { background-size: 1920px; padding-bottom: 180px; } #trial .secMain { padding-top: 120px; padding-bottom: 100px; } #trial .secMain2 { background-size: 1920px; padding-top: 40px; padding-bottom: 60px; } #trial .secMain3 { background-size: 1920px; padding-top: 55px; padding-bottom: 46px; } #trial .secMain4 { background-size: 1920px; padding-top: 55px; padding-bottom: 50px; } #trial .secMain5 { background-size: 1920px; padding-top: 55px; padding-bottom: 46px; } #trial .secMain6 { background-size: 1920px; padding-top: 55px; padding-bottom: 46px; } #trial .secMain7 { background-size: 1920px; padding-top: 55px; padding-bottom: 60px; } #trial .secMain8 { padding-top: 30px; padding-bottom: 60px; } #trial .sMa8__sL__item .sMa8__sL__i__notes { font-size: 1.4rem; } #trial .secMain9 { background-size: 1920px; padding-top: 55px; padding-bottom: 100px; } #trial .sMa9__selectbtnList__wrap { margin: 27px auto 0; } #trial .sMa9__selectbtnList { padding: 0 0 5px; } #trial .sMa9__selectbtnList::after { padding-top: 5px; } #trial .sMa9__sbL__item { width: 284px; margin: 0 18px 0; } } /* ---------------------------------------------------------------------------------------------------------------- .fixedPanel ---------------------------------------------------------------------------------------------------------------- */ #trial .fixedPanel { width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9; } #trial .fixedPanel.fixed { position: fixed; } #trial .fP__trial { padding-top: 1px; position: relative; } #trial .fP__trial__hl { width: calc(650/750*100%); margin: calc(-54/750*100%) auto 0; position: relative; z-index: 11; } #trial .fP__trial__hl:lang(de) { width: 50%; margin: calc(-54/750*100%) auto 0; position: relative; z-index: 11; } #trial .fP__trial__btnList { background: #0c2e87 url("/images/trial/navi/dl_bg_sp.jpg") center top no-repeat; background-size: 100%; width: 100%; position: relative; margin-top: calc(-12/750*100%); padding: calc(25/750*100%) 0 calc(15/750*100%); box-shadow: 0px -10px 20px 0px rgba(0,0,0,0.4); -webkit-box-shadow: 0px -10px 20px 0px rgba(0,0,0,0.4); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #trial .fP__tri__bL__item { width: calc(214/750*100%); margin: 0 calc(3/696*100%); } #trial .fP__tri__bL__item:nth-child(-n+3) { margin-bottom: calc(6/696*100%); } #trial .fP__subNavi__wrap { background: rgba(123,4,49,1); padding: calc(30/750*100%) 0; position: relative; } #trial .fP__subNavi { width: calc(560/750*100%); margin-left: calc(130/750*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #trial .fP__sN__item { margin: calc(19/560*100%) calc(20/560*100%) 0; position: relative; } #trial .fP__sN__item:nth-of-type(-n+2) { margin-top: 0; } #trial .fP__sN__item.btn1 { width: calc(263/560*100%); } #trial .fP__sN__item.btn2 { width: calc(149/560*100%); } #trial .fP__sN__item.btn3 { width: calc(169/560*100%); } #trial .fP__sN__item.btn4 { width: calc(172/560*100%); } #trial .fP__sN__item.btn5 { width: calc(101/560*100%); } #trial .fP__sN__item.btn6 { width: calc(180/560*100%); } #trial .fP__sN__item.btn7 { width: calc(89/560*100%); } @media screen and (max-width: 640px) { #trial .fP__trial__hl { transition: all .1s ease-in-out; backface-visibility: hidden; pointer-events : auto; transform-origin: bottom; } #trial .fixed .fP__trial__hl { transform: translateY(225%); } #trial .fixed .open .fP__trial__hl { transform: translateY(0%); } #trial .fixed .fP__trial__hl:lang(it) { width: 50%; } #trial .fP__trial__btnList { transition: all .1s ease-in-out; backface-visibility: hidden; pointer-events : auto; transform-origin: bottom; } #trial .fixed .fP__trial__btnList { visibility: hidden; opacity: 0; transform: translateY(100%); } #trial .fixed .open .fP__trial__btnList { visibility: visible; opacity: 1; transform: translateY(0%); } } @media screen and (min-width: 641px) { #trial .fP__trial { width: 100%; } #trial .fP__trial__hl { width: calc(600/1400*100%); margin: 0 auto; } #trial .fP__trial__btnList { background: url("/images/trial/navi/dl_bg_pc.jpg") center top no-repeat; background-size: calc(1920/1400*100%); margin-top: calc(-16/1400*100%); padding: calc(25/1400*100%) 0 calc(15/1400*100%); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #trial .fP__tri__bL__item { width: calc(170/1400*100%); margin: 0 calc(4/1400*100%); } #trial .fP__tri__bL__item:nth-child(-n+3) { margin-bottom: 0; } #trial .fP__subNavi__wrap { padding: 0; } #trial .fP__subNavi { width: calc(1060/1400*100%); margin: auto; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #trial .fP__sN__item { margin: 0; } #trial .fP__sN__item a { display: block; position: relative; } #trial .fP__sN__item a::before { content: ""; display: block; width: 100%; height: 0; padding-top: 5px; position: absolute; left: 0; bottom: 0; background: #e20050; opacity: 0; } #trial .fP__sN__item a:hover::before { opacity: 1; } #trial .fP__sN__item.btn1 { width: calc(216/1060*100%); } #trial .fP__sN__item.btn1 a { padding: calc(20/216*100%) 0; } #trial .fP__sN__item.btn2 { width: calc(122/1060*100%); } #trial .fP__sN__item.btn2 a { padding: calc(20/122*100%) 0; } #trial .fP__sN__item.btn3 { width: calc(139/1060*100%); } #trial .fP__sN__item.btn3 a { padding: calc(20/139*100%) 0; } #trial .fP__sN__item.btn4 { width: calc(142/1060*100%); } #trial .fP__sN__item.btn4 a { padding: calc(20/142*100%) 0; } #trial .fP__sN__item.btn5 { width: calc(83/1060*100%); } #trial .fP__sN__item.btn5 a { padding: calc(20/83*100%) 0; } #trial .fP__sN__item.btn6 { width: calc(146/1000*100%); } #trial .fP__sN__item.btn6 a { padding: calc(20/146*100%) 0; } #trial .fP__sN__item.btn7 { width: calc(73/1060*100%); } #trial .fP__sN__item.btn7 a { padding: calc(20/73*100%) 0; } } @media screen and (min-width: 1401px) { #trial .fP__trial__hl { width: 600px; } #trial .fP__trial__btnList { background-size: 1920px; margin-top: -16px; padding: 25px 0 15px; } #trial .fP__tri__bL__item { width: 170px; margin: 0 4px; } #trial .fP__subNavi { width: 1060px; } } @media screen and (max-width: 640px) { .mTrial__btnList > .ps5, .fP__trial__btnList > .ps5{ order:0;} .mTrial__btnList > .xboxsxs, .fP__trial__btnList > .xboxsxs{ order:1;} .mTrial__btnList > .switch, .fP__trial__btnList > .switch{ order:2;} .mTrial__btnList > .xboxone, .fP__trial__btnList > .xboxone{ order:4;} .mTrial__btnList > .ps4, .fP__trial__btnList > .ps4{ order:3;} .mTrial__btnList > .steam, .fP__trial__btnList > .steam{ order:5;} }