@charset "utf-8";

/* CSS Document */

.player_page{
  padding-bottom: 60px;
  background-color: rgba(34,34,34,1);
  }
.player_page .cntt_ttl{
  background-image: url(/src/images/player/player_ttl_bg.jpg);
  background-position: top center;
}

.member_wrap{margin-bottom: 60px;}
  .member_wrap:last-of-type{margin-bottom: 0;}
  .mbr_ttl{
    width: 280px;
    margin: 0 auto 30px;
    padding-bottom: 25px;
    font-size: 24px;
    color: rgba(255,255,255,1);
    line-height: 1;
    text-align: center;
    border-bottom: 4px solid rgba(185,164,0,1);
    }
  .mbr_blc{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    }
    .mbr_lst{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      }
    .mbr_itm{
      width: calc((100% - 24px) / 4);
      margin-right: 8px;
      margin-bottom: 8px;
      }
      .mbr_itm:nth-of-type(4n+4){margin-right: 0;}
      .mbr_itm:nth-last-of-type(-n+4){margin-bottom: 0;}
      .mbr_lnk{display: block;}

      .mbr_fig{
        overflow: hidden;
        background-color: rgba(0,0,0,1);
        position: relative;
        }
        .mbr_cmn .mbr_fig::before,
        .mbr_cap .mbr_fig::before,
        .mbr_vice_cap .mbr_fig::before{
          content: "";
          width: 60px;
          height: 70px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          position: absolute;
          top: 5px;
          right: 5px;
          z-index: 100;
          }
        .mbr_cmn .mbr_fig::before{background-image: url(/src/images/player/bdg_fig_01.png);}
        .mbr_cap .mbr_fig::before{background-image: url(/src/images/player/bdg_fig_02.png);}
        .mbr_vice_cap .mbr_fig::before{background-image: url(/src/images/player/bdg_fig_03.png);}

        .mbr_fig_inr{
          transform: scale(1);
          transition: .5s;
          }
          .mbr_itm:hover .mbr_fig_inr{
            opacity: .6;
            transform: scale(1.05);
            }
      /* 2020.7.1 add */
      .mbr_note{
        background-color: rgba(255, 255, 255, 1);
        bottom: 0;
        margin: 0 3% 0.5em;
        padding: 0.5em;
        position: absolute;
        width: 88%;
        }
      .mbr_note_text{font-size: 15px;}
      .mbr_note_text br{}
      /* 2020.7.1 add-fin */

      .mbr_data{
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 5px;
        color: rgba(255,2552,255,1);
        background-color: rgba(205,28,12,1);
        box-sizing: border-box;
        }
        .mbr_num{
          width: 65px;
          height: 70px;
          background-color: rgba(167,19,0,1);
          transform: skew(-10deg);
          transform-origin: left bottom;
          }
        .mbr_num.numNone{
          background-color: rgba(205, 28, 12, 1);
          }
          .mbr_num_inr{
            font-size: 50px;
            text-align: center;
            line-height: 70px;
            transform: skew(10deg);
            }
        .mbr_name{
          margin-left: 15px;
          line-height: 1;
          }
          .mbr_name_jp{
            margin-bottom: 7px;
            font-size: 17px;
            }
          .mbr_name_en{font-size: 14px;}
          .mbr_name_en_default{
            font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', sans-serif;
            font-weight: 500;
          }

.stf_data{color: rgba(255,255,255,1);}
  .stf_pos{
    width: 100%;
    min-height: 35px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    background-color: rgba(68,68,68,1);
    box-sizing: border-box;
    }
  .stf_data .mbr_name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
    margin: 0;
    padding-left: 10px;
    background-color: rgba(102,102,102,1);
    }

@media screen and (max-width: 1050px) {

.mbr_cmn .mbr_fig::before,
.mbr_cap .mbr_fig::before,
.mbr_vice_cap .mbr_fig::before{
  width: 50px;
  height: 60px;
  }
/* 2020.7.1 add */
.mbr_note{}
.mbr_note_text{font-size: 12px;}
.mbr_note_text br{display: none;}
/* 2020.7.1 add-fin */

}/* max-width:1050px */

@media screen and (max-width: 850px) {

.mbr_itm{width: calc((100% - 16px) / 3);}
  .mbr_itm:nth-of-type(4n+4){margin-right: 8px;}
  .mbr_itm:nth-last-of-type(-n+4){margin-bottom: 8px;}
  .mbr_itm:nth-of-type(3n+3){margin-right: 0;}
  .mbr_itm:nth-last-of-type(-n+3){margin-bottom: 0;}

}/* max-width:850px */

@media screen and (max-width: 650px) {

.mbr_itm{width: calc((100% - 8px) / 2);}
  .mbr_itm:nth-of-type(3n+3){margin-right: 8px;}
  .mbr_itm:nth-last-of-type(-n+3){margin-bottom: 8px;}
  .mbr_itm:nth-of-type(2n+2){margin-right: 0;}
  .mbr_itm:nth-last-of-type(-n+2){margin-bottom: 0;}
  .mbr_num{width: 55px;}
  .mbr_num_inr{font-size: 40px;}
  .mbr_name_jp{font-size: 16px;}
  .mbr_name_en{font-size: 13px;}

}/* max-width:650px */

@media screen and (max-width: 450px) {

.mbr_cmn .mbr_fig::before,
.mbr_cap .mbr_fig::before,
.mbr_vice_cap .mbr_fig::before{
  width: 40px;
  height: 50px;
  }


.mbr_data{padding-left: 0px;}
  .mbr_num{
    width: 35px;
    height: 60px;
    }
  .mbr_num_inr{
    font-size: 32px;
    line-height: 60px;
    }
  .mbr_name_jp{
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1.1;
    }
  .mbr_name_en{font-size: 12px;}

}/* max-width:450px */