@charset "utf-8";
/* 2023/10 update */
html {height: 100%; position: relative;}
body {margin: 0; padding: 0; }
#wrap {z-index: 0;}
#wrap_mypage{padding: 0; margin: 0;}
.sp_display{display:none;}
.pc_display{display:block;}

.go_top {z-index: 100; width: 100%; max-width: 1120px; left: 50%; margin: 0 0 0 -560px;}
.go_top a{background: #fe0; border-radius: 20px; color: #000 !important; display: block; font-size: 16px; height: 40px; padding: 10px; text-align: center; width: 40px; padding: 12px 10px 10px !important;}

/* Common */
.srb2023 a{padding: 0; color: #fe0; -webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s; text-decoration: none;}
.srb2023 a:hover,.srb2023 a:focus,.srb2023 a:active{text-decoration:none; cursor:pointer;}
.srb2023 a:hover {color: #fe0; opacity: 0.75;}
.srb2023 a:link, a:visited {/*color: #fff;*/ text-decoration: underline;}

.srb2023{width: 100%; letter-spacing: 1px; line-height: 1;}
.srb2023 article:first-of-type{margin: 0 auto;}
.srb2023 article{width: 100%; color: #fff; margin: 10rem auto;}
.srb2023 article:last-of-type{margin: 10rem auto 0; padding: 0 0 10rem 0;}
.srb2023 .content-block{width: 100%; max-width: 970px; background: rgba(0,0,0,0.8); border: 5px solid #fe0; outline: 7px solid #000; padding: 5rem; margin: 0 auto; border-radius: 10px; box-shadow: 8px 8px 0 10px rgba(0,0,0);}
.srb2023 h3{font-size: 3.8rem; color: #fff; border-bottom: 3px #fe0 solid; margin: 0 0 4%; padding: 0 0 10px;}
.srb2023 h4{font-size: 2.6rem; line-height: 1.25em; margin: 0; padding: 0 0 0 15px; position: relative;}
.srb2023 h4::before{content: ""; display: block; background: #d70ab3; position: absolute; top: 0; left: 0; width: 5px; height: 30px;}
.srb2023 h4.tag-none::before{display: none;}
.srb2023 p{font-size: 1.8rem; line-height: 1.6em; margin: 0; padding: 0;}

/* Loader */
.srb-loader{background:#000a1c; background-size: cover; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 200;}
 
/* Loader - Animation */
.srb-loader-animation { height: 130px; left: 50%; margin: -50px 0 0 -50px; position: absolute; top: 50%; width: 100px;}
.srb-loaderIcon {position: relative; width: 100%; margin: 0 auto; height: 100%;}
.srb-Icon {font-size: 10px; margin: 45px auto; text-indent: -9999em; width: 6em; height: 6em; border-radius: 50%;
background: #fe0;
background: -moz-linear-gradient(left, #fe0 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #fe0 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #fe0 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #fe0 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #fe0 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: loader 1.4s infinite linear;
animation: loader 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.srb-Icon:before {width: 50%; height: 50%; background: #fe0; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: '';}
.srb-Icon:after {background: #000a1c; width: 75%;height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.loading-text{color: #fe0; font-weight: 700; width: 100%; text-align: center; margin: 0 0 0 4px; position: absolute; top: 90%;}

/* Navi */
nav{position: fixed; border-radius: 20%; top: 170px; left: calc(50% + 515px); width: 55px; height: 55px; background: #1a1a1a; border: 2px solid #fe0; z-index: 100; padding: 0; cursor: pointer;}
nav a:link,
nav a:visited{color: #fff; position: relative; display: inline-block; text-decoration: none;}
nav a::after {content: ''; position: absolute; bottom: -4px; left: 0;  width: 100%; height: 3px; background: #2ba8fc; transform: scale(0, 1); transform-origin: left top; transition: transform .3s;}
nav a:hover::after {transform: scale(1, 1);}
nav ul{width: auto; display: none;}
nav a.none:hover::after{display: none;}
nav .modal__btn{display: none;}
nav .navi__area {padding: 20px 0; position: relative;}
nav #slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.85); z-index: 5;}
.srb2023 .menu{display: block; width: 35px; height: 35px; position: absolute; top: 50%; right: 0; margin: -16px 6px 0 0; padding: 0; border: none; z-index: 1;}
.srb2023 .menu p{position: absolute; top: 22px; left: 0; font-size: 1.0rem; letter-spacing: 1px; color: #fe0;}
.srb2023 .menu span:before {bottom: -8px; left: 0 !important;}
.srb2023 .menu span:after {bottom: -16px; left: 0 !important;}
.srb2023 .menu span,
.srb2023 .menu span::before,
.srb2023 .menu span::after {content: ''; display: block; width: 27px; height: 3px; border-radius: 0; background: #fe0; transition: 0.5s; position: absolute; left: 2px;}

/* hero */
article#hero{}
article#hero .intro{width: 100%; /*height: calc(100vh - 120px);*/ border-bottom: 5px solid #fe0; padding: 0; /*overflow: hidden;*/ position: relative;}
article#hero .intro .mainArea .srb__desc{margin: -270px 0 0 -340px; position: absolute; top: 50%; left: 50%; z-index: 2;}
article#hero .intro .mainArea h1{width: auto; max-width: 800px; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -400px;}
article#hero .intro .video_box,
article#content-hero .intro .video_box{ /*overflow: hidden; */}
article#hero .intro .video_box .video-background,
article#content-hero .intro .video_box .video-background {position: fixed; top: 0; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%); object-fit: cover;}
.overlay {width: 100%; height: calc(100vh - 0px); position: absolute; top: 0; left: 0; background-image: linear-gradient(45deg, rgba(0,0,0,.25) 75%, rgba(0,0,0,0.75) 50%); background-size: 3px 3px; z-index: -1;}

article#content-hero{padding: 2.5rem 0; margin: 70px auto -5rem; border-bottom: 5px solid #fe0; overflow: hidden; position: relative;}
article#content-hero h1{width: 25%; max-width: 320px; margin: 0 auto; padding: 0;}

/* About */
article#srb_about .date{margin-bottom: 20px;}
article#srb_about .about{margin-bottom: 20px;}
article#srb_about .machine{margin-bottom: 20px;}
article#srb_about .game{margin-bottom: 0;}
article#srb_about .about p{font-size: 2.75rem; line-height: 3.6rem; color: #fe0;}
article#srb_about .date p{font-size: 2.0rem; margin: 25px 0;}
article#srb_about .machine ul{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
article#srb_about .machine ul > li {font-size: 2.0rem; margin: 25px 0;}
article#srb_about .machine ul > li::after{content:"/"; display: inline-block; padding: 0 10px;}
article#srb_about .machine ul > li:last-child::after{display: none;}
article#srb_about .game p{font-size: 2.0rem; margin: 25px 0 0;}

/* Reward */
article#srb_reward .rewardBox{}
article#srb_reward .rewardBox h4 span{display: block; font-size: 2.0rem; margin: 10px 0 0 -15px;}
article#srb_reward .rewardBox .reward{display: flex; justify-content: space-between; align-items: flex-start;}
article#srb_reward .rewardBox .reward.both { justify-content: space-around; }
article#srb_reward .rewardBox .shop{margin: 0 0 5rem;}
article#srb_reward .rewardBox .player{margin: 0 0 5rem;}
article#srb_reward .rewardBox .srb__item{margin: 2.5rem 0;}
article#srb_reward .rewardBox .feature{width: 32.5%;}
article#srb_reward .rewardBox .feature p.band{background: #d70a5e; font-size: 1.8rem; font-weight: 700; line-height: 1.25em; color: #fff; text-align: center; padding: 12px 0 9px; margin: 20px 0 5px;}
article#srb_reward .rewardBox .srb__item .feature{width: 32%; position: relative;}
article#srb_reward .get_item .point{display: inline-block; width: 65px; height: 65px; color: #fff; font-size: 2.0rem; font-weight: 600; line-height: 62px; letter-spacing: 0;  background-color: #d70a5e; text-align: center; border-radius: 50%; border: 3px solid #fff; position: absolute; top: -10px; left: -14px; z-index: 1;}
article#srb_reward .get_item .point span{font-size: 1.0rem;}
article#srb_reward .shop_winner .lead,
article#srb_reward .player_winner .lead,
article#srb_reward .get_item .lead{text-align: center; font-size: 1.5rem; background: #1a1a1a; color: #fe0; padding: 15px 0;}
article#srb_reward .item_info{margin: 5rem 0;}
article#srb_reward .item_info p{text-align: center; margin: 5rem 0 1.5rem;}
article#srb_reward .item_info .linkBtn{width: 100%; max-width: 480px; margin: 0 auto;}
article#srb_reward .item_info a{display: block; background: #1a1a1a; color: #fe0; border: 3px #fe0 solid; border-radius: 10px; font-size: 2.6rem; padding: 2rem 0; font-weight: 700; margin: 0 0 15px; position: relative; text-align: center; text-decoration: none;}
article#srb_reward .notice dl{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; font-size: 1.25rem; line-height: 1.5em;}
article#srb_reward .notice dt{width: 2%; text-align: center;}
article#srb_reward .notice dd{width: 98%; margin-bottom: 5px;}

/* Howto */
article#srb_howto .howtoBox{}
article#srb_howto .howtoBox h4{font-size: 2.8rem; line-height: 1; letter-spacing: 4px; text-align: center; margin: 4% 0; padding: 0;}
article#srb_howto .howtoBox h4::before{content: ""; display: none;}
article#srb_howto .howtoBox .feature{margin: 0 0 5rem;}
article#srb_howto .howtoBox .feature ul{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
article#srb_howto .howtoBox .feature ul > li{width: 46%; margin: 2%;}
article#srb_howto .howtoBox .feature ul > li sup{font-size: 1.15rem; margin: 0 1px;}
article#srb_howto .howtoBox .feature ul > li .image{margin-bottom: 10px;}
article#srb_howto .howtoBox .feature ul > li p span{font-size: 1.25rem;}
article#srb_howto .howtoBox .feature .notice{margin: 2rem 0;}
article#srb_howto .howtoBox .feature .notice:after{content: ""; display: block; width: 100%; height: 1px; background: #fff; line-height: 1; margin: 4rem 0;}
article#srb_howto .howtoBox .feature .notice dl{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; font-size: 1.25rem; line-height: 1.5em;}
article#srb_howto .howtoBox .feature .notice dt{width: 4%; text-align: center;}
article#srb_howto .howtoBox .feature .notice dd{width: 96%; margin-bottom: 5px;}
article#srb_howto .howtoBox .feature table.tbl_ranking{width: 100%; border-collapse: collapse; margin: 0; padding: 0;}
article#srb_howto .howtoBox .feature table.tbl_ranking th{width: 50%; font-size: 2.0rem; font-weight: 400; text-align: center; background: #d70a5e; color: #fff; white-space: nowrap; padding: 1.5rem; border: 2px solid #e6e6e6;}
article#srb_howto .howtoBox .feature table.tbl_ranking td{font-weight: 400; border: 2px solid #fff; padding: 1.5rem;}
article#srb_howto .howtoBox .feature table.tbl_ranking span{font-size: 2.4rem; font-weight: 700;}
article#srb_howto .howtoBox .feature table.tbl_ranking span {color: #fe0;}
article#srb_howto .howtoBox .feature table.tbl_ranking span.win {color: #d70a5e;}
article#srb_howto .howtoBox .feature table.tbl_ranking span.lose {color: #0a53d7;}
article#srb_howto .howtoBox .feature table.tbl_ranking ul{justify-content: center;}
article#srb_howto .howtoBox .feature table.tbl_ranking ul > li{width: 50%; margin: 5% 0 2.5%;}
article#srb_howto .howtoBox .ranking_lead{margin: -5px 0 0;}
article#srb_howto .howtoBox .ranking_lead span{font-size: 2.42rem; font-weight: 700; color: #fe0;}

/* Notice 共通 */
article#srb_notice{}
article#srb_notice h4{font-size: 2.6rem; line-height: 1.25em; margin: 0; padding: 0 0 0 15px; position: relative;}
article#srb_notice h4::before{content: ""; display: block; background: #fe0; position: absolute; top: 0; left: 0; width: 5px; height: 30px;}
article#srb_notice a:hover{text-decoration: underline;}
article#srb_notice .content-block .noticeBox{background: #0a0a0a; color: #fff; padding: 30px; border: 3px solid #fff;}
article#srb_notice .content-block .noticeBox .notice__detail{height: 370px; overflow: auto; padding: 10px 5px;}
article#srb_notice .content-block .noticeBox .notice__detail ul{width: 97%; margin: 15px 0 25px;}
article#srb_notice .content-block .noticeBox .notice__detail ul:last-child{margin: 15px 0 0;}
article#srb_notice .content-block .noticeBox .notice__detail li{list-style: disc; margin: 0 0 5px 25px; font-size: 1.6rem; line-height: 1.5em;}
article#srb_notice .content-block .noticeBox .notice__detail .jspVerticalBar {width: 7px;}
article#srb_notice .content-block .noticeBox .notice__detail .jspTrack{background: none;}
article#srb_notice .content-block .noticeBox .notice__detail .jspDrag {background: #fe0; left: 0; border-radius: 30px;}

/* Ranking */
article#userdata .rankingBox span.update{width: 100%; text-align: right; display: block; margin: 0 0 1%; font-size: 1.4rem;}
article#userdata .rankingBox .my_ranking{}
article#userdata .rankingBox .my_ranking {display:inline-block; width:100%; overflow:hidden;}
article#userdata .rankingBox .my_ranking .title {display: flex; justify-content: flex-start; align-items: center; background: #1a1a1a; padding: 1.5rem;  margin: 0; width: 100%; position: relative;}
article#userdata .rankingBox .my_ranking .title span.text {font-size: 2.8rem; color: #fff; font-weight: 700; position: relative;}
article#userdata .rankingBox .my_ranking table {border:2px solid #d8dbe6; border-top:0 none; -moz-box-sizing:border-box !important; }
article#userdata .rankingBox .my_ranking .memberLogin{width: 100%; max-width: 600px; margin: 0 auto;}
article#userdata .rankingBox .my_ranking .memberLogin p{font-size: 1.2rem; text-align: center;}
article#userdata .rankingBox .my_ranking .memberLogin a{display: block; background: #1a1a1a; color: #fe0; border: 3px #fe0 solid; border-radius: 10px; font-size: 2.6rem; padding: 2rem 0; font-weight: 700; margin: 0 0 15px; position: relative; text-align: center; text-decoration: none;}
article#userdata .rankingBox .my_ranking .memberLogin a:hover{box-shadow: 0 1px 3px 2px rgba(0,0,0,0.1);}
article#userdata .rankingBox .my_ranking .memberLogin a span{position: absolute; top: 30%; right: 3%;}
article#userdata .rankingBox .my_ranking .Box{width: 100%; display: flex; justify-content: space-between; align-items: center;}
article#userdata .rankingBox .my_ranking .Box h4{width: 35%;}
article#userdata .rankingBox .my_ranking .Box .playshopList{width: 60%; margin: 0 2.5%;}
article#userdata .rankingBox .my_ranking .Box .selectWrap {display: block; width: 100%; height: 40px; border-radius: 4px; background-size: 30px auto;}
article#userdata .rankingBox .my_ranking .Box .selectWrap select {height: 40px; width: 100%; padding: 5px 30px 5px 5px;}
article#userdata .rankingBox .my_ranking .Box .shopRanking a{display: block; background: #1a1a1a; color: #fe0; border: 2px #fe0 solid; border-radius: 3px; font-size: 1.6rem; width: 240px; padding: 1.15rem 2.0rem; font-weight: 700; text-align: center; text-decoration: none;}
article#userdata .rankingBox .my_ranking .Box .shopRanking a:hover{box-shadow: 0 1px 3px 2px rgba(0,0,0,0.1);}
article#userdata .rankingBox .my_ranking .Box .shopRanking .glyphicon{top: 1px;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point div{width: 50%;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point th{border: 2px solid #fff; padding: 1.5rem; font-size: 2.0rem; text-align: center; background: #d70a5e;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point td{border: 1px solid #fff; padding: 1.5rem; font-size: 1.6rem; text-align: center;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point td b.color-gold{color: #bdb76b;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point td b.color-silver{color: #C0C0C0;}
article#userdata .rankingBox .my_ranking #my_ranking_area_point td b.color-bronze{color: #C47222;}

article#userdata .rankingBox .my_ranking #my_ranking_area{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
article#userdata .rankingBox .my_ranking #my_ranking_area div{width: 50%;}
article#userdata .rankingBox .my_ranking #my_ranking_area th{border: 2px solid #fff; padding: 1.5rem; font-size: 2.0rem; text-align: center; background: #d70a5e;}
article#userdata .rankingBox .my_ranking #my_ranking_area td{border: 1px solid #fff; padding: 1.2rem; font-size: 1.5rem; text-align: center;}
article#userdata .rankingBox .my_ranking #my_ranking_area td b.color-gold{color: #bdb76b;}
article#userdata .rankingBox .my_ranking #my_ranking_area td b.color-silver{color: #C0C0C0;}
article#userdata .rankingBox .my_ranking #my_ranking_area td b.color-bronze{color: #C47222;}


/* Contents Ranking Table */
article#shopranking .rankingBox span.update{width: 100%; text-align: right; display: block; margin: 0 0 1%; font-size: 1.4rem;}
article#shopranking .rankingBox .ranklist .title {padding: 1.5rem 0; background: #1a1a1a; text-align: center; margin: 0 0 2%; width: 100%; position: relative;}
article#shopranking .rankingBox .ranklist .title span.text {color: #fe0; font-size: 2.6rem; font-weight: 500; margin: 20px 0;}
article#shopranking .rankingBox .ranklist table {border:2px solid #fff; border-top:0 none;}
article#shopranking .rankingBox .ranklist th,
article#shopranking .rankingBox .ranklist td {padding: 2rem;}
article#shopranking .rankingBox .ranklist thead th {font-size: 1.8rem; font-weight: 700; text-align: center; background: #d70a5e;}
article#shopranking .rankingBox .ranklist thead th.txt_al,
article#shopranking .rankingBox .ranklist td {border-left:1px solid #fff; font-size: 1.6rem;}
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(1) td,
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(1) a{font-size: 2.2rem; font-weight: 700; color: #bdb76b;}
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(2) td,
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(2) a{font-size: 2.2rem; font-weight: 700; color: #C0C0C0;}
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(3) td,
article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(3) a{font-size: 2.2rem; font-weight: 700; color: #C47222;}
article#shopranking .rankingBox .ranklist tbody.RankingList td:nth-child(1) {text-align: center;}
article#shopranking .rankingBox .ranklist tbody.RankingList td:nth-child(2) {width: auto; max-width: 500px;}
article#shopranking .rankingBox .ranklist tbody.RankingList td:nth-child(3) {text-align: center; font-size: 16px;}
article#shopranking .rankingBox .ranklist tbody.RankingList img{width: 70%;}
article#shopranking .rankingBox .ranklist td .name i{}
article#shopranking .rankingBox .ranklist td .name i:before{content: ""; background: url(../img/event/cp__srb2023/pf-icon.svg) no-repeat; width: 30px; height: 20px; margin: 0 0 -5px 0; display: inline-block;}
article#shopranking .rankingBox .ranklist td .name p,
article#shopranking .rankingBox .ranklist td .shop a p{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: inherit;}
article#shopranking .rankingBox .ranklist td .shop a:hover{text-decoration: underline;}
article#shopranking .rankingBox .ranklist td .shop i:before{content: ""; display: inline-block; width: 40px; height: 35px; margin: 0 5px 0 0; vertical-align: middle;}
article#shopranking .rankingBox .ranklist tbody th,
article#shopranking .rankingBox .ranklist td {border-top:1px solid #fff; height: 45px;}
article#shopranking .rankingBox .ranklist thead tr th {border-top: 2px solid #D8DBE6; border-left:1px solid #fff;}
article#shopranking .rankingBox .ranklist thead tr th:nth-child(1) {border-left:0 none; width: 120px;}
article#shopranking .rankingBox .ranklist thead tr th:nth-child(2) {}
article#shopranking .rankingBox .ranklist thead tr th:nth-child(3) {width: 200px;}
article#shopranking .rankingBox .ranklist tbody th {text-align: center; font-weight: normal; border-top: 1px solid #fff; border-left: 1px solid #d8dbe6; background: #f59f39; color: #fff; font-size: 1.5rem;}
article#shopranking .rankingBox .ranklist .listFootArea{font-size: 1.8rem; background: #0a0a0a; border: 3px #fff solid; margin: 3% 0 0; padding: 2rem;}
article#shopranking .rankingBox .ranklist .listFootArea span{display: inline-block; background: #fe0; color: #0a0a0a; font-size: 1.4rem; font-weight: 700; padding: 7px 10px 6px; border-radius: 5px; margin: 0 10px 0 0; vertical-align: 2px;}
article#shopranking .rankingBox .ranklist .listFootArea a{text-decoration: underline;}
article#shopranking .rankingBox .ranklist .listFootArea a:hover{color: #fff; text-decoration: underline;}

/* == Modal ================================================== */
.srb2023 #ev__modal{display: block;}
.srb2023 .js-modal__main {display: none; width: 105%; height: 100vh; padding: 5%; margin: 0; position: fixed; top: 0; left: 0%; background-color: rgb(0 0 0 / .975); z-index: 200; overflow-y: scroll;}
.srb2023 .js-modal__main .modal__contentsBox{width: 970px; margin: 60px 0 0 -485px; position: absolute; top: 0; left: calc(50% - 1.75%);}
.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul{list-style: none; margin: 0 auto; padding: 0;}
.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul > li{margin: 0; text-align: center;}
.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul > li a{display: block; color: #fe0 !important; font-size: 3.8rem; font-weight: 500; line-height: 10rem; text-decoration: none; transition: all 0.5s ease;}
.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul > li a:hover{background: rgb(15 90 231 / 35%); opacity: 1;}
.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul > li a span{display: block; font-size: 1.25rem;}
.srb2023 .js-modal__btn--close--fix {width: 100%; max-width: 480px; margin: 5rem auto;}
.srb2023 .js-modal__btn--close--fix a:link,
.srb2023 .js-modal__btn--close--fix a:visited{display: block; background: #1a1a1a; color: #fe0; border: 3px #fe0 solid; border-radius: 10px; font-size: 2.6rem; padding: 2rem 0; font-weight: 700; margin: 0; position: relative; text-align: center; text-decoration: none;}
.srb2023 .js-modal__main .modal__contentsBox h2.logo {width: 100%; max-width: 320px; text-align: center; margin: 1.5rem auto;}
.js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
.js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

/*** VSSite ***/
/* ShopDetail */
.sbr_shop_detail {position: relative;}
.sbr_shop_detail .shop_notice{width: 100%; max-width: 700px; background: #0a0a0a; border: 2px solid #fe0; outline: 4px solid #000; border-radius: 10px; padding: 0;}
.sbr_shop_detail .shop_notice .cpn_banner{margin: 0; overflow: hidden; border-radius: 8px 8px 0 0;}
.sbr_shop_detail .rankingBox .ranklist{width: 100%; padding: 1.5rem; overflow: hidden;}
.sbr_shop_detail .rankingBox .ranklist .ranking_area{margin: 0 0 15px;}
.sbr_shop_detail .rankingBox .ranklist .ranking_area th{color: #fff; border: 2px solid #fff; padding: 1.25rem; font-size: 1.5rem; font-weight: 700; text-align: center; background: #d70a5e;}
.sbr_shop_detail .rankingBox .ranklist .ranking_area td{border: 2px solid #fff; color: #fff; padding: 1.25rem; font-size: 1.6rem; text-align: center;}
.sbr_shop_detail .rankingBox .ranklist ul{display: flex; justify-content: center; align-items: flex-start;}
.sbr_shop_detail .rankingBox .ranklist ul > li{margin: 0 5px;}
.sbr_shop_detail .rankingBox .ranklist  a{display: block; background: #1a1a1a; color: #fe0; border: 2px #fe0 solid; border-radius: 5px; font-size: 1.25rem; width: 200px; padding: 1.15rem 2rem; text-align: center; text-decoration: none;}
.sbr_shop_detail .rankingBox .ranklist  a:hover{box-shadow: 0 1px 3px 2px rgba(0,0,0,0.1);}
.sbr_shop_detail .rankingBox .ranklist  .glyphicon{top: 1px;}



/*Other*/
@media (max-width: 1281px) {
	article#hero .intro{min-height: 768px;}
	.overlay {min-height: 878px;}
}

@media screen and (max-width: 767px) {
	article#hero .intro .video_box .video-background {width: 100%; height: auto; min-height: 100%;}
	.overlay {min-height: auto; height: 100%;}
}

/*tablet*/
@media (max-width: 1024px) {
	nav{left: calc(50% + 425px);}
}

/*smart phone*/
@media (max-width: 767px) {
	/* common */
	.sp_display{display:block;}
	.pc_display{display:none;}

	.srb2023 article{margin: 5rem auto;}
	.srb2023 article:last-of-type{margin: 5rem auto 0; padding: 0 0 5rem 0;}
	.srb2023 .content-block{width: 90%; max-width: 768px; border: 4px solid #fe0; outline: 5px solid #000; padding: 2.5rem; box-shadow: 4px 4px 0 5px rgba(0,0,0);}
	.srb2023 h3{font-size: 2.5rem; border-bottom: 2px #fe0 solid; margin: 0 0 2rem; padding: 0 0 5px;}
	.srb2023 h4{font-size: 2.2rem; line-height: 1.1em; padding: 0 0 0 12px;}
	.srb2023 h4::before{content: ""; height: 22px;}
	.srb2023 p{font-size: 1.6rem; line-height: 1.5em;}
 
	/* Loader - Animation */
	.srb-loader-animation {margin: -100px 0 0 -50px;}
	.loading-text{top: 95%; font-size: 1.15rem;}

	/* Navi */
	nav{top: 70px; left: 100%; width: 40px; height: 40px; margin: 0 0 0 -50px;}
	nav .navi__area {padding: 20px 0; position: relative;}
	.srb2023 .menu{margin: -8px -5px 0 0;}
	.srb2023 .menu p{display: none;}
	.srb2023 .menu span:before {bottom: -7px;}
	.srb2023 .menu span:after {bottom: -14px;}
	.srb2023 .menu span,
	.srb2023 .menu span::before,
	.srb2023 .menu span::after {content: ''; width: 20px;}

	/* hero */
	article#hero .intro{min-height: auto; /*height: calc(100dvh - 47px);*/}
	article#hero .intro .mainArea .srb__desc{width: 70%; margin: -40% 0 0 -34%;}
	article#hero .intro .mainArea h1{width: 90%; max-width: inherit; margin: -25% 0 0 -45%;}
	article#content-hero{padding: 1.5rem 0; margin: 44px auto 5rem;}
	article#content-hero h1{width: 35%;}

	/* About */
	article#srb_about .about p{font-size: 1.8rem; line-height: 2.4rem;}
	article#srb_about .date p{font-size: 1.6rem; margin: 10px 0;}
	article#srb_about .machine ul{margin: 10px 0;}
	article#srb_about .machine ul > li {list-style: disc; width: 100%; font-size: 1.6rem; margin: 10px 0 0 20px;}
	article#srb_about .machine ul > li::after{display: none;}
	article#srb_about .game p{font-size: 1.6rem; margin: 10px 0 0;}

	/* Reward */
	article#srb_reward .rewardBox h4 span{font-size: 1.6rem; margin: 10px 0 0 -15px;}
	article#srb_reward .rewardBox .reward{flex-wrap: wrap;}
	article#srb_reward .rewardBox .shop,
	article#srb_reward .rewardBox .player{margin: 0 0 2.5rem;}
	article#srb_reward .rewardBox .srb__item{margin: 1.25rem 0;}
	article#srb_reward .rewardBox .feature{width: 100%;}
	article#srb_reward .rewardBox .feature p.band{font-size: 1.6rem; padding: 10px 0; margin: 15px 0 5px;}
	article#srb_reward .rewardBox .srb__item .feature{width: 100%; padding: 0 0 15px;}
	article#srb_reward .shop_winner .lead,
	article#srb_reward .player_winner .lead,
	article#srb_reward .get_item .lead{font-size: 1.2rem;}
	article#srb_reward .item_info{margin: 0 0 2.5rem;}
	article#srb_reward .item_info p{margin: 1.5rem 0;}
	article#srb_reward .item_info a{border: 2px #fe0 solid; font-size: 1.6rem; padding: 1.5rem 0;}
	article#srb_reward .notice dt{width: 7%;}
	article#srb_reward .notice dd{width: 93%;}

	/* Howto */
	article#srb_howto .howtoBox h4{font-size: 1.8rem; line-height: 1.4em; letter-spacing: 2px; margin: 1.5rem 0;}
	article#srb_howto .howtoBox .feature{margin: 0 0 2.5rem;}
	article#srb_howto .howtoBox .feature ul > li{width: 100%; margin: 0 0 1.5rem;}
	article#srb_howto .howtoBox .feature .notice{margin: 1rem 0;}
	article#srb_howto .howtoBox .feature .notice:after{margin: 2rem 0;}
	article#srb_howto .howtoBox .feature .notice dt{width: 10%;}
	article#srb_howto .howtoBox .feature .notice dd{width: 90%;}
	article#srb_howto .howtoBox .feature .table-wrap{overflow-x: scroll;}
	article#srb_howto .howtoBox .feature table.tbl_ranking{white-space: nowrap;}
	article#srb_howto .howtoBox .feature table.tbl_ranking th{font-size: 1.6rem; padding: 1.25rem;}
	article#srb_howto .howtoBox .feature table.tbl_ranking p{font-size: 1.4rem;}
	article#srb_howto .howtoBox .feature table.tbl_ranking span{font-size: 2.2rem;}
	article#srb_howto .howtoBox .feature table.tbl_ranking ul > li{width: 100%; margin: 5% 0 1%; text-align: center;}
	article#srb_howto .howtoBox .ranking_lead span{display: block; font-size: 1.8rem; margin-top: 1rem;}

	/* Notice 共通 */
	article#srb_notice h4{font-size: 1.6rem; line-height: 1.5em;}
	article#srb_notice h4::before{content: ""; height: 22px;}
	article#srb_notice .content-block .noticeBox{padding: 15px; border: 2px solid #fff;}
	article#srb_notice .content-block .noticeBox .notice__detail{height: 280px;}
	article#srb_notice .content-block .noticeBox .notice__detail ul{margin: 10px 0 20px;}
	article#srb_notice .content-block .noticeBox .notice__detail ul:last-child{margin: 10px 0 0;}
	article#srb_notice .content-block .noticeBox .notice__detail li{margin: 0 0 5px 20px; font-size: 1.25rem; line-height: 1.5em;}
	article#srb_notice .content-block .noticeBox .notice__detail .jspVerticalBar {width: 5px;}

	/* Ranking */
	article#userdata .rankingBox span.update{margin: 0 0 3%; font-size: 1.2rem;}
	article#userdata .rankingBox .my_ranking {display: block;}
	article#userdata .rankingBox .my_ranking .title {margin: 0 0 1.25rem;}
	article#userdata .rankingBox .my_ranking .Box {justify-content: flex-start; flex-wrap: wrap;}
	article#userdata .rankingBox .my_ranking table {margin-bottom: 1.25rem;}
	article#userdata .rankingBox .my_ranking .memberLogin a{border: 2px #fe0 solid; font-size: 1.6rem; padding: 1.5rem 0;}
	article#userdata .rankingBox .my_ranking .Box h4{width: 100%; margin: 0 0 1.5rem;}
	article#userdata .rankingBox .my_ranking .Box .playshopList{width: 100%; margin: 0 0 1rem;}
	article#userdata .rankingBox .my_ranking .Box .shopRanking a{border-radius: 10px; font-size: 1.1rem; width: 100%; padding: 1.1rem;}
	article#userdata .rankingBox .my_ranking #my_ranking_area_point{flex-wrap: wrap;}
	article#userdata .rankingBox .my_ranking #my_ranking_area_point div{width: 100%;}
	article#userdata .rankingBox .my_ranking #my_ranking_area_point th{padding: 1.25rem; font-size: 1.5rem;}
	article#userdata .rankingBox .my_ranking #my_ranking_area_point td{padding: 1.0rem; font-size: 1.25rem; line-height: 1.4em;}
	article#userdata .rankingBox .my_ranking #my_ranking_area{flex-wrap: wrap;}
	article#userdata .rankingBox .my_ranking #my_ranking_area div{width: 100%;}
	article#userdata .rankingBox .my_ranking #my_ranking_area th{padding: 1.25rem; font-size: 1.5rem;}
	article#userdata .rankingBox .my_ranking #my_ranking_area td{padding: 1.0rem; font-size: 1.25rem; line-height: 1.4em;}

	/* Contents Ranking Table */
	article#shopranking .rankingBox span.update{margin: 0 0 3%; font-size: 1.2rem;}
	article#shopranking .rankingBox .ranklist .title {margin: 0 0 4%;}
	article#shopranking .rankingBox .ranklist .title span.text {font-size: 1.5rem; margin: 20px 0;}
	article#shopranking .rankingBox .ranklist .table-wrap{overflow-x: scroll;}
	article#shopranking .rankingBox .ranklist table{white-space: nowrap;}
	article#shopranking .rankingBox .ranklist th,
	article#shopranking .rankingBox .ranklist td {padding: 1.25rem;}
	article#shopranking .rankingBox .ranklist thead th {font-size: 1.5rem;}
	article#shopranking .rankingBox .ranklist thead th.txt_al,
	article#shopranking .rankingBox .ranklist td {font-size: 1.35rem;}
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(1) td,
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(1) a{font-size: 1.6rem;}
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(2) td,
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(2) a{font-size: 1.6rem;}
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(3) td,
	article#shopranking .rankingBox .ranklist tbody.RankingList tr:nth-child(3) a{font-size: 1.6rem;}
	article#shopranking .rankingBox .ranklist tbody.RankingList td:nth-child(2) {max-width: 250px;}
	article#shopranking .rankingBox .ranklist tbody.RankingList td:nth-child(3) {font-size: 1.5rem;}
	article#shopranking .rankingBox .ranklist tbody.RankingList img{width: 100%;}
	article#shopranking .rankingBox .ranklist .listFootArea{font-size: 1.6rem; line-height: 1.5em; border: 2px #fff solid; margin: 2.5rem 0 0; padding: 1.5rem;}
	article#shopranking .rankingBox .ranklist .listFootArea span{font-size: 1.5rem; letter-spacing: 0; padding: 2px 6px 0; margin: 0 7px 0 0; vertical-align: 1px;}

	/* == Modal ================================================== */
	.srb2023 .js-modal__main {display: none; width: 100%; padding: 0;}
	.srb2023 .js-modal__main .modal__contentsBox{width: 100%; margin: -70% 0 0 -50%; top: 50%; left: calc(50% - 0%);}
	.srb2023 .js-modal__main .modal__contentsBox .modal__menu ul > li a{font-size: 2.6rem; line-height: 6rem;}
	.srb2023 .js-modal__btn--close--fix {max-width: 260px; margin: 2.5rem auto;}
	.srb2023 .js-modal__btn--close--fix a:link,
	.srb2023 .js-modal__btn--close--fix a:visited{border: 2px #fe0 solid; font-size: 1.6rem; padding: 1.5rem 0;}
	.srb2023 .js-modal__main .modal__contentsBox h2.logo {max-width: 200px; margin: 1rem auto 2rem;}

	/*** VSSite ***/
	/* ShopDetail */
	.sbr_shop_detail .shop_notice{max-width: 620px; margin: 0 auto 20px; border: 2px solid #fe0; outline: 3px solid #000;}
	.sbr_shop_detail .rankingBox .ranklist{padding: 1rem;}
	.sbr_shop_detail .rankingBox .ranklist .ranking_area{margin: 0 0 10px;}
	.sbr_shop_detail .rankingBox .ranklist .ranking_area th{padding: 0.75rem; font-size: 1.25rem;}
	.sbr_shop_detail .rankingBox .ranklist .ranking_area td{padding: 0.75rem; font-size: 1.4rem;}
	.sbr_shop_detail .rankingBox .ranklist ul > li{margin: 0 2px;}
	.sbr_shop_detail .rankingBox .ranklist  a{display: block; border: 1px #fff solid; font-size: 1.05rem; width: 135px; padding: 1rem;}
	
	.linkBtn .a {font-size: 1.8rem;}
}


/* == keyframes ================================================== */
.animated {animation-duration: 1s; animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both;}
@keyframes loader {
	0%   {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes FadeOut {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes FadeIn {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes SlideUp {
	0%   {opacity: 1; transform: translateX(0%);}
	100% {opacity: 0; transform: translateX(100%);}
}
@keyframes SlideDown {
	0%   {opacity: 0; transform: translateX(100%);}
	100% {opacity: 1; transform: translateX(0%);}
}