@charset "utf-8";
@font-face {
    font-family: 'BLG';
    src: url(../font/bleage_font.ttf);
    font-weight: normal;
}
.blg-font{
  font-family: 'BLG';
  src: url(font/bleage_font.ttf);
  background-size: cover;
}

p,span,h1,h2,h3,h4,div,nav{
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
}
html {
  scroll-padding-top: 0px; /* 固定ヘッダの高さ分 */
  font-size: 62.5%;
  overflow-x: hidden;
}
body {
  line-height: 1.6875;
}
button {
  border: none;              /* 枠線を消す */
  background: #E40073;       /* 好きな背景色に */
  color: #fff;               /* 文字色 */
  box-shadow: none;          /* 影を消す */
  border-radius: 0;          /* 丸みを消す場合 */
  appearance: none;          /* OS依存のスタイルを消す */
  -webkit-appearance: none;  /* iOS Safari用 */
}


/* タブ */
.icon_arrow_wht{
    width: 10px;
    margin-left: 10px;
}
.tabs{
    margin: 0 auto 5rem;
    display: block;
    text-align: center;
}
.tab-button{
    background-color: #083147;
    color: white;
    border-radius: 9999px;
    padding: 10px;
    width: 150px;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
}
@media (min-width: 700px) {
    .tab-button{
        width: 250px;
        padding: 14px;
    }
}
.tab-button1{
    margin-right: 20px;
}
.tab-button2{
    margin-left: 20px;
}
.tab-button:hover{
    opacity: 0.7;
}

/* 対戦カード */
@media (min-width: 700px) {
.card-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 10px;
}
}
.card{
    width: calc(100% - 40px);
    margin: 0 auto 2rem;
    display: block;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.148);
    padding-bottom: 10px;
    border-radius: 0px 0px 8px 8px;
}
@media (min-width: 700px) {
    .card{
        width: calc(100% - 0px);
    }
}
.card_date{
    font-size: 1.4rem;
    font-weight: bold;
}
.card_area{
    font-size: 1.2rem;
    font-weight: bold;
}
.card_area span{
    font-size: 1rem;
    font-weight: bold;
    line-height: 1rem !important;
}
.vs_txt{
    font-size: 3rem;
}
.card_ttl{
    background-color: black;
    color: white;
    padding: 5px 0;
    border-radius: 8px 8px 0 0;
}
.card_ttl p{
    text-align: center;
}
.card_club_flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 10px 0;
}
.card_club img{
    width: 60px;
}
.card_club p{
    font-size: 1.2rem;
}
.card_club_home{
    text-align: center;
}
.card_club_away{
    text-align: center;
}
.card_btn{
    background-color: rgb(63, 63, 63);
    border-radius: 999px;
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 10px 0;
    justify-content: center;
    width: 230px;
    margin: 0 auto;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    text-shadow: 0px 0px 3px rgb(0 0 0 / 68%);
}
/* .card_btn img{
        box-shadow: 0px 0px 3px rgb(0 0 0 / 68%);
} */
.card_btn:hover{
    opacity: 0.6;
    cursor: pointer;
}
.card_arrow{
    width: 8px;
    display: block;
}

.lh_color { background-color: #8FC31F !important; }
.se_color { background-color: #E9E611 !important; }
.se_color p{
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.89);
}
.an_color { background-color: #E40073 !important; }
.ir_color { background-color: #023893 !important; }
.ub_color { background-color: #12315a !important; }
.gc_color { background-color: #ffd700 !important; }
.gc_color p{
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.89);
}
.ka_color { background-color: #811B2E !important; }
.ac_color { background-color: #030B1C !important; }
.cj_color { background-color: #F0001E !important; }
.at_color { background-color: #000000 !important; }
.sr_color { 
    background-color: #fff100 !important; 
}
.sr_color p{
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.89);
}
.kb_color { background-color: #8F0038 !important; }
.yb_color { background-color: #000d36 !important; }
.tg_color { background-color: #d90000 !important; }
.sn_color { background-color: #d2001e !important; }
.sm_color { background-color: #1a4899 !important; }
.fe_color { background-color: #0b318f !important; }
.dd_color { background-color: #cd1b2f !important; }
.ls_color { background-color: #005BAC !important; }
.kh_color { background-color: #0088a2 !important; }
.oe_color { background-color: #E6001B !important; }
.ss_color { background-color: #036eb8 !important; }
.hd_color { background-color: #e94709 !important; }
.sg_color { background-color: #00a6ce !important; }
.nv_color { background-color: #1C2D51 !important; }
.rg_color { background-color: #dbc073 !important; }
.aw_color { background-color: #004098 !important; }
.ib_color { background-color: #E60012 !important; }
.yw_color { background-color: #5f1985 !important; }
.ff_color { background-color: #B43D9D !important; }
.ex_color { background-color: #006d3b !important; }
.fb_color { background-color: #0E1B3C !important; }
.bw_color { background-color: #FFF33F !important; }
.bw_color p{
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.89);
}
.vs_color { background-color: #1b2b59 !important; }
.ns_color { background-color: #002612 !important; }
.bn_color { background-color: #a01e23 !important; }
.eo_color { background-color: #ff8A05 !important; }
.rf_color { background-color: #0b318f !important; }
.kv_color { background-color: #C80012 !important; }
.kr_color { background-color: #000000 !important; }
.sb_color { background-color: #d7282f !important; }
.tu_color { background-color: #24c1fe !important; }
.cr_color { background-color: #000e32 !important; }
.ez_color { background-color: #004182 !important; }
.td_color { background-color: #0d3f97 !important; }
.hb_color { background-color: #e60012 !important; }
.su_color { background-color: #187fc4 !important; }
.na_color { background-color: #EA5404 !important; }
.ks_color { background-color: #c09933 !important; }
.gs_color { background-color: #000000 !important; }
.vm_color { background-color: #ff4d00 !important; }
.to_color { background-color: #00479d !important; }
.yp_color { background-color: #eb6100 !important; }
.gb_color { background-color: #00b9e7 !important; }
.fa_color { background-color: #ffc40d !important; }


.card_btn2{
    background-color: rgb(63, 63, 63);
    border-radius: 999px;
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    padding: 10px 0;
    justify-content: center;
    width: 230px;
    margin: 0 auto;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    text-shadow: 0px 0px 3px rgb(0 0 0 / 68%);
    margin-top: 1rem;
}

.card_btn2:hover{
    opacity: 0.6;
    cursor: pointer;
}