html {
   height: 100%;
   width: 100%;
 }
 body {
   overflow-x: hidden;
   overflow-y: auto;
   background: #4a3a93;
 }
 body::before {
   content: "";
   display: block;
   position: fixed;
   /*バグが治れば消す*/
   top: 0;
   left: 0;
   width: 100%;
   /*height: 118%;*/
   height: 118dvh;
   transform: translateZ(0);
   /*バグが治れば書く
	 inset:0;*/
   z-index: -1;
   background-image: url(../images/bg_sp.webp);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 .wrapper {
   overflow-x: hidden;
   overflow-y: auto;
   max-width: 768px;
 }
 .contents {
   position: relative;
   width: 82%;
   margin: 7% auto 20%;
 }
 .movies {
   position: relative;
   width: 82%;
   margin: 7% auto 0;
 }
 .movies li {
   margin-bottom: calc(7% + 0.52083333vw);
   cursor: pointer;
   position: relative;
   filter: drop-shadow(0 0 4px rgba(227, 0, 123, 0.6)) drop-shadow(0 0 8px rgba(227, 0, 123, 0.3));
   transform: translateZ(0);
   will-change: filter, transform;
 }
 .movies li .inner {
   border-radius: 2.133333vw; /*based 375*/
   border: .651042vw solid #000; /*based 768*/
   box-shadow: 0 0 0 .533333vw #c1c9d8; /*based 375*/
   overflow: hidden;
 }
 .movies li:last-child {
   margin-bottom: calc(8% + 0.52083333vw);
 }
 .movies li::after {
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0;
   left: 0;
   margin: 0 auto;
   background-image: url(../images/play.png);
   background-repeat: no-repeat;
   background-size: contain;
   backface-visibility: hidden;
   pointer-events: none;
   width: 15.873%;
   aspect-ratio: 1;
   z-index: 3;
 }
 nav {
   margin-top: 7%;
   margin-bottom: calc(7% + 8px);
 }
 nav ul {
   position: relative;
   width: 82%;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   z-index: 2;
 }
 nav li {
   cursor: pointer;
   margin-bottom: 7%;
   filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.2));
 }
 /*カミングバナー*/
 /*あり*/
 nav li:last-child {
   margin-bottom: 0;
 }
 nav li:nth-child(2) {
   order: 1;
 }
 nav li:nth-child(3) {
   order: 2;
 }
 nav li:nth-child(4) {
   order: 3;
   opacity: .6;
 }
 nav li:nth-child(5) {
   order: 4;
   opacity: .6;
 }
 /*なし
 nav li:nth-child(2) {
   order: 2;
 }
 nav li:nth-child(3) {
   order: 3;
 }
 nav li:nth-child(4) {
   order: 4;
   margin-bottom: 0;
 }
 nav li:nth-child(5) {
   order: 1;
 }*/
 /*カミングバナーend*/
 .top_view {
   position: relative;
 }
 .top {
   position: relative;
   max-width: 768px;
   z-index: 1;
   pointer-events: none;
 }
 .top_caution {
   position: relative;
   z-index: 1;
   pointer-events: none;
   background: #ccc04e;
   padding: 4px 0;
 }
 .volume {
   position: relative;
   z-index: 1;
   border-top: 4px solid #ccc04e;
   border-bottom: 4px solid #ccc04e;
   pointer-events: none;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 #page-top {
   position: fixed;
   display: block;
   z-index: 15;
   cursor: pointer;
   right: 18px;
   width: 45px;
   height: 45px;
   box-sizing: border-box;
   border-radius: 50%;
   bottom: 44px;
   bottom: calc(env(safe-area-inset-bottom) + 44px);
   opacity: 0;
   transition-property: opacity;
   transition-duration: .2s;
   border: 3px solid #000;
   background: linear-gradient(180deg, rgba(156, 102, 168, 0.8) 0%, rgba(74, 58, 147, 0.8) 100%);
   box-shadow: 0 0 0 2px #c1c9d8, inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 #page-top span::after {
   content: "";
   display: block;
   box-sizing: border-box;
   position: absolute;
   border-top: 3px solid #fff;
   border-right: 3px solid #fff;
   transform: rotate(-45deg);
   width: 10px;
   height: 10px;
   top: 42%;
   right: 0;
   left: 0;
   margin: 0 auto;
   pointer-events: none;
   filter: drop-shadow(0 0 5px #7fcbf2);
 }
 .search-box {
   max-width: 600px;
   z-index: 10001;
   position: relative;
 }
 /*カミングスーン*/
 .streaming, .search_btn {
   pointer-events: none;
   position: relative;
 }
 .streaming::before, .search_btn::before {
   display: block;
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-image: url("../images/coming_sp.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }
 /*カミングスーンエンド*/
 /*モーダル*/
 .modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: none; /* 初期状態は非表示 */
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   opacity: 0;
   transition: opacity 0.15s ease;
   backdrop-filter: blur(8px);
 }
 .modal.active {
   display: flex;
   opacity: 1;
 }
 .modal-content {
   max-width: 940px;
   position: relative;
   width: 100%;
 }
 #modal-search .modal-content {
   max-width: 600px;
 }
 .close {
   position: absolute;
   top: -46px;
   right: 10px;
   width: 36px;
   height: 36px;
   cursor: pointer;
   z-index: 10;
 }
 .x, .x::after {
   display: block;
   box-sizing: border-box;
   background: #fff;
   border-radius: 10px;
 }
 .x {
   width: 40px;
   height: 2px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
 }
 .x::after {
   content: "";
   position: absolute;
   width: 2px;
   height: 40px;
   top: -18.5px;
   left: 18.5px
 }
 .video-container {
   position: relative;
   overflow: hidden;
   padding-top: 56.25%;
 }
 .video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 [v-cloak] {
   display: none;
 }
 .modal[v-cloak] {
   display: none !important;
 }
 .loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
 }
 .spinner {
   width: 32px;
   height: 32px;
   border: 4px solid #fff;
   border-top: 4px solid transparent;
   border-radius: 50%;
   animation: spin .8s linear 0s infinite;
   right: 0;
   left: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   position: absolute;
 }
 @keyframes spin {
   from {
     transform: rotate(0);
   }
   to {
     transform: rotate(359deg);
   }
 }
 @media screen and (min-width:769px) {
   body {
     overflow-x: hidden;
   }
   body::before {
     display: none;
   }
   .wrapper {
     width: 100%;
     max-width: 100%;
   }
   .container {
     width: 100%;
     height: 100vh;
     overflow: hidden;
     background-image: url(../images/bg.jpg);
     background-position: center center;
     background-size: cover;
     position: relative;
   }
   @supports(background-image: url("image.webp")) {
     .container {
       background-image: url(../images/bg.webp);
     }
   }
   :root {
     /* コンテンツ表示領域の調整 */
     --border-height: 16px;
     --header-footer: 108px;
     --view-height: calc(100% - var(--border-height) - var(--header-footer));
     /* 横幅調整（画面比率ベース） */
     --vh-ratio: 143.5; /* 横幅1200px ÷ コンテンツ高さ836px × 100 */
     --width-offset: 176px; /* 横幅を調整するための補正値 */
     --correction-offset: 88px; /* 中央揃えの補正用（width-offsetの半分) */
   }
   .top_view {
     position: relative;
     left: 50%;
     margin: 60px auto 0;
     height: var(--view-height);
     width: calc(var(--vh-ratio) * 1vh - var(--width-offset));
     margin-left: calc((var(--vh-ratio) / -2 * 1vh) + var(--correction-offset));
   }
   .top {
     max-width: 100%;
     width: 100%;
     left: 50%;
     transform: translateX(-50%);
     pointer-events: none;
   }
   .top_caution {
     position: absolute;
     bottom: calc(2% + 8px);
     right: 1%;
     width: 12.5%;
     background: none;
   }
   .movies {
     height: auto;
     position: absolute;
     left: 5%;
     margin: 0;
     width: 49%;
     top: 45%;
     z-index: 1;
   }
   .movies ul {
     width: 100%;
     padding: 0;
     display: flex;
     gap: 0 4.76%;
   }
   .movies li {
     transition-duration: 0.13s;
     transition-property: filter;
     backface-visibility: hidden;
     margin-bottom: 0;
     width: 100%;
     filter: drop-shadow(0 0 4px rgba(227, 0, 123, 0.6)) drop-shadow(0 0 8px rgba(227, 0, 123, 0.3));
   }
   .movies li .inner {
     border-radius: 0.958084vh; /*based835*/
     border: .359281vh solid #000; /*based835*/
     box-shadow: 0 0 0 .239521vh #c1c9d8; /*based835*/
     transition-duration: 0.13s;
     transition-property: box-shadow;
   }
   .movies li:last-child {
     margin-bottom: 0;
   }
   .movies li:hover {
     filter: none;
   }
   .movies li:hover .inner {
     box-shadow: 0 0 0 .277778vh #ffffff, 0 0 2.08vh 1.25vh #e3007b;
   }
   .movies li::after {
     width: 20%;
   }
   nav {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     margin: 0 auto;
     width: 100%;
     height: 52px;
     background: rgba(0, 0, 0, 0.75);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
     z-index: 1;
   }
   nav::after {
     content: "";
     display: block;
     width: 100%;
     height: 8px;
     position: absolute;
     bottom: -8px;
     background: linear-gradient(0deg, rgba(204, 192, 78, 1) 0%, rgba(204, 192, 78, 1) 35%, rgba(0, 0, 0, 1) 36%, rgba(0, 0, 0, 1) 70%, rgba(193, 201, 216, 1) 71%, rgba(193, 201, 216, 1) 100%);
     pointer-events: none;
   }
   nav ul {
     position: fixed;
     top: 0;
     left: 0;
     margin: 0;
     width: 100%;
     max-width: 880px;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: inherit;
   }
   nav li {
     width: 100%;
     margin-bottom: 0;
     box-sizing: border-box;
     position: relative;
     transition-duration: .13s;
     box-shadow: none;
     filter: none;
   }
   nav li:first-child {
     transition-duration: .13s;
     transition-property: opacity;
   }
   nav li:nth-child(2) {
     order: 2;
   }
   nav li:nth-child(3) {
     order: 3;
   }
   nav li:nth-child(4) {
     order: 4;
   }
   nav li:first-child:hover {
     opacity: .8;
   }
   nav li:not(:first-child)::after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     transition-duration: .13s;
     transition-property: opacity;
     opacity: 0;
     pointer-events: none;
   }
   nav li:not(:first-child):hover::after {
     opacity: 1;
   }
   nav li:nth-child(2):hover::after {
     background: url(../images/nav1_on.png);
     background-repeat: no-repeat;
     background-size: 100%;
   }
   nav li:nth-child(3)::after {
     background: url(../images/nav2_on.png);
     background-repeat: no-repeat;
     background-size: 100%;
   }
   nav li:nth-child(4)::after {
     background: url(../images/nav3_on.png);
     background-repeat: no-repeat;
     background-size: 100%;
   }
   .streaming {
     position: fixed;
     right: .83%;
     top: 8px;
     max-width: 180px;
     margin: 0;
     transition-duration: .13s;
     transition-property: opacity;
   }
   .streaming:hover {
     opacity: .8;
   }
   .search-box {
     width: 600px;
     height: 420px;
   }
   /*カミングスーン*/
   .search_btn::before {
     background-image: url("../images/coming.png");
   }
   .streaming::before {
     background-image: url("../images/coming_strm.png");
   }
   /*モーダル*/
   .close {
     top: -66px;
     width: 56px;
     height: 56px;
     right: 0;
   }
   .x {
     width: 60px;
   }
   .x::after {
     height: 60px;
     top: -28.5px;
     left: 28.5px
   }
   /*--スマスロの遊び方--*/
   #smaslot_page .container {
     height: auto;
     background-attachment: fixed;
   }
   .howto {
     max-width: 600px;
     margin: 0 auto;
   }
   .top_btn {
     position: relative;
     max-width: 768px;
     right: 0;
     left: 0;
     margin: 10px auto 20px;
     width: 100%;
     filter: none;
   }
   .top_btn a {
     max-width: 145px;
     position: relative;
     left: 0;
   }
   .footer {
     margin: 8px auto 0;
   }
 }
 @media screen and (min-width:769px) and (max-width: 1100px) {
   :root {
     --border-height: 1.454545vw; /*16px*/
     --header-footer: 9.818182vw; /*108px*/
     --view-height: calc(100% - var(--border-height) - var(--header-footer));
     --vh-ratio: 143.5;
     --width-offset: 16vw; /*176px*/
     --correction-offset: 8vw; /*88px*/
   }
   .top_view {
     margin-top: 5.454545vw; /*60px*/
   }
   .streaming {
     max-width: 16.363636vw; /*180px*/
     top: .727273vw; /*8px*/
   }
   nav {
     max-height: 4.7272723vw; /*52px*/
   }
   nav ul {
     max-width: 80vw; /*220*4=880px*/
   }
   .footer {
     margin: 0.727273vw auto 0; /*8px*/
   }
 }
 @media screen and (max-width:768px) {
   nav li:not(:last-child) {
     filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
   }
 }