@charset "UTF-8";
html {font-size: 100%;}

body{background:#F5F5DC;}
a{text-decoration: none;}

.kaiten{width:80px;height:80px;margin-top: 5px;}
/*========= CDの回転 ===============*/
.kaiten{animation: rotation-s2 30s linear infinite;
  	 right: calc(50% - 5px);
      top: calc(50% - 5px);}

/* ---------main-------------------------------------------------- */
main{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;text-align: center;
      gap:20px;margin: 100px 10% 90px;}
main h3/* -------CD名---------- */
       {font-size: 15px;color:dimgray;}
.cd_mitei h3 {color:silver;opacity: 50%} /* -------CD　制作中---------- */
main h5/* ---------OPEN------------- */
      {display: block;font-size: 15px;
      color:white;background: tan;
      margin:7px auto;padding-top: 5px;
      width: 70px;height: 30px;border-radius: 5px;}
main h5:hover{background: darkred;transition: all 1.5s ease 0s;}

/* ---------------------------------------------------------footer-------------- */
footer{position: fixed;bottom: 0;
       width: 100%;height: 70px;background:black;}
.cresit{display: flex;justify-content: center;}
.dtmicon{width: 50px;height: 50px;margin-top: 10px;}
.jasrac{display: flex;}
.jasrac_mark{width: 50px;height: 50px;margin-top: 10px;margin-left: 50px;}
.jasrac p{font-size: 10px;color:tan;margin-top: 27px;margin-left: 20px;}

/* ---------レスポンシブ-------------------------------------------------- */

@media screen and ( max-width :600px )
{
main{display: grid;grid-template-columns: 1fr 1fr 1fr;
      gap:20px;margin: 70px 10% 90px;}
main h3/* -------CD名---------- */
      {font-size: 13px;}
main h5/* ---------OPEN------------- */
      {display: block;font-size: 12px;
      color:white;background: tan;
      margin:4px auto;padding-top: 3px;
      width: 70px;height: 22px;border-radius: 5px;}
.kaiten{width:60px;height:60px;margin-top: 5px;}
}

@media screen and ( max-width :450px )
{
/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 40px;width: 70px;}

main{display: grid;grid-template-columns: 1fr 1fr 1fr;
      gap:20px;margin: 50px 10% 70px;}
main h3/* --------CD名------------- */
       {font-size: 10px;}
main h5/* ---------OPEN------------- */
      {display: block;font-size: 12px;
      margin:1px auto;padding-top: 7px;
      width: 70px;height: 26px;}
.kaiten{width:50px;height:50px;margin-top: 7px;}

footer{height: 40px;}
.dtmicon{width: 30px;height: 30px;margin-top: 5px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 40px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}

@media screen and ( max-width :320px )
{
.kaiten{width:40px;height:40px;margin-top: 7px;}
.dtmicon{width: 30px;height: 30px;margin-top: 5px;margin-left: 30px;}
.jasrac_mark{width: 30px;height: 30px;margin-top: 5px;margin-left: 20px;}
.jasrac p{font-size: 10px;margin-top: 13px;margin-left: 10px;}
}