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

body{background:#3a6c3b;}
a {text-decoration: none;display: block;}
/* --aside---------------------------------------------------------- */
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 90%;/*箱の幅*/
    max-width: 900px;
  margin:0 auto 0px;/*BOXとリストのアキ*/}

.accordion-area li{margin: 10px 0;}
/*boxの線色と地色*/
.accordion-area section {border: 1px solid darkgreen;background-color: white;}
/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:20px;f
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;}
.title::before{top:48%;left: 15px;transform: rotate(0deg);}
.title::after{top:48%;left: 15px;transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}
/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  background: #f3f3f3;
  margin:0 3% 3% 3%;
  padding: 3%;}
aside{position: relative;top:90px;padding-bottom:88px/*obi+footerの高さ*/;
	  display: flex;justify-content: space-around;flex-wrap: wrap;}
/* ----「曲名のサイズとマージン」--- */
aside a{font-family: "Sawarabi Mincho"; font-size: 15px;padding-bottom: 10px;}
aside p{font-size: 11px;color:black;}/* ----「★ダウンロードページへ」--- */
/* ----「曲名のサイズとマージン」--- */
aside h1{font-family: "Sawarabi Mincho"; font-size: 20px;padding-top: 5px;}
.no1{width: 360px;padding: 10px 0 10px 0px; background: #BAD3FF;}
.no2{width: 360px;padding: 10px 0 10px 0px; background: #FFBEDA;}
.no3{width: 360px;padding: 10px 0 10px 0px; background: #FFE4E1;}
.no4{width: 360px;padding: 10px 0 10px 0px; background: #B1F9D0;}
.no1 h1{color: #000088;}/* ------「no1のタイトルの色」------ */
.no2 h1{color: #CC0066;}/* ------「no1のタイトルの色」------ */
.no3 h1{color: #8B0000;}/* ------「no1のタイトルの色」------ */
.no4 h1{color: #004400;}/* ------「no1のタイトルの色」------ */
aside .no1 a{color: #000088;}/* ------「no1の曲名の色」------ */
aside .no2 a{color: #CC0066;}/* ------「no2の曲名の色」------ */
aside .no3 a{color: #8B0000;}/* ------「no3の曲名の色」------ */
aside .no4 a{color: #004400;}/* ------「no3の曲名の色」------ */
aside p:hover{color: red;}
aside p:hover{color: red;}

/* ---------------------------------------------------------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;}

/* ---------------------------------------------------------------レスポンシブ-------------- */
/* ---------800px以下-------------- */
@media screen and ( max-width :800px )
{
.box {
  display: block;;/*はじめは非表示*/
  background: #f3f3f3;
  margin:0 3% 3% 3%;
  padding: 3%;}
}

/* ---------600px以下-------------- */
@media screen and ( max-width :600px )
{
aside{top:70px;}
}

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

/*アコーディオンタイトル*/
.title {font-size:15px;padding: 3% 3% 3% 50px;}
aside{top:60px;padding-bottom:60px/*footerの高さ+アキ*/;}
aside h1{font-size: 18px;margin-top: 0px;}
aside a{margin-top: 0px;}
/* --footerの指定-------------------------------------- */
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;}
}

/* ---------360px & 320px以下-------------- */
@media screen and ( max-width :360px )
{
aside{top:40px;padding-bottom:40px/*footerの高さ+アキ*/;}
.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;}
}