@charset "utf-8";
html,
body {background: #fafafa; color: #333; font-size: 1.05rem; line-height: normal; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-feature-settings: "palt"}
::selection {color: #fff; background-color: #b81c22;}
html {-webkit-text-size-adjust: none;}
html::-webkit-scrollbar {width: 16px; background: #f6f5f8}
html::-webkit-scrollbar-thumb {background-color: #b81c22; border: 3px solid #f6f5f8; border-radius: 3px;}
.grecaptcha-badge{z-index: 99;}
/*tablet*/
@media (max-width: 1024px) {
html,
body {font-size: 0.925rem; line-height: normal;}
}
/*smart phone*/
@media (max-width: 430px) {}
/* -----------------
a
--------------------- */
a{outline: 0; text-decoration: none; transition: 0.3s all linear;}
a:hover,
a:focus,
a:active{text-decoration:none; cursor:pointer;}
a:hover {color: #b81c22 !important;}
a,
button {text-decoration: none;}
button:disabled {color: inherit;}
.btnArea{width: 100%; max-width: 320px; margin: 0;}
.btn {display: block; background: #b81c22; color: #fff; font-size: 1.45rem; text-align: center; margin: 0 auto; padding: 15px; position: relative; border-radius: 30px;}
.btn.none {background: #222222; color: #6b6b6b; cursor: no-drop !important;}
a.btn.none:hover {color: #6b6b6b;}
a.btn:hover{color: #fff;}
/*** br ***/
.br-sm{display: none;}
.br-lg{display: inline-block;}
.page-loader {background: #111;}
/*tablet*/
@media (max-width: 1024px) {
.btn {font-size: 1.25rem; padding: 15px; border-radius: 30px;}
.br-sm{display: inline-block;}
.br-lg{display: none;}
}
/*smart phone*/
@media (max-width: 430px) {}
/* -----------------
header
--------------------- */
header {position: fixed; width: 100%; top: 0; left: 0; z-index: 50;}
header.head h1 a.one__logo{display: block; width: 200px; background-repeat: no-repeat; background-position: 0 50%; background-size: 200px; text-indent: 999%; padding: 1.0rem; margin: 0 1.0rem; overflow: hidden; white-space: nowrap; position: relative;}
header.head h1{width: 100%; max-width: 1240px; display: flex; margin: 0 auto; padding: 0; flex-wrap: nowrap; position: relative;}
header.head h1 a.one__logo{background-image: url("../img/common/one__head_logo.svg");}
header.head h1 a.one__logo.anniv10th{background-image: url("../img/common/one_10th__head_logo.svg");}
header.head h1 a.one__logo.default{}
header.head{background: #fcfcfc;}
header .head__bread{background: #0f0f0f; color: #5a5a5a; font-size: 0.75rem; font-weight: 500; letter-spacing: 1px;}
header .head__bread .itemList{width: 100%; max-width: 1240px; margin: 0 auto;}
header .head__bread .itemList span{font-size: 0.85rem; display: inline-block; padding: 0.35rem 0.25rem; color: #fff;}
header .head__bread .itemList span a span{color: #5a5a5a; transition: 0.3s all linear;}
header .head__bread .itemList span a:hover span{color: #b81c22;}
.Side__IconToggle {height: 36px; width: 36px; position: absolute; top: 25px; right: 0; margin-right: calc(0% - -25px); transition: 0.3s all linear; box-sizing: border-box; cursor: pointer; z-index: 99;}
.spinner {transition: 0.3s all linear; box-sizing: border-box; position: absolute; height: 6px; width: 100%; background-color: #231815;}
.horizontal {transition: 0.3s all linear; box-sizing: border-box; position: relative; float: left; margin-top: 8px;}
.diagonal{position: relative; transition: 0.3s all linear; box-sizing: border-box; float: left;}
.diagonal.p1{margin-top: 0;}
.diagonal.p2{margin-top: 8px;}
#Side__Menu {height: calc(100% - 50px); position: fixed; right: -15%; width: 50%; margin-top: 0; transform: translateX(200%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.75); overflow-y: scroll; z-index: 10;}
.Side__MenuInner{margin:0; padding:0;}
.Side__MenuInner li {list-style: none; color: #fff; font-size: 0.9rem; font-weight: 400; padding: 2rem 12rem 2rem 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.20);}
.Side__MenuInner li h3{font-size: 1.4rem; font-weight: 600; line-height: 1em; margin-bottom: 0.55rem;}
.Side__MenuInner li h4{position: relative; margin-bottom: 0.75rem;}
.Side__MenuInner li ul{margin: 0 0 0 1.0rem;}
.Side__MenuInner li ul > li{padding: 0.55rem 0; border-bottom: none;}
.Side__MenuInner li ul > li:last-child{padding:0.55rem 0 0;}
.Side__MenuInner li ul > li a{width: 90%; color: #fff; text-decoration: none; display: inline-block; position: relative;}
.Side__MenuInner li h4:before,
.Side__MenuInner li ul > li a:before {content: ''; width: 6.5px; height: 6.5px; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg); position: absolute; top: 1px; left: -15px; bottom: 0; margin: auto;}
.Side__MenuInner li ul > li a:hover{color: #b81c22;}
.Side__MenuInner li ol{margin: 0 0 0 1.0rem;}
.Side__MenuInner li ol > li{padding: 0.25rem 0; border-bottom: 0;}
.Side__MenuInner li ol > li a:before{content: ''; width: 6.5px; height: 6.5px; border: 0; border-top: solid 2px #fff; top: 7px; transform: none;}
.Side__MenuInner li:last-child ul > li:last-child{margin: 0 0 2.55rem;}
header input[type=checkbox]:checked ~ #Side__Menu {transform: translateX(0);}
header input[type=checkbox] {transition: 0.3s all linear; box-sizing: border-box; display: none;}
header input[type=checkbox]:checked ~ .Side__IconToggle > .horizontal {transition: 0.3s all linear; box-sizing: border-box; opacity: 0;}
header input[type=checkbox]:checked ~ .Side__IconToggle > .diagonal.p1 {transition: 0.3s all linear; box-sizing: border-box; transform: rotate(135deg); margin-top: 12px;}
header input[type=checkbox]:checked ~ .Side__IconToggle > .diagonal.p2 {transition: 0.3s all linear; box-sizing: border-box; transform: rotate(-135deg); margin-top: -19px;}
/*tablet & smart phone*/
@media (max-width: 1024px) {
header.head h1 a.one__logo{width: 120px; background-size: 120px; padding: 0.5rem; margin: 0 0.5rem;}
header .head__bread{font-size: 0.75rem;}
header .head__bread .itemList{overflow-x: scroll; white-space: nowrap;}
.Side__IconToggle {height: 30px; width: 30px; top: 15px; margin-right: calc(0% - -15px);}
.spinner {height: 5px;}
.horizontal {margin-top: 6px;}
.diagonal.p2{margin-top: 6px;}
#Side__Menu {height: calc(100% - 50px); right: 0; width: 100%; background: rgba(0, 0, 0, 0.95);}
.Side__MenuInner li {font-size: 0.85rem; padding: 2rem;}
.Side__MenuInner li:last-child ul > li:last-child{margin: 0 0 1.0rem;}
header input[type=checkbox]:checked ~ .Side__IconToggle > .diagonal.p2 {margin-top: -16px;}
}
/*smart phone*/
@media (max-width: 430px) {
}
/* -----------------
Parent Control
--------------------- */
/*-- header --*/
body.kanto{background: #b81c22;}
body.kanto header.head{background: #b81c22;}
body.online{background: #1d1d1e;}
body.online header.head{background: #1bb3ae;}
body.tokai{background: #b81c22;}
body.tokai header.head{background: #b81c22;}
body.kanto header.head h1 a.one__logo,
body.online header.head h1 a.one__logo,
body.tokai header.head h1 a.one__logo{background-image: url("../img/common/one__head_logo_wht.svg");}
body.kanto header.head h1 a.one__logo::after,
body.online header.head h1 a.one__logo::after,
body.tokai header.head h1 a.one__logo::after{content: ''; font-size: 1.475rem; font-weight: 700; line-height: 0; position: absolute; top: 50%; left: 0; color: #fff; text-indent: 0; margin: 1px 0 0 210px;}
body.kanto header.head h1 a.one__logo,
body.tokai header.head h1 a.one__logo{width: 280px;}
body.online header.head h1 a.one__logo{width: 400px;}
body.kanto header.head h1 a.one__logo::after{content: '関東';}
body.online header.head h1 a.one__logo::after{content: 'オンライン全国';}
body.tokai header.head h1 a.one__logo::after{content: '東海';}
body.online header .head__bread .itemList span {color: #1bb3ae;}
body.online header .head__bread .itemList span a:hover span{color: #1bb3ae;}
body.online header .head__bread .itemList span a span {color: #5a5a5a;}
/*-- section h2 --*/
body.kanto section#news h2,
body.kanto section#news h2 span,
body.kanto section#pickup h2,
body.kanto section#pickup h2 span,
body.tokai section#news h2,
body.tokai section#news h2 span,
body.tokai section#pickup h2,
body.tokai section#pickup h2 span {color: #fff;}
body.online section#news h2,
body.online section#gameInfo h2,
body.online section#support h2,
body.online section h2 span {color: #1bb3ae;}
body.online section#pickup h2 span {color: #000;}
/*-- main --*/
body.kanto .spinner,
body.online .spinner,
body.tokai .spinner{background-color: #fff;}
body.online section#main-info .swiper-pagination .swiper-pagination-bullet-active {background: #1bb3ae !important;}
/*-- Section - Application --*/
body.kanto section#app .detail .app-img,
body.tokai section#app .detail .app-img{border: 2px solid #b81c22;}
body.online section#app .detail .app-img{border: 2px solid #1bb3ae;}
body.online section#app .detail a:hover .app-img {border: 2px solid #1bb3ae; background: #1bb3ae;}
body.online section#app .detail .app-img.app-add:before{background-image: url("../img/general/app__add_ol.svg");}
body.online section#app .detail .app-img.app-date:before{background-image: url("../img/general/app__date_ol.svg");}
body.online section#app .detail .app-img.app-contact:before{background-image: url("../img/general/app__contact_ol.svg");}
/*-- Section - News --*/
body.kanto section#news .pager span.current,
body.tokai section#news .pager span.current{color: #fff;}
body.online section#news .pager span.current{color: #1bb3ae;}
body.kanto section#news .pager span.current:after,
body.tokai section#news .pager span.current:after{background: #fff;}
body.online section#news .pager span.current:after{background: #1bb3ae;}
body.kanto section#news .pager .page-numbers.next,
body.kanto section#news .pager .page-numbers.prev,
body.tokai section#news .pager .page-numbers.next,
body.tokai section#news .pager .page-numbers.prev{color: #fff;}
body.online section#news .pager .page-numbers.next,
body.online section#news .pager .page-numbers.prev{color: #1bb3ae;}
body.kanto section#news .pager a:hover,
body.tokai section#news .pager a:hover{color: #fff !important;}
body.online section#news .pager a:hover{color: #1bb3ae !important;}
/*-- Section - GameInfo --*/
body.online section#gameInfo .area-info .area__blk h3 {background-color: #1bb3ae;}
body.online section#gameInfo .area-info .area__blk .area__blk-List ul > li a{display: inline-block; width: 100%; color: #1bb3ae; font-size: 1.0rem; border: 1px solid #1bb3ae; text-align: center; padding: 0.5rem; background: #1d1d1e;}
body.online section#gameInfo .area-info .area__blk .area__blk-List ul > li a:hover{background-color: #1bb3ae; color: #fff !important; transition: 0.3s all linear;}
body.online section#gameInfo .area-info .area__blk .area__blk-List p.none {color: #1bb3ae;}
/*-- Section - PickUP --*/
body.kanto section#pickup .first-card-item{background-image: url(../img/kanto/one__pickup_large.jpg);}
body.tokai section#pickup .first-card-item{background-image: url(../img/tokai/one__pickup_large.jpg);}
body.kanto section#pickup .first-card-item .begin-text span.sub-text,
body.tokai section#pickup .first-card-item .begin-text span.sub-text{color: #5a4b0a; font-size: 1.4rem; font-weight: 300; letter-spacing: 2px; margin: 0.45rem 0 0;}
body.kanto section#pickup .first-card-item .begin-text span.reco_sub,
body.tokai section#pickup .first-card-item .begin-text span.reco_sub{color: #5a4b0a;}
body.kanto section#pickup .first-card-item .begin-text div.main-text,
body.tokai section#pickup .first-card-item .begin-text div.main-text{margin: 1.2rem 0;}
body.kanto section#pickup .first-card-item .begin-text div.main-text img,
body.tokai section#pickup .first-card-item .begin-text div.main-text img{max-width: 770px;}
body.online section#pickup .first-card-item{background-image: url(../img/online/one__pickup_large.jpg);}
body.online section#pickup .first-card-item .begin-text span.sub-text{color: #fff; font-size: 1.4rem; font-weight: 300; letter-spacing: 2px; margin: 0.45rem 0 0;}
body.online section#pickup .first-card-item .begin-text span.reco_sub{color: #1d1d1e;}
body.online section#pickup .first-card-item .begin-text div.main-text {margin: 1.2rem 0;}
body.online section#pickup .first-card-item .begin-text div.main-text img {max-width: 770px;}
body.kanto section#pickup .pickup__card a.first-card h3,
body.tokai section#pickup .pickup__card a.first-card h3{display: block; color: #5a4b0a; font-size: 1.2rem; font-weight: 700; padding: 0.5rem 0;}
body.kanto section#pickup .pickup__card a.first-card p,
body.tokai section#pickup .pickup__card a.first-card p{color: #5a4b0a; font-size: 1rem;}
body.kanto section#pickup .pickup__card-list .pickup__card-item span.topic-title,
body.tokai section#pickup .pickup__card-list .pickup__card-item span.topic-title{color: #5a4b0a; font-weight: 700;}
body.kanto section#pickup .pickup__card-list .pickup__card-item span.reco_sub,
body.tokai section#pickup .pickup__card-list .pickup__card-item span.reco_sub{display: inline-block; color: #5a4b0a; font-size: 0.85rem;}
body.online section#pickup .pickup__card a.first-card h3{display: block; color: #1d1d1e; font-size: 1.2rem; font-weight: 700; padding: 0.5rem 0;}
body.online section#pickup .pickup__card a.first-card p{color: #1d1d1e; font-size: 1rem;}
body.online section#pickup .pickup__card-list .pickup__card-item span.topic-title {color: #1d1d1e; font-weight: 700;}
body.online section#pickup .pickup__card-list .pickup__card-item span.reco_sub {display: inline-block; color: #1d1d1e; font-size: 0.85rem;}
body.online section#support .inner .row a{color: #1bb3ae;}
body.online section#support .inner .row a:hover {color: #1bb3ae !important;}
body.online section#support .inner .row a:hover .content__Box{background: #1bb3ae; transition: 0.3s all linear;}
body.online section#support .inner .row a:hover p.group{color: #1bb3ae; transition: 0.3s all linear;}
body.online section#support .inner .row .content__Box{background: #1d1d1e; border: 1px solid #1bb3ae;}
body.online section#support .inner .row .content__Box:after{content: ''; border-top: solid 3px #1bb3ae; border-right: solid 3px #1bb3ae;}
body.online section#support .inner .row .content__Box p{color: #fff;}
/*-- Section - Rule --*/
section#rule .content__Box .area-inner .rule__kanto .sc-tab ul > li a,
section#rule .content__Box .area-inner .rule__tokai .sc-tab ul > li a{color: #b81d21; border: 1px solid #b81d21;}
section#rule .content__Box .area-inner .rule__online .sc-tab ul > li a{color: #1bb3ae; border: 1px solid #1bb3ae;}
section#rule .content__Box .area-inner .rule__kanto .sc-tab ul > li a:hover,
section#rule .content__Box .area-inner .rule__tokai .sc-tab ul > li a:hover{background: #b81d21; !important; border: 1px solid #b81d21;}
section#rule .content__Box .area-inner .rule__online .sc-tab ul > li a:hover{background: #1bb3ae; !important; border: 1px solid #1bb3ae;}
section#rule .content__Box .area-inner .rule__kanto .rule__box .entry h3:before,
section#rule .content__Box .area-inner .rule__tokai .rule__box .entry h3:before{background: #b81d21;}
section#rule .content__Box .area-inner .rule__online .rule__box .entry h3:before{background: #1bb3ae;}
section#rule .content__Box .area-inner .rule__kanto .rule__box .detail .data-box h5:before,
section#rule .content__Box .area-inner .rule__tokai .rule__box .detail .data-box h5:before{content: ''; background: #b81d21;}
section#rule .content__Box .area-inner .rule__online .rule__box .detail .data-box h5:before{content: ''; background: #1bb3ae;}
/*-- Section - Playoff & S.Final --*/
body.kanto section#playoff .content__Box .detail .data-box h5:before,
body.kanto section#SFinal .content__Box .sf__detail .data-box h5:before,
body.tokai section#playoff .content__Box .detail .data-box h5:before,
body.tokai section#SFinal .content__Box .sf__detail .data-box h5:before{content: ''; background: #b81d21;}
body.online section#playoff .content__Box .detail .data-box h5:before,
body.online section#SFinal .content__Box .sf__detail .data-box h5:before{content: ''; background: #1bb3ae;}
/*tablet*/
@media (max-width: 1024px) {
body.kanto header.head h1 a.one__logo::after,
body.online header.head h1 a.one__logo::after,
body.tokai header.head h1 a.one__logo::after{content: ''; font-size: 0.95rem; margin: 1px 0 0 130px;}
body.kanto header.head h1 a.one__logo::after{content: '関東';}
body.online header.head h1 a.one__logo::after{content: 'オンライン全国';}
body.tokai header.head h1 a.one__logo::after{content: '東海';}
body.kanto section#pickup .pickup__card a.first-card h3,
body.online section#pickup .pickup__card a.first-card h3,
body.tokai section#pickup .pickup__card a.first-card h3{font-size: 1.0rem; padding: 0.25rem 0;}
body.kanto section#pickup .pickup__card a.first-card p,
body.online section#pickup .pickup__card a.first-card p,
body.tokai section#pickup .pickup__card a.first-card p{font-size: 0.7rem;}
body.kanto section#pickup .pickup__card-list .pickup__card-item,
body.online section#pickup .pickup__card-list .pickup__card-item,
body.tokai section#pickup .pickup__card-list .pickup__card-item {width: 47.5%;}
body.kanto section#pickup .pickup__card-list .pickup__card-item span.reco_sub,
body.online section#pickup .pickup__card-list .pickup__card-item span.reco_sub,
body.tokai section#pickup .pickup__card-list .pickup__card-item span.reco_sub {font-size: 0.7rem; margin-bottom: 1.25rem;}
}
/*smart phone*/
@media (max-width: 430px) {}
/* == Kit ================================================== */
/* -----------------
Text
--------------------- */
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.text-center{
text-align: center;
}
/* -----------------
image
--------------------- */
.image-stretch {
width: 100%;
}
.image-stretch.max-content {
max-width: max-content;
}
.image-radius {
border-radius: 10px;
}
/* -----------------
color
--------------------- */
.bg-white {
background-color: #fafafa;
}
.bg-gray {
background-color: #f0f0f0;
}
.bg-o-red {
background-color: #b81d21;
}
.bg-dgray {
background-color: #414646;
}
.bg-online {
background-image: linear-gradient(0deg, rgba(207, 242, 243, 1), rgba(107, 163, 161, 1));
}
.bg-gold {
background-image: linear-gradient(0deg, rgba(243, 237, 207, 1), rgba(200, 185, 135, 1));
}
section.bg-o-red .wrapper > h2,
section.bg-o-red .wrapper > h2 span{color: #fff;}
.color-o-red {color: #b81d21;}
.color-notice {color: #FF5722;}
.color-alert {color: #D50000;}
.color-gray {color: #BDBDBD;}
.color-tips {color: #FBC02D;}
.color-line {color: #06C755;}
.color-check {color: #2979FF;}
.color-safe {color: #388E3C;}
/* -----------------
font-size
--------------------- */
.small{font-size: 80%;}
.medium{font-size: 100%;}
.large{font-size: 120%;}
/* -----------------
margine
--------------------- */
/* Vertical margin, padding */
.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-10 {
padding-top: 10px !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.pt-40 {
padding-top: 40px !important;
}
.pt-50 {
padding-top: 50px !important;
}
.pt-140 {
padding-top: 140px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.pb-40 {
padding-bottom: 40px !important;
}
.pb-50 {
padding-bottom: 50px !important;
}
.pb-140 {
padding-bottom: 140px !important;
}
.m-0 {
margin: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mt-50 {
margin-top: 50px !important;
}
.mt-60 {
margin-top: 60px !important;
}
.mt-70 {
margin-top: 70px !important;
}
.mt-80 {
margin-top: 80px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
/* == Loading ================================================== */
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes loading {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
#loading {
width: 100vw;
height: 100vh;
background-color: #fafafa;
position: fixed;
top: 0;
left: 0;
z-index: 100;}
#loading-main:after, #loading-main:before {
content: "";
display: block;
width: 100%;
height: 100%;
margin-left: -50%;
position: absolute;
top: 40%;
left: 50%;
border-radius: 110%; }
#loading-main {
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 105; }
#loading-main:after {
-webkit-animation: loading 0.75s linear infinite;
animation: loading 0.75s linear infinite;
border: 1px solid transparent;
border-top-color: #b81d21; }
#loading-main:before {
border: 1px solid rgba(51, 51, 51, 0.15); }
/* == keyframes ================================================== */
@keyframes SlideLeft {
0% {opacity: 1; transform: translateX(100%);}
100% {opacity: 1; transform: translateX(0%);}
}
@keyframes SlideRight {
0% {opacity: 1; transform: translateX(0%);}
100% {opacity: 1; transform: translateX(100%);}
}
@keyframes fadeIn {
0% {display: block;}
100% {}
}
@-webkit-keyframes fadeIn {
0% {display: block;}
100% {}
}
@keyframes fadeOut {
0% {opacity: 1; display: block;}
1% {opacity: 1; display: block;}
99% {opacity: 0; display: block;}
100% {display: none;}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1; display: block;}
1% {opacity: 1; display: block;}
99% {opacity: 0; display: block;}
100% {display: none;}
}