@charset "utf-8";
/* CSS Document */
html {
 /*scroll-behavior: smooth;*/
}
.moonlight {
 display: block;
 font-family: Helvetica, Arial, Meiryo, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', system-ui, sans-serif;
 color: #2b2b2b;
 font-size: 1.6rem;
 line-height: 1.5;
 overflow: hidden;
 background: url("/mobile/set/data/special/virtual-shop/img/p/bg.jpg") repeat-y center -100px;
 background-size: contain;
}
.moonlight.metapa {
 background: url("/mobile/set/data/special/virtual-shop/img/p/m_bg.jpg") repeat-y center 100px;
 background-size: cover;
}
.moonlight a {
 color: #522cd0;
 text-decoration: underline;
 outline: none;
}
.moonlight a:visited {
 color: #522cd0;
}
.moonlight .newwindowicon {
 display: none;
}
#nav-top-area {
 display: none;
}
#contents-area, .lyt-col-1 #contents-body {
 width: 100%;
 min-width: 990px;
}
.sectionContentsInner {
 width: 1000px;
 padding: 0 15px;
 margin: 0 auto;
}
.secBox {
 padding: 34px 0 38px 0;
}
.secBox#new1 {
 padding: 34px 0 68px 0;
}
.secBox#new2 {
 padding: 34px 0 0 0;
}
.secBox.pb0 {
 padding: 68px 0 0 0;
}
.secBox img {
 width: 100%;
 vertical-align: top;
}
.secBoxAdd {
 width: 925px;
 margin: auto;
}
.ttl1 {
 width: 775px;
 height: 83px;
 z-index: 10;
 position: relative;
}
.ttl1Sub {
 margin-top: 12px;
 width: 296px;
 height: 55px;
}
.m_ttl1 {
 width: 775px;
 height: 83px;
 z-index: 10;
 position: relative;
}
.mvBox, .m_mvBox {
 margin-top: 35px;
 position: relative;
 z-index: 100;
}
.mvBox img {
 z-index: 100;
}
.mvImg {
 border-radius: 18px;
 box-shadow: 0px 0px 2px 0 #DDD;
}
.mvBox::after {
 content: "";
 position: absolute;
 top: -150px;
 right: 15px;
 width: 242px;
 height: 207px;
 z-index: -1;
 background: url("/mobile/set/data/special/virtual-shop/img/p/ttl1_avt.png") no-repeat center top;
 background-size: cover;
}
.m_mvBox::after {
 content: "";
 position: absolute;
 top: -153px;
 right: -15px;
 width: 260px;
 height: 423px;
 z-index: -1;
 background: url("/mobile/set/data/special/virtual-shop/img/p/m_avt1.png") no-repeat center top;
 background-size: cover;
}
.ttl2 {
 width: 1000px;
 height: 80px;
 z-index: 200;
 position: relative;
}
.box2 {
 display: flex;
 width: 100%;
 max-width: 750px;
 margin: 0 auto;
 justify-content: space-between;
 padding: 55px 0;
 position: relative;
}
.box2L {
 width: 235px;
 height: 458px;
}
.box2R {
 position: relative;
 z-index: 100;
}
.box2R img {
 width: 313px;
 height: 401px;
 z-index: 2;
 position: relative;
}
.box2Rbg {
 position: absolute;
 top: -125px;
 right: -78px;
 z-index: 1;
 width: 565px;
 height: 572px;
}
.box2Rbg img {
 width: 565px;
 height: 572px;
 z-index: 2;
 position: relative;
}
.box2Txt {
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 3;
}
.boxBg {
 text-align: right;
}
.boxBg p {
 margin: 0;
 line-height: 1;
 padding: 0.35em 20px;
 display: inline-block;
 text-align: right;
 background: #e5e5e5;
 white-space: nowrap
}
.boxBg.txt1, .boxBg.txt2, .boxBg.txt3 {
 font-size: 23px;
 font-weight: bold;
}
.boxBg.txt4 {
 margin-top: 20px;
}
.boxBg.txt4, .boxBg.txt5, .boxBg.txt6 {
 font-size: 18px;
}
.movieBox {
 width: calc(750px - 36px);
 margin: 0 auto 60px;
 background-color: #e5e5e5;
 padding: 18px;
}
.movieWrap {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 width: 100%;
 margin: 0 auto;
}
.movieWrap iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.ttl3 {
 width: 963px;
 height: 76px;
 z-index: 200;
 position: relative;
}
.ttl4 {
 z-index: 200;
 position: relative;
 width: 961px;
 height: 76px;
 margin-left: 39px;
}
.box3 {
 width: 837px;
 height: 130px;
 padding: 0 0 0 0;
 position: relative;
}
.cs {
 width: 598px;
 margin: 0 auto;
}
.pb0 {
 padding-bottom: 0 !important;
}
a img {
 filter: none;
 transition: .3s;
}
a img:hover {
 filter: brightness(130%);
}
.bgextend {
 animation-name: bgextendAnimeBase;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 position: relative;
 overflow: hidden;
 opacity: 0;
}
@keyframes bgextendAnimeBase {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
.bgappear {
 animation-name: bgextendAnimeSecond;
 animation-duration: 0.6s;
 animation-delay: .6s;
 animation-fill-mode: forwards;
 opacity: 0;
 z-index: -1;
}
@keyframes bgextendAnimeSecond {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.bgLRextend::before {
 animation-name: bgLRextendAnime;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #5c46ff;
}
@keyframes bgLRextendAnime {
 0% {
  transform-origin: left;
  transform: scaleX(0);
 }
 50% {
  transform-origin: left;
  transform: scaleX(1);
 }
 50.001% {
  transform-origin: right;
 }
 100% {
  transform-origin: right;
  transform: scaleX(0);
 }
}
.bgappearTrigger, .bgLRextendTrigger {
 opacity: 0;
}
.fadeUp {
 animation-name: fadeUpAnime;
 animation-duration: 0.6s;
 animation-delay: 0.3s;
 animation-fill-mode: forwards;
 opacity: 0;
}
@keyframes fadeUpAnime {
 0% {
  opacity: 0;
  transform: translateY(50px);
 }
 20% {
  opacity: 0;
  transform: translateY(50px);
 }
 20.001% {
  opacity: 0;
  transform: translateY(30px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
.fadeUpTrigger {
 opacity: 0;
}
.secBoxAdd2 {
 padding: 6.666666667vw 5.333333333vw 1vw;
}
.secBoxAdd3 {
 width: 743px;
 margin: 35px auto 25px;
}
.secBoxAdd4 {
 width: 314px;
 margin: 35px auto 25px;
}
.secBoxAdd5 {
 width: 735px;
 margin: 25px auto 20px;
}
.secBoxAdd5c {
 width: 735px;
 margin: 25px auto 0;
}
.mtn35 {
 margin-top: -35px;
}
.nav {
 margin: 39px auto 58px;
}
.anchorBox {
 display: flex;
 justify-content: space-between;
}
.anchor {
 width: 24%;
}
.siImg {
 width: 311px;
 flex-basis: 311px;
}
.box1 {
 margin-bottom: 40px;
 position: relative;
 width: 100%;
}
.gBg .box1, .goBg .box1, .piBg .box1, .grBg .box1 {
 width: 1000px;
 margin-left: auto;
 margin-right: auto;
}
.box11 {
 margin-bottom: 40px;
 position: relative;
 display: flex;
 width: 100%;
}
.box11 .box {
 width: 652px;
 flex-basis: 652px;
}
.box1 .box12 {
 width: 381px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 50px;
}
.flex {
 display: flex;
 justify-content: space-between;
 width: 100%;
}
.flex .boxl {
 flex-basis: 67px;
 padding: 20px 25px 0 30px;
}
.flex .boxr {
 flex-basis: 512px;
 padding: 20px 0 0 0;
}
.boxTtl {
 font-size: 26px;
 font-weight: bold;
 line-height: 1.2;
 margin-bottom: 0.25em;
}
.boxTtl2 {
 font-size: 26px;
 font-weight: bold;
 line-height: 1.2;
 margin-bottom: 0.25em;
}
.boxTtlSub {
 font-size: 14px;
 line-height: 1.4;
 padding-left: 1em;
 text-indent: -1em;
}
.boxTtlSub2 {
 font-size: 20px;
 line-height: 1.4;
 font-weight: bold;
 padding-left: 10px;
}
.boxTtlSub3 {
 font-size: 14px;
 line-height: 1.4;
 padding-left: 10px;
}
.boxTtlSub4 {
 font-size: 14px;
 line-height: 1.4;
 padding-left: 0;
}
.mt0 {
 margin-top: 0 !important;
}
.mb0 {
 margin-bottom: 0 !important;
}
.pb0 {
 padding-bottom: 0 !important;
}
.pt0 {
 padding-top: 0 !important;
}
.mb1 {
 margin-bottom: 4.53333333vw
}
.mt20 {
 margin-top: 20px;
}
.mt30 {
 margin-top: 30px;
}
.mt35 {
 margin-top: 35px;
}
.mt50 {
 margin-top: 50px;
}
.pt20 {
 padding-top: 20px;
}
.pt25 {
 padding-top: 25px;
}
.pt40 {
 padding-top: 40px;
}
.addTxt1 {
 font-size: 20px;
 font-weight: bold;
}
.addTxt2 {
 font-size: 14px;
}
.addTxt3 {
 font-size: 18px;
 font-weight: bold;
 text-align: center;
}
.addTxt4 {
 font-size: 18px;
 text-align: center;
 font-weight: bold;
 margin: 0.75em auto 0;
}
.addTxt5 {
 font-size: 18px;
 text-align: center;
 margin: 0.75em auto 0;
}
.addTxt5a {
 font-size: 18px;
 text-align: center;
 margin: 1.5em auto 0;
}
.mb1em {
 margin-bottom: 1em;
}
.gBg {
 background-color: #e5e5e5;
 padding: 55px 0;
}
.goBg {
 background: url("/mobile/set/data/special/virtual-shop/img/p/goBg.png") no-repeat center top;
 background-size: cover;
 padding: 55px 0;
 margin-bottom: 55px;
}
.piBg {
 background: url("/mobile/set/data/special/virtual-shop/img/p/piBg.png") no-repeat center top;
 background-size: cover;
 padding: 55px 0;
 margin-bottom: 55px;
}
.grBg {
 background: url("/mobile/set/data/special/virtual-shop/img/p/add/grbg.jpg") no-repeat center top;
 background-size: cover;
 padding: 55px 0;
 margin-bottom: 55px;
}
.bgG2 {
 background-color: #e5e5e5;
 text-align: center;
 padding: 0.25em 0;
 margin: 30px auto 18px
}
.appIcon {
 width: 116px;
 height: 116px;
 margin: 20px auto 25px;
}
.appIcon img {
 border-radius: 15px;
}
.txtQ {
 font-size: 25px;
 font-weight: bold;
 margin-top: 1.5em;
}
.txtA {
 font-size: 16px;
 margin-top: 0.25em;
}
.indent1 {
 padding-left: 1em;
 text-indent: -1em;
}
.indent15 {
 padding-left: 1.5em;
 text-indent: -1.5em;
}
.tac {
 text-align: center;
}
.linkTxt {
 text-align: center;
 font-size: 16px
}
.linkTxt .link {
 width: 16px;
 height: 16px;
 vertical-align: middle;
 margin-left: 16px;
}
.goBtn {
 position: absolute;
 bottom: 95px;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: 596px;
}
.btnBlock {
 display: block;
}
.fixedBtn {
 width: 100%;
 padding: 15px 0;
 margin: 0 auto;
 display: none;
}
.fixedBtn.on {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9999;
}
.fixedBtn .btnBox {
 width: 90%;
 max-width: 596px;
 margin: 0 auto;
}
.fixedBtn .btnBox.off {
 opacity: 0.7;
}
.fixedBtn .btnBox img {
 width: 100%;
 margin: 0 auto;
}
.box.inner {
 width: 400px;
 margin: 15px auto 10px;
}
.flex2 {
 display: flex;
 justify-content: space-between;
 width: 850px;
 margin: 0 auto;
}
.flex2 .flex .boxl {
 width: 61px;
 flex-basis: 61px;
 margin: 20px 0 14px;
 padding: 0;
}
.flex2 .flex .boxr {
 flex-basis: 339px;
 padding: 20px 0 0 0;
}
.flex3 {
 display: flex;
 width: 925px;
 margin: 0 auto;
}
.flex3 .boxl {
 width: 68px;
 flex-basis: 68px;
 padding: 20px 20px 0 0;
}
.flex3 .boxr {
 padding: 20px 0 0 0;
}
.btmBox {
 width: 400px;
}
.btnBox {
 width: 596px;
 margin-left: auto;
 margin-right: auto;
}
.slider {
 width: 100%;
 display: flex;
 justify-content: space-between;
}
figcaption {
 font-size: 11px;
 text-align: center;
 margin-top: 0.75em;
}
.qr {
 width: 70px;
 height: 70px;
}
.qr img {
 width: 100%;
}
.appBox {
 position: absolute;
 left: 89px;
 top: 20px;
 z-index: 300;
 width: 100%;
 height: 130px;
}
.appContent {
 position: relative;
}
.qrCode {
 position: absolute;
 top: 21px;
 left: 30px;
 width: 102px;
 height: 102px;
}
.ios {
 width: 173px !important;
 height: 52px !important;
}
.android {
 width: 173px !important;
 height: 52px !important;
 margin-left: 9px;
}
.badge {
 position: absolute;
 top: 0;
 left: 90px;
 width: 355px;
}
.badge a {
 display: block;
}
.appImg {
 position: absolute;
 top: -92px;
 right: 0;
 width: 343px;
 height: 212px;
}
.appBoxTxt {
 position: absolute;
 top: 82px;
 left: 150px;
 font-size: 14px;
 text-align: center;
 width: 355px;
}
.slider2Box {
 width: 837px;
 margin-left: 84px;
 margin-top: 20px;
}
.btnBox2 {
 width: 402px;
 margin-left: 84px;
 margin-top: 0px;
}
.box {
 position: relative;
}
.appIcon {
 position: absolute;
 top: 44px;
 right: 191px;
}
.shBox {
 position: relative;
 padding-bottom: 60px;
}
.sh1 {
 position: absolute;
 top: 268px;
 left: 0;
 right: 0;
 margin: 0 auto;
}
.sh2 {
 position: absolute;
 top: 554px;
 left: 119px;
}
.sh3 {
 position: absolute;
 top: 554px;
 right: 69px;
}
#panel3 {
 width: 500px;
 margin: 20px auto 0;
}
#panel4 {
 display: flex;
 margin: 0 auto;
 width: 553px;
 justify-content: space-between;
 flex-wrap: wrap;
}
#panel4 .linkL, #panel4 .linkR {
 width: 260px;
 font-size: 16px;
}
#panel4 .linkC {
 width: 553px;
 font-size: 16px;
}
.linkC .bgG2 {
 width: 260px;
}
#hfBox {
 position: relative;
 width: 613px;
 margin: 0 auto;
}
#zepeto {
 display: none;
}
.tabBox {
 border-bottom: 5px solid #383838;
 background-color: #FFF;
 display: none;
}
.tabBox .tabInner {
 width: 1000px;
 padding: 0 15px;
 margin: 0 auto -17px;
 display: flex;
 justify-content: space-between;
}
.tabBox .tab1 {
 width: 494px;
}
.tabBox .tab1, .tabBox .tab2 {
 width: 494px;
}
.tabBox img {
 width: 100%;
}
.tabBox a {
 display: block;
}
.m_box2 {
 display: flex;
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 50px 0 0 0;
 position: relative;
}
.m_box2L {
 width: 50%;
 padding-right: 22.5px;
}
.m_box2R {
 width: 50%;
 padding-left: 22.5px;
}
sup {
 margin-left: 0.2em;
}
.m_box2R .boxBg {
 text-align: left;
}
.m_box2R .boxBg p {
 margin: 0;
 line-height: 1;
 padding: 0.25em 20px;
 display: inline-block;
 text-align: left;
 background: #fddf04;
 white-space: nowrap;
 font-size: 26px;
}
.dBlock {
 display: block !important;
}
.ptAdd {
 padding-top: 0.5em !important;
}
.pbAdd {
 padding-bottom: 0.35em !important;
}
.m_box2subTxt {
 font-size: 19px;
 margin-top: 1em;
 padding-right: 2em;
}
.m_box11 {
 margin-bottom: 40px;
 position: relative;
 display: flex;
 width: 100%;
 max-width: 820px;
 margin: 0 auto 30px;
}
.m_box11 .box {
 width: 579px;
 flex-basis: 579px;
 padding-left: 90px;
}
.m_num {
 width: 80px;
 margin: 22px 0 25px;
}
.m_siImg {
 width: 151px;
 flex-basis: 151px;
}
.m_box11 .boxTtl {
 font-size: 19px;
 font-weight: normal;
 line-height: 1.5;
 margin-bottom: 0.25em;
}
.m_secBoxAdd {
 width: 986px;
 margin: auto;
 padding-top: 0 !important;
}
.m_box1 {
 max-width: 1000px;
 width: 100%;
}
.m_box1 .box {
 padding: 0 1em;
 font-size: 19px;
}
.m_box3 {
 width: 1000px;
 height: 985px;
 background: url("/mobile/set/data/special/virtual-shop/img/p/m_fuki.png") no-repeat center top;
 background-size: contain;
 margin: -35px auto 0;
 text-align: center;
 padding-top: 98px;
}
.m_badge {
 position: relative;
 left: 0;
 width: 570px;
 margin: 0 auto;
 display: table;
 ;
}
.m_badge a {
 display: block;
}
.m_box3_logo {
 width: 282px;
 height: 64px;
 margin: 0 auto 0;
}
.m_box3_txt {
 font-size: 31px;
 margin: 0.95em auto;
 line-height: 1;
 font-weight: bold;
}
.m_box3_txt2 {
 font-size: 31px;
 margin: 0.95em auto 0;
 line-height: 1;
 font-weight: bold;
}
.m_box3_txt3 {
 font-size: 19px;
 margin: 0.75em auto;
 line-height: 1;
}
.m_badge .ios {
 display: table-cell;
 width: 271px !important;
 height: 81px !important;
 padding-right: 14px;
}
.m_badge .android {
 display: table-cell;
 width: 271px !important;
 height: 81px !important;
 margin-left: 0;
 padding-left: 14px;
}
.m_badge .badgeImg {
 width: 271px !important;
 height: 81px !important;
}
.img_dn {
 width: 541px !important;
 margin: 0 auto;
}
#dnBox {
 position: relative;
 width: 613px;
 margin: 0 auto;
 padding: 34px 0 10px 0;
}
#dnBox .m_badge {
 top: -50px;
}
.tabBox .on {
 display: none;
}
.tabBox .off {
 display: block;
}
.tabBox .active .on {
 display: block;
}
.tabBox .active .off {
 display: none;
}
#zepeto.active, #metapa.active {
 display: block;
}
#zepeto, #metapa {
 display: none;
}
#mc2 {
 background: url("/mobile/set/data/special/virtual-shop/img/p/m_arrow.png") no-repeat 625px 211px;
 background-size: 281px auto;
}
#nCpn {
 position: relative;
}
#nCpn::before {
 content: '';
 background-image: url("/mobile/set/data/special/virtual-shop/img/p/ttl_cp2_rb.png");
 width: 193px;
 height: 78px;
 position: absolute;
 top: -42px;
 left: -19px;
 background-size: cover;
 z-index: 100;
}
#new1 {
 position: relative;
}
#new1::before {
 content: '';
 background-image: url("/mobile/set/data/special/virtual-shop/img/p/add/new1.png");
 width: 168px;
 height: 76px;
 position: absolute;
 top: -35px;
 left: -32px;
 background-size: cover;
 z-index: 1000;
}
#new2 {
 position: relative;
}
#new2::before {
 content: '';
 background-image: url("/mobile/set/data/special/virtual-shop/img/p/add/new2.png");
 width: 168px;
 height: 76px;
 position: absolute;
 top: -35px;
 left: -32px;
 background-size: cover;
 z-index: 1000;
}
.infoBox {
 margin: 20px auto;
 max-width: 1000px;
}
.infoBoxhead {
 border-radius: 10px 10px 0 0;
 background-color: #522cd0;
 font-size: 18px;
 padding: 0.5em 0 0.25em;
 color: #FFF;
 display: block;
 text-align: center;
 font-weight: bold;
}
.infoBoxBody {
 border: 4px solid #522cd0;
 border-radius: 0 0 10px 10px;
 color: #000;
 background-color: #FFF;
 font-size: 16px;
 padding: 1.25em;
}