@charset "utf-8";
.pc_only {
 display: block;
}
.sp_only {
 display: none;
}
.xSmallFont {
 font-size: 15px;
}
.smallFont {
 font-size: 13px;
}
.largeFont {
 font-size: 18px;
}
.xLargeFont {
 font-size: 24px;
}
.none {
 display: none;
}
.f_family {
 font-family: YuGothic, '游ゴシック', sans-serif;
}
.bold {
 font-weight: bold;
}
.t_center {
 text-align: center;
}
.t_left {
 text-align: left;
}
.t_right {
 text-align: right;
}
.bg_bk {
 background: black;
}
body {
 background: #000;
 font-size: 22px;
 font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
#moonlight main {
 padding: 0 0 0 0;
 overflow-x: hidden !important;
}
/*************
main visual
*************/
.mv {
 background-image: url("/mobile/set/data/service/5glab/nelke-xr-theater/img/shared/bg_pc.jpg");
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 height: 650px;
}
.mv .mv_wrap {
 max-width: 1000px;
 height: 650px;
 margin: 0 auto;
 position: relative;
}
.mv .mv_wrap .m25d {
 position: absolute;
 width: 30%;
 height: auto;
 min-width: 250px;
 top: 40px;
 left: 0;
}
.mv .mv_wrap .lp_title {
 position: absolute;
 width: 65%;
 height: auto;
 min-width: 500px;
 max-width: 600px;
 right: 58px;
 top: 158px;
}
.mv .mv_wrap p.lp_discription {
 position: absolute;
 bottom: 70px;
 padding: 0 10px;
 text-align: center;
 line-height: 1.7em;
 text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF, 2px 2px 10px #fff, -2px 2px 10px #fff, 2px -2px 10px #fff, -2px -2px 10px #fff
}
.mv img.arrow_bottom_bk {
 position: absolute;
 width: 36px;
 height: auto;
 left: 50%;
 margin-left: -18px;
 bottom: 10px;
}
/*************
contets
*************/
.contents {
 background: #fff;
}
.contents .con_wrap {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 50px 0;
}
.h_whats {
 width: 202px;
 border: 4px solid #000;
 padding: 15px 15px 15px 20px;
 margin: 0;
}
.h_list {
 width: 169px;
 border: 4px solid #000;
 padding: 15px 15px 15px 20px;
 margin: 0;
}
.h_title {
 font-size: 37px;
 text-shadow: 3px 3px 0 #c3d9e3;
 margin: 0.75em auto 0.75em auto;
}
.h_sub {
 color: #FFF;
 font-weight: bold;
 padding: 0.35em 1em;
 display: inline-block;
 letter-spacing: 2px;
 min-width: 350px;
 text-align: center;
 font-size: 22px;
}
.ar .grd {
 background: linear-gradient(to right, #629fb9, #bd66a7);
}
.vr .grd {
 background: linear-gradient(to right, #629fb9, #bd8b66);
}
.fr .grd {
 background: linear-gradient(to right, #629fb9, #99bd66);
}
.contents p {
 padding: 0 20px;
 margin: 30px auto 0;
 color: #555;
}
.contents .txt_bk {
 font-size: 28px;
 margin: 40px 0 0 0;
 color: #FFF;
 font-weight: bold;
 line-height: 1.4em;
 padding: 0 5px;
}
.contents .txt_bk > span {
 position: relative;
 display: inline-block;
 padding: 0;
}
.contents .txt_bk > span::before {
 content: "";
 position: absolute;
 bottom: 1px;
 left: -5px;
 top: 1px;
 right: -5px;
 background-color: #000;
 z-index: -1;
}
.cont_image {
 max-width: 380px;
 height: auto;
 margin-top: 20px;
}
.dl_area {
 padding: 40px 0;
}
.dl_area h6 {
 font-size: 22px;
 margin-top: 30px;
 color: #ccc;
}
.dl_area p {
 margin: 0;
 font-size: 15px;
 color: #888;
}
img.app_logo {
 width: 600px;
 height: auto;
 display: block;
 margin: 0 auto;
}
.app_dl {
 border-bottom: 8px solid #62899b;
}
.app_dl:hover {
 margin-top: 24px !important;
 border-bottom: none;
}
.ar div.bg {
 background: linear-gradient(to right, #c3ecfb, #eac1fb);
 width: 640px;
 padding: 0;
 margin: 16px auto 0;
}
.vr div.bg {
 background: linear-gradient(to right, #c3ecfb, #ebb48d);
 width: 640px;
 padding: 0;
 margin: 16px auto 0;
}
.fr div.bg {
 background: linear-gradient(to right, #c3ecfb, #c4ee88);
 width: 640px;
 padding: 0;
 margin: 16px auto 0;
}
#moonlight .ar div.bg a, #moonlight .vr div.bg a, #moonlight .fr div.bg a {
 display: block;
 padding: 22px 30px;
}
.contents.list {
 background: linear-gradient(180deg, rgba(166, 195, 207, 1) 0%, rgba(236, 236, 236, 1) 6%, rgba(236, 236, 236, 1) 30%, rgba(255, 255, 255, 1) 100%);
}
.panelBox {
 display: flex;
 width: 100%;
 max-width: 840px;
 margin: 0 auto;
 justify-content: space-between;
 flex-wrap: wrap;
 padding: 0 15px;
}
.panelBox > div {
 max-width: 380px;
 width: 48%;
}
.panelBox p {
 padding: 0;
 margin: 20px auto 0;
 color: #000;
}
.listBox {
 display: flex;
 width: 100%;
 max-width: 840px;
 margin: 0 auto;
 justify-content: space-between;
 flex-wrap: wrap;
 padding: 0 15px;
}
.listBox > div {
 max-width: 380px;
 width: 48%;
 margin-bottom: 40px;
}
.listBox p {
 padding: 0;
 margin: 20px auto 0;
 color: #000;
}
#moonlight .listBox a {
 color: #669999;
 text-decoration: none;
 font-size: 21px;
 font-weight: bold;
 transition: all .3s;
}
.listBox a:hover .cont_image, .listBox a:hover .listTtl {
 opacity: 0.75;
}
.addTxt {
 color: #FFF;
 text-align: center;
 font-size: 16px;
 padding: 1em 0 40px;
}
.listImg {
 position: relative
}
.listImg .cont_image {
 max-width: 380px;
 height: auto;
 margin-top: 0;
}
.icon {
 position: absolute;
 bottom: -30px;
 left: 0;
}
.icon img {
 width: 82px;
 height: 82px;
}
.listTtl {
 margin-top: 40px;
}
#link {
 width: 100%;
 padding: 50px 10px;
 border-top: 1px solid #E5E5E5;
 background-color: #FFF;
}
.linkBox {
 display: flex;
 width: 400px;
 margin: 0 auto;
 align-items: center;
 justify-content: space-around;
}
#moonlight .linkBox a {
 display: block;
 transition: all 0.3s;
}
.linkBox a:hover {
 opacity: 0.75;
}
.link1 {
 max-width: 120px;
}
.link2 {
 max-width: 180px;
}
.fin {
 position: relative;
}
.fin img {
 opacity: 0.5;
}
.fin p {
 text-shadow: 0 0 1px #6699cc, 0 0 20px #6699cc, 0 0 10px #6699cc, 0 0 10px #6699cc, 0 0 60px #6699cc;
 color: #FFF;
 font-size: 40px;
 font-weight: bold;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 margin: 0 !important;
 padding: 0 !important;
 white-space: nowrap;
}
.infoBox {
 background-color: rgba(0, 0, 0, 0.3);
}
.infoBox .inner {
 max-width: 950px;
 margin: 0 auto;
 padding: 0.75em 0;
 color: #FFF;
 font-size: 16px;
}
/*************
page top button
*************/
#page-top {
 z-index: 99;
 width: 60px;
 display: inline-block;
 margin-bottom: 20px;
}
#moonlight #page-top a {
 text-decoration: none;
}
#page-top a:link .page_top_hover, #page-top a:visited .page_top_hover {
 display: none;
}
#page-top a:hover .page_top_link, #page-top a:visited:hover .page_top_link, #page-top a:active .page_top_link {
 display: none;
}
#page-top a:hover .page_top_hover, #page-top a:visited:hover .page_top_hover, #page-top a:active .page_top_hover {
 display: inline-block;
}
#page-top img {
 width: 60px;
 height: auto;
 vertical-align: middle;
}
/*************
footer
*************/
#moonlight footer {
 font-size: 12px !important;
 color: #FFF;
 text-align: center;
 padding: 50px 0px;
 background: #000;
}
#moonlight footer a {
 ext-decoration: underline;
}
#moonlight footer .copy {
 font-family: HiraKakuPro-W3;
 padding: 0 20px;
 line-height: 1.67;
 text-align: center;
}