@charset "utf-8"; /* ================================================================== CSS information style info : PAGE ================================================================== */ /* ---------------------------------------------------------------------------------------------------------------- COMMON ---------------------------------------------------------------------------------------------------------------- */ .pcOnly_inline { display: none; } .spOnly_inline { display: inline; } @media screen and (min-width: 641px) { .spOnly_inline { display: none; } .pcOnly_inline { display: inline; } } .basicFrame { display: -webkit-flex; display: flex; position: relative; width: 100%; height: auto; text-decoration: none; border-right: 4px solid #439bb5; border-left: 4px solid #439bb5; } .basicFrame::before { content: ""; display: block; width: 100%; height: 100%; opacity: 0.8; position: absolute; top: 0; left: 0;} .basicFrame .bF__frame { width: 100%; display: block; border-color: #0d2c43; border-style: solid; border-width: 2px 6px; } .basicFrame .bF__frame .bF__box { position: relative; } .basicFrame .bF__frame .bF__box .bF__box__thumb { position: relative; padding-top: 56.25%; } .basicFrame .bF__frame .bF__box .bF__box__thumb img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .basicFrame .bF__frame .bF__box .bF__box__text { position: relative; padding: 10px;} .basicFrame .bF__frame .bF__box .bF__box__text .date { color: #00c2e5; margin-bottom: 0.5em;} .basicFrame .bF__frame .bF__box .bF__box__text .text { color: #fff; line-height: 1.41;} .basicFrame2 { display: -webkit-flex; display: flex; position: relative; width: 100%; height: auto; text-decoration: none; } .basicFrame2 .bF__frame { width: 100%; display: block; } .basicFrame2 .bF__frame::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-color: #439bb5; border-style: solid; border-width: 0 4px; } .basicFrame2 .bF__frame .bF__box { position: relative; } .basicFrame2 .bF__frame .bF__box .bF__box__thumb { position: relative; background: #000; overflow: hidden; } .basicFrame2 .bF__frame .bF__box .bF__box__thumb img { position: relative; vertical-align: top;} .basicFrame2 .bF__frame .bF__box .bF__box__thumb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-color: rgba(2,33,58,0.5); border-style: solid; border-width: 2px 10px; } .main__logo { display: none; } .contents__section {} .pageTile { width: calc(650/750*100%); position: absolute; top: 0; left: 50%; margin-top: calc(38/750*100%); margin-left: calc(-325/750*100%); z-index: 2;} @media screen and (min-width: 641px) { a.basicFrame { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } a.basicFrame { box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicFrame::before { transition: all 0.2s ease 0s; -webkit-transition: all 1.2s ease 0s;} a.basicFrame .bF__frame .bF__box .bF__box__thumb img { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } a.basicFrame:hover{ box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); -webkit-transform: scale(1.05); transform: scale(1.05);} a.basicFrame:hover::before { opacity: 1.0; } a.basicFrame:hover .bF__frame .bF__box .bF__box__thumb img { opacity: 0.8;} a.basicFrame2 { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } a.basicFrame2 { box-shadow: 0px 0px 60px 30px rgba(67,155,181,0); } a.basicFrame2 .bF__frame .bF__box .bF__box__thumb img { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } a.basicFrame2:hover{ box-shadow: 0px 0px 6px 3px rgba(67,155,181,0.7); -webkit-transform: scale(1.05); transform: scale(1.05);} a.basicFrame2:hover .bF__frame .bF__box .bF__box__thumb img { opacity: 0.8;} .main__logo { display: block; position: absolute; top: 0; left: 0; width: calc(200/1320*100%); margin-top: calc(22/1320*100%); margin-left: calc(33/1320*100%); z-index: 100;} .pageTile { width: calc(650/1320*100%); margin-top: calc(38/1320*100%); margin-left: calc(-325/1320*100%); } /* news */ #toppage .newsSlider a.basicFrame .bF__frame .bF__box .bF__box__thumb::after { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -webkit-transform: scale(1.0); transform: scale(1.0);} #toppage .newsSlider a.basicFrame:hover .bF__frame .bF__box .bF__box__thumb::after { -webkit-transform: scale(1.1); transform: scale(1.1);} } @media screen and (min-width: 1321px) { .main__logo { width: 200px; margin-top: 22px; margin-left: 33px;} .pageTile { width: 650px; margin-top: 38px; margin-left: -325px; } } /* ---------------------------------------------------------------------------------------------------------------- #toppage ---------------------------------------------------------------------------------------------------------------- */ #toppage { z-index: 2; } @media screen and (min-width: 641px) { #toppage { padding-bottom: calc(100/1320*100%);} } @media screen and (min-width: 1321px) { #toppage { padding-bottom: 100px;} } /* -------------------------------------------------------- .countdownArea -------------------------------------------------------- */ #toppage .countdownArea { padding: 0; margin-top: 0; position: relative; top: 0; left: 0; width: 100%; } #toppage .countdownArea .cdA__block { padding: 0;} #toppage .countdownArea .cdA__iframeWrap { position: relative; width: 100%; height: 100%; padding-top: calc(145/750*100%);} #toppage .countdownArea .cdA__iframeWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} @media screen and (min-width: 641px) { #toppage .countdownArea { position: absolute; } #toppage .countdownArea .cdA__block { padding: 0;} #toppage .countdownArea .cdA__iframeWrap { padding-top: calc(128/1260*100%);} #toppage .countdownArea .cdA__iframeWrap iframe { } } @media screen and (min-width: 1321px) { #toppage .countdownArea { padding: 0px 0 0;} } /* ---------------------------------------------------------------------------------------------------------------- magnific COUNTDOWN ---------------------------------------------------------------------------------------------------------------- */ .modal_mfpIframe_CD.mfp-bg { z-index: 9998; opacity: 0.90; background: #000; } .modal_mfpIframe_CD.mfp-wrap { z-index: 9999;} .modal_mfpIframe_CD .mfp-container { padding: 30px 0;} .modal_mfpIframe_CD .mfp-iframe-scaler { padding-top: calc(640/640*100%);} .modal_mfpIframe_CD .mfp-iframe-scaler .mfp-iframe { background: transparent!important; box-shadow: none;} .modal_mfpIframe_CD .mfp-iframe-holder .mfp-content { max-width: 100%; } .modal_mfpIframe_CD .mfp-iframe-holder .mfp-close { position: fixed; top: 0; right: 0; background: url(../img/btn_close.png) top right no-repeat; background-size: auto 60%; background-position: calc(100% - 30px) 10px;} @media screen and (min-width: 641px) { .modal_mfpIframe_CD .mfp-iframe-scaler { padding-top: calc(500/1060*100%);} .modal_mfpIframe_CD .mfp-close { right: calc(10/1060*100%); } } @media screen and (min-width: 1281px) { .modal_mfpIframe_CD .mfp-iframe-scaler { padding-top: 500px;} .modal_mfpIframe_CD .mfp-close { right: 10px; } } /* -------------------------------------------------------- .bgvideoArea -------------------------------------------------------- */ #toppage { transform-style: preserve-3d; perspective: 1000px; } #toppage .bgvideoArea { display: block; position: absolute; top: 0; left: 0; width: 100%; margin-top: calc(307/750*100%); background: #000; z-index: -1; overflow: hidden;} #toppage .bgvideoArea::before { content:""; display: block; padding-top: 56.25%; } #toppage .bvA__player { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } #toppage .bgvideoArea .shadowBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(40,167,214,0.46) 21%,rgba(0,132,165,0) 50%,rgba(0,132,165,0.56) 80%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(40,167,214,0.46) 21%,rgba(0,132,165,0) 50%,rgba(0,132,165,0.56) 80%,rgba(0,0,0,1) 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%); } #toppage.cd .bgvideoArea { margin-top: calc(402/750*100%); } @media screen and (max-width: 640px) { #toppage .bgvideoArea { height: auto!important; } #toppage .bvA__player { width: 100%!important; height: 100%!important; left: 0!important; top: 0!important;} } @media screen and (min-width: 641px) { #toppage .bgvideoArea { /*position: fixed;*/ margin: 0;} #toppage .bvA__player { width: 640px; height: 360px; } #toppage.cd .bgvideoArea { margin-top: calc(163/750*100%); } #toppage.cd .bgvideoArea { margin-top: calc(0/750*100%); } } @media screen and (min-width: 1321px) { #toppage.cd .bgvideoArea { margin-top: 163px; } #toppage.cd .bgvideoArea { margin-top: 0; } } /* -------------------------------------------------------- .opvideopArea -------------------------------------------------------- */ #toppage .opvideopArea { position: relative; z-index: 1; } #toppage .opvideopArea { display: block; position: absolute; top: 0; left: 50%; width: calc(1280/750*100%); margin-left: calc(-644/750*100%); margin-top: calc(-143/750*100%); background: #000; } #toppage .opvideopArea { margin-top: calc(143/750*100%); } #toppage .opvideopArea::before { content:""; display: block; padding-top: 56.25%; } #toppage .ovA__player { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } @media screen and (min-width: 641px) { #toppage .opvideopArea { width: calc(1280/1320*100%); margin-left: calc(-644/1320*100%); margin-top: calc(-60/1320*100%); } } @media screen and (min-width: 1321px) { #toppage .opvideopArea { width: 1280px; margin-left: -644px; margin-top: -60px; } } /* -------------------------------------------------------- .heroSection -------------------------------------------------------- */ #toppage .heroSection { position: relative; z-index: 3; overflow: hidden; padding-bottom: calc(60/750*100%);} #toppage .heroSection::before { content:""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin-top: calc(680/750*100%); background: rgba(0,0,0,0.8); } #toppage .heroSection .hS__block { position: relative; padding: 1px 0; height: 100%;} #toppage .heroSection .hS__logo { width: calc(540/750*100%); margin: calc(69/750*100%) auto calc(266/750*100%); position: relative;} /*#toppage .heroSection .hS__logo { margin-top: calc(212/750*100%); }*/ #toppage.cd .heroSection .hS__logo { margin-top: calc(19/750*100%);} #toppage .heroSection .box { width: calc(650/750*100%); margin: 0 auto calc(40/750*100%); position: relative; } #toppage .heroSection .box .release { width: calc(379/650*100%); margin: 0 auto; } #toppage .heroSection .box .bnr_ig { width: calc(650/650*100%); margin: calc(20/650*100%) auto 0; background: #000; } #toppage .heroSection .box .bnr_ig .bF__box__thumb { padding-top: calc(141/546*100%); } #toppage .heroSection .swiper-container-horizontal > .swiper-pagination-bullets, #toppage .heroSection .swiper-pagination-custom, #toppage .heroSection .swiper-pagination-fraction { position: relative; bottom: 0px; } #toppage .heroSection .hS__pagination { padding-top: calc(15/570*100%); } #toppage .heroSection .hS__pagination .swiper-pagination-bullet { width: calc(23/570*100%); height: 0; padding-top: calc(21/570*100%); border: 1px solid #429ab4; background: #0d2c43; opacity: 1; } #toppage .heroSection .hS__pagination .swiper-pagination-bullet-active { background: #429ab4; opacity: 1; } #toppage .heroSection .hS__pagination .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(7/570*100%); } #toppage .heroSection .pickupVideoBlock { width: calc(570/750*100%); margin: 0 auto calc(30/750*100%); position: relative;} #toppage .heroSection .bnrBlock { width: calc(570/750*100%); margin: 0 auto calc(30/750*100%); position: relative;} #toppage .heroSection .etcBlock { width: 100%; margin: 0 auto calc(50/750*100%); position: relative;} #toppage .heroSection .etcBlock .etcBlk__item { margin: 0 auto; position: relative;} #toppage .heroSection .etcBlock .tw { width: calc(492/750*100%); } #toppage .heroSection .etcBlock .letter { width: calc(490/750*100%); margin-top: calc(50/750*100%); } #toppage .newsArea {} #toppage .newsSlider__wrap { overflow: visible; width: calc(650/750*100%); margin: 0 auto;} #toppage .newsSlider { /*display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start;*/ } #toppage .newsSlider { width: 100%; height: auto;} #toppage .newsSlider .nS__item { display: block; width: calc(292/750*100%); height: auto!important; margin-right: calc(20/650*100%); } #toppage .newsSlider .nS__item { display: -webkit-flex; display: flex; } #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .date { font-size: calc(18/750*100vw);} #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .text { font-size: calc(20/750*100vw);} #toppage .newsSlider .basicFrame::before { background: #12212a url(../../_img/news/btn_base_news.jpg?190624) top center no-repeat; background-size: 100%; box-shadow: 0px 0px 30px 0px rgba(29,88,191,0.8) inset; -webkit-box-shadow: 0px 0px 30px 0px rgba(35,84,170,0.8) inset; } #toppage .newsSlider a.mfpYt .bF__frame .bF__box .bF__box__thumb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../img/icon_play.png) center center no-repeat; background-size: calc(72/272*100%); } #toppage .newsSlider__wrap .swiper-button-prev, #toppage .newsSlider__wrap .swiper-button-next { display: none; } @media screen and (max-width: 640px) { #toppage .heroSection { height: auto!important; } #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text { padding: 5px;} } @media screen and (min-width: 641px) { #toppage .heroSection { padding-bottom: 0; background: rgba(250,250,0,0.0);} #toppage .heroSection::before { height: auto; position: absolute; top: inherit; bottom: 0; margin-top: auto; padding-top: calc(200/1320*100%);} #toppage .heroSection .hS__block { background: rgba(250,0,0,0.0)} #toppage .heroSection .hS__logo { width: calc(505/1320*100%); position: relative; left: 50%; margin: calc(63/1320*100%) 0 calc(102/1320*100%) calc(93/1320*100%); } #toppage.cd .heroSection .hS__logo { margin-top: calc(113/1320*100%);} #toppage .heroSection .box { width: calc(600/1320*100%); position: relative; left: 50%; margin: 0 0 calc(0/1320*100%) calc(-597/1320*100%); } #toppage .heroSection .box .release { width: calc(337/600*100%); position: absolute; top: 0; right: 0; margin-top: calc(-100/600*100%); margin-right: calc(-510/600*100%); } #toppage .heroSection .box .bnr_ig { width: calc(566/600*100%); margin: calc(0/600*100%) 0 0 calc(17/600*100%); } #toppage .heroSection .hS__pagination { padding-top: calc(10/270*100%); } #toppage .heroSection .hS__pagination .swiper-pagination-bullet { width: calc(15/270*100%); height: 0; padding-top: calc(11/270*100%); border-width: 2px; } #toppage .heroSection .hS__pagination .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 calc(5/270*100%); } #toppage .heroSection .pickupVideoBlock , #toppage .heroSection .bnrBlock { width: calc(270/1320*100%); position: absolute; top: 0; left: 50%; margin: calc(441/1320*100%) 0 0;} #toppage .heroSection .pickupVideoBlock .puVideoSlider__wrap , #toppage .heroSection .bnrBlock .bnrSlider__wrap { overflow: visible; } #toppage .heroSection .pickupVideoBlock { margin-left: calc(12/1320*100%); } #toppage .heroSection .bnrBlock { margin-left: calc(309/1320*100%); } #toppage .heroSection .pickupVideoBlock a.basicFrame:hover .bF__frame .bF__box .bF__box__thumb img { opacity: 1;} #toppage .heroSection .bnrBlock a.basicFrame:hover .bF__frame .bF__box .bF__box__thumb img { opacity: 1;} #toppage .heroSection .etcBlock { width: calc(1160/1320*100%); margin: calc(10/1320*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #toppage .heroSection .etcBlock .etcBlk__item { margin: 0; } #toppage .heroSection .etcBlock .tw { width: calc(276/1160*100%); margin-left: calc(-4/1160*100%); } #toppage .heroSection .etcBlock .letter { width: calc(245/1160*100%); margin-top: 0; margin-left: calc(22/1160*100%); } #toppage .newsArea { width: calc(1160/1320*100%); margin: 0 auto; padding: calc(15/1320*100%) 0 calc(30/1320*100%); overflow: visible; } #toppage .newsSlider__wrap { width: 100%;} #toppage .newsSlider { width: 100%; height: auto;} #toppage .newsSlider .nS__item { max-width: 270px; width: calc(272/1160*100%); height: auto!important; margin-right: calc(20/1160*100%); } #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .date { font-size: calc(12/1320*100vw);} #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .text { font-size: calc(14/1320*100vw);} #toppage .newsSlider__wrap .swiper-button-prev, #toppage .newsSlider__wrap .swiper-button-next { display: block; top: 0; width: 100%; height: 100%; margin-top: 0; background: none; } #toppage .newsSlider__wrap .swiper-button-prev { right: 50%; margin-right: calc(50% + 0px); left: inherit;} #toppage .newsSlider__wrap .swiper-button-next { left: 50%; margin-left: calc(50% + 0px); } #toppage .newsSlider__wrap .swiper-button-prev::after, #toppage .newsSlider__wrap .swiper-button-next::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 .newsSlider__wrap .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) calc(100% - 20px) center no-repeat; background-size: 15px; } #toppage .newsSlider__wrap .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) calc(20px) center no-repeat; background-size: 15px; } #toppage .newsSlider__wrap .swiper-button-prev:hover::after, #toppage .newsSlider__wrap .swiper-button-next:hover::after { background-size: 18px; } #toppage .newsSlider__wrap .nS__item { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #toppage .newsSlider .nS__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} #toppage .newsSlider .nS__item.swiper-slide-next + .nS__item { opacity: 1;} #toppage .newsSlider .nS__item.swiper-slide-next + .nS__item + .nS__item { opacity: 1;} #toppage .newsSlider__wrap .swiper-button-next.swiper-button-disabled, #toppage .newsSlider__wrap .swiper-button-prev.swiper-button-disabled { opacity: 0.15;} } @media screen and (min-width: 1321px) { #toppage .heroSection::before { padding-top: 200px;} #toppage .heroSection .hS__logo { width: 505px; margin: 63px 0 102px 93px; } #toppage.cd .heroSection .hS__logo { margin-top: 113px;} #toppage .heroSection .box { width: 600px; margin: 0 0 0px -597px; } #toppage .heroSection .pickupVideoBlock , #toppage .heroSection .bnrBlock { width: 270px; margin: 441px 0 0;} #toppage .heroSection .pickupVideoBlock { margin-left: 12px; } #toppage .heroSection .bnrBlock { margin-left: 309px; } #toppage .heroSection .etcBlock { width: 1160px; margin: 10px auto 0; } #toppage .newsArea { width: 1160px; padding: 15px 0 40px; } #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .date { font-size: 1.2rem;} #toppage .newsSlider .nS__item .basicFrame .bF__frame .bF__box .bF__box__text .text { font-size: 1.4rem;} } /* -------------------------------------------------------- .productsArea -------------------------------------------------------- */ #toppage .productsArea { background: #001122 url(../../_img/products_v2/bg1_sp.jpg) top center no-repeat; background-size: 100%; padding: calc(80/750*100%) 0 0;} #toppage .productsArea .pA__blockTOP { background: url(../../_img/products_v3/bg2_sp.jpg) top center no-repeat; background-size: 100%; padding: 1px 0; margin-bottom: calc(0/750*100%); border-top: 1px solid rgba(66,102,143,0.2); border-bottom: 1px solid rgba(66,102,143,0.2); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4); } #toppage .pA__blockTOP .hl { width: calc(650/750*100%); margin: calc(-40/750*100%) auto calc(20/750*100%);} #toppage .pA__blockTOP .pA__intro { width: calc(650/750*100%); margin: 0 auto calc(74/750*100%);} #toppage .pA__blockTOP .pA__intro .pA__i__name { width: calc(666/650*100%); margin-bottom: calc(20/650*100%); margin-left: calc(-9/650*100%); } #toppage .pA__blockTOP .pA__intro .pA__i__release { width: calc(424/650*100%); margin-bottom: calc(13/650*100%); margin-left: calc(-38/650*100%); } #toppage .pA__blockTOP .pA__intro .pA__i__comment { width: calc(647/650*100%); margin-bottom: calc(5/650*100%); margin-left: calc(-7/650*100%); } #toppage .pA__blockTOP .pA__intro .pA__i__hardset { width: 100%; } #toppage .productsArea .pA__blockMID { padding: 1px 0; } #toppage .productsArea .pA__blockMID .selectbtnSlider__wrap { width: calc(650/750*100%); margin: calc(-45/750*100%) auto 0; position: relative; } #toppage .productsArea .pA__blockMID .productsSlider__wrap { width: calc(650/750*100%); margin: 0 auto calc(70/750*100%); position: relative; } #toppage .pA__blockMID .selectbtnSlider { width: 100%; margin: 0 auto calc(50/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: stretch; } #toppage .pA__blockMID .selectbtnSlider .sS__item { width: calc(155/650*100%); } #toppage .pA__blockMID .selectbtnSlider .sS__item .basicFrame { border-width: 0 2px; } #toppage .pA__blockMID .selectbtnSlider .sS__item .basicFrame .bF__frame { border-width: 1px 3px; } #toppage .pA__blockMID .selectbtnSlider .bF__box__btn { background: url(../../_img/products_v5/tab/btn_off_sp.png) center center no-repeat; background-size: cover; overflow: visible; position: relative; } #toppage .pA__blockMID .selectbtnSlider .bF__box__btn::before { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; content: ""; display: block; width: 100%; height: 100%; background: url(../../_img/products_v5/tab/btn_on_sp.png); position: absolute; top: 0%; left: 0; opacity: 0.0; } #toppage .pA__blockMID .selectbtnSlider .bF__box__btn img { position: relative; } /*#toppage .pA__blockMID .selectbtnSlider .swiper-slide-thumb-active .bF__box__btn::before { -webkit-transform: scale(1); transform: scale(1); top: 0; opacity: 0.8; }*/ #toppage .pA__blockMID .selectbtnSlider .sS__item.active .bF__box__btn::before { opacity: 0.8; } #toppage .pA__blockMID .productsSlider { width: 100%; margin: 0 auto; } #toppage .pA__blockMID .productsSlider .pS__item { width: 100%; position: relative; } #toppage .pA__blockMID .productsSlider .pS__item .basicFrame .bF__frame { border-width: 2px 6px; } #toppage .pA__blockMID .productsSlider .pS__item .pS__item__conts { width: 100%;} #toppage .pA__blockMID .productsSlider .pS__item .pS__item__conts .pS__item__co__box { position: relative; } #toppage .pS__item__conts .pS__item__co__text { width: 100%; margin-bottom: calc(42/650*100%); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__ttl { width: calc(590/650*100%); margin-bottom: calc(30/650*100%);} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__list { width: calc(590/650*100%); margin-bottom: calc(25/650*100%); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__list img { vertical-align: top;} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price { width: 100%; text-align: right; color: #c6c6c6; font-size: calc(18/750*100vw); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price__notes { display: block; font-size: calc(17/750*100vw); margin-bottom: calc(10/750*100vw); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price .addPrice { color: #fff; font-size: 1.7em; } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__btn { width: calc(510/650*100%); margin: 0 auto;} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__btn a { display: block; position: relative; border-color: #77262e; border-style: solid; border-width: 1px 4px; background: url(../../_img/products_v2/privilege/btn_off_sp.png) center center no-repeat; background-size: cover;} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__btn a img { width: 100%; display: block; vertical-align: top;} #toppage #prodPkg .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-bottom: calc(27/650*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__text { margin-bottom: calc(30/650*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-bottom: calc(27/650*100%);} /* #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__btn { width: calc(510/650*100%); margin: 0 auto;} #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__btn a { display: block; position: relative; border-color: #77262e; border-style: solid; border-width: 1px 4px; background: url(../../_img/products_v2/privilege/btn_off_sp.png) center center no-repeat; background-size: cover;} #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__btn a img { width: 100%; display: block; vertical-align: top;} */ #toppage .pS__item__conts .pS__item__co__privi { width: 100%; margin-bottom: calc(30/650*100%); } /*#toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__ttl { width: calc(510/650*100%); margin: 0 auto calc(-32/650*100%); position: relative; z-index: 2;}*/ #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont { } #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__pic { } #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn { width: calc(510/630*100%); position: absolute; bottom: 0; left: calc(60/630*100%); margin-bottom: calc(20/630*100%);} #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn a { display: block; position: relative; border-color: #77262e; border-style: solid; border-width: 1px 4px; background: url(../../_img/products_v2/privilege/btn_off_sp.png) center center no-repeat; background-size: cover;} #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn a img { width: 100%; display: block; vertical-align: top;} #toppage .pA__blockMID .productsSlider .pS__item .notesList { width: 100%;} #toppage .pA__blockMID .productsSlider .pS__item .notesList li { text-indent: -1em; padding-left: 1em; line-height: 1.41; color: #b5b5b5; font-size: calc(18/750*100vw);} #toppage #prodDl .pS__item__conts .pS__item__co__box { margin-bottom: calc(80/650*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox { width: 100%; padding: calc(10/650*100%) 0; margin-bottom: calc(30/650*100%); border-left: 2px solid #439bb5; border-right: 2px solid #439bb5;} #toppage #prodDl .pS__item__conts .pS__item__co__longbox::before , #toppage #prodDl .pS__item__conts .pS__item__co__longbox::after { content: ""; display: block; width: 4px; height: 100%; position: absolute; top: 0; border-top: 1px solid #439bb5; border-bottom: 1px solid #439bb5;} #toppage #prodDl .pS__item__conts .pS__item__co__longbox::before { left: 0; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox::after { right: 0; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text { margin-bottom: 0; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__ttl { width: calc(590/650*100%); margin: 0 auto calc(30/650*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__list { width: calc(590/650*100%); margin: 0 auto calc(30/650*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__price { width: calc(300/650*100%); margin-left: calc(320/650*100%); margin-bottom: calc(23/650*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__btn { width: calc(510/650*100%); margin: 0 auto calc(20/650*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__btn a { display: block; position: relative; border-color: #77262e; border-style: solid; border-width: 1px 4px; background: url(../../_img/products_v2/privilege/btn_off_sp.png) center center no-repeat; background-size: cover;} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__btn a img { width: 100%; display: block; vertical-align: top;} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__notesList { width: calc(590/650*100%); margin: 0 auto; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__notestext { width: calc(590/650*100%); margin: 1.5em auto 0.5em; line-height: 1.41; font-size: calc(18/750*100vw);} #toppage #prodSet .pS__item__conts .pS__item__co__text { margin-bottom: calc(38/650*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__list { margin-bottom: calc(40/650*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__img { width: calc(650/650*100%); margin-bottom: calc(0/650*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__txt { display: none; } #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__btnVideo { display: none; } #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-top: calc(8/650*100%); margin-bottom: calc(27/650*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__figure { margin-bottom: calc(30/650*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__ttl { display: none; } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__txt { width: 100%; margin-bottom: calc(20/650*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__btnVideo { width: 100%; margin-bottom: calc(20/650*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table { width: 100%; margin-bottom: calc(15/650*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table table { width: 100%; margin-bottom: calc(5/650*100%); font-size: calc(20/750*100vw);} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table th , #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table td { border: 1px solid #3c3c3c; line-height: 1.41; padding: 1.0rem 1.0rem;} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table th { white-space: nowrap; vertical-align: middle; text-align: center; font-weight: normal; } #toppage #prodDlc .pS__item__conts .pS__item__co__text { margin-bottom: calc(30/650*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__text .pS__item__co__te__list { margin-bottom: calc(30/650*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__text .pS__item__co__te__text { width: calc(620/650*100%); margin-bottom: calc(20/650*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox { width: 100%; padding: calc(20/650*100%) 0; margin-bottom: calc(50/650*100%); border-left: 2px solid #439bb5; border-right: 2px solid #439bb5; background: rgba(15,32,51,0.4); } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::before , #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::after { content: ""; display: block; width: 4px; height: 100%; position: absolute; top: 0; border-top: 1px solid #439bb5; border-bottom: 1px solid #439bb5; } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::before { left: 0; } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::after { right: 0; } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox .pS__item__co__pic{ width: calc(590/646*100%); margin: 0 auto; } #toppage .pA__blockBTM { width: 100%; position: relative; background: #01080f; } #toppage .pA__blockBTM .pA__spec { width: calc(650/750*100%); margin: 0 auto; padding: calc(30/750*100%) 0 calc(40/750*100%);} #toppage .pA__blockBTM .pA__spec .pA__s__name { width: 100%; margin-left: calc(-10/650*100%); margin-bottom: calc(24/650*100%); } #toppage .pA__blockBTM .pA__spec .pA__s__list { width: 100%; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li { margin-bottom: calc(20/650*100%); } #toppage .pA__blockBTM .pA__spec .pA__s__list > li:last-child { margin-bottom: 0; } #toppage .pA__blockBTM .pA__spec .pA__s__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 .pA__blockBTM .pA__spec .pA__s__list > li dl { font-size: calc(20/750*100vw); } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dt { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; align-items: center; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dt { width: calc(180/650*100%); padding: 6px 10px 3px 10px; text-align: center; background: #0e2838; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dt span { display: block; font-size: 0.8em;} #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd { width: calc(470/650*100%); padding: 6px 10px 3px 10px; line-height: 1.41;} #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd span { display: inline; font-size: calc(14/750*100vw);} @media screen and (min-width: 641px) { #toppage .productsArea { background: #001122 url(../../_img/products_v2/bg1_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); padding: calc(80/1320*100%) 0 0;} #toppage .productsArea .pA__blockTOP { background: url(../../_img/products_v3/bg2_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #toppage .pA__blockTOP .hl { width: calc(650/1260*100%); margin: calc(-44/1260*100%) auto calc(20/1260*100%);} #toppage .pA__blockTOP .pA__intro { width: calc(650/1260*100%); margin: 0 0 calc(83/1260*100%); position: relative; } #toppage .pA__blockTOP .pA__intro .pA__i__name { width: calc(666/650*100%); margin-bottom: calc(14/650*100%); margin-left: calc(-7/650*100%); } #toppage .pA__blockTOP .pA__intro .pA__i__release { width: calc(417/650*100%); position: absolute; top: 0; left: calc(858/650*100%); margin-top: calc(35/650*100%); margin-bottom: 0; margin-left: 0; } #toppage .pA__blockTOP .pA__intro .pA__i__comment { width: calc(667/650*100%); margin-bottom: 0; margin-left: calc(-8/650*100%); } #toppage .pA__blockTOP .pA__intro .pA__i__hardset { width: calc(393/650*100%); position: absolute; top: 0; left: calc(869/650*100%); margin-top: calc(80/650*100%); } #toppage .productsArea .pA__blockMID { } #toppage .productsArea .pA__blockMID .selectbtnSlider__wrap { width: calc(1260/1260*100%); margin-top: calc(-59/1260*100%); overflow: visible;} #toppage .productsArea .pA__blockMID .productsSlider__wrap { width: calc(1260/1260*100%); margin-bottom: calc(60/1260*100%); overflow: visible;} #toppage .pA__blockMID .selectbtnSlider { margin: 0 auto calc(50/1260*100%); } #toppage .pA__blockMID .selectbtnSlider .sS__item { width: calc(300/1260*100%); } #toppage .pA__blockMID .selectbtnSlider .sS__item .basicFrame { border-width: 0 4px; } #toppage .pA__blockMID .selectbtnSlider .sS__item .basicFrame .bF__frame { border-width: 2px 6px; } #toppage .pA__blockMID .selectbtnSlider .bF__box__btn { background: url(../../_img/products_v5/tab/btn_off_pc.png) center center no-repeat; background-size: cover; overflow: hidden; } #toppage .pA__blockMID .selectbtnSlider .bF__box__btn::before { background: url(../../_img/products_v5/tab/btn_on_pc.png); } #toppage .pA__blockMID .selectbtnSlider .sS__item { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -webkit-transform: scale(1); transform: scale(1);} #toppage .pA__blockMID .selectbtnSlider .bF__box__btn::before { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -webkit-transform: scale(1.5); transform: scale(1.5);} #toppage .pA__blockMID .selectbtnSlider .sS__item:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } #toppage .pA__blockMID .selectbtnSlider .sS__item:hover .bF__box__btn { overflow: visible; } #toppage .pA__blockMID .selectbtnSlider .sS__item.active .bF__box__btn::before { overflow: visible; opacity: 0.8; -webkit-transform: scale(1.0); transform: scale(1.0);} #toppage .pA__blockMID .productsSlider { } #toppage .pA__blockMID .productsSlider .pS__item { } #toppage .pA__blockMID .productsSlider .pS__item .pS__item__conts { margin-bottom: calc(20/1260*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; align-items: stretch; } #toppage .pA__blockMID .productsSlider .pS__item .pS__item__conts .pS__item__co__box { } #toppage .pS__item__conts .pS__item__co__text { width: 100%; margin-bottom: calc(17/1260*100%); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__ttl { width: calc(590/1260*100%); margin-bottom: calc(33/1260*100%);} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__list { width: calc(467/1260*100%); margin-bottom: calc(23/1260*100%);} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-top: calc(-11/1260*100%); font-size: calc(18/1320*100vw); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price__notes { font-size: calc(12/1320*100vw); margin-bottom: calc(10/1320*100vw); } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price .addPrice { } #toppage .pS__item__conts .pS__item__co__privi { width: calc(394/1260*100%); margin-bottom: 0; } #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont { } #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn { width: calc(334/374*100%); left: calc(20/374*100%); margin-bottom: calc(20/374*100%);} #toppage .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn a { background: url(../../_img/products_v2/privilege/btn_off_pc.png) center center no-repeat; background-size: cover;} #toppage #prodPkg .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-bottom: calc(17/1260*100%); } #toppage #prodPkg .pS__item__conts .pS__item__co__text .pS__item__co__te__btn { width: calc(334/1260*100%); margin: 0 0 0 auto; } #toppage .pA__blockMID .productsSlider #prodDl.pS__item .pS__item__conts .pS__item__co__box { width: calc(590/1260*100%);} #toppage .pA__blockMID .productsSlider #prodDl.pS__item .pS__item__conts .pS__item__co__longbox { width: 100%;} #toppage #prodDl .pS__item__conts .pS__item__co__box { margin-bottom: calc(30/1260*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__box:first-child { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox { padding: calc(20/1260*100%) 0; margin-bottom: 0; border-width: 1px;} #toppage #prodDl .pS__item__conts .pS__item__co__longbox::before , #toppage #prodDl .pS__item__conts .pS__item__co__longbox::after { width: 5px; } #toppage #prodDl .pS__item__conts .pS__item__co__text { margin-bottom: calc(20/590*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__ttl { width: 100%; margin-bottom: calc(33/590*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__list { width: calc(467/590*100%); margin-bottom: calc(23/590*100%);} /* #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__price { width: calc(300/590*100%); margin-top: calc(-11/590*100%); margin-bottom: calc(17/590*100%); margin-left: calc(290/590*100%);} */ #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-bottom: calc(17/590*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__text .pS__item__co__te__btn { width: calc(334/590*100%); margin: 0 auto; } #toppage #prodDl .pS__item__conts .pS__item__co__privi { width: 100%; align-self: flex-end;} /*#toppage #prodDl .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn { width: calc(334/570*100%); left: calc(118/570*100%); margin-bottom: calc(20/570*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn a { background: url(../../_img/products_v2/privilege/btn_off_pc.png) center center no-repeat; background-size: cover;}*/ #toppage #prodDl .pS__item__conts .pS__item__co__box--dl1 .pS__item__co__text .pS__item__co__te__list { margin-bottom: calc(76/590*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__ttl { width: calc(1037/1258*100%); margin: 0 0 calc(30/1258*100%) calc(39/1258*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__list { width: calc(467/1258*100%); margin: 0 0 0 calc(39/1258*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__price { width: calc(300/1258*100%); margin: calc(-31/1280*100%) 0 calc(10/1258*100%) calc(919/1258*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__btn { width: calc(334/1258*100%); margin: 0 auto calc(20/1258*100%);} #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__notesList { width: calc(1180/1258*100%); margin: 0 0 0 calc(39/1258*100%); } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__notestext { width: calc(1180/1258*100%); margin: 1.5em auto 0.5em; line-height: 1.41; font-size: calc(12/1320*100vw);} #toppage #prodSet .pS__item__conts .pS__item__co__box:first-child { margin-bottom: calc(48/1260*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__list { width: calc(660/1260*100%); margin-bottom: calc(35/1260*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__txt { display: block; width: calc(419/1260*100%); margin-bottom: calc(30/1260*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__btnVideo { display: block; width: calc(458/1260*100%); margin-bottom: calc(62/1260*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__img { position: absolute; top: 0; right: calc(34/1260*100%); width: calc(517/1260*100%); margin-bottom: 0;} #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__price { margin-bottom: calc(17/1260*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__text .pS__item__co__te__btn { width: calc(334/1260*100%); margin: 0 0 0 auto; } #toppage #prodSet .pS__item__conts .pS__item__co__figure { width: calc(394/1260*100%); margin-bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__ttl { display: block; width: 100%; margin-bottom: calc(19/394*100%); } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__txt { display: none; } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__btnVideo { display: none; } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table { width: 100%; margin-bottom: calc(15/394*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table table { width: 100%; margin-bottom: calc(5/394*100%); font-size: 0.9848vw; }/*13pt*/ #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table th , #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table td { padding: calc(10/394*100%) calc(10/394*100%) calc(8/394*100%);} #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__images { width: 100%; align-self: flex-end;} #toppage #prodDlc .pS__item__conts .pS__item__co__text { margin-bottom: calc(10/1260*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__text .pS__item__co__te__list { width: calc(664/1260*100%); margin-bottom: calc(25/1260*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__text .pS__item__co__te__text { width: calc(1027/1260*100%); margin-bottom: calc(34/1260*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox { padding: calc(20/1260*100%) 0; margin-bottom: calc(40/1260*100%); border-width: 1px; } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::before , #toppage #prodDlc .pS__item__conts .pS__item__co__longbox::after { width: 5px; } #toppage #prodDlc .pS__item__conts .pS__item__co__longbox .pS__item__co__pic { width: calc(1180/1258*100%); } #toppage #prodDlc .pS__item__conts .pS__item__co__privi { width: calc(240/1260*100%); margin-bottom: 0; } #toppage #prodDlc .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn { width: calc(190/220*100%); left: calc(15/220*100%); margin-bottom: calc(20/220*100%);} /*#toppage #prodDlc .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn a { background: url(../../_img/products_v2/privilege/btn_off_pc.png) center center no-repeat; background-size: cover;}*/ #toppage #prodDlc .pS__item__conts .pS__item__co__privi .pS__item__co__pr__cont .bF__box__btn.btn_ov a:hover { -webkit-transform: scale(1.08); transform: scale(1.08);} #toppage .pA__blockMID .productsSlider .pS__item .notesList { width: 100%;} #toppage .pA__blockMID .productsSlider .pS__item .notesList li { font-size: calc(12/1320*100vw);} #toppage .pA__blockBTM { } #toppage .pA__blockBTM .pA__spec { width: 100%; margin: 0 auto; padding: calc(10/1320*100%) 0 calc(17/1320*100%);} #toppage .pA__blockBTM .pA__spec .pA__s__name { display: none;} #toppage .pA__blockBTM .pA__spec .pA__s__list { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; align-items: stretch;} #toppage .pA__blockBTM .pA__spec .pA__s__list > li { margin-bottom: 0; display: -webkit-flex; display: flex; align-items: stretch; margin-top: calc(7/1320*100%); } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dl { font-size: 0.9848vw; align-items: stretch; }/*13pt*/ #toppage .pA__blockBTM .pA__spec .pA__s__list > li dt , #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd { display: -webkit-flex; display: flex; white-space: nowrap; padding: 4px 1em 4px 1em; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dt { max-width: 90px; width: auto; align-content: center;} #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd { width: auto; align-items: center; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd span { font-size: 0.9848vw; }/*13pt*/ } @media screen and (min-width: 641px) and (max-width: 881px) { } @media screen and (min-width: 1321px) { #toppage .productsArea { background-size: 1920px; padding: 80px 0 0;} #toppage .productsArea .pA__blockTOP { background-size: 1920px; } #toppage .pA__blockTOP .pA__intro { width: 650px; margin: 0 0 83px; } #toppage #prodDl .pS__item__conts .pS__item__co__longbox .pS__item__co__text .pS__item__co__te__notestext { font-size: 1.2rem;} #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price { font-size: 1.8rem; } #toppage .pS__item__conts .pS__item__co__text .pS__item__co__te__price__notes { font-size: 1.2rem; margin-bottom: 10px; } #toppage #prodSet .pS__item__conts .pS__item__co__figure .pS__item__co__te__table table { font-size: 1.3rem;} #toppage .pA__blockMID .productsSlider .pS__item .notesList li { font-size: 1.2rem;} #toppage .pA__blockBTM .pA__spec { padding: 10px 0 17px;} #toppage .pA__blockBTM .pA__spec .pA__s__list > li { margin-top: 7px } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dl { font-size: 1.3rem; } #toppage .pA__blockBTM .pA__spec .pA__s__list > li dd span { font-size: 1.3rem; } } @media screen and (min-width: 1921px) { #toppage .productsArea { background-size: 100%;} #toppage .productsArea .pA__blockTOP { background-size: 100%;} } /* -------------------------------------------------------- .videoArea -------------------------------------------------------- */ #toppage .videoArea { background: #0d1922; padding: calc(80/750*100%) 0 calc(50/750*100%);} #toppage .videoArea .vA__block { background: #142734; padding: 1px 0; padding-bottom: calc(67/750*100%); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4); } #toppage .videoArea .vA__block .hl { width: calc(650/750*100%); margin: calc(-40/750*100%) auto calc(20/750*100%);} #toppage .videoSlider__wrap { overflow: visible; width: calc(650/750*100%); margin: 0 auto;} #toppage .videoSlider { /*display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start;*/ } #toppage .videoSlider { width: 100%; height: auto;} #toppage .videoSlider .vS__item { display: block; width: calc(434/650*100%); height: auto!important; margin-right: calc(20/650*100%); } #toppage .videoSlider .basicFrame::before { background: #133654; } #toppage .videoArea .basicFrame2 .bF__frame .bF__box .bF__box__name { width: calc(385/434*100%); position: absolute; bottom: 0; left: 50%; margin-left: calc(-192.5/434*100%); margin-bottom: calc(-30/434*100%); background: url(../../media/_img/btn_off.png) center center no-repeat; background-size: 100%; } #toppage .videoArea a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { content: ""; display: block; width: calc(68/385*100%); height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/icon_play.png) center center no-repeat; background-size: 100%; } #toppage .videoSlider__wrap .swiper-button-prev, #toppage .videoSlider__wrap .swiper-button-next { display: none;} @media screen and (min-width: 641px) { #toppage .videoArea { background: #101f2a; padding: calc(80/1320*100%) 0;} #toppage .videoArea .vA__block { padding-bottom: 0;} #toppage .videoArea .vA__block .hl { width: calc(650/1260*100%); margin: calc(-47/1260*100%) auto calc(17/1260*100%);} #toppage .videoSlider__wrap { max-width: 1166px; width: calc(1166/1260*100%); margin: 0 auto; } #toppage .videoSlider { width: 100%; height: auto;} #toppage .videoSlider .vS__item { display: block; width: calc(362/1166*100%); height: auto!important; margin-right: calc(40/1166*100%); margin-bottom: calc(-25/1166*100%); } #toppage .videoSlider__wrap .swiper-button-prev, #toppage .videoSlider__wrap .swiper-button-next { display: block; top: 0; width: 100%; height: 133%; margin-top: 0; background: none; } #toppage .videoSlider__wrap .swiper-button-prev { right: 50%; margin-right: calc(50% + 0px); left: inherit;} #toppage .videoSlider__wrap .swiper-button-next { left: 50%; margin-left: calc(50% + 0px); } #toppage .videoSlider__wrap .swiper-button-prev::after, #toppage .videoSlider__wrap .swiper-button-next::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 .videoSlider__wrap .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) calc(100% - 20px) center no-repeat; background-size: 15px; } #toppage .videoSlider__wrap .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) calc(20px) center no-repeat; background-size: 15px; } #toppage .videoSlider__wrap .swiper-button-prev:hover::after, #toppage .videoSlider__wrap .swiper-button-next:hover::after { background-size: 18px; } #toppage .videoSlider .vS__item { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #toppage .videoSlider .vS__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.3;} #toppage .videoSlider .vS__item.swiper-slide-next + .vS__item { opacity: 1;} #toppage .videoSlider__wrap .swiper-button-next.swiper-button-disabled, #toppage .videoSlider__wrap .swiper-button-prev.swiper-button-disabled { opacity: 0.15;} } @media screen and (min-width: 1321px) { #toppage .videoArea { padding: 80px 0;} } /* -------------------------------------------------------- .aboutArea -------------------------------------------------------- */ #toppage .aboutArea { background: #000 url(../../_img/about/bg_sp.jpg) top center no-repeat; background-size: 100%; padding: calc(80/750*100%) 0 0;} #toppage .aboutArea .aA__block { padding: 1px 0; padding-bottom: calc(60/750*100%); /*box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);*/ } #toppage .aboutArea .aA__block .hl { width: calc(650/750*100%); margin: calc(-40/750*100%) auto calc(430/750*100%);} #toppage .aboutArea .aA__block .aA__leadtext { width: calc(650/750*100%); margin: calc(0/750*100%) auto calc(30/750*100%);} #toppage .aboutArea .aA__block .aA__btn { width: calc(320/750*100%); margin: 0 auto;} @media screen and (min-width: 641px) { #toppage .aboutArea { background: #000 url(../../_img/about/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1620*100%); padding: calc(80/1320*100%) 0 calc(40/1320*100%);} #toppage .aboutArea .aA__block { padding-bottom: calc(0/1320*100%); } #toppage .aboutArea .aA__block .hl { width: calc(650/1260*100%); margin: calc(-47/1260*100%) auto calc(457/1260*100%);} #toppage .aboutArea .aA__block .aA__leadtext { width: calc(1146/1260*100%); margin: 0 auto calc(40/1260*100%);} #toppage .aboutArea .aA__block .aA__btn { width: calc(320/1260*100%); margin: 0 auto;} } @media screen and (min-width: 1321px) { /*#toppage .aboutArea { background-size: 1920px; padding: 80px 0 40px;}*/ #toppage .aboutArea { padding: 80px 0 40px;} #toppage .aboutArea .aA__block { background-size: 1920px; padding-bottom: 0px;} } @media screen and (min-width: 1621px) { #toppage .aboutArea { background-size: 1920px; } } @media screen and (min-width: 1921px) { #toppage .aboutArea { background-size: 100%;} #toppage .aboutArea .aA__block { background-size: 100%;} } /* -------------------------------------------------------- .characterArea -------------------------------------------------------- */ #toppage .characterArea { background: #081824; padding: calc(80/750*100%) 0 0;} #toppage .characterArea .cA__block { background: rgba(0,0,0,0.3); padding: 1px 0 calc(50/750*100%); } #toppage .characterArea .cA__block .hl { width: calc(650/750*100%); margin: calc(-40/750*100%) auto calc(20/750*100%); } #toppage .characterArea .charaSlider__wrap { overflow: visible; width: calc(650/750*100%); margin: 0 auto;} #toppage .characterArea .charaSlider { width: 100%; height: auto;} #toppage .characterArea .charaSlider .chaS__item { display: block; width: calc(290/650*100%); height: auto!important; margin-right: calc(20/650*100%); } #toppage .characterArea .charaSlider .chaS__item { display: -webkit-flex; display: flex; } #toppage .characterArea .charaSlider .chaS__item .btn { display: block; width: 100%; position: relative; } #toppage .characterArea .charaSlider .chaS__item.clo .btn { background: url(../../_img/character/btn/bg_clo.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.aer .btn { background: url(../../_img/character/btn/bg_aer.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.bar .btn { background: url(../../_img/character/btn/bg_bar.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.tif .btn { background: url(../../_img/character/btn/bg_tif.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.red .btn { background: url(../../_img/character/btn/bg_red.jpg?200219) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.sep .btn { background: url(../../_img/character/btn/bg_sep.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.ren .btn { background: url(../../_img/character/btn/bg_ren.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.rud .btn { background: url(../../_img/character/btn/bg_rud.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.tse .btn { background: url(../../_img/character/btn/bg_tse.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.ruf .btn { background: url(../../_img/character/btn/bg_ruf.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.big .btn { background: url(../../_img/character/btn/bg_big.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.wed .btn { background: url(../../_img/character/btn/bg_wed.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.jes .btn { background: url(../../_img/character/btn/bg_jes.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.pre .btn { background: url(../../_img/character/btn/bg_pre.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.hei .btn { background: url(../../_img/character/btn/bg_hei.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.roc .btn { background: url(../../_img/character/btn/bg_roc.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.pro .btn { background: url(../../_img/character/btn/bg_pro.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.pal .btn { background: url(../../_img/character/btn/bg_pal.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.ree .btn { background: url(../../_img/character/btn/bg_ree.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.sca .btn { background: url(../../_img/character/btn/bg_sca.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.cor .btn { background: url(../../_img/character/btn/bg_cor.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.ani .btn { background: url(../../_img/character/btn/bg_ani.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.les .btn { background: url(../../_img/character/btn/bg_les.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.mad .btn { background: url(../../_img/character/btn/bg_mad.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.sam .btn { background: url(../../_img/character/btn/bg_sam.jpg) top center no-repeat; background-size: 100%;} #toppage .characterArea .charaSlider .chaS__item.kyr .btn { background: url(../../_img/character/btn/bg_kyr.jpg) top center no-repeat; background-size: 100%;} #toppage .charaSlider__wrap .swiper-button-prev, #toppage .charaSlider__wrap .swiper-button-next { display: none;} @media screen and (min-width: 641px) { #toppage .characterArea { padding: calc(73/1320*100%) 0 0;} #toppage .characterArea .cA__block { padding-bottom: calc(60/1320*100%); } #toppage .characterArea .cA__block .hl { width: calc(650/1260*100%); margin: calc(-40/1260*100%) auto calc(18/1260*100%); } #toppage .characterArea .charaSlider__wrap { max-width: 1160px; width: calc(1160/1260*100%); } #toppage .characterArea .charaSlider { } #toppage .characterArea .charaSlider .chaS__item { width: calc(290/1160*100%); height: auto!important; } #toppage .characterArea .charaSlider .chaS__item .btn { } #toppage .characterArea .charaSlider__wrap .swiper-button-prev, #toppage .characterArea .charaSlider__wrap .swiper-button-next { display: block; top: 0; width: 100%; height: 100%; margin-top: 0; background: none; } #toppage .characterArea .charaSlider__wrap .swiper-button-prev { right: 100%; left: inherit; } #toppage .characterArea .charaSlider__wrap .swiper-button-next { left: 100%; } #toppage .characterArea .charaSlider__wrap .swiper-button-prev::after, #toppage .characterArea .charaSlider__wrap .swiper-button-next::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 .characterArea .charaSlider__wrap .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) calc(100% - 20px) center no-repeat; background-size: 15px; } #toppage .characterArea .charaSlider__wrap .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) calc(20px) center no-repeat; background-size: 15px; } #toppage .characterArea .charaSlider__wrap .swiper-button-prev:hover::after, #toppage .characterArea .charaSlider__wrap .swiper-button-next:hover::after { background-size: 18px; } #toppage .characterArea .charaSlider .chaS__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} #toppage .characterArea .charaSlider .chaS__item.swiper-slide-next + .chaS__item { opacity: 1;} #toppage .characterArea .charaSlider .chaS__item.swiper-slide-next + .chaS__item + .chaS__item { opacity: 1;} #toppage .characterArea .charaSlider__wrap .swiper-button-next.swiper-button-disabled, #toppage .characterArea .charaSlider__wrap .swiper-button-prev.swiper-button-disabled { opacity: 0.15;} #toppage .characterArea .charaSlider .chaS__item { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #toppage .characterArea .charaSlider .chaS__item .btn { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #toppage .characterArea .charaSlider .chaS__item .btn:hover { -webkit-transform: scale(1.04); transform: scale(1.04); z-index: 999;} } @media screen and (min-width: 1321px) { #toppage .characterArea { padding: 73px 0 0px;} #toppage .characterArea .cA__block { padding-bottom: 60px; } } /* -------------------------------------------------------- .footerLinkArea -------------------------------------------------------- */ #toppage .footerLinkArea { background: #081723; padding: calc(30/750*100%) 0;} #toppage .footerLinkArea .fLA__bnrList { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: calc(650/750*100%); margin: 0 auto; } #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item { width: calc(310/650*100%); margin-top: calc(30/650*100%);} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item:first-child , #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item:nth-child(2) { margin-top: 0;} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item a { display: block; position: relative; width: 100%; border-right: 4px solid #439bb5; border-left: 4px solid #439bb5; background: #1f5462; padding: 1px 3px;} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item a img { vertical-align: top; } #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item.bnr2 a { background: #b1d8e5; } @media screen and (min-width: 641px) { #toppage .footerLinkArea { padding: calc(30/1320*100%) 0 calc(10/1320*100%); } #toppage .footerLinkArea .fLA__bnrList { -webkit-justify-content: center; justify-content: center; width: 100%; } #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item { width: calc(300/1260*100%); margin: 0 calc(10/1260*100%) calc(20/1260*100%);} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item:first-child { margin-left: 0;} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item:last-child { margin-right: 0;} #toppage .footerLinkArea .fLA__bnrList .fLA__bL__item a { padding: 2px 6px;} } @media screen and (min-width: 1321px) { #toppage .footerLinkArea { padding: 30px 0 10px;} } /* -------------------------------------------------------- .firstModal（自動モーダル） -------------------------------------------------------- */ #modalRevision.firstModal { position: relative; } #modalRevision .revisionModal { position: relative; background-color: #000; width: calc(650 / 750 * 100%); margin: 0 auto; padding-bottom: calc(30 / 750 * 100%); background: #171312 url(../../_img/modal/revision/visual_sp.jpg) top center no-repeat; background-size: 100%; font-family: 'Noto Sans JP'; } #modalRevision .revisionModal::after { content: ""; display: block; position: absolute; inset: calc(5 / 750 * 100vw); border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none; background-image: url(../img/parts_cross_white.png),url(../img/parts_cross_white.png),url(../img/parts_cross_white.png),url(../img/parts_cross_white.png); background-repeat: no-repeat; background-position: top -5px left -5px, top -5px right -5px, bottom -5px left -5px, bottom -5px right -5px; opacity: 0.3; } #modalRevision .revisionModal__inner { position: relative; } #modalRevision .revisionModal__ttl { width: 100%; } #modalRevision .revisionModal__price { width: 100%; margin: calc(15 / 650 * 100%) auto 0; } #modalRevision .revisionModal__price.priceBlock { /* background-color: rgba(255,0,0,0.3); */ color: #000000; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; } #modalRevision .priceBlock .priceBlock__ttl { margin-right: .5em; font-size: calc(22 / 750 * 100vw); font-weight: 500; } #modalRevision .priceBlock .priceBlock__price { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-size: calc(22 / 750 * 100vw); font-feature-settings: "palt"; } #modalRevision .priceBlock .priceBlock__price::after { content: ""; display: block; background: url(../../_img/modal/revision/icon_arrow.svg) center center no-repeat; background-size: contain; width: calc(17 / 750 * 100vw); height: 1em; margin-inline: .6em; order: 2; } #modalRevision .priceBlock .priceBlock__price .regularPrice, #modalRevision .priceBlock .priceBlock__price .revisionPrice { position: relative; display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; } #modalRevision .priceBlock .priceBlock__price .regularPrice { order: 1; } #modalRevision .priceBlock .priceBlock__price .revisionPrice { order: 3; } #modalRevision .priceBlock .priceBlock__price .addPrice { font-size: calc(30 / 750 * 100vw); color: #f00; font-weight: bold; margin-bottom: .1em; } #modalRevision .priceBlock .priceBlock__price .fs { display: inline; /* font-size: calc(30 / 750 * 100vw); */ } #modalRevision .revisionModal__copy { width: calc(410 / 650 * 100%); margin: calc(15 / 650 * 100%) auto 0; } #modalRevision .revisionModal__update { margin: calc(326 / 650 * 100%) auto 0; } #modalRevision .revisionModal__update__ttl {} #modalRevision .revisionModal__update__text { margin-top: calc(13 / 650 * 100%); } #modalRevision .revisionModal__btnBlock { margin-top: calc(20 / 650 * 100%); position: relative; } #modalRevision .revisionModal__btnBlock .btnList { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: calc(20 / 750 * 100vw); } #modalRevision .revisionModal__btnBlock .btnList__item { width: calc(578 / 650 * 100%); } #modalRevision .revisionModal__btnBlock .btnList__btn { display: block; cursor: pointer; } @media screen and (min-width: 641px) { .modal_mfpInline.topModalRevision .mfp-inline-holder .mfp-content { width: 100%; max-width: 1920px; } #modalRevision { width: calc(1280 / 1920 * 100%); margin-inline: auto; } #modalRevision .revisionModal { background-color: #121116; width: 100%; padding-bottom: calc(31 / 1280 * 100%); background-image: url(../../_img/modal/revision/visual_pc.jpg); } #modalRevision .revisionModal::after { inset: calc(5 / 1920 * 100vw); } #modalRevision .revisionModal__price { margin-top: calc(10 / 1280 * 100%); margin-bottom: calc(10 / 1280 * 100%); } #modalRevision .priceBlock .priceBlock__ttl { font-size: calc(22 / 1920 * 100vw); } #modalRevision .priceBlock .priceBlock__price { font-size: calc(20 / 1920 * 100vw); } #modalRevision .priceBlock .priceBlock__price::after { width: calc(17 / 1920 * 100vw); margin-inline: .9em; } #modalRevision .priceBlock .priceBlock__price .addPrice { font-size: calc(30 / 1920 * 100vw); margin-bottom: .2em; } #modalRevision .revisionModal__copy { width: calc(642 / 1280 * 100%); margin-top: calc(10 / 1280 * 100%); } #modalRevision .revisionModal__update { margin-top: calc(392 / 1280 * 100%); } #modalRevision .revisionModal__update__text { margin-top: calc(18 / 1280 * 100%); } #modalRevision .revisionModal__btnBlock { margin-top: calc(28 / 1280 * 100%); } #modalRevision .revisionModal__btnBlock .btnList { flex-direction: row; gap: 0 calc(40 / 1280 * 100%); } #modalRevision .revisionModal__btnBlock .btnList__item { width: calc(366 / 1280 * 100%); } #modalRevision .revisionModal__btnBlock .btnList__btn { transition: transform .25s ease, filter .25s ease; } #modalRevision .revisionModal__btnBlock .btnList__btn:hover { transform: scale(1.05); filter: brightness(110%); } } @media screen and (min-width: 1921px) { #modalRevision .revisionModal::after { inset: 5px; } #modalRevision .priceBlock .priceBlock__ttl { font-size: 22px; } #modalRevision .priceBlock .priceBlock__price { font-size: 20px; } #modalRevision .priceBlock .priceBlock__price::after { width: 17px; } #modalRevision .priceBlock .priceBlock__price .addPrice { font-size: 30px; } } /* ---------------------------------------------------------------------------------------------------------------- #about ---------------------------------------------------------------------------------------------------------------- */ #about { } #about .mainlArea { padding: calc(460/750*100%) 0 calc(70/750*100%); background: url(../../about/_img/visual_sp.jpg) top center no-repeat; background-size: 100%; } #about .mainlArea .mA__leadtext { width: calc(650/750*100%); margin: 0 auto; } #about .storyArea { position: relative; } #about .storyArea .sA__block { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #about .storyArea .sA__block .sA__bl__item { width: 100%; } #about .storyArea .sA__block .sA__bl__item.storyBox { position: relative; padding: calc(50/750*100%) 0 calc(230/750*100%); background: url(../../about/_img/story_bg_sp.jpg) bottom center no-repeat; background-size: 100%; } #about .storyArea .sA__block .sA__bl__item.storyBox img { width: calc(650/750*100%); margin: auto; display: block; } #about .storyArea .sA__block .sA__bl__item.storyBox::before { content: ""; display: block; width: 1px; height: 80%; position: absolute; top: 0; left: calc(70/750*100%); background: -webkit-linear-gradient(top, rgba(67,155,181,1) 0%,rgba(19,21,20,1) 100%); background: linear-gradient(to bottom, rgba(67,155,181,1) 0%,rgba(19,21,20,1) 100%); } #about .staffArea { position: relative; padding: calc(80/750*100%) 0 calc(20/750*100%); } #about .staffArea .stfA__block { width: calc(650/750*100%); margin: 0 auto; padding-bottom: calc(60/750*100%);} #about .staffArea .stfA__block .stfA__hl1 { width: calc(105/650*100%); margin: 0 auto calc(30/650*100%);} #about .staffArea .stfA__block .stfA__hl2 { width: calc(219/650*100%); margin: 0 auto calc(20/650*100%);} #about .staffArea .stfA__block .stfA__hl3 { width: calc(185/650*100%); margin: 0 auto calc(30/650*100%);} #about .staffArea .stfA__block .stfA__list { } #about .staffArea .stfA__block .stfA__list.stfA__list__blk1 { margin-bottom: calc(70/650*100%); } #about .staffArea .stfA__block .stfA__list .stfA__li__item { border-bottom: 1px solid #1b3e48; padding: 1px 0;} #about .staffArea .stfA__block .stfA__list .stfA__li__item .btn { background: rgba(67,155,181,0.6);} #about .staffArea .stfA__block .stfA__list .stfA__li__item .btn { background: url(../../about/_img/staff/btn_arrow.png) right center no-repeat; background-size: auto 100%; } #about .staffArea .stfA__block .stfA__btnlink { border-bottom: 1px solid #1b3e48; padding: 1px 0; margin-bottom: calc(70/650*100%); } #about .staffArea .stfA__block .stfA__btnlink .btn { display: block; } .modal_mfpInline .stfA__modal { opacity: 0; } .modal_mfpInline .stfA__modal { color: #efefef; padding: calc(50/750*100%) 0 calc(100/750*100%); background: #000 url(../../about/_img/staff/bg_modal_sp.jpg) center bottom no-repeat; background-size: 100%; } .modal_mfpInline .stfA__modal .stfA__modal__inner { width: calc(650/750*100%); margin: 0 auto;} .modal_mfpInline .stfA__modal .stfA__modal__name { margin-bottom: calc(30/650*100%);} .modal_mfpInline .stfA__modal .stfA__modal__text { font-size: calc(20/750*100vw); line-height: 2.01;} .modal_mfpInline .stfA__modal .stfA__modal__date { text-align: right; margin-top: 1em; font-size: calc(18/750*100vw);} #about .stfA__ivlist__wrap { overflow: visible; width: 100%; margin: 0 auto;} #about .stfA__ivlist { width: 100%; height: auto; margin: 0 auto; position: relative; } #about .stfA__ivlist .stfA__ivli__item { display: block; width: calc(434/650*100%); height: auto!important; margin-right: calc(20/650*100%); } #about .stfA__ivlist .basicFrame2 .bF__frame .bF__box .bF__box__name { width: calc(385/434*100%); position: absolute; bottom: 0; left: 50%; margin-left: calc(-192.5/434*100%); margin-bottom: calc(-30/434*100%); background: url(../../media/_img/btn_off.png) center center no-repeat; background-size: 100%; } #about .stfA__ivlist a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { content: ""; display: block; width: calc(68/385*100%); height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/icon_play.png) center center no-repeat; background-size: 100%; } @media screen and (max-width: 640px) { #about .stfA__ivlist__wrap .swiper-button-prev, #about .stfA__ivlist__wrap .swiper-button-next { display: none;} } @media screen and (min-width: 641px) { #about { padding-bottom: calc(100/1320*100%);} #about .pageTile { width: calc(205/1320*100%); margin-left: calc(-102/1320*100%); } #about .mainlArea { padding: calc(680/1320*100%) 0 0; background: url(../../about/_img/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1620*100%); } #about .mainlArea .mA__leadtext { width: calc(1200/1260*100%); margin: 0 auto; padding: calc(40/1260*100%) calc(55/1260*100%); background: rgba(0,0,0,0.8); } #about .storyArea { } #about .storyArea .sA__block { } #about .storyArea .sA__block .sA__bl__item { width: 50%; overflow: hidden; } #about .storyArea .sA__block .sA__bl__item img { vertical-align: top; max-width: none; width: 100%; height: auto; } #about .storyArea .sA__block .sA__bl__item.storyBox { padding: 0; background: url(../../about/_img/story_bg_pc.jpg) bottom center no-repeat; background-size: 100%; } #about .storyArea .sA__block .sA__bl__item.storyBox img { width: 100%; } #about .storyArea .sA__block .sA__bl__item.storyBox::before { height: 100%; left: calc(40/960*100%); } #about .storyArea .sA__block .sA__bl__item a { overflow: hidden; } #about .storyArea .sA__block .sA__bl__item a img { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block; } #about .storyArea .sA__block .sA__bl__item a:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0.7;} #about .staffArea { padding: calc(76/1320*100%) 0 calc(60/1320*100%); } #about .staffArea .stfA__block { width: calc(1260/1260*100%); padding-bottom: calc(30/1260*100%); } #about .staffArea .stfA__block .stfA__hl1 { width: calc(91/1260*100%); margin: 0 auto calc(25/1260*100%);} #about .staffArea .stfA__block .stfA__hl2 { width: calc(187/1260*100%); margin: 0 auto calc(25/1260*100%);} #about .staffArea .stfA__block .stfA__hl3 { width: calc(159/1260*100%); margin: 0 auto calc(35/1260*100%);} #about .staffArea .stfA__block .stfA__list { width: calc(650/1260*100%); margin: 0 auto; } #about .staffArea .stfA__block .stfA__list.stfA__list__blk1 { margin-bottom: calc(70/1260*100%); } #about .staffArea .stfA__block .stfA__list .stfA__li__item { cursor: pointer;} #about .staffArea .stfA__block .stfA__list .stfA__li__item .btn { background: rgba(255,255,255,0.0);} #about .staffArea .stfA__block .stfA__list .stfA__li__item .btn { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; } #about .staffArea .stfA__block .stfA__list .stfA__li__item:hover .btn { background: rgba(40,93,109,1.0); -webkit-transform: scale(1.0); transform: scale(1.0);} #about .staffArea .stfA__block .stfA__btnlink { width: calc(650/1260*100%); margin: 0 auto calc(70/1260*100%); } #about .staffArea .stfA__block .stfA__btnlink:hover .btn { background: rgba(40,93,109,1.0); -webkit-transform: scale(1.0); transform: scale(1.0);} .modal_mfpInline .mfp-inline-holder .mfp-content { max-width: 1260px; } .modal_mfpInline .stfA__modal { max-width: 960px; width: calc(960/1260*100%); padding: calc(60/1260*100%) 0 calc(100/1260*100%); margin: auto; background: #000 url(../../about/_img/staff/bg_modal_pc.jpg) center bottom no-repeat; background-size: cover; } .modal_mfpInline .stfA__modal .stfA__modal__inner { width: calc(840/960*100%); } .modal_mfpInline .stfA__modal .stfA__modal__name { margin-bottom: calc(30/840*100%);} .modal_mfpInline .stfA__modal .stfA__modal__text { font-size: 16px; line-height: 2.01; /*text-shadow: 0px 0px 3px #000;*/} .modal_mfpInline .stfA__modal .stfA__modal__date { font-size: 14px;} #about .stfA__ivlist.num1 , #about .stfA__ivlist.num2 , #about .stfA__ivlist.num3 { -webkit-justify-content: center; justify-content: center; } #about .stfA__ivlist .stfA__ivli__item { width: calc(294/1260*100%); margin-top: 0; } #about .stfA__ivlist.num2 .stfA__ivli__item { margin: 0 calc(20/1260*100%); } #about .stfA__ivlist.num3 .stfA__ivli__item { margin: 0 calc(20/1260*100%); } #about .stfA__ivlist .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-132/294*100%); margin-bottom: calc(-20/294*100%); width: calc(262/294*100%); } #about .stfA__ivlist a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { width: 100%; height: 100%; background-position: left center; background-size: auto 100%;} #about .stfA__ivlist__wrap { max-width: 1166px; width: calc(1166/1260*100%); margin: 0 auto; } #about .stfA__ivlist { width: 100%; height: auto;} #about .stfA__ivlist .stfA__ivli__item { display: block; width: calc(362/1166*100%); height: auto!important; margin-right: calc(40/1166*100%); margin-bottom: 0; } #about .stfA__ivlist__wrap .swiper-button-prev, #about .stfA__ivlist__wrap .swiper-button-next { display: block; top: 0; width: 100%; height: 100%; margin-top: 0; background: none; } #about .stfA__ivlist__wrap .swiper-button-prev { right: 50%; margin-right: calc(50% + 0px); left: inherit;} #about .stfA__ivlist__wrap .swiper-button-next { left: 50%; margin-left: calc(50% + 0px); } #about .stfA__ivlist__wrap .swiper-button-prev::after, #about .stfA__ivlist__wrap .swiper-button-next::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; } #about .stfA__ivlist__wrap .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) calc(100% - 20px) center no-repeat; background-size: 15px; } #about .stfA__ivlist__wrap .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) calc(20px) center no-repeat; background-size: 15px; } #about .stfA__ivlist__wrap .swiper-button-prev:hover::after, #about .stfA__ivlist__wrap .swiper-button-next:hover::after { background-size: 18px; } #about .stfA__ivlist .stfA__ivli__item { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #about .stfA__ivlist .stfA__ivli__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.3;} #about .stfA__ivlist .stfA__ivli__item.swiper-slide-next + .stfA__ivli__item { opacity: 1;} #about .stfA__ivlist__wrap .swiper-button-next.swiper-button-disabled, #about .stfA__ivlist__wrap .swiper-button-prev.swiper-button-disabled { opacity: 0.15;} } @media screen and (min-width: 1261px) { .modal_mfpInline .mfp-inline-holder .mfp-content { width: 1260px; } .modal_mfpInline .stfA__modal { width: 960px; padding: 60px 0 100px; } } @media screen and (min-width: 1321px) { #about { padding-bottom: 100px;} #about .pageTile { width: 205px; margin-left: -102px; } #about .mainlArea { padding: 680px 0 0; } #about .staffArea { padding: 76px 0 60px; } } @media screen and (min-width: 1621px) { #about .mainlArea { background-size: 1920px; } } @media screen and (min-width: 1921px) { #about .mainlArea { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #character ---------------------------------------------------------------------------------------------------------------- */ #character { } #character .contents__section { background: #090d0b; } #character .characterArea { position: relative; margin-bottom: calc(-124/750*100%); padding-bottom: calc(124/750*100%); } #character .characterArea .bgb { position: absolute; top: 0; left: 50%; margin-left: calc(170/750*100%); background: rgba(0,0,0,0.2); width: 200%; height: 100%; transform: skewX(-10deg); transform-origin:left top;} #character .characterArea .bgb::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); width: 100%; height: 100%; margin-left: calc(20/1500*100%); } #character .characterArea .bgb::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); width: 100%; height: 100%; margin-left: calc(50/1500*100%); } #character .characterArea .inner { padding-top: calc(554/750*100%); } #character .characterArea .cA__full { position: absolute; top: 0; right: 0%; margin-right: 0; } #character .characterArea .cA__detail { width: calc(650/750*100%); margin: 0 auto; position: relative; } #character .characterArea .cA__detail .cA__speech {} #character .characterArea .cA__detail .cA__name { margin: calc(50/650*100%) auto 0 calc(-2/650*100%); } #character .characterArea .cA__detail .cA__cv { margin: calc(20/650*100%) auto 0; } #character .characterArea .cA__detail .cA__text { position: relative; width: 100%; margin: calc(15/650*100%) auto 0; background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 100%); } #character .characterArea .cA__detail .cA__text::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 0 8px; border-style: solid; border-color: rgba(13,44,67,0.5);} #character .characterArea .cA__detail .cA__text::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 0 4px; border-style: solid; border-color: #439bb5;} #character .characterArea .cA__detail .cA__text .cA__text__inner::before , #character .characterArea .cA__detail .cA__text .cA__text__inner::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; top: 0; left: 0; border-width: 0 14px; border-style: solid; border-color: #439bb5;} #character .characterArea .cA__detail .cA__text .cA__text__inner::after { top: inherit; bottom: 0;} #character .characterArea .cA__detail .cA__imgBlock { width: 100%; margin: calc(40/650*100%) auto 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #character .characterArea .cA__detail .cA__imgBlock .iB__item { width: calc(310/650*100%); } #character .characterArea .cA__subNav__area {} #character .characterArea .cA__subNav__wrap { width: calc(650/750*100%); margin: calc(40/750*100%) auto 0; position: relative; background: rgba(0,0,0,0.8); } #character .characterArea .cA__subNav__wrap::before , #character .characterArea .cA__subNav__wrap::after { content: ""; display: block; width: 0px; height: 100%; position: absolute; top: 0; } #character .characterArea .cA__subNav__wrap::before { left: 0; border-left: 4px solid #439bb5; border-right: 4px solid rgba(13,44,67,0.5); } #character .characterArea .cA__subNav__wrap::after { right: 0; border-right: 4px solid #439bb5; border-left: 4px solid rgba(13,44,67,0.5); } #character .characterArea .cA__subNav { width: 100%; position: relative; padding: calc(20/650*100%) 0 calc(0/650*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #character .characterArea .cA__subNav .cA__sN__item { width: calc(102/650*100%); margin: 0 calc(10/650*100%) calc(20/650*100%); position: relative; overflow: hidden; background: url(../../character/_img/subnav/btn_off.png?190930) center center no-repeat; background-size: 100%; } #character .characterArea .cA__subNav .cA__sN__item .btn { display: block; position: relative; } #character .characterArea .cA__subNav .cA__sN__item .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: url(../../character/_img/subnav/btn_on.png?190930) center center no-repeat; background-size: 100%; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #character .characterArea .cA__subNav .cA__sN__item.active .btn::before { opacity: 1; } #character .characterArea .cA__subNav .cA__sN__item .btn::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: -webkit-linear-gradient(left, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); background: linear-gradient(to right, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); border-style: solid; border-width: 1px 2px; border-color: #8cc1d0; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #character .characterArea .cA__subNav .cA__sN__item.active .btn::after { opacity: 1; } #character .characterArea .cA__subNav .cA__sN__item .btn div { position: relative; } #character .characterArea .cA__subNav .cA__sN__item .btn div img { vertical-align: top; } #character .characterArea .cA__subNav--p1 { } #character .characterArea .cA__subNav--p2::before { content: ""; display: block; width: calc(594/650*100%); height: 1px; background: #2d5561; position: absolute; top: 0; left: calc(28/650*100%); } #character #cloud .characterArea { background: url(../../character/_img/cloud/visual_sp.jpg?190930) top center no-repeat; background-size: 100%; } #character #cloud .characterArea .cA__full { width: calc(319/750*100%); right: calc(13/750*100%); margin-top: calc(105/750*100%); } #character #cloud .characterArea .cA__detail .cA__speech { width: calc(361/650*100%); } #character #aerith .characterArea { background: url(../../character/_img/aerith/visual_sp.jpg?190930) top center no-repeat; background-size: 100%; } #character #aerith .characterArea .cA__full { width: calc(212/750*100%); right: calc(41/750*100%); margin-top: calc(225/750*100%); } #character #aerith .characterArea .cA__detail .cA__speech { width: calc(531/650*100%); } #character #barret .characterArea { background: url(../../character/_img/barret/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #barret .characterArea .cA__full { width: calc(671/750*100%); right: calc(-147/750*100%); margin-top: calc(122/750*100%); } #character #barret .characterArea .cA__detail .cA__speech { width: calc(485/650*100%); } #character #tifa .characterArea { background: url(../../character/_img/tifa/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #tifa .characterArea .cA__full { width: calc(362/750*100%); right: calc(6/750*100%); margin-top: calc(196/750*100%); } #character #tifa .characterArea .cA__detail .cA__speech { width: calc(511/650*100%); } #character #reno .characterArea { background: url(../../character/_img/reno/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #reno .characterArea .cA__full { width: calc(371/750*100%); right: calc(0/750*100%); margin-top: calc(108/750*100%); } #character #reno .characterArea .cA__detail .cA__speech { width: calc(424/650*100%); } #character #rude .characterArea { background: url(../../character/_img/rude/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #rude .characterArea .cA__full { width: calc(324/750*100%); right: calc(21/750*100%); margin-top: calc(123/750*100%); } #character #rude .characterArea .cA__detail .cA__speech { width: calc(221/650*100%); } #character #sephiroth .characterArea { background: url(../../character/_img/sephiroth/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #sephiroth .characterArea .cA__full { width: calc(416/750*100%); right: calc(11/750*100%); margin-top: calc(123/750*100%); } #character #sephiroth .characterArea .cA__detail .cA__speech { width: calc(544/650*100%); } #character #president .characterArea { background: url(../../character/_img/president/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #president .characterArea .cA__full { width: calc(386/750*100%); right: calc(-58/750*100%); margin-top: calc(136/750*100%); } #character #president .characterArea .cA__detail .cA__speech { width: calc(302/650*100%); } #character #heidegger .characterArea { background: url(../../character/_img/heidegger/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #heidegger .characterArea .cA__full { width: calc(478/750*100%); right: calc(-102/750*100%); margin-top: calc(119/750*100%); } #character #heidegger .characterArea .cA__detail .cA__speech { width: calc(584/650*100%); margin-top: calc(-49/650*100%);} #character #roche .characterArea { background: url(../../character/_img/roche/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #roche .characterArea .cA__full { width: calc(856/750*100%); right: calc(-106/750*100%); margin-top: calc(152/750*100%); } #character #roche .characterArea .cA__detail .cA__speech { width: calc(372/650*100%); } #character #redxiii .characterArea { background: url(../../character/_img/redxiii/visual_sp.jpg?200219) top center no-repeat; background-size: 100%; } #character #redxiii .characterArea .cA__full { width: calc(720/750*100%); right: calc(-130/750*100%); margin-top: calc(41/750*100%); } #character #redxiii .characterArea .cA__detail .cA__speech { width: calc(404/650*100%); margin-top: calc(-49/650*100%);} #character #biggs .characterArea { background: url(../../character/_img/biggs/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #biggs .characterArea .cA__full { width: calc(363/750*100%); right: calc(4/750*100%); margin-top: calc(103/750*100%); } #character #biggs .characterArea .cA__detail .cA__speech { width: calc(424/650*100%); } #character #wedge .characterArea { background: url(../../character/_img/wedge/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #wedge .characterArea .cA__full { width: calc(531/750*100%); right: calc(-60/750*100%); margin-top: calc(130/750*100%); } #character #wedge .characterArea .cA__detail .cA__speech { width: calc(310/650*100%); } #character #jessie .characterArea { background: url(../../character/_img/jessie/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #jessie .characterArea .cA__full { width: calc(406/750*100%); right: calc(-35/750*100%); margin-top: calc(116/750*100%); } #character #jessie .characterArea .cA__detail .cA__speech { width: calc(337/650*100%); } #character #professor .characterArea { background: url(../../character/_img/professor/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #professor .characterArea .cA__full { width: calc(462/750*100%); right: calc(43/750*100%); margin-top: calc(108/750*100%); } #character #professor .characterArea .cA__detail .cA__speech { width: calc(517/650*100%); margin-top: calc(-49/650*100%);} #character #tseng .characterArea { background: url(../../character/_img/tseng/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #tseng .characterArea .cA__full { width: calc(371/750*100%); right: calc(-56/750*100%); margin-top: calc(112/750*100%); } #character #tseng .characterArea .cA__detail .cA__speech { width: calc(405/650*100%); } #character #don .characterArea { background: url(../../character/_img/don/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #don .characterArea .cA__full { width: calc(624/750*100%); right: calc(-145/750*100%); margin-top: calc(158/750*100%); } #character #don .characterArea .cA__detail .cA__speech { width: calc(399/650*100%); } #character #aniyan .characterArea { background: url(../../character/_img/aniyan/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #aniyan .characterArea .cA__full { width: calc(457/750*100%); right: calc(-98/750*100%); margin-top: calc(132/750*100%); } #character #aniyan .characterArea .cA__detail .cA__speech { width: calc(442/650*100%); } #character #leslie .characterArea { background: url(../../character/_img/leslie/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #leslie .characterArea .cA__full { width: calc(436/750*100%); right: calc(-106/750*100%); margin-top: calc(127/750*100%); } #character #leslie .characterArea .cA__detail .cA__speech { width: calc(374/650*100%); } #character #madam .characterArea { background: url(../../character/_img/madam/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #madam .characterArea .cA__full { width: calc(638/750*100%); right: calc(-125/750*100%); margin-top: calc(97/750*100%); } #character #madam .characterArea .cA__detail .cA__speech { width: calc(342/650*100%); } #character #sam .characterArea { background: url(../../character/_img/sam/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #sam .characterArea .cA__full { width: calc(498/750*100%); right: calc(-61/750*100%); margin-top: calc(121/750*100%); } #character #sam .characterArea .cA__detail .cA__speech { width: calc(356/650*100%); margin-top: calc(-49/650*100%);} #character #rufus .characterArea { background: url(../../character/_img/rufus/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #rufus .characterArea .cA__full { width: calc(362/750*100%); right: calc(9/750*100%); margin-top: calc(125/750*100%); } #character #rufus .characterArea .cA__detail .cA__speech { width: calc(334/650*100%); } #character #palmer .characterArea { background: url(../../character/_img/palmer/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #palmer .characterArea .cA__full { width: calc(465/750*100%); right: calc(-60/750*100%); margin-top: calc(174/750*100%); } #character #palmer .characterArea .cA__detail .cA__speech { width: calc(319/650*100%); } #character #reeve .characterArea { background: url(../../character/_img/reeve/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #reeve .characterArea .cA__full { width: calc(340/750*100%); right: calc(10/750*100%); margin-top: calc(122/750*100%); } #character #reeve .characterArea .cA__detail .cA__speech { width: calc(423/650*100%); } #character #scarlet .characterArea { background: url(../../character/_img/scarlet/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #scarlet .characterArea .cA__full { width: calc(460/750*100%); right: calc(-47/750*100%); margin-top: calc(108/750*100%); } #character #scarlet .characterArea .cA__detail .cA__speech { width: calc(478/650*100%); } #character #kyrie .characterArea { background: url(../../character/_img/kyrie/visual_sp.jpg) top center no-repeat; background-size: 100%; } #character #kyrie .characterArea .cA__full { width: calc(447/750*100%); right: calc(-96/750*100%); margin-top: calc(161/750*100%); } #character #kyrie .characterArea .cA__detail .cA__speech { width: calc(523/650*100%); } @media screen and (max-width: 640px) { /* 調整用　*/ /*#character .characterArea .cA__subNav--p1 .cA__sN__item:last-child { margin-right: calc(132/650*100%);}*/ #character .characterArea .cA__subNav--p2 .cA__sN__item:last-child { margin-right: calc(498/650*100%);} } @media screen and (min-width: 641px) { #character { } #character .contents__section { } #character .pageTile { width: calc(318/1320*100%); margin-left: calc(-159/1320*100%); } #character .characterArea { margin-bottom: 0; padding-bottom: calc(294/1320*100%); } /*#character .characterArea { background-color: #f00!important;}*/ #character .characterArea::before { content: ""; display: block; width: 100%; height: 0; padding-top: calc(240/1320*100%); position: absolute; left: 0; bottom: 0; background: -webkit-linear-gradient(top, rgba(8,10,15,0) 0%,rgba(8,10,15,1) 64%,rgba(8,10,15,1) 100%); background: linear-gradient(to bottom, rgba(8,10,15,0) 0%,rgba(8,10,15,1) 64%,rgba(8,10,15,1) 100%); } #character .characterArea .bgb { margin-left: calc(410/1320*100%); width: 100%; transform: skewX(-15deg); } #character .characterArea .bgb::before { margin-left: calc(20/1320*100%); } #character .characterArea .bgb::after { margin-left: calc(50/1320*100%); } #character .characterArea .inner { padding-top: calc(200/1320*100%); } #character .characterArea .cA__full {} #character .characterArea .cA__detail { width: calc(560/1260*100%); left: 50%; margin-left: calc(-178/1260*100%); } #character .characterArea .cA__detail .cA__speech {} #character .characterArea .cA__detail .cA__name { width: calc(650/560*100%); margin: calc(36/560*100%) auto 0 calc(-2/560*100%); } #character .characterArea .cA__detail .cA__cv { width: calc(493/560*100%); margin: calc(3/560*100%) 0 0 calc(-2/560*100%); } #character .characterArea .cA__detail .cA__text { margin: calc(16/560*100%) auto 0;} #character .characterArea .cA__detail .cA__text { background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 100%); background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 100%); } #character .characterArea .cA__detail .cA__text::before { } #character .characterArea .cA__detail .cA__text::after { } #character .characterArea .cA__detail .cA__text .cA__text__inner::before , #character .characterArea .cA__detail .cA__text .cA__text__inner::after { } #character .characterArea .cA__detail .cA__text .cA__text__inner::after { } #character .characterArea .cA__detail .cA__imgBlock { margin: calc(24/560*100%) auto 0; } #character .characterArea .cA__detail .cA__imgBlock .iB__item { width: calc(270/560*100%); } #character .characterArea .cA__subNav__area { width: 100%; text-align: center; position: absolute; left: 0; bottom: 0; margin-bottom: calc(-200/1320*100%);} #character .characterArea .cA__subNav__area.fixed { position: fixed; margin-bottom: calc(95/1320*100%);} #character .characterArea .cA__subNav__wrap { width: auto; margin: 0 0 calc(0/1320*100%); display: inline-block; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #character .characterArea .cA__subNav { width: auto; padding: calc(14/1320*100vw) calc(15/1320*100vw); -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } #character .characterArea .cA__subNav--p1 { padding-right: calc(6/1320*100vw);} #character .characterArea .cA__subNav--p2 { padding-left: calc(7/1320*100vw);} #character .characterArea .cA__subNav--p2::before { width: 1px; height: 60%; top: 0; left: 0; margin-top: calc(14/1320*100vw); } #character .characterArea .cA__subNav .cA__sN__item { width: calc(42/1320*100vw); margin: 0 calc(1.5/1320*100vw) 0; } #character .characterArea .cA__subNav .cA__sN__item img { vertical-align: top; } #character .characterArea .cA__subNav .cA__sN__item .btn::before { } #character .characterArea .cA__subNav .cA__sN__item .btn:hover::before , #character .characterArea .cA__subNav .cA__sN__item .btn:hover::after { opacity: 1;} #character #cloud .characterArea { background: url(../../character/_img/cloud/visual_pc.jpg?190930) top center no-repeat; background-size: calc(1920/1320*100%); } #character #cloud .characterArea .cA__full { width: calc(218/1260*100%); right: calc(-1/1260*100%); margin-top: calc(91/1260*100%); } #character #cloud .characterArea .cA__detail .cA__speech { width: calc(264/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #aerith .characterArea { background: url(../../character/_img/aerith/visual_pc.jpg?190930) top center no-repeat; background-size: calc(1920/1320*100%); } #character #aerith .characterArea .cA__full { width: calc(144/1260*100%); right: calc(68/1260*100%); margin-top: calc(176/1260*100%); } #character #aerith .characterArea .cA__detail .cA__speech { width: calc(383/560*100%); margin-top: calc(3/560*100%); margin-left: calc(-1/560*100%); } #character #barret .characterArea { background: url(../../character/_img/barret/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #barret .characterArea .cA__full { width: calc(463/1260*100%); right: calc(-35/1260*100%); margin-top: calc(44/1260*100%); } #character #barret .characterArea .cA__detail .cA__speech { width: calc(354/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #tifa .characterArea { background: url(../../character/_img/tifa/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #tifa .characterArea .cA__full { width: calc(224/1260*100%); right: calc(-20/1260*100%); margin-top: calc(165/1260*100%); } #character #tifa .characterArea .cA__detail .cA__speech { width: calc(373/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #reno .characterArea { background: url(../../character/_img/reno/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #reno .characterArea .cA__full { width: calc(241/1260*100%); right: calc(-2/1260*100%); margin-top: calc(74/1260*100%); } #character #reno .characterArea .cA__detail .cA__speech { width: calc(308/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #rude .characterArea { background: url(../../character/_img/rude/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #rude .characterArea .cA__full { width: calc(214/1260*100%); right: calc(7/1260*100%); margin-top: calc(73/1260*100%); } #character #rude .characterArea .cA__detail .cA__speech { width: calc(161/560*100%); margin-top: calc(3/560*100%); margin-left: calc(-1/560*100%); } #character #rude .characterArea .cA__detail .cA__name { margin-top: calc(35/560*100%); } #character #sephiroth .characterArea { background: url(../../character/_img/sephiroth/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #sephiroth .characterArea .cA__full { width: calc(285/1260*100%); right: calc(-8/1260*100%); margin-top: calc(59/1260*100%); } #character #sephiroth .characterArea .cA__detail .cA__speech { width: calc(396/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #president .characterArea { background: url(../../character/_img/president/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #president .characterArea .cA__full { width: calc(268/1260*100%); right: calc(-33/1260*100%); margin-top: calc(92/1260*100%); } #character #president .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #president .characterArea .cA__detail .cA__speech { width: calc(302/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #heidegger .characterArea { background: url(../../character/_img/heidegger/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #heidegger .characterArea .cA__full { width: calc(328/1260*100%); right: calc(-64/1260*100%); margin-top: calc(71/1260*100%); } #character #heidegger .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #heidegger .characterArea .cA__detail .cA__speech { width: calc(518/560*100%); margin-top: calc(0/560*100%); margin-left: calc(-1/560*100%); } #character #president .characterArea .cA__detail .cA__speech { width: calc(221/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #roche .characterArea { background: url(../../character/_img/roche/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #roche .characterArea .cA__full { width: calc(990/1260*100%); right: calc(-317/1260*100%); margin-top: calc(91/1260*100%); } #character #roche .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #roche .characterArea .cA__detail .cA__speech { width: calc(272/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #redxiii .characterArea { background: url(../../character/_img/redxiii/visual_pc.jpg?200219) top center no-repeat; background-size: calc(1920/1320*100%); } #character #redxiii .characterArea .cA__full { width: calc(707/1260*100%); right: calc(-134/1260*100%); margin-top: calc(30/1260*100%); } #character #redxiii .characterArea .cA__detail .cA__speech { width: calc(516/560*100%); margin-top: calc(1/560*100%); margin-left: calc(-3/560*100%); } #character #biggs .characterArea { background: url(../../character/_img/biggs/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #biggs .characterArea .cA__full { width: calc(242/1260*100%); right: calc(-29/1260*100%); margin-top: calc(89/1260*100%); } #character #biggs .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #biggs .characterArea .cA__detail .cA__speech { width: calc(313/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #wedge .characterArea { background: url(../../character/_img/wedge/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #wedge .characterArea .cA__full { width: calc(337/1260*100%); right: calc(-30/1260*100%); margin-top: calc(117/1260*100%); } #character #wedge .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #wedge .characterArea .cA__detail .cA__speech { width: calc(225/560*100%); margin-top: calc(3/560*100%); margin-left: calc(-1/560*100%); } #character #jessie .characterArea { background: url(../../character/_img/jessie/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #jessie .characterArea .cA__full { width: calc(249/1260*100%); right: calc(-25/1260*100%); margin-top: calc(134/1260*100%); } #character #jessie .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #jessie .characterArea .cA__detail .cA__speech { width: calc(246/560*100%); margin-top: calc(3/560*100%); margin-left: calc(-1/560*100%); } #character #professor .characterArea { background: url(../../character/_img/professor/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #professor .characterArea .cA__full { width: calc(290/1260*100%); right: calc(-56/1260*100%); margin-top: calc(110/1260*100%); } #character #professor .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #professor .characterArea .cA__detail .cA__speech { width: calc(568/560*100%); margin-top: calc(0/560*100%); margin-left: calc(-3/560*100%); } #character #tseng .characterArea { background: url(../../character/_img/tseng/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #tseng .characterArea .cA__full { width: calc(246/1260*100%); right: calc(-23/1260*100%); margin-top: calc(85/1260*100%); } #character #tseng .characterArea .cA__detail .cA__speech { width: calc(297/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #don .characterArea { background: url(../../character/_img/don/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #don .characterArea .cA__full { width: calc(451/1260*100%); right: calc(-87/1260*100%); margin-top: calc(125/1260*100%); } #character #don .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #don .characterArea .cA__detail .cA__speech { width: calc(293/560*100%); margin-top: calc(2/560*100%); margin-left: calc(0/560*100%); } #character #aniyan .characterArea { background: url(../../character/_img/aniyan/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #aniyan .characterArea .cA__full { width: calc(291/1260*100%); right: calc(-21/1260*100%); margin-top: calc(101/1260*100%); } #character #aniyan .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #aniyan .characterArea .cA__detail .cA__speech { width: calc(323/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #leslie .characterArea { background: url(../../character/_img/leslie/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #leslie .characterArea .cA__full { width: calc(298/1260*100%); right: calc(-34/1260*100%); margin-top: calc(90/1260*100%); } #character #leslie .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #leslie .characterArea .cA__detail .cA__speech { width: calc(273/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #madam .characterArea { background: url(../../character/_img/madam/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #madam .characterArea .cA__full { width: calc(430/1260*100%); right: calc(-28/1260*100%); margin-top: calc(92/1260*100%); } #character #madam .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #madam .characterArea .cA__detail .cA__speech { width: calc(250/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } #character #sam .characterArea { background: url(../../character/_img/sam/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #sam .characterArea .cA__full { width: calc(324/1260*100%); right: calc(-31/1260*100%); margin-top: calc(112/1260*100%); } #character #sam .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #sam .characterArea .cA__detail .cA__speech { width: calc(520/560*100%); margin-top: calc(2/560*100%); margin-left: calc(0/560*100%); } #character #rufus .characterArea { background: url(../../character/_img/rufus/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #rufus .characterArea .cA__full { width: calc(255/1260*100%); right: calc(-19/1260*100%); margin-top: calc(109/1260*100%); } #character #rufus .characterArea .cA__detail .cA__speech { width: calc(243/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-1/560*100%); } #character #palmer .characterArea { background: url(../../character/_img/palmer/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #palmer .characterArea .cA__full { width: calc(326/1260*100%); right: calc(-61/1260*100%); margin-top: calc(132/1260*100%); } #character #palmer .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #palmer .characterArea .cA__detail .cA__speech { width: calc(235/560*100%); margin-top: calc(1/560*100%); margin-left: calc(0/560*100%); } #character #reeve .characterArea { background: url(../../character/_img/reeve/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #reeve .characterArea .cA__full { width: calc(238/1260*100%); right: calc(-24/1260*100%); margin-top: calc(119/1260*100%); } #character #reeve .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #reeve .characterArea .cA__detail .cA__speech { width: calc(309/560*100%); margin-top: calc(2/560*100%); margin-left: calc(0/560*100%); } #character #scarlet .characterArea { background: url(../../character/_img/scarlet/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #scarlet .characterArea .cA__full { width: calc(300/1260*100%); right: calc(-32/1260*100%); margin-top: calc(125/1260*100%); } #character #scarlet .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #scarlet .characterArea .cA__detail .cA__speech { width: calc(349/560*100%); margin-top: calc(2/560*100%); margin-left: calc(0/560*100%); } #character #kyrie .characterArea { background: url(../../character/_img/kyrie/visual_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); } #character #kyrie .characterArea .cA__full { width: calc(329/1260*100%); right: calc(-101/1260*100%); margin-top: calc(109/1260*100%); } #character #kyrie .characterArea .cA__detail { padding-bottom: calc(175/1260*100%); } #character #kyrie .characterArea .cA__detail .cA__speech { width: calc(381/560*100%); margin-top: calc(2/560*100%); margin-left: calc(-2/560*100%); } } @media screen and (min-width: 1321px) { #character { } #character .pageTile { width: 318px; margin-left: -159px; } #character .characterArea { margin-bottom: 0; padding-bottom: 294px; } #character .characterArea::before { padding-top: 240px;} #character .characterArea .bgb { margin-left: 410px; } #character .characterArea .bgb::before { margin-left: 20px; } #character .characterArea .bgb::after { margin-left: 50px; } #character .characterArea .inner { padding-top: 200px; } #character .characterArea .cA__subNav__area { margin-bottom: -200px;} #character .characterArea .cA__subNav__area.fixed { margin-bottom: 95px;} #character .characterArea .cA__subNav { padding: 14px 15px; } #character .characterArea .cA__subNav--p1 { padding-right: calc(6/1320*100vw);} #character .characterArea .cA__subNav--p2 { padding-left: calc(7/1320*100vw);} #character .characterArea .cA__subNav--p2::before { height: 42px; margin-top: 14px; } #character .characterArea .cA__subNav .cA__sN__item { width: 42px; margin: 0 1.5px 0; } #character #cloud .characterArea , #character #aerith .characterArea , #character #barret .characterArea , #character #tifa .characterArea , #character #reno .characterArea , #character #rude .characterArea , #character #sephiroth .characterArea , #character #president .characterArea , #character #heidegger .characterArea , #character #roche .characterArea , #character #redxiii .characterArea , #character #biggs .characterArea , #character #wedge .characterArea , #character #jessie .characterArea , #character #professor .characterArea , #character #tseng .characterArea , #character #don .characterArea , #character #aniyan .characterArea , #character #leslie .characterArea , #character #madam .characterArea , #character #sam .characterArea , #character #rufus .characterArea , #character #palmer .characterArea , #character #reeve .characterArea , #character #scarlet .characterArea , #character #kyrie .characterArea { background-size: 1920px; } } @media screen and (min-width: 1921px) { #character #cloud .characterArea , #character #aerith .characterArea , #character #barret .characterArea , #character #tifa .characterArea , #character #reno .characterArea , #character #rude .characterArea , #character #sephiroth .characterArea , #character #president .characterArea , #character #heidegger .characterArea , #character #roche .characterArea , #character #redxiii .characterArea , #character #biggs .characterArea , #character #wedge .characterArea , #character #jessie .characterArea , #character #professor .characterArea , #character #tseng .characterArea , #character #don .characterArea , #character #aniyan .characterArea , #character #leslie .characterArea , #character #madam .characterArea , #character #sam .characterArea , #character #rufus .characterArea , #character #palmer .characterArea , #character #reeve .characterArea , #character #scarlet .characterArea , #character #kyrie .characterArea { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #system ---------------------------------------------------------------------------------------------------------------- */ #system { } #system .visualArea { padding-top: calc(379/750*100%); background: url(../../system/_img/visual_sp.jpg?191126) top center no-repeat; background-size: 100%; } /*#system .systemArea { background: #060e16; margin-bottom: calc(-124/750*100%); padding-bottom: calc(124/750*100%); position: relative;}*/ #system .systemArea { background: #060e16; margin-bottom: 0; padding-bottom: calc(30/750*100%); position: relative;} #system .systemArea .inner { width: calc(650/750*100%); margin: auto; padding-top: 1px;} #system .systemArea .sysA__hl { width: calc(658/650*100%); margin: calc(-187/650*100%) 0 calc(30/650*100%) calc(-8/650*100%); } #system .systemArea .sysA__picList { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #system .systemArea .sysA__picList .sysA__pL__item { width: calc(310/650*100%); margin-top: calc(30/650*100%);} #system .systemArea .sysA__picList .sysA__pL__item:first-child { width: 100%; margin-top: 0;} #system .systemArea .sysA__text { width: 100%; margin: calc(30/650*100%) auto 0; } #system .systemArea .supBlock { margin: calc(40/650*100%) auto 0; padding: calc(30/650*100%) 0; position: relative; } #system .systemArea .supBlock::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 1px 5px; border-style: solid; border-color: rgba(13,44,67,0.5);} #system .systemArea .supBlock .supB__hl { width: calc(550/650*100%); margin: 0 auto calc(30/650*100%); } #system .systemArea .supBlock .supB__text { width: calc(550/650*100%); margin: 0 auto calc(30/650*100%); } #system .systemArea .supBlock .supB__pic{ width: calc(550/650*100%); margin: 0 auto; } #system .hl__wrap { padding-bottom: calc(16/750*100%); margin-bottom: calc(30/750*100%); border-bottom: 1px solid #185a7d; position: relative; } #system .hl__wrap::after { content: ""; display: block; width: 100%; height: 0; padding-top: calc(6/750*100%); background: rgba(0,0,0,0.2); position: absolute; left: 0; bottom: 0; margin-bottom: calc(-7/750*100%); } #system .hl { width: calc(650/750*100%); margin: 0 auto;} #system .controlBtn { position: absolute; top: 0; width: calc(50/650*100%); height: 100%; margin-top: 0; background: none; } #system .swiper-button-prev { left: calc(-50/650*100%); right: auto; } #system .swiper-button-next { right: calc(-50/650*100%); left: auto; } #system .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; } #system .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) center center no-repeat; background-size: 35%; } #system .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) center center no-repeat; background-size: 35%; } #system .controlBtn.swiper-button-disabled { opacity: 0.2;} #system .sysP__picslider .sysP__picslider__list .sysP__picslider__item:not(.swiper-slide-active) { opacity: 0.0!important;} #system .sysP__picslider__pagination .swiper-container-horizontal > .swiper-pagination-bullets, #system .sysP__picslider__pagination .swiper-pagination-custom, #system .sysP__picslider__pagination .swiper-pagination-fraction { position: relative; bottom: 0px; } #system .sysP__picslider .sysP__picslider__pagination { position: relative; bottom: 0px; } #system .sysP__picslider .sysP__picslider__pagination { padding-top: calc(40/540*100%); } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { width: calc(24/540*100%); height: 0; padding-top: calc(20/540*100%); border: 1px solid #429ab4; background: #0d2c43; opacity: 1; } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet-active { background: #429ab4; opacity: 1; } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { margin: 0 calc(7/540*100%); } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-fraction { position: absolute; bottom: 0; right: 0; left: auto; width: auto; color: #429ab4; font-family: "Arial", "sans-serif"; font-size: 3.2vw;}/* 24pt */ @media screen and (min-width: 641px) { #system { } #system .pageTile { width: calc(229/1320*100%); margin-left: calc(-115/1320*100%); } #system .visualArea { padding-top: calc(333/1320*100%); background: url(../../system/_img/visual_pc.jpg?191126) top center no-repeat; background-size: calc(1920/1320*100%); } #system .systemArea { margin-bottom: 0; padding-bottom: calc(50/1320*100%); } #system .systemArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .systemArea .sysA__hl { width: calc(1238/1260*100%); margin: calc(-99/1260*100%) 0 calc(50/1260*100%) -1px; } #system .systemArea .sysA__picList .sysA__pL__item { width: calc(400/1260*100%); margin-top: 0;} #system .systemArea .sysA__picList .sysA__pL__item:first-child { width: calc(400/1260*100%);} #system .systemArea .sysA__text { width: calc(1140/1260*100%); margin: calc(20/1260*100%) 0 0; } #system .systemArea .supBlock { margin: calc(40/1260*100%) auto 0; padding: calc(40/1260*100%) 0 calc(100/1260*100%); } #system .systemArea .supBlock::before { border-width: 2px 10px; } #system .systemArea .supBlock .supB__hl { width: calc(550/1260*100%); margin: 0 0 calc(20/1260*100%) calc(40/1260*100%); } #system .systemArea .supBlock .supB__text { width: calc(538/1260*100%); margin: 0 0 0 calc(40/1260*100%); } #system .systemArea .supBlock .supB__pic{ width: calc(400/1260*100%); margin: calc(40/1260*100%); position: absolute; top: 0; right: 0;} #system .hl__wrap { padding-bottom: calc(20/1320*100%); margin-bottom: calc(20/1320*100%); } #system .hl__wrap::after { padding-top: calc(6/1320*100%); background: rgba(0,0,0,0.2); margin-bottom: calc(-7/1320*100%); } #system .hl { width: calc(1260/1320*100%); margin: 0 auto;} #system .controlBtn { display: block; width: 100%; margin-top: 0; background: none; } #system .swiper-button-prev { left: -100%; } #system .swiper-button-next { right: -100%; } #system .swiper-button-prev::after { background-position: calc(100% - 50/1320*100%) center; background-size: 15px; } #system .swiper-button-next::after { background-position: calc(50/1320*100%) center; background-size: 15px; } #system .controlBtn:hover::after { background-size: 18px; } #system .controlBtn.swiper-button-disabled, #system .controlBtn.swiper-button-disabled { opacity: 0.15;} #system .sysP__picslider__pagination .swiper-container-horizontal > .swiper-pagination-bullets, #system .sysP__picslider__pagination .swiper-pagination-custom, #system .sysP__picslider__pagination .swiper-pagination-fraction { } #system .sysP__picslider .sysP__picslider__pagination { } #system .sysP__picslider .sysP__picslider__pagination { padding-top: calc(15/534*100%); } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { width: calc(16/534*100%); height: 0; padding-top: calc(14/534*100%); } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet-active { } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { margin: 0 calc(5/534*100%); } #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-fraction { font-size: 1.363636vw;}/* 18pt */ } @media screen and (min-width: 1321px) { #system .pageTile { width: 229px; margin-left: -115px; } #system .visualArea { padding-top: 333px; background-size: 1920px; } #system .systemArea { padding-bottom: 50px; } #system .systemArea .inner { width: 1260px; } #system .hl__wrap { padding-bottom: 20px; margin-bottom: 20px; } #system .hl__wrap::after { padding-top: 6px; margin-bottom: -7px; } #system .hl { width: 1260px;} #system .sysP__picslider .sysP__picslider__pagination .swiper-pagination-fraction { font-size: 1.8rem;} } @media screen and (min-width: 1921px) { #system .visualArea { background-size: 100%;} } /* .sysArea ---------------------------------------------------------------------------------------------------------------- */ #system .sysArea { padding-top: calc(60/750*100%); padding-bottom: calc(60/750*100%); background: url(../../system/_img/sys/bg_sp.jpg?200214) top center no-repeat; background-size: 100%; } #system .sysArea .hl .hlimg { width: calc(374/650*100%);} #system .sysArea .sysA__tab { background: rgba(0,0,0,0.5); padding: calc(10/750*100%) 0; margin-bottom: calc(40/750*100%); } #system .sysArea .sysA__tab .sysA__tab__list { width: calc(650/750*100%); margin: 0 auto; -webkit-justify-content: space-between; justify-content: space-between; } #system .sysArea .sysA__tab .sysA__tab__list .sysA__tab__li__item { width: calc(104/650*100%); margin: 0 auto; position: relative; background: url(../../system/_img/sys/subnav/btn_off_sp.png?191126) center center no-repeat; background-size: 100%;} #system .sysArea .sysA__tab .sysA__tab__list .sysA__tab__li__item::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../system/_img/sys/subnav/btn_on_sp.png?191126) center center no-repeat; background-size: 100%; opacity: 0;} #system .sysArea .sysA__tab .sysA__tab__list .sysA__tab__li__item img { position: relative; } #system .sysArea .sysA__tab .sysA__tab__list .sysA__tab__li__item.active::before { opacity: 1; } #system .sysArea .sysA__tabContents { position: relative; } #system .sysArea .sysA__tabContents { width: calc(650/750*100%); margin: 0 auto; overflow: visible!important; } #system .sysArea .sysA__tabContents .sysA__tabConts__list { width: 100%; } #system .sysArea .sysA__tabContents .sysA__tabConts__list .sysA__tabConts__li__item { width: 100%; position: relative;} #system .sysArea .itemBlock.txtArea { width: 100%; position: relative; } #system .sysArea .itemBlock.txtArea .hlUnit { width: calc(310/650*100%); position: relative; border-bottom: 1px solid #185a7d; padding-bottom: calc(8/650*100%); margin-bottom: calc(15/650*100%);} #system .sysArea .itemBlock.txtArea .picUnit { width: calc(310/650*100%); border: 1px solid #04324b; position: absolute; top: 0; right: 0;} #system .sysArea .itemBlock.txtArea .picUnit::before , #system .sysArea .itemBlock.txtArea .picUnit::after { content: ""; display: block; width: calc(100% + 2px); height: 8px; position: absolute; left: -1px; right: -0px; border-left: 1px solid #225e7d; border-right: 1px solid #225e7d;} #system .sysArea .itemBlock.txtArea .picUnit::before { top: -1px; } #system .sysArea .itemBlock.txtArea .picUnit::after { bottom: -1px; } #system .sysArea .itemBlock.txtArea .picUnit .picUnit__inner { padding: 1px; } #system .sysArea .itemBlock.txtArea .picUnit .picUnit__inner::before , #system .sysArea .itemBlock.txtArea .picUnit .picUnit__inner::after { content: ""; display: block; width: 8px; height: calc(0 + 100%); position: absolute; top: -1px; bottom: -1px; border-top: 1px solid #225e7d; border-bottom: 1px solid #225e7d;} #system .sysArea .itemBlock.txtArea .picUnit .picUnit__inner::before { left: -1px; } #system .sysArea .itemBlock.txtArea .picUnit .picUnit__inner::after { right: -1px; } #system .sysArea .itemBlock.txtArea .txtUnit { width: calc(310/650*100%); position: relative; } #system .sysArea .itemBlock.picArea { width: 100%; position: relative; margin-top: calc(25/650*100%); } #system .sysArea .itemBlock.txtArea .hlUnit { } #system .sysArea .itemBlock.txtArea .picUnit { } #system .sysArea .itemBlock.txtArea .txtUnit { } #system .sysArea .item_01 .itemBlock.txtArea .hlUnit img { width: calc(233/310*100%);} #system .sysArea .item_02 .itemBlock.txtArea .hlUnit img { width: calc(231/310*100%);} #system .sysArea .item_03 .itemBlock.txtArea .hlUnit img { width: calc(132/310*100%);} #system .sysArea .item_04 .itemBlock.txtArea .hlUnit img { width: calc(212/310*100%);} #system .sysArea .item_05 .itemBlock.txtArea .hlUnit img { width: calc(255/310*100%);} #system .sysArea .item_06 .itemBlock.txtArea .hlUnit img { width: calc(140/310*100%);} #system .sysArea .itemBlock.picArea { } @media screen and (min-width: 641px) { #system .sysArea { background: url(../../system/_img/sys/bg_pc.jpg?200214) top center no-repeat; background-size: calc(1920/1320*100%); } #system .sysArea { padding-top: calc(50/1320*100%); padding-bottom: calc(60/1320*100%); } #system .sysArea .hl__wrap { margin-bottom: calc(50/1320*100%); } #system .sysArea .hl .hlimg { width: calc(374/1260*100%);} #system .sysArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .sysArea .sysA__tab { display: none; } #system .sysArea .sysA__tabContents { width: calc(1130/1260*100%); margin: 0 auto; overflow: visible; } #system .sysArea .sysA__tabContents .swiper-wrapper { } #system .sysArea .sysA__tabContents .sysA__tabConts__list { width: 100%; } #system .sysArea .sysA__tabContents .sysA__tabConts__list .sysA__tabConts__li__item { width: calc(534/1130*100%); margin-bottom: 0; } #system .sysArea .itemBlock.txtArea { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-end; } #system .sysArea .itemBlock.txtArea .hlUnit { width: calc(264/534*100%); padding-bottom: calc(8/534*100%); margin-top: calc(-9/534*100%); margin-bottom: calc(15/534*100%); margin-left: auto;} #system .sysArea .itemBlock.txtArea .picUnit { width: calc(249/534*100%); position: absolute; top: 0; left: 0;} #system .sysArea .itemBlock.txtArea .txtUnit { width: calc(264/534*100%); margin-left: auto; } #system .sysArea .itemBlock.picArea { width: 100%; margin-top: calc(30/534*100%); } #system .sysArea .item_01 .itemBlock.txtArea .hlUnit img { width: calc(220/264*100%);} #system .sysArea .item_02 .itemBlock.txtArea .hlUnit img { width: calc(219/264*100%);} #system .sysArea .item_03 .itemBlock.txtArea .hlUnit img { width: calc(124/264*100%);} #system .sysArea .item_04 .itemBlock.txtArea .hlUnit img { width: calc(200/264*100%);} #system .sysArea .item_05 .itemBlock.txtArea .hlUnit img { width: calc(240/264*100%);} #system .sysArea .item_06 .itemBlock.txtArea .hlUnit img { width: calc(132/264*100%);} #system .sysArea .sysA__tabContents .sysA__tabConts__li__item { opacity: 1;} #system .sysArea .sysA__tabContents .sysA__tabConts__li__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} /*#system .sysArea .sysA__tabContents .sysA__tabConts__li__item.swiper-slide-next + .sysA__tabConts__li__item { opacity: 1;} #system .sysArea .sysA__tabContents .sysA__tabConts__li__item.swiper-slide-next + .sysA__tabConts__li__item + .sysA__tabConts__li__item { opacity: 1;}*/ } @media screen and (min-width: 1321px) { #system .sysArea { background-size: 1920px; } #system .sysArea { padding-top: 50px; padding-bottom: 60px; } #system .sysArea .inner { width: 1260px; } #system .sysArea .hl__wrap { margin-bottom: 50px; } } @media screen and (min-width: 1921px) { #system .sysArea { background-size: 1920px;} } /* .materiaArea ---------------------------------------------------------------------------------------------------------------- */ #system .materiaArea { padding-top: calc(60/750*100%); padding-bottom: calc(60/750*100%); background: #00071f url(../../system/_img/materia/bg_sp.jpg?200214) top center no-repeat; background-size: 100%; } #system .materiaArea .hl .hlimg { width: calc(208/650*100%);} #system .materiaArea .inner { width: calc(650/750*100%); margin: auto; padding-top: 1px;} #system .materiaArea .leadtext { width: calc(554/650*100%); margin-bottom: calc(30/650*100%);} #system .materiaArea .mateA__tab { background: rgba(0,0,0,0.5); padding: calc(10/750*100%) 0; margin-bottom: calc(40/750*100%); } #system .materiaArea .mateA__tab .mateA__tab__list { width: calc(650/750*100%); margin: 0 auto; -webkit-justify-content: space-between; justify-content: space-between; } #system .materiaArea .mateA__tab .mateA__tab__list .mateA__tab__li__item { width: calc(159/650*100%); margin: 0 auto; position: relative; background: url(../../system/_img/materia/subnav/btn_off_sp.png?191126) center center no-repeat; background-size: cover;} #system .materiaArea .mateA__tab .mateA__tab__list .mateA__tab__li__item::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../system/_img/materia/subnav/btn_on_sp.png?191126) center center no-repeat; background-size: cover; opacity: 0;} #system .materiaArea .mateA__tab .mateA__tab__list .mateA__tab__li__item img { position: relative; } #system .materiaArea .mateA__tab .mateA__tab__list .mateA__tab__li__item.active::before { opacity: 1; } #system .materiaArea .mateA__tabContents { width: 100%; margin: 0 auto; overflow: visible!important; } #system .materiaArea .mateA__tabContents .mateA__tabConts__list { width: 100%; } #system .materiaArea .mateA__tabContents .mateA__tabConts__list .mateA__tabConts__li__item { width: 100%; position: relative;} #system .materiaArea .itemBlock.txtArea { width: 100%; position: relative; } #system .materiaArea .itemBlock.txtArea .hlUnit { width: 100%; position: relative; border-bottom: 1px solid #185a7d; padding-bottom: calc(15/650*100%); margin-bottom: calc(20/650*100%);} #system .materiaArea .itemBlock.txtArea .txtUnit { width: 100%; position: relative; } #system .materiaArea .itemBlock.picArea { width: 100%; position: relative; margin-top: calc(20/650*100%); } @media screen and (min-width: 641px) { #system .materiaArea { background: #000309 url(../../system/_img/materia/bg_pc.jpg?200214) top center no-repeat; background-size: calc(1920/1320*100%); } #system .materiaArea { padding-top: calc(60/1320*100%); padding-bottom: calc(60/1320*100%); } #system .materiaArea .hl .hlimg { width: calc(208/1260*100%);} #system .materiaArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .materiaArea .leadtext { width: calc(763/1260*100%); margin-bottom: calc(47/1260*100%);} #system .materiaArea .mateA__tab { display: none; } #system .materiaArea .mateA__tabContents { width: calc(1130/1260*100%); margin: 0 auto; overflow: visible; } #system .materiaArea .mateA__tabContents .swiper-wrapper { } #system .materiaArea .mateA__tabContents .mateA__tabConts__list { width: 100%; } #system .materiaArea .mateA__tabContents .mateA__tabConts__list .mateA__tabConts__li__item { width: calc(534/1130*100%); } #system .materiaArea .itemBlock.txtArea { width: 100%; } #system .materiaArea .itemBlock.txtArea .hlUnit { padding-bottom: calc(6/534*100%); margin-bottom: calc(13/534*100%);} #system .materiaArea .itemBlock.txtArea .txtUnit { } #system .materiaArea .itemBlock.picArea { margin-top: calc(20/534*100%); } #system .materiaArea .item_01 .itemBlock.txtArea .hlUnit img { width: calc(258/534*100%);} #system .materiaArea .item_02 .itemBlock.txtArea .hlUnit img { width: calc(253/534*100%);} #system .materiaArea .item_03 .itemBlock.txtArea .hlUnit img { width: calc(288/534*100%);} #system .materiaArea .item_04 .itemBlock.txtArea .hlUnit img { width: calc(321/534*100%);} #system .materiaArea .mateA__tabContents .mateA__tabConts__li__item { opacity: 1;} #system .materiaArea .mateA__tabContents .mateA__tabConts__li__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} } @media screen and (min-width: 1321px) { #system .materiaArea { background-size: 1920px; } #system .materiaArea { padding-top: 60px; padding-bottom: 60px; } #system .materiaArea .inner { width: 1260px; } } @media screen and (min-width: 1921px) { #system .materiaArea { background-size: 1920px;} } /* .growthArea ---------------------------------------------------------------------------------------------------------------- */ #system .growthArea { padding-top: calc(60/750*100%); padding-bottom: calc(60/750*100%); background: #00071f url(../../system/_img/growth/bg_sp.jpg?200214) top center no-repeat; background-size: 100%; } #system .growthArea .hl .hlimg { width: calc(214/650*100%);} #system .growthArea .inner { width: calc(650/750*100%); margin: auto; padding-top: 1px;} #system .growthArea .growA__tabContents { width: 100%; margin: 0 auto; overflow: visible!important; } #system .growthArea .growA__tabContents .growA__tabConts__list { width: 100%; } #system .growthArea .growA__tabContents .growA__tabConts__list .growA__tabConts__item { width: 100%; position: relative;} #system .growthArea .itemBlock.txtArea { width: 100%; position: relative; } #system .growthArea .itemBlock.txtArea .txtUnit { width: 100%; position: relative; } #system .growthArea .itemBlock.picArea { width: 100%; position: relative; margin-bottom: calc(20/650*100%); } @media screen and (min-width: 641px) { #system .growthArea { background: #04162b url(../../system/_img/growth/bg_pc.jpg?200214) top center no-repeat; background-size: calc(1920/1320*100%); } #system .growthArea { padding-top: calc(60/1320*100%); padding-bottom: calc(60/1320*100%); } #system .growthArea .hl__wrap { margin-bottom: calc(50/1320*100%); } #system .growthArea .hl .hlimg { width: calc(214/1260*100%);} #system .growthArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .growthArea .growA__tabContents { width: calc(1130/1260*100%); margin: 0 auto; overflow: visible; } #system .growthArea .growA__tabContents .swiper-wrapper { } #system .growthArea .growA__tabContents .growA__tabConts__list { width: 100%; } #system .growthArea .growA__tabContents .growA__tabConts__list .growA__tabConts__item { width: calc(534/1130*100%); } #system .growthArea .itemBlock.picArea { margin-bottom: calc(20/534*100%); } } @media screen and (min-width: 1321px) { #system .growthArea { background-size: 1920px; } #system .growthArea { padding-top: 60px; padding-bottom: 60px; } #system .growthArea .inner { width: 1260px; } #system .growthArea .hl__wrap { margin-bottom: 50px; } } @media screen and (min-width: 1921px) { #system .growthArea { background-size: 1920px;} } /* .summonArea ---------------------------------------------------------------------------------------------------------------- */ #system .summonArea { padding-top: calc(60/750*100%); padding-bottom: calc(80/750*100%); background: #020509 url(../../system/_img/summon/bg_sp.jpg?200214) top center no-repeat; background-size: 100%; } #system .summonArea .hl .hlimg { width: calc(159/650*100%);} #system .summonArea .inner { width: calc(650/750*100%); margin: auto; padding-top: 1px;} #system .summonArea .leadtext { width: 100%; margin-bottom: calc(0/650*100%); position: relative; z-index: 2;} #system .summonArea .smnA__tabContents { width: 100%; margin: 0 auto; overflow: visible!important; } #system .summonArea .smnA__tabContents .smnA__tabConts__list { width: 100%; } #system .summonArea .smnA__tabContents .smnA__tabConts__list .smnA__tabConts__item { width: 100%; position: relative;} #system .summonArea .smnA__tabContents .smnA__tabConts__list .smnA__tabConts__item:not(.swiper-slide-active) { opacity: 0.3;} #system .summonArea .summonBlock { max-width: 650px; width: 100%; position: relative; padding-top: calc(474/650*100%); } #system .summonArea .summonBlock .summBlc__Pic { width: 100%; position: absolute; top: 0; right: 0;} #system .summonArea .summonBlock .summBlc__desc { width: 100%; margin-bottom: calc(15/650*100%); position: relative;} #system .summonArea .summonBlock .summA__picList__wrap { width: calc(540/650*100%); margin: 0 auto; overflow: visible!important;} #system .summonArea .summonBlock .summA__picList { width: 100%; position: relative;} #system .summonArea .summonBlock .summA__picList .summA__pL__item { width: 100%; position: relative;} #system .summonArea .summonBlock .summA__picList .summA__pL__item .pictext { width: auto; position: absolute; right: calc(20/540*100%); bottom: 0; margin-bottom: calc(-22/540*100%); } #system .summonArea #summ1.summonBlock .summBlc__Pic { width: calc(612/650*100%); right: calc(7/650*100%); margin-top: calc(-12/650*100%);} #system .summonArea #summ1.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(266/540*100%); } #system .summonArea #summ2.summonBlock .summBlc__Pic { width: calc(494/650*100%); right: calc(45/650*100%); margin-top: calc(-8/650*100%); } #system .summonArea #summ2.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(222/540*100%); } #system .summonArea #summ3.summonBlock .summBlc__Pic { width: calc(727/650*100%); left: calc(28/650*100%); margin-top: calc(7/650*100%); } #system .summonArea #summ3.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(353/540*100%); margin-left: calc(-13/540*100%); } #system .summonArea #summ4.summonBlock .summBlc__Pic { width: calc(381/650*100%); right: calc(120/650*100%); margin-top: calc(4/650*100%); } #system .summonArea #summ5.summonBlock .summBlc__Pic { width: calc(664/650*100%); right: calc(-47/650*100%); margin-top: calc(-8/650*100%); } #system .summonArea #summ6.summonBlock .summBlc__Pic { width: calc(467/650*100%); right: calc(81/650*100%); margin-top: calc(9/650*100%); } #system .summonArea #summ7.summonBlock .summBlc__Pic { width: calc(778/650*100%); left: calc(-112/650*100%); margin-top: calc(-22/650*100%); } #system .summonArea #summ7.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(205/540*100%); } #system .summonArea .smnA__tab { width: calc(526/650*100%); margin: calc(40/650*100%) auto 0; position: relative; background: rgba(0,0,0,0.8); } #system .summonArea .smnA__tab::before , #system .summonArea .smnA__tab::after { content: ""; display: block; width: 0px; height: 100%; position: absolute; top: 0; } #system .summonArea .smnA__tab::before { left: 0; border-left: 4px solid #439bb5; border-right: 4px solid rgba(13,44,67,0.5); } #system .summonArea .smnA__tab::after { right: 0; border-right: 4px solid #439bb5; border-left: 4px solid rgba(13,44,67,0.5); } #system .summonArea .smnA__tab__list { width: 100%; position: relative; padding: calc(25/526*100%) 0; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } #system .summonArea .smnA__tab__list .smnA__tab__item { width: calc(102/526*100%); margin: 0 calc(10/526*100%); position: relative; overflow: hidden; background: url(../../system/_img/summon/subnav/btn_off.png) center center no-repeat; background-size: 100%; } #system .summonArea .smnA__tab__list .smnA__tab__item .btn { display: block; position: relative; } #system .summonArea .smnA__tab__list .smnA__tab__item .btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: url(../../system/_img/summon/subnav/btn_on.png) center center no-repeat; background-size: 100%; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #system .summonArea .smnA__tab__list .smnA__tab__item.active .btn::before { opacity: 1; } #system .summonArea .smnA__tab__list .smnA__tab__item .btn::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: -webkit-linear-gradient(left, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); background: linear-gradient(to right, rgba(119,183,233,0.3) 0%,rgba(119,183,233,0) 35%,rgba(119,183,233,0) 50%,rgba(119,183,233,0) 65%,rgba(119,183,233,0.3) 100%); border-style: solid; border-width: 1px 2px; border-color: #8cc1d0; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; } #system .summonArea .smnA__tab__list .smnA__tab__item.active .btn::after { opacity: 1; } #system .summonArea .smnA__tab__list .smnA__tab__item img { position: relative; } #system .summonArea .smnA__tab__list::before { content: ""; display: block; width: 89%; height: 1px; background: #224f5d; position: absolute; top: 0; left: 5.5%; margin-top: calc(145/526*100%); } @media screen and (max-width: 640px) { /* 調整用　*/ #system .summonArea .smnA__tab__list .smnA__tab__item:nth-child(n+5) { margin-top: calc(40/526*100%);} #system .summonArea .smnA__tab__list .smnA__tab__item:nth-child(n+9) { margin-top: calc(20/526*100%);} #system .summonArea .smnA__tab__list.last1::after { content: ""; display: block; width: calc(122/526*100%); height: 1px; } #system .summonArea .smnA__tab__list.last2::after { content: ""; display: block; width: calc(244/526*100%); height: 1px; } #system .summonArea .smnA__tab__list.last3::after { content: ""; display: block; width: calc(366/526*100%); height: 1px; } } @media screen and (min-width: 641px) { #system .summonArea { background: #000309 url(../../system/_img/summon/bg_pc.jpg?200214) top center no-repeat; background-size: calc(1920/1320*100%); } #system .summonArea { padding-top: calc(60/1320*100%); padding-bottom: calc(60/1320*100%); } #system .summonArea .hl .hlimg { width: calc(159/1260*100%);} #system .summonArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .summonArea .leadtext { width: calc(805/1260*100%); margin-bottom: calc(0/1260*100%); z-index: 2;} #system .summonArea .smnA__tabContents { width: calc(1130/1260*100%); margin: 0 auto; overflow: visible; } #system .summonArea .smnA__tabContents .swiper-wrapper { } #system .summonArea .smnA__tabContents .smnA__tabConts__list { width: 100%; } #system .summonArea .smnA__tabContents .smnA__tabConts__list .smnA__tabConts__item { } #system .summonArea .summonBlock { max-width: none; padding-top: calc(42/1130*100%); padding-bottom: calc(50/1130*100%);} #system .summonArea .summonBlock .summBlc__Pic { width: 100%; z-index: 3; } #system .summonArea .summonBlock .summBlc__desc { width: calc(580/1130*100%); margin-bottom: 0; margin-left: calc(-12/1130*100%); z-index: 4; } #system .summonArea .summonBlock .summA__picList__wrap { width: calc(540/1130*100%); margin-top: calc(55/1130*100%); margin-left: calc(20/1130*100%); } #system .summonArea .summonBlock .summA__picList { } #system .summonArea .summonBlock .summA__picList .summA__pL__item { width: 100%; } #system .summonArea .summonBlock .summA__picList .summA__pL__item .pictext { right: calc(20/540*100%); margin-bottom: calc(-16/540*100%); } #system .summonArea #summ1.summonBlock .summBlc__Pic { width: calc(612/1130*100%); right: calc(-43/1130*100%); margin-top: calc(-60/1130*100%);} #system .summonArea #summ1.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(214/540*100%); } #system .summonArea #summ2.summonBlock .summBlc__Pic { width: calc(494/1130*100%); right: calc(-40/1130*100%); margin-top: calc(-61/1130*100%); } #system .summonArea #summ2.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(178/540*100%); } #system .summonArea #summ3.summonBlock .summBlc__Pic { width: calc(783/1130*100%); left: calc(630/1130*100%); margin-top: calc(-47/1130*100%); } #system .summonArea #summ3.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(299/540*100%); } #system .summonArea #summ4.summonBlock .summBlc__Pic { width: calc(455/1130*100%); right: calc(12/1130*100%); margin-top: calc(32/1130*100%); } #system .summonArea #summ5.summonBlock .summBlc__Pic { width: calc(664/1130*100%); right: calc(-100/1130*100%); margin-top: calc(80/1130*100%); } #system .summonArea #summ6.summonBlock .summBlc__Pic { width: calc(467/1130*100%); right: calc(12/1130*100%); margin-top: calc(71/1130*100%); } #system .summonArea #summ7.summonBlock .summBlc__Pic { width: calc(778/1130*100%); left: calc(398/1130*100%); margin-top: calc(-120/1130*100%); z-index: 1; } #system .summonArea #summ7.summonBlock .summA__picList__wrap { margin-top: calc(29/1130*100%); } #system .summonArea #summ7.summonBlock .summA__picList .summA__pL__item .pictext { width: calc(165/540*100%); } #system .summonArea .smnA__tab { width: calc(358/1260*100%); margin: 0 auto 0; } #system .summonArea .smnA__tab__list { padding: calc(14/358*100%) 0; } #system .summonArea .smnA__tab__list .smnA__tab__item { width: calc(42/358*100%); margin: 0 calc(2/358*100%); } #system .summonArea .smnA__tab__list::before { content: ""; display: block; width: 1px; height: 60%; left: 56.0%; margin-top: calc(14/358*100%); } #system .summonArea .smnA__tab__list .smnA__tab__item:nth-child(4) { margin-right: calc(7/358*100%); } #system .summonArea .smnA__tab__list .smnA__tab__item:nth-child(5) { margin-left: calc(8/358*100%); } } @media screen and (min-width: 1321px) { #system .summonArea { background-size: 1920px; } #system .summonArea { padding-top: 60px; padding-bottom: 60px; } #system .summonArea .hl__wrap { padding-bottom: 20px; margin-bottom: 20px; } #system .summonArea .hl__wrap::after { padding-top: 6px; margin-bottom: -7px; } #system .summonArea .hl { width: 1260px;} #system .summonArea .inner { width: 1260px; } } @media screen and (min-width: 1921px) { #system .summonArea { background-size: 1920px;} } /* .newelementArea ---------------------------------------------------------------------------------------------------------------- */ #system .newelementArea { padding-top: calc(60/750*100%); padding-bottom: calc(80/750*100%); background: #020a18 url(../../system/_img/newelement/bg_sp.jpg?200214) top center no-repeat; background-size: 100%; } #system .newelementArea .hl .hlimg { width: calc(211/650*100%);} #system .newelementArea .inner { width: calc(650/750*100%); margin: auto; padding-top: 1px;} #system .newelementArea .leadtext { width: calc(573/650*100%); margin-bottom: calc(30/650*100%);} #system .newelementArea .neleA__tab { background: rgba(0,0,0,0.5); padding: calc(10/750*100%) 0; margin-bottom: calc(40/750*100%); } #system .newelementArea .neleA__tab .neleA__tab__list { width: calc(650/750*100%); margin: 0 auto; -webkit-justify-content: space-between; justify-content: space-between; } #system .newelementArea .neleA__tab .neleA__tab__list .neleA__tab__li__item { width: calc(159/650*100%); margin: 0 auto; position: relative; background: url(../../system/_img/newelement/subnav/btn_off_sp.png) center center no-repeat; background-size: cover;} #system .newelementArea .neleA__tab .neleA__tab__list .neleA__tab__li__item::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../system/_img/newelement/subnav/btn_on_sp.png) center center no-repeat; background-size: cover; opacity: 0;} #system .newelementArea .neleA__tab .neleA__tab__list .neleA__tab__li__item img { position: relative; } #system .newelementArea .neleA__tab .neleA__tab__list .neleA__tab__li__item.active::before { opacity: 1; } #system .newelementArea .neleA__tabContents { width: 100%; margin: 0 auto; overflow: visible!important; } #system .newelementArea .neleA__tabContents .neleA__tabConts__list { width: 100%; } #system .newelementArea .neleA__tabContents .neleA__tabConts__list .neleA__tabConts__li__item { width: 100%; position: relative;} #system .newelementArea .itemBlock.txtArea { width: 100%; position: relative; } #system .newelementArea .itemBlock.txtArea .hlUnit { width: 100%; position: relative; border-bottom: 1px solid #185a7d; padding-bottom: calc(15/650*100%); margin-bottom: calc(20/650*100%);} #system .newelementArea .itemBlock.txtArea .txtUnit { width: 100%; position: relative; margin-bottom: calc(20/650*100%); } #system .newelementArea .itemBlock.picArea { width: 100%; position: relative; } #system .newelementArea .itemBlock.picArea .pictxtUnit { margin-top: calc(17/650*100%); margin-left: calc(-2/650*100%); } #system .newelementArea .neleA__picList__wrap { width: 100%; margin: 0 auto; } #system .newelementArea .neleA__picList { width: 100%; position: relative;} #system .newelementArea .neleA__picList .neleA__picList { width: 100%; position: relative;} #system .newelementArea .sysP__picslider .sysP__picslider__pagination { padding-top: calc(20/650*100%); } #system .newelementArea .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { width: calc(24/650*100%); height: 0; padding-top: calc(20/650*100%); } #system .newelementArea .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { margin: 0 calc(7/650*100%); } @media screen and (max-width: 640px) { #system .newelementArea { margin-bottom: calc(-124/750*100%); padding-bottom: calc(164/750*100%); } } @media screen and (min-width: 641px) { #system .newelementArea { background: #000309 url(../../system/_img/newelement/bg_pc.jpg?200214) top center no-repeat; background-size: calc(1920/1320*100%); } #system .newelementArea { padding-top: calc(60/1320*100%); padding-bottom: calc(150/1320*100%); } #system .newelementArea .hl .hlimg { width: calc(211/1260*100%);} #system .newelementArea .inner { width: calc(1260/1320*100%); padding-top: 1px;} #system .newelementArea .leadtext { width: calc(469/1260*100%); margin-bottom: calc(60/1260*100%);} #system .newelementArea .neleA__tab { display: none; } #system .newelementArea .neleA__tabContents { width: calc(1130/1260*100%); } #system .newelementArea .neleA__tabContents .swiper-wrapper { } #system .newelementArea .neleA__tabContents .neleA__tabConts__list { width: 100%; } #system .newelementArea .neleA__tabContents .neleA__tabConts__list .neleA__tabConts__li__item { width: calc(534/1130*100%); } #system .newelementArea .neleA__tabContents .neleA__tabConts__li__item { opacity: 1;} #system .newelementArea .neleA__tabContents .neleA__tabConts__li__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} #system .newelementArea .itemBlock.txtArea { width: 100%; } #system .newelementArea .itemBlock.txtArea .hlUnit { padding-bottom: calc(6/534*100%); margin-bottom: calc(13/534*100%);} #system .newelementArea .itemBlock.txtArea .txtUnit { margin-bottom: calc(20/534*100%); } #system .newelementArea .itemBlock.picArea { } #system .newelementArea .itemBlock.picArea .pictxtUnit { margin-top: calc(10/534*100%); margin-left: calc(-1/534*100%); } #system .newelementArea .item_01 .itemBlock.txtArea .hlUnit img { width: calc(233/534*100%);} #system .newelementArea .item_02 .itemBlock.txtArea .hlUnit img { width: calc(290/534*100%);} #system .newelementArea .item_03 .itemBlock.txtArea .hlUnit img { width: calc(227/534*100%);} #system .newelementArea .neleA__picList__wrap { overflow: visible!important; } #system .newelementArea .neleA__picList { width: 100%; } #system .newelementArea .neleA__picList .neleA__picList { width: 100%; } #system .newelementArea .sysP__picslider .sysP__picslider__pagination { padding-top: calc(15/534*100%); } #system .newelementArea .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { width: calc(16/534*100%); height: 0; padding-top: calc(14/534*100%); } #system .newelementArea .sysP__picslider .sysP__picslider__pagination .swiper-pagination-bullet { margin: 0 calc(5/534*100%); } } @media screen and (min-width: 1321px) { #system .newelementArea { background-size: 1920px; } #system .newelementArea { padding-top: 60px; padding-bottom: 150px; } #system .newelementArea .hl__wrap { padding-bottom: 20px; margin-bottom: 20px; } #system .newelementArea .hl__wrap::after { padding-top: 6px; margin-bottom: -7px; } #system .newelementArea .hl { width: 1260px;} #system .newelementArea .inner { width: 1260px; } } @media screen and (min-width: 1921px) { #system .newelementArea { background-size: 1920px;} } /* ---------------------------------------------------------------------------------------------------------------- #media ---------------------------------------------------------------------------------------------------------------- */ #media { background: #090d0b url(../../media/_img/bg_sp.jpg?190930) top center no-repeat; background-size: 100%; } #media .hl { width: 100%; padding-bottom: calc(16/750*100%); margin-bottom: calc(35/750*100%); border-bottom: 1px solid #185a7d; position: relative; text-align: center; } #media .hl::after { content: ""; display: block; width: 100%; height: 0; padding-top: calc(6/750*100%); background: rgba(0,0,0,0.2); position: absolute; left: 0; bottom: 0; margin-bottom: calc(-7/750*100%); } #media .hl .hlimg { width: calc(650/750*100%); margin: auto; } #media .videoArea { padding: calc(167/750*100%) 0 calc(80/750*100%); } #media .videoArea .inner { } #media .vA__videoBlock { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #media .vA__videoBlock { width: calc(650/750*100%); margin: calc(-60/750*100%) auto 0; position: relative; } #media .vA__videoBlock .vB__item { width: 100%; margin-top: calc(60/650*100%); } #media .vA__videoBlock .basicFrame2 .bF__frame .bF__box .bF__box__name { width: calc(385/650*100%); position: absolute; bottom: 0; left: 50%; margin-left: calc(-192.5/650*100%); margin-bottom: calc(-20/650*100%); background: url(../../media/_img/btn_off.png) center center no-repeat; background-size: 100%; } #media .vA__videoBlock a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { content: ""; display: block; width: calc(68/385*100%); height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/icon_play.png) center center no-repeat; background-size: 100%; } /* カテゴリ選択 */ #media .viA__categoryList { width: calc(650/750*100%); position: relative; margin: 0 auto calc(20/750*100%); position: relative; z-index: 2;} #media .viA__categoryList { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #media .viA__categoryList .viA__cateList__item { width: auto; position: relative; margin: 0 calc(20/650*100%); } #media .viA__categoryList .viA__cateList__item .btn-off { opacity: 1;} #media .viA__categoryList .viA__cateList__item .btn-on { position: absolute; top: 0; left: 0; opacity: 0;} #media .viA__categoryList .viA__cateList__item.active .btn-on { opacity: 1;} #media .viA__categoryList .viA__cateList__item.btn_all { width: calc(56/650*100%); } #media .viA__categoryList .viA__cateList__item.btn_tra { width: calc(95/650*100%); } #media .viA__categoryList .viA__cateList__item.btn_oth { width: calc(89/650*100%); } @media screen and (max-width: 640px) { #media .vA__videoBlock .vB__item.vB__item-s { width: calc(310/650*100%); } #media .vA__videoBlock .vB__item-s .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-138/310*100%); margin-bottom: calc(-20/310*100%); width: calc(276/310*100%);} #media .vA__videoBlock .vB__item-s a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { width: calc(56/310*100%);} } @media screen and (min-width: 641px) { #media { background: #090d0b url(../../media/_img/bg_pc.jpg?190930) top center no-repeat; background-size: calc(1920/1320*100%); padding-bottom: calc(150/1320*100%);} #media .pageTile { width: calc(190/1320*100%); margin-left: calc(-95/1320*100%); } #media .hl { padding-bottom: calc(15/1320*100%); margin-bottom: calc(27/1320*100%); } #media .hl::after { padding-top: calc(6/1320*100%); margin-bottom: calc(-7/1320*100%); } #media .hl .hlimg { width: calc(650/1320*100%); } #media .videoArea { padding: calc(163/1320*100%) 0 calc(60/1320*100%); } #media .videoArea .inner { } #media .vA__videoBlock { -webkit-justify-content: space-between; justify-content: space-between; } #media .vA__videoBlock { width: 100%; margin-top: calc(0/1260*100%); } #media .vA__videoBlock .vB__item { width: calc(400/1260*100%); margin-top: calc(40/1260*100%); } #media .vA__videoBlock .vB__item:not(.vB__item-s) { width: calc(615/1260*100%); margin-top: 0; } #media .vA__videoBlock .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-160/400*100%); margin-bottom: calc(-10/400*100%); width: calc(321/400*100%); } #media .vA__videoBlock a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { width: 100%; height: 100%; background-position: left center; background-size: auto 100%;} #media .vA__videoBlock .vB__item:not(.vB__item-s) .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-160/615*100%); margin-bottom: calc(-10/615*100%); width: calc(321/615*100%); } /* カテゴリ選択 */ #media .viA__categoryList { width: calc(605/1260*100%); margin: calc(0/1260*100%) auto calc(25/1260*100%); } #media .viA__categoryList .viA__cateList__item { margin: 0 calc(20/605*100%); } #media .viA__categoryList .viA__cateList__item.active .btn-on , #media .viA__categoryList .viA__cateList__item:hover .btn-on { opacity: 1;} #media .viA__categoryList .viA__cateList__item.btn_all { width: calc(44/605*100%); } #media .viA__categoryList .viA__cateList__item.btn_tra { width: calc(74/605*100%); } #media .viA__categoryList .viA__cateList__item.btn_oth { width: calc(69/605*100%); } } @media screen and (min-width: 1321px) { #media { background-size: 1920px; padding-bottom: 150px;} #media .pageTile { width: 190px; margin-left: -95px; } #media .hl { padding-bottom: 15px; margin-bottom: 27px; } #media .hl::after { padding-top: 6px; margin-bottom: -7px; } #media .hl .hlimg { width: 650px; } #media .videoArea { padding: 163px 0 60px; } } @media screen and (min-width: 1921px) { #media { background-size: 100%;} } /* Images Large */ #media .media__picContents { width: calc(650/750*100%); position: relative; overflow: visible;} #media .me__picCon__list { width: 100%; position: relative; margin: auto; } #media .me__picCon__list .me__picCon__item { text-align: center; } #media .media__picContents .controlBtn { position: absolute; top: 0; width: calc(50/650*100%); height: 100%; margin-top: 0; background: none; } #media .media__picContents .swiper-button-next { right: calc(-50/650*100%); left: auto; } #media .media__picContents .swiper-button-prev { left: calc(-50/650*100%); right: auto; } #media .media__picContents .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; } #media .media__picContents .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) center center no-repeat; background-size: 35%; } #media .media__picContents .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) center center no-repeat; background-size: 35%; } #media .media__picContents .controlBtn.swiper-button-disabled { opacity: 0.2;} #media .me__picCon__list .me__picCon__item:not(.swiper-slide-active) { opacity: 0!important;} /* カテゴリ選択 */ #media .ssA__categoryList { width: calc(650/750*100%); position: relative; margin: calc(30/750*100%) auto 0; } #media .ssA__categoryList { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; justify-content: center; } #media .ssA__categoryList .ssA__cateList__item { width: auto; position: relative; margin: 0 calc(20/650*100%) calc(-10/650*100%); } #media .ssA__categoryList .ssA__cateList__item .btn-off { opacity: 1;} #media .ssA__categoryList .ssA__cateList__item .btn-on { position: absolute; top: 0; left: 0; opacity: 0;} #media .ssA__categoryList .ssA__cateList__item.active .btn-on { opacity: 1;} #media .ssA__categoryList .ssA__cateList__item.btn_all { width: calc(56/650*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_bat { width: calc(85/650*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_loc { width: calc(110/650*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_eve { width: calc(73/650*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_oth { width: calc(89/650*100%); } /* Images Thumbnail */ #media .media__thumbContents { width: calc(616/750*100%); position: relative; margin: calc(30/750*100%) 0 0 calc(50/750*100%); overflow: visible;} #media .me__thumbCon__list { width: 100%; position: relative; margin: auto; } #media .me__thumbCon__list .me__thumbCon__item { } #media .me__thumbCon__list .me__thumbCon__item { width: 100%; position: relative; } #media .me__thumbCon__list .me__thumbCon__item::before , #media .me__thumbCon__list .me__thumbCon__item::after { content: ""; width: 100%; height: 5px; display: block; z-index: 2; position: absolute; left: 0px; border-left: 1px solid #225e7d; border-right: 1px solid #225e7d;} #media .me__thumbCon__list .me__thumbCon__item::before { top: 0px;} #media .me__thumbCon__list .me__thumbCon__item::after { bottom: 0px;} #media .me__thumbCon__list .me__thumbCon__item .item__inrwrap::before , #media .me__thumbCon__list .me__thumbCon__item .item__inrwrap::after { content: ""; width: 5px; height: 100%; display: block; z-index: 2; position: absolute; top: 0px; border-top: 1px solid #225e7d; border-bottom: 1px solid #225e7d;} #media .me__thumbCon__list .me__thumbCon__item .item__inrwrap::before { left: 0px;} #media .me__thumbCon__list .me__thumbCon__item .item__inrwrap::after { right: 0px;} #media .me__thumbCon__list .me__thumbCon__item .item__inr { width: 100%; position: relative; border: 1px solid #04324b; overflow: hidden; } #media .me__thumbCon__list .me__thumbCon__item .item__inr img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} #media .me__thumbCon__list .picActive::before , #media .me__thumbCon__list .picActive::after , #media .me__thumbCon__list .picActive .item__inrwrap::before , #media .me__thumbCon__list .picActive .item__inrwrap::after { border-color: #59bfdd;} #media .me__thumbCon__list .picActive .item__inr { border-color: #0c7aa5; } #media .media__thumbContents .controlBtn { position: absolute; top: 0; width: calc(50/616*100%); height: 100%; margin-top: 0; background: none; } #media .media__thumbContents .swiper-button-prev { left: calc(-50/616*100%); right: auto; } #media .media__thumbContents .swiper-button-next { right: calc(-84/616*100%); left: auto; } #media .media__thumbContents .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; } #media .media__thumbContents .swiper-button-prev::after { background: url(../../_img/trailer/btn_prev.png) center center no-repeat; background-size: 35%; } #media .media__thumbContents .swiper-button-next::after { background: url(../../_img/trailer/btn_next.png) center center no-repeat; background-size: 35%; } #media .media__thumbContents .controlBtn.swiper-button-disabled { opacity: 0.2;} #media .me__thumbCon__list .me__thumbCon__item { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity: 1;} #media .me__thumbCon__list .me__thumbCon__item:not(.swiper-slide-active):not(.swiper-slide-next) { opacity: 0.4;} #media .me__thumbCon__list .me__thumbCon__item.swiper-slide-next + .me__thumbCon__item , #media .me__thumbCon__list .me__thumbCon__item.swiper-slide-next + .me__thumbCon__item + .me__thumbCon__item { opacity: 1;} @media screen and (min-width: 641px) { /* Images Large */ #media .media__picContents { width: calc(1120/1260*100%); } #media .me__picCon__list { } #media .me__picCon__list .me__picCon__item { } #media .media__picContents .controlBtn { width: calc(70/1120*100%); } #media .media__picContents .swiper-button-prev { left: calc(-70/1120*100%); right: auto; } #media .media__picContents .swiper-button-next { right: calc(-70/1120*100%); left: auto; } #media .media__picContents .swiper-button-prev::after { background-size: 15px; } #media .media__picContents .swiper-button-next::after { background-size: 15px; } #media .media__picContents .controlBtn::after { transition: all 0.1s ease 0s; -webkit-transition: all 0.1s ease 0s; } #media .media__picContents .controlBtn:hover::after { background-size: 18px; } /* カテゴリ選択 */ #media .ssA__categoryList { width: calc(605/1260*100%); margin: calc(20/1260*100%) auto calc(-10/1260*100%); } #media .ssA__categoryList .ssA__cateList__item { margin: 0 calc(20/605*100%); } #media .ssA__categoryList .ssA__cateList__item.active .btn-on , #media .ssA__categoryList .ssA__cateList__item:hover .btn-on { opacity: 1;} #media .ssA__categoryList .ssA__cateList__item.btn_all { width: calc(44/605*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_bat { width: calc(66/605*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_loc { width: calc(86/605*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_eve { width: calc(58/605*100%); } #media .ssA__categoryList .ssA__cateList__item.btn_oth { width: calc(69/605*100%); } /* Images Thumbnail */ #media .media__thumbContents { width: calc(1040/1260*100%); margin: calc(30/1260*100%) auto 0; } #media .me__thumbCon__list { } #media .me__thumbCon__list .me__thumbCon__item { overflow: hidden; box-shadow: 0px 0px 20px 10px rgba(67,155,181,0); } #media .me__thumbCon__list .me__thumbCon__item img { vertical-align: top; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;} #media .me__thumbCon__list .me__thumbCon__item:hover::before , #media .me__thumbCon__list .me__thumbCon__item:hover::after , #media .me__thumbCon__list .me__thumbCon__item:hover .item__inrwrap::before , #media .me__thumbCon__list .me__thumbCon__item:hover .item__inrwrap::after { border-color: #59bfdd;} #media .me__thumbCon__list .me__thumbCon__item:hover .item__inr { border-color: #0c7aa5; } #media .me__thumbCon__list .me__thumbCon__item:hover .item__inr img { transform: scale(1.1); opacity: 0.6; } #media .me__thumbCon__list .me__thumbCon__item:hover{ box-shadow: 0px 0px 6px 2px rgba(67,155,181,0.9); -webkit-transform: scale(1.03); transform: scale(1.03);} #media .me__thumbCon__list .me__thumbCon__item.swiper-slide-next + .me__thumbCon__item + .me__thumbCon__item , #media .me__thumbCon__list .me__thumbCon__item.swiper-slide-next + .me__thumbCon__item + .me__thumbCon__item + .me__thumbCon__item , #media .me__thumbCon__list .me__thumbCon__item.swiper-slide-next + .me__thumbCon__item + .me__thumbCon__item + .me__thumbCon__item + .me__thumbCon__item { opacity: 1;} #media .media__thumbContents .controlBtn { width: 100%; } #media .media__thumbContents .swiper-button-prev { left: -100%; } #media .media__thumbContents .swiper-button-next { right: -100%; } #media .media__thumbContents .swiper-button-prev::after { background-position: calc(100% - 70/1120*100%) center;background-size: 15px; } #media .media__thumbContents .swiper-button-next::after { background-position: calc(70/1120*100%) center;background-size: 15px; } #media .media__thumbContents .controlBtn:hover::after { background-size: 18px; } #media .media__thumbContents .controlBtn.swiper-button-disabled { opacity: 0.2;} } /* ARTWORKS */ #media .artArea { padding: 0 0 calc(60/750*100%); } #media .artArea .inner { } #media #artAreaPicConts .ire1 { width: calc(440/650*100%); } /* SCREENSHOTS */ #media .ssArea { } #media .ssArea .inner { } @media screen and (max-width: 640px) { #media .artArea { } #media .ssArea { margin-bottom: calc(-124/750*100%); padding-bottom: calc(124/750*100%); } } @media screen and (min-width: 641px) { /* ARTWORKS */ #media .artArea { padding: 0 0 calc(60/1320*100%); } #media .artArea .inner { } #media .artArea .media__picContents { width: calc(1120/1260*100%); } #media #artAreaPicConts .ire1 { width: calc(624/1120*100%); } #media #artAreaPicList.max5 .me__thumbCon__list { justify-content: center; } #media #artAreaPicList.max5 .controlBtn { display: none; } /* SCREENSHOTS */ #media .ssArea { } #media .ssArea .inner { } #media .ssArea .media__picContents { width: calc(1120/1260*100%); } } @media screen and (min-width: 1321px) { #media .artArea { padding: 0 0 60px; } } @media screen and (min-width: 1921px) { } /* ---------------------------------------------------------------------------------------------------------------- #themesong ---------------------------------------------------------------------------------------------------------------- */ #themesong { background: #000 url(../../themesong/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; } #themesong .introductionArea { padding: calc(160/750*100%) 0 0; } #themesong .introductionArea .hl { width: 100%; padding-bottom: calc(8/750*100%); margin-bottom: calc(35/750*100%); border-bottom: 1px solid #185a7d; position: relative; text-align: center; } #themesong .introductionArea .hl .hlimg { width: calc(750/750*100%); margin: auto; } #themesong .introductionArea .introA__songBlock { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #themesong .introductionArea .introA__songBlock { position: relative; } #themesong .introductionArea .introA__songBlock .introA__sB__item { width: 100%; margin-top: calc(60/650*100%); position: relative; } #themesong .introductionArea .introA__songBlock .introA__sB__item:first-child { margin-top: 0; } #themesong .introductionArea .introA__songBlock .introA__sB__item .introA__sB__detail { width: calc(325/310*100%); margin-top: calc(-4/310*100%); margin-left: calc(-5/310*100%); } #themesong .introductionArea .introA__songBlock .basicFrame2 .bF__frame .bF__box .bF__box__name { width: calc(385/650*100%); position: absolute; bottom: 0; left: 50%; margin-left: calc(-192.5/650*100%); margin-bottom: calc(-20/650*100%); background: url(../../media/_img/btn_off.png) center center no-repeat; background-size: 100%; } #themesong .introductionArea .introA__songBlock a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { content: ""; display: block; width: calc(68/385*100%); height: 100%; position: absolute; top: 0; left: 0; background: url(../../media/_img/icon_play.png) center center no-repeat; background-size: 100%; } #themesong .commentArea { margin: calc(90/750*100%) 0 calc(0/750*100%); } #themesong .commentArea .cmtA__commentBlock { position: relative; } #themesong .commentArea .cmtA__cmtB__item { width: 100%; } #themesong .commentArea .cmtA__cmtB__item.cmtA__cmtB__name { margin-bottom: calc(30/650*100%); } #themesong .commentArea .cmtA__cmtB__item.cmtA__cmtB__text { color: #c8c8c8; font-size: calc(20/750*100vw); line-height: 1.81;} #themesong .profileArea { margin: calc(70/750*100%) 0 calc(0/750*100%); } #themesong .profileArea .profA__profileBlock { border: 1px solid #1d384b; padding: calc(29/650*100%); position: relative; } #themesong .profileArea .profA__profB__item { width: 100%; } #themesong .profileArea .profA__profB__item.profA__profB__name { margin-bottom: calc(30/590*100%); } #themesong .profileArea .profA__profB__item.profA__profB__name a { display: inline-block; margin-top: 0.8em; color: #439bb5; text-decoration: underline; font-size: calc(20/750*100vw); } #themesong .profileArea .profA__profB__item.profA__profB__text { color: #c8c8c8; font-size: calc(20/750*100vw); line-height: 1.81;} @media screen and (max-width: 640px) { #themesong .introductionArea .inner { width: calc(650/750*100%); margin: 0 auto; } #themesong .introductionArea .introA__songBlock .introA__sB__item.introA__sB__item-s { width: calc(310/650*100%); } #themesong .introductionArea .introA__songBlock .introA__sB__item-s .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-138/310*100%); margin-bottom: calc(-20/310*100%); width: calc(276/310*100%);} #themesong .introductionArea .introA__songBlock .introA__sB__item-s a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { width: calc(56/310*100%);} #themesong .commentArea .inner { width: calc(650/750*100%); margin: 0 auto; } #themesong .profileArea .inner { width: calc(650/750*100%); margin: 0 auto; } } @media screen and (min-width: 641px) { #themesong { background: #060a09 url(../../themesong/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); padding-bottom: calc(150/1320*100%);} #themesong .pageTile { width: calc(346/1320*100%); margin-left: calc(-173/1320*100%); } #themesong .introductionArea { padding: calc(163/1320*100%) 0 0; } #themesong .introductionArea .inner { } #themesong .introductionArea .hl { padding-bottom: calc(8/1320*100%); margin-bottom: calc(35/1320*100%); } #themesong .introductionArea .hl .hlimg { width: calc(763/1320*100%); } #themesong .introductionArea .introA__songBlock { width: 100%; } #themesong .introductionArea .introA__songBlock .introA__sB__item { width: calc(400/1260*100%); margin-top: 0; } #themesong .introductionArea .introA__songBlock .introA__sB__item:first-child { width: calc(830/1260*100%); } #themesong .introductionArea .introA__songBlock .introA__sB__item .introA__sB__detail { width: calc(400/400*100%); margin-top: calc(-4/400*100%); margin-left: calc(-3/400*100%); } #themesong .introductionArea .introA__songBlock .introA__sB__item:nth-child(3) { position: absolute; right: 0; bottom: 0;} #themesong .introductionArea .introA__songBlock .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-160/400*100%); margin-bottom: calc(-10/400*100%); width: calc(321/400*100%); } #themesong .introductionArea .introA__songBlock .introA__sB__item:first-child .basicFrame2 .bF__frame .bF__box .bF__box__name { margin-left: calc(-160/830*100%); margin-bottom: calc(-10/830*100%); width: calc(321/830*100%); } #themesong .introductionArea .introA__songBlock a.basicFrame2 .bF__frame .bF__box .bF__box__name::before { width: 100%; height: 100%; background-position: left center; background-size: auto 100%;} #themesong .commentArea { margin: calc(80/1320*100%) 0 0; } #themesong .commentArea .cmtA__commentBlock { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #themesong .commentArea .cmtA__cmtB__item { position: relative; } #themesong .commentArea .cmtA__cmtB__item.cmtA__cmtB__name { width: calc(354/1260*100%); margin-bottom: 0; border-right: 1px solid #439bb5;} #themesong .commentArea .cmtA__cmtB__item.cmtA__cmtB__text { width: calc(870/1260*100%); font-size: 1.2121vw; line-height: 1.81;}/*16pt*/ #themesong .profileArea { margin: calc(60/1320*100%) 0 0; } #themesong .profileArea .profA__profileBlock { padding: calc(29/1260*100%); display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; } #themesong .profileArea .profA__profB__item { width: 100%; } #themesong .profileArea .profA__profB__item.profA__profB__name { width: calc(325/1200*100%); margin-bottom: 0; } #themesong .profileArea .profA__profB__item.profA__profB__name a { margin-top: 1em; color: #439bb5; text-decoration: underline; font-size: 1.0606vw; line-height: 1.41;}/*14pt*/ #themesong .profileArea .profA__profB__item.profA__profB__name a { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #themesong .profileArea .profA__profB__item.profA__profB__name a:hover { margin-top: 1em; color: #43a9b5; /*letter-spacing: 0.05rem;*/ } #themesong .profileArea .profA__profB__item.profA__profB__text { width: calc(840/1200*100%); font-size: 1.2121vw; line-height: 1.81;}/*16pt*/ } @media screen and (min-width: 1321px) { #themesong { background-size: 1920px; padding-bottom: 150px;} #themesong .pageTile { width: 347px; margin-left: -173px; } #themesong .introductionArea { padding: 163px 0 0; } #themesong .introductionArea .hl { padding-bottom: 8px; margin-bottom: 35px; } #themesong .introductionArea .hl .hlimg { width: 763px; } #themesong .commentArea { margin: 80px 0 0; } #themesong .commentArea .cmtA__cmtB__item.cmtA__cmtB__text { font-size: 1.6rem;} #themesong .profileArea { margin: 60px 0 0; } #themesong .profileArea .profA__profB__item.profA__profB__name a { font-size: 1.4rem;} #themesong .profileArea .profA__profB__item.profA__profB__text { font-size: 1.6rem;} } @media screen and (min-width: 1921px) { #themesong { background-size: 100%; } } /* ---------------------------------------------------------------------------------------------------------------- #fankit ---------------------------------------------------------------------------------------------------------------- */ #fankit { background: #060a09 url(../../fankit/_img/bg_sp.jpg) top center no-repeat; background-size: 100%; } #fankit .leadArea { padding: calc(167/750*100%) 0 calc(50/750*100%); } #fankit .leadArea .leadtext { width: calc(650/750*100%); margin: 0 auto; line-height: 1.61; text-align: center; font-size: 2.8vw; }/* 21pt */ #fankit .leadArea .leadtext a { color: #4ec9ed; text-decoration: underline; } #fankit .hl { width: 100%; padding-bottom: calc(16/750*100%); margin-bottom: calc(35/750*100%); border-bottom: 1px solid #185a7d; position: relative; text-align: center; } #fankit .hl::after { content: ""; display: block; width: 100%; height: 0; padding-top: calc(6/750*100%); background: rgba(0,0,0,0.2); position: absolute; left: 0; bottom: 0; margin-bottom: calc(-7/750*100%); } #fankit .hl .hlimg { width: calc(650/750*100%); margin: auto; } #fankit .iconArea { margin-bottom: calc(50/750*100%); } #fankit .iconArea .inner { } #fankit .iconA__iconBlock { width: calc(650/750*100%); margin: 0 auto; } #fankit .iconA__iconList { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; } #fankit .iconA__iconList .iconA__iL__item { width: calc(120/650*100%); margin-right: calc(12/650*100%); margin-bottom: calc(12/650*100%); } #fankit .snsheaderArea { margin-bottom: calc(50/750*100%); } #fankit .snsheaderArea .inner { } #fankit .shA__snsheaderBlock { width: calc(650/750*100%); margin: 0 auto; } #fankit .shA__iconList { width: 100%; } #fankit .shA__iconList .shA__iL__item { margin-bottom: calc(20/650*100%); } #fankit .shA__iconList .shA__iL__item:last-child { margin-bottom: 0; } #fankit .backgroundArea { margin-bottom: calc(-124/750*100%); padding-bottom: calc(124/750*100%); } #fankit .backgroundArea .inner { } #fankit .bgA__backgroundBlock { width: calc(650/750*100%); margin: 0 auto; } #fankit .bgA__bgList { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #fankit .bgA__bgList .bgA__bL__item { width: calc(315/650*100%); margin-bottom: calc(20/650*100%); } #fankit .bgA__bgList .bgA__bL__item:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { #fankit .iconA__iconList .iconA__iL__item:nth-child(5n) { margin-right: calc(0/650*100%); } #fankit .iconA__iconList .iconA__iL__item:nth-last-child(-n+2) { margin-bottom: 0; } } @media screen and (min-width: 641px) { #fankit { background: #060a09 url(../../fankit/_img/bg_pc.jpg) top center no-repeat; background-size: calc(1920/1320*100%); padding-bottom: calc(150/1320*100%);} #fankit .pageTile { width: calc(230/1320*100%); margin-left: calc(-115/1320*100%); } #fankit .leadArea { padding: calc(150/1320*100%) 0 calc(50/1320*100%); } #fankit .leadArea .leadtext { width: 100%; line-height: 1.61; font-size: 1.0606vw;}/* 14pt */ #fankit .hl { padding-bottom: calc(15/1320*100%); margin-bottom: calc(27/1320*100%); } #fankit .hl::after { padding-top: calc(6/1320*100%); margin-bottom: calc(-7/1320*100%); } #fankit .hl .hlimg { width: calc(650/1320*100%); } #fankit .iconArea { margin-bottom: calc(50/1320*100%); } #fankit .iconArea .inner { } #fankit .iconA__iconBlock { width: 100%; } #fankit .iconA__iconList { -webkit-justify-content: flex-start; justify-content: flex-start; } #fankit .iconA__iconList .iconA__iL__item { width: calc(110/1260*100%); margin-right: calc(17/1260*100%); margin-bottom: calc(17/1260*100%); } #fankit .iconA__iconList .iconA__iL__item:nth-child(10n) { margin-right: calc(0/650*100%); } #fankit .iconA__iconList .iconA__iL__item:nth-last-child(-n+9) { margin-bottom: 0; } #fankit .iconA__iconList .iconA__iL__item .iconA__iL__i__btn { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #fankit .iconA__iconList .iconA__iL__item .iconA__iL__i__btn { display: block; box-shadow: 0px 0px 60px 20px rgba(67,155,181,0); } #fankit .iconA__iconList .iconA__iL__item .iconA__iL__i__btn:hover{ box-shadow: 0px 0px 6px 2px rgba(67,155,181,0.7); -webkit-transform: scale(1.05); transform: scale(1.05);} #fankit .snsheaderArea { margin-bottom: calc(50/1320*100%); } #fankit .snsheaderArea .inner { } #fankit .shA__snsheaderBlock { width: 100%; } #fankit .shA__iconList { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #fankit .shA__iconList .shA__iL__item { width: calc(610/1260*100%); margin-bottom: 0; } #fankit .shA__iconList .shA__iL__item .shA__iL__i__btn { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #fankit .shA__iconList .shA__iL__item .shA__iL__i__btn { display: block; box-shadow: 0px 0px 60px 20px rgba(67,155,181,0); } #fankit .shA__iconList .shA__iL__item .shA__iL__i__btn:hover{ box-shadow: 0px 0px 6px 2px rgba(67,155,181,0.7); -webkit-transform: scale(1.05); transform: scale(1.05);} #fankit .backgroundArea { margin-bottom: calc(-0/1320*100%); padding-bottom: calc(0/1320*100%); } #fankit .backgroundArea .inner { } #fankit .bgA__backgroundBlock { width: 100%; } #fankit .bgA__bgList { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #fankit .bgA__bgList .bgA__bL__item { width: calc(300/1260*100%); margin-bottom: calc(0/1260*100%); } #fankit .bgA__bgList .bgA__bL__item .bgA__bL__i__btn { transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; } #fankit .bgA__bgList .bgA__bL__item .bgA__bL__i__btn { display: block; box-shadow: 0px 0px 60px 20px rgba(67,155,181,0); } #fankit .bgA__bgList .bgA__bL__item .bgA__bL__i__btn:hover{ box-shadow: 0px 0px 6px 2px rgba(67,155,181,0.7); -webkit-transform: scale(1.05); transform: scale(1.05);} } @media screen and (min-width: 1321px) { #fankit { background-size: 1920px; padding-bottom: 150px;} #fankit .pageTile { width: 230px; margin-left: -115px; } #fankit .leadArea { padding: 150px 0 50px; } #fankit .leadArea .leadtext { font-size: 1.4rem;} #fankit .hl { padding-bottom: 15px; margin-bottom: 27px; } #fankit .hl::after { padding-top: 6px; margin-bottom: -7px; } #fankit .hl .hlimg { width: 650px; } #fankit .iconArea , #fankit .snsheaderArea { margin-bottom: 50px; } } @media screen and (min-width: 1921px) { #fankit { background-size: 100%;} }