@media screen and (max-width: 768px) {
    p{
        background-color: black;
         color:green;
     }
 }
 
 @media screen and (max-width: 850px) {
    p{
        background-color: black;
         color:red;
     }
 }

html {

}

body {
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    background:#FFFFFF;
    color: #000000;
    width: 100vw;
    margin: 0px;
}

table {
    margin-top:15px;
    margin-bottom:15px;
    border-collapse: collapse;
}

th,
td {
    padding: 3px 8px;
    text-align: center;
    border: 1px solid #000000;
}

.title {
    width: 100vw;
    text-align: center;
}

.status {
    width: 100vw;
    text-align: center;
}

.result {
    width: 100vw;
    text-align: center;
    	display:-webkit-flex;
	display:flex;
    justify-content:center;
}

.member {
    text-align: center;
   	display:-webkit-flex;
	display:flex;
    justify-content:center;
}

.rank {
    text-align: center;
   	display:-webkit-flex;
	display:flex;
    justify-content:center;
}

.result img {
   width:  30px;
   height: 30px;
}

.copyright {
    clear: left;
    width: 100vw;
    text-align: center;
    vertical-align: middle;
    padding: 1rem 0;
    background-color: #000000;
    color: #FFFFFF;
}

.rank6 {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

.rank7 {
    background-image: linear-gradient(180deg, rgba(255, 97, 97, 1), rgba(233, 178, 45, 1) 20%, rgba(192, 202, 75, 1) 34%, rgba(53, 179, 56, 1) 58%, rgba(86, 110, 243, 1) 79%, rgba(154, 39, 238, 1));
}


 /* --- 外枠の定義 ---------------------------------------------*/
.box {
  margin         : auto;                 /* 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #fff;                 /* BOXの背景色         */
  border         : 0px solid #666;       /* 枠線の指定          */
  width          : 560px;                /* BOXの幅             */
  max-height     : 310px;                /* BOXの高さ           */
  animation: boxAnime 10s linear infinite alternate;

  /* ▼ FlexBoxの定義 */
  display        : flex;                 /* FlexBox定義         */
  flex-wrap      : wrap;                 /* 折り返し定義        */
}

 /* --- 個別BOXの定義 --------------------------------------- */
.box div {
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #fff;              /* BOXの背景色         */
  border         : 2px solid #35557f;    /* 枠線の指定          */
  width          : 180px;                 /* 個別BOXの幅     */
  height         : 280px;                 /* 個別BOXの幅     */
  margin         : 2px;                  /* 個別BOXの間     */
  text-align: center;
}

.box img {
   width: 120px;
   height: 120px;
   object-fit:cover;
}