@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;
}
main {
 padding: 0 0 0 0;
 overflow-x: hidden !important;
}
/*************
header
*************/
header {
 height: 41px;
 width: 100%;
 background-color: #000;
}
header .service-logo {
 width: 123px;
 height: auto;
 margin: 0 auto;
}
header .service-logo img {
 width: 123px;
 height: 41px;
 margin: 0 auto;
}
/*************
main visual
*************/
.mv {
 background-image: url("/mobile/set/data/service/5glab/nelke-xr-theater/kyotosamuraiboys/img/shared/pc_bg.jpg");
 background-repeat: no-repeat;
 background-position: center top;
 background-size: 100% 100%;
 height: 820px;
}
.mv1 {
 padding: 30px 0 0 0;
 width: 489px;
 margin: 0 auto;
}
.mv0 {
 padding: 0 0 0 0;
 width: 90%;
 margin: 0 auto;
}
.mv2 {
 width: 90%;
 max-width: 700px;
 margin: 0 auto;
}
.mv3 {
 padding: 20px 0 0 0;
 width: 90%;
 max-width: 300px;
 margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
 .mv {
  height: 820px;
 }
}
.mv .mv_wrap {
 max-width: 1000px;
 height: 800px;
 margin: 0 auto;
 position: relative;
}
/*************
contets
*************/
.contents {
 background: #fff;
}
.contents .con_wrap {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 50px 0;
}
.menuBox {
 width: 100%;
 background: -webkit-linear-gradient(left, rgba(189, 102, 167, 0.94) 0%, rgba(121, 148, 180, 0.94) 27%, rgba(105, 175, 161, 0.94) 47%, rgba(153, 189, 102, 0.94) 67%, rgba(189, 140, 102, 0.94) 100%);
 background: -o-linear-gradient(left, rgba(189, 102, 167, 0.94) 0%, rgba(121, 148, 180, 0.94) 27%, rgba(105, 175, 161, 0.94) 47%, rgba(153, 189, 102, 0.94) 67%, rgba(189, 140, 102, 0.94) 100%);
 background: -ms-linear-gradient(left, rgba(189, 102, 167, 0.94) 0%, rgba(121, 148, 180, 0.94) 27%, rgba(105, 175, 161, 0.94) 47%, rgba(153, 189, 102, 0.94) 67%, rgba(189, 140, 102, 0.94) 100%);
 background: -moz-linear-gradient(left, rgba(189, 102, 167, 0.94) 0%, rgba(121, 148, 180, 0.94) 27%, rgba(105, 175, 161, 0.94) 47%, rgba(153, 189, 102, 0.94) 67%, rgba(189, 140, 102, 0.94) 100%);
 background: linear-gradient(to right, rgba(189, 102, 167, 0.94) 0%, rgba(121, 148, 180, 0.94) 27%, rgba(105, 175, 161, 0.94) 47%, rgba(153, 189, 102, 0.94) 67%, rgba(189, 140, 102, 0.94) 100%);
 ;
 padding: 10px 0;
}
.menuWrap {
 max-width: 950px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
}
#moonlight .menuWrap a {
 padding: 0.5em;
 display: block;
 text-decoration: none;
 color: #000;
}
.m1, .m2, .m3, .m4 {
 position: relative;
 width: 25%;
 font-weight: bold;
 font-size: 16px;
 background-color: #FFF;
}
.m1, .m2, .m3, .m4 {
 border-left: 4px solid #000;
 border-top: 4px solid #000;
 border-bottom: 4px solid #000;
}
.m2, .m4 {
 border-right: none;
}
.m3, .m4 {
 border-bottom: 4px solid #000;
}
.m4 {
 border-right: 4px solid #000;
}
.m1 span {
 color: #BD66A7;
}
.m2 span {
 color: #76933D;
}
.m3 span {
 color: #BD8B66;
}
.m1:after {
 display: block;
 content: "";
 position: absolute;
 top: calc(50% - 6px);
 right: 10px;
 width: 6px;
 height: 6px;
 border-top: solid 2px #BD66A7;
 border-right: solid 2px #BD66A7;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
.m2:after {
 display: block;
 content: "";
 position: absolute;
 top: calc(50% - 6px);
 right: 10px;
 width: 6px;
 height: 6px;
 border-top: solid 2px #76933D;
 border-right: solid 2px #76933D;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
.m3:after {
 display: block;
 content: "";
 position: absolute;
 top: calc(50% - 6px);
 right: 10px;
 width: 6px;
 height: 6px;
 border-top: solid 2px #BD8B66;
 border-right: solid 2px #BD8B66;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
.m4:after {
 display: block;
 content: "";
 position: absolute;
 top: calc(50% - 6px);
 right: 10px;
 width: 6px;
 height: 6px;
 border-top: solid 2px #000;
 border-right: solid 2px #000;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
img.arrow {
 position: absolute;
 width: 22px;
 height: auto;
 left: 50%;
 margin-left: -11px;
 bottom: 15px;
}
.h_whats {
 display: inline-block;
 width: auto;
 font-size: 28px;
 font-weight: bold;
 padding: 0.25em 0.5em;
 margin: 0 0 0 -4px;
}
.h_whats.ar {
 border: 4px solid #000;
 border-image: linear-gradient(to right, #629fb9, #bd66a7);
 border-image-slice: 1;
}
.h_whats.vr {
 border: 4px solid #000;
 border-image: linear-gradient(to right, #629fb9, #bd8b66);
 border-image-slice: 1;
}
.h_whats.fr {
 border: 4px solid #000;
 border-image: linear-gradient(to right, #629fb9, #99bd66);
 border-image-slice: 1;
}
.h_list {
 width: 169px;
 border: 4px solid #000;
 padding: 15px 15px 15px 20px;
 margin: 0;
}
.h_title {
 font-size: 52px;
 text-shadow: 3px 3px 0 #c3d9e3;
 margin: 0.75em auto 0 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;
}
.h_title_sub {
 font-size: 22px;
 font-weight: bold;
 margin: 0 auto 0 auto;
 text-align: center;
 color: #666666;
}
.appTxt2 {
 font-size: 32px;
 text-align: center;
 color: #FFF;
 font-weight: bold;
 text-shadow: 2px 2px 0 #333;
 margin: 0 auto 0 auto;
 line-height: 1.4;
 padding: 1.5em 0 1.75em;
 position: relative;
 background-image: url("/mobile/set/data/service/5glab/nelke-xr-theater/kyotosamuraiboys/img/shared/cover.png");
 background-repeat: repeat-y;
 background-size: contain;
}
.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;
}
.addTxt2 {
 color: #FFF;
 text-align: center;
 font-size: 22px;
 padding: 1em 0 1em;
 width: 100%;
 max-width: 840px;
 margin: 0 auto;
}
img.imgL {
 width: 100%;
 max-width: 840px;
 height: auto;
 display: block;
 margin: 0 auto;
 border-radius: 20px;
}
.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;
}
/*************
page top button
*************/
#page-top {
 z-index: 99;
 width: 60px;
 display: inline-block;
 margin-bottom: 50px;
}
#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
*************/
footer {
 font-size: 12px !important;
 color: #FFF;
 text-align: center;
 padding: 50px 0px;
 background: #000;
}
#moonlight footer a {
 ext-decoration: underline;
}
footer .copy {
 font-family: HiraKakuPro-W3;
 padding: 0 20px;
 line-height: 1.67;
 text-align: center;
}
.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;
}
@media only screen and (max-width: 1000px) {
 .mv .mv_wrap .m25d {
  position: absolute;
  width: 30vw;
  height: auto;
  left: 0;
 }
 .mv .mv_wrap .lp_title {
  position: absolute;
  width: 60vw;
  height: auto;
  min-width: auto;
  max-width: 100%;
  right: 4vw;
 }
 .panelBox > div, .listBox > div {
  width: calc(50% - 7.5px);
 }
}
@media only screen and (max-width: 900px) {
 .contents .txt_bk {
  font-size: 3.1vw;
 }
 .largeFont {
  font-size: 1.8vw;
 }
 .m1, .m2, .m3, .m4 {
  font-size: 13px;
 }
}