@charset "shift_jis";
/* CSS Document */

/*回遊色設定*/
/*半袖タイプ*/
#coolwear_mtx.short_sleeve_type > ul li:nth-child(1) a{
  background-color: #98d5e8;
}
#coolwear_mtx.short_sleeve_type > ul li:nth-child(2) a{
  background-color: #86bedf;
}
/*長袖タイプ*/
#coolwear_mtx.long_sleeve_type > ul li:nth-child(1) a{
  background-color: #b4c7e7;
}
#coolwear_mtx.long_sleeve_type > ul li:nth-child(2) a{
  background-color: #86bedf;
}
/*ベストタイプ*/
#coolwear_mtx.vest_type > ul li:nth-child(1) a{
  background-color: #87c1cf;
}
#coolwear_mtx.vest_type > ul li:nth-child(2) a{
  background-color: #86bedf;
}

/******PC******/
@media screen and (min-width:600px){

  #coolwear_mtx{
    width: 750px;
    margin: 30px auto;
  }
  #coolwear_mtx > ul{
    width: 100%;
    margin: 0 auto;
  }
  #coolwear_mtx > ul li a{
    display: block;
    text-align: center;
    color: #fff;
    position: relative;
    padding: 15px 0;
    border-radius: 50px;
  }
  #coolwear_mtx > ul li a::after{
    font-family: "Font Awesome 5 Free";
    content: '\f04b';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 25px;
  }
  #coolwear_mtx > ul li a:hover{
    opacity: 0.8;
  }
  #coolwear_mtx > ul li a p{
    font-size: 30px;
    font-weight: bold;
  }
  #coolwear_mtx > ul li a p span{
    font-size: 35px;
    margin: 0 7px;
  }
  #coolwear_mtx > ul li:nth-child(n+2) a{
    margin-top: 20px;        
  }

}

/******SMP******/
@media screen and (max-width: 600px) {

  #coolwear_mtx{
    width: 100%;
    margin: 5vw auto 0;
  }

  #coolwear_mtx > ul{
    width: 100%;
    margin: 0 auto;
  }
  #coolwear_mtx > ul li a{
    display: block;
    text-align: center;
    color: #fff;
    position: relative;
    padding: 5vw 0;
    border-radius: 50px;
    text-decoration: none;
  }
  #coolwear_mtx > ul li a::after{
    font-family: "Font Awesome 5 Free";
    content: '\f04b';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 4.5vw;
  }
  /* #coolwear_mtx > ul li a:active{
    opacity: 0.8;
  } */
  #coolwear_mtx > ul li a p{
    font-size: 5vw;
    font-weight: bold;
    margin-bottom: 0;
  }
  #coolwear_mtx > ul li a p span{
    font-size: 6vw;
    margin: 0 3px;
  }
  #coolwear_mtx > ul li:nth-child(n+2) a{
    margin-top: 3vw;        
  }

}