@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: #3a3a3a;
 font-size: 1.6rem;
 line-height: 1.5;
 overflow: hidden;
}
.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: 1000px;
}
.sectionContentsInner {
 width: 1000px;
 padding: 0 15px;
 margin: 0 auto;
}
.secBox {
 padding: 34px 0 38px 0;
}
.secBox.pb0 {
 padding: 68px 0 0 0;
}
.secBox img {
 width: 100%;
 vertical-align: top;
}
.ttl1 {
 width: 670px;
 height: 83px;
 z-index: 10;
 position: relative;
}
.ttl1Sub {
 margin-top: 12px;
 width: 296px;
 height: 55px;
}
.m_ttl1 {
 width: 670px;
 height: 83px;
 z-index: 10;
 position: relative;
}
.mvBox {
 margin-top: 35px;
 position: relative;
 z-index: 100;
}
.mvBox img {
 z-index: 100;
}
.mvImg {
 border-radius: 15px;
}
.mvBox::after {
 content: "";
 position: absolute;
 top: -116px;
 right: 0px;
 width: 310px;
 height: 120px;
 z-index: -1;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/shared/avator_1.png") no-repeat center top;
 background-size: cover;
}
.ttl2 {
 width: 1000px;
 height: 80px;
 z-index: 200;
 position: relative;
}
.box2 {
 width: 100%;
 margin: 0 auto;
 padding: 52px 0 65px;
 position: relative;
}
.box2Txt {}
.boxBg p {
 margin: 0 0 0.25em 0;
 ;
 line-height: 1;
 padding: 0.3em 0.5em 0.2em;
 display: inline-block;
 text-align: left;
 background: #ffffff;
 white-space: nowrap
}
.boxBg.txt1, .boxBg.txt2, .boxBg.txt3 {
 font-size: 26px;
 font-weight: bold;
 display: inline-block;
}
.boxBg.txt4 {
 margin-top: 21px;
 font-weight: bold;
}
.boxBg.txt4, .boxBg.txt5, .boxBg.txt6 {
 font-size: 19px;
 font-weight: bold;
 display: inline-block;
}
.device {
 position: relative;
 padding: 70px 0 0 0;
 height: 354px;
 box-sizing: border-box;
}
.device::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0px;
 width: 780px;
 height: 354px;
 z-index: -1;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/shared/device.png") no-repeat center top;
 background-size: cover;
}
.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;
}
.mtn35 {
 margin-top: -35px;
}
.nav {
 margin: 39px auto 41px;
}
.anchorBox {
 display: flex;
 justify-content: space-between;
}
.anchor {
 width: 320px;
}
.anchor a {
 display: block;
}
.anchor img {
 box-shadow: 5px 10px 0px 0 #7051ff;
}
.anchor img:hover {
 box-shadow: 5px 10px 2px 0 #7051ff;
}
.siImg {
 width: 272px;
 flex-basis: 272px;
}
.siImg img {
 box-shadow: 10px 15px 0px 0 #3a3a3a;
}
.box1 {
 margin-bottom: 40px;
 position: relative;
 width: 100%;
}
.box1 {
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
}
.w900 {
 max-width: 900px;
 margin-left: auto;
 margin-right: auto;
}
.box11 {
 margin-bottom: 60px;
 position: relative;
 display: flex;
 width: 100%;
 max-width: 900px;
 align-items: center;
 margin-left: auto;
 margin-right: auto;
}
.box11 .box {
 width: 652px;
 flex-basis: 652px;
}
.box1 .box12 {
 width: 100%;
 margin-right: auto;
 margin-left: auto;
 margin-top: 50px;
}
.box12 img {
 box-shadow: 5px 6px 0px 0 #7051ff;
}
.btnBox img {
 box-shadow: 5px 6px 0px 0 #7051ff;
}
.panel {
 display: none;
 position: relative;
 z-index: 1000;
 border: 1px solid #7051ff;
}
#panel4 {
 box-shadow: 6px 7px 0px 0 #000;
}
.flex {
 display: flex;
 width: 100%;
}
.flexItemC {
 align-items: center;
}
.flex .boxl {
 flex-basis: 85px;
 padding: 0 38px 0 58px;
}
.flex .boxr {
 flex-basis: auto;
 padding: 0 0 0 0;
}
.boxTtl {
 font-size: 25px;
 font-weight: bold;
 line-height: 1.4;
 margin-bottom: 0.25em;
 color: #FFF;
}
.boxTtl2 {
 font-size: 28px;
 font-weight: bold;
 line-height: 1.4;
 margin-bottom: 0.75em;
}
.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
}
.mt1em {
 margin-top: 1em;
}
.mt20 {
 margin-top: 20px;
}
.mt30 {
 margin-top: 30px;
}
.mt35 {
 margin-top: 35px;
}
.mt50 {
 margin-top: 50px;
}
.mt60 {
 margin-top: 60px;
}
.mt70 {
 margin-top: 70px;
}
.pt20 {
 padding-top: 20px;
}
.pt25 {
 padding-top: 25px;
}
.pt40 {
 padding-top: 40px;
}
.mb1em {
 margin-bottom: 1em;
}
.mvBg {
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/p/bg1.png") no-repeat center top;
 background-size: cover;
 padding: 39px 0;
 margin-bottom: 0;
 background-attachment: fixed;
}
.pBg {
 background-color: #7051ff;
 padding: 90px 0;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/p/bgp.png") repeat center;
 background-size: 800px auto;
 background-attachment: fixed;
}
.bBg {
 color: #FFF;
 background-color: #7051ff;
 padding: 90px 0;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/p/bgb.png") repeat center;
 background-size: 800px auto;
 background-attachment: fixed;
}
.bBg a, .bBg a:visited {
 color: #FFF;
}
.bBg a:hover {
 text-decoration: none;
}
.bg2 {
 background-color: #FFF;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/p/bg2.png") repeat center;
 background-size: 800px auto;
 background-attachment: fixed;
 padding: 90px 0;
}
.bg3 {
 background-color: #FFF;
 background: url("/mobile/set/data/special/shop-in-zep2023b/img/p/bg3.png") repeat-x center bottom;
 background-size: 985px auto;
 padding: 73px 0 150px;
 position: relative;
}
.txtQ {
 font-size: 26px;
 font-weight: bold;
 margin-top: 1.5em;
}
.txtA {
 font-size: 18px;
 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;
 margin-top: 1em;
}
.linkTxt2 {
 font-size: 22px;
}
.linkTxt .link {
 width: 16px;
 height: 16px;
 vertical-align: middle;
 margin-left: 16px;
}
.goBtn {
 position: absolute;
 bottom: -66px;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: 900px;
}
.mvImg {
 border-radius: 10px;
}
.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: 100%;
 max-width: 900px;
 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;
}
.flex3 {
 display: flex;
 width: 900px;
 margin: 0 auto;
}
.flex3 .boxl {
 width: 15px;
 flex-basis: 15px;
 height: auto;
 background-color: #7051ff;
}
.flex3 .boxr {
 padding: 0 0 0 1.5em;
 position: relative;
 width: 100%;
}
.flex3 .boxr2 {
 padding: 0 0 10px 1.5em;
 position: relative;
 width: 100%;
}
.t3a {
 width: 194px;
 position: absolute;
 top: 0;
 right: 0;
}
.t3a img {
 box-shadow: 0px 0px 12px 0 #DDD;
 border-radius: 12px;
}
.t3b img, .t3c img {
 filter: drop-shadow(0px 0px 3px #DDD);
}
.t3c {
 display: flex;
 justify-content: space-between;
 width: 100%;
}
.t3c > div {
 width: 48.5%;
 font-size: 20px;
 text-align: center;
}
.btn1 {
 width: 450px;
}
.btn1 img {
 box-shadow: 5px 8px 0px 0 #7051ff;
}
.btn1 img:hover {
 box-shadow: 5px 8px 2px 0 #7051ff;
}
.btn1 a {
 display: block;
}
.btnBox {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}
.box {
 position: relative;
}
#panel4 {
 display: flex;
 margin: 0 auto;
 width: 100%;
 justify-content: space-between;
 flex-wrap: wrap;
 padding: 40px;
 background-color: #FFF;
 box-sizing: border-box;
}
#panel4 .linkBox {
 width: calc(100% / 3 - 20px);
}
#panel4 a {
 color: #7051ff;
}
.bgG2 {
 background-color: #e5e5e5;
 color: #2b2b2b;
 text-align: center;
 font-size: 18px;
 line-height: 1.3;
 padding: 0.5em;
 height: 3em;
 display: flex;
 align-items: center;
 justify-content: center;
}
#hfBox {
 position: relative;
 width: 900px;
 margin: 0 auto;
}
#hfBox.secBox {
 padding: 0;
}
.avtL {
 width: 597px;
 margin: 0 auto;
}
.copy {
 font-size: 11px;
 text-align: center;
 position: absolute;
 bottom: 3em;
 left: 0;
 right: 0;
 margin: 0 auto;
}