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

a {text-decoration: none;}
body{background:black;}
/* -------------------- header ------------------------------------- */
header{position: fixed;display: flex;justify-content: space-between;
       height: 70px;width: 100%;z-index: 10;top:0;}
header h3{/* --headerのパーツ全て---------- */
  font-family: 'Sawarabi Gothic', sans-serif;text-align: center;font-size: 18px;}
.header_title{/* --headerのTITLE---------- */
  font-family: 'Playfair Display', serif;letter-spacing: 0.1em;text-align: center;
  font-size: 25px;color:linen;padding-top: 20px;}
/* --各ページの色指定---------- */
.dtm_index{background-color: tan;}
.order{background-color: #b39978;}/* --tanに近いけど黄土色--------- */
.a_dl,.a_dl_xxx{background-color: midnightblue;}/* --濃い青---------- */
.a_inst{background-color: slategray;}/* --グレー---------- */
.a_music,.music_xxx{background-color: mediumvioletred;}/* --くすんだピンク--------- */
.work_xxx{background-color: orangered;}/* --オレンジ---------- */
.a_play{background-color: mediumseagreen;}/* --くすんだ黄緑---------- */

/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 70px;width: 180px;background: darkred;}
.btn_top
 {position: relative;text-decoration: none;display: inline-block;
 outline: none;text-align: center;}
.btn_top
  {background:darkred;
  margin: 0px 0 0px 0px;padding: 20px;width: 180px;height:70px;}
.btn_top h3
  {position: absolute;left: 50%;top:50%;color:#FFCC33;
  transform:translate(-50%,-50%);transition: all .5s;
  display: block;white-space: nowrap;}
.btn_top:hover{background:#FFCC33;transition: all 1.5s;}
.btn_top h3:nth-child(2){opacity:0;}
.btn_top:hover h3:nth-child(1){opacity:0;}
.btn_top:hover h3:nth-child(2){opacity:1;color: black;}

/* --直前に戻る------------------------------------------------------ */
.return{width:180px;height:70px;}
.p_return{width:50px;height:50px;margin: 10px 0px 0 100px;}
.p_return:hover{
  transition: 1s ease-in-out;transition: -webkit-transform 1s;
  transform-origin: (50%,50%)-webkit-transform:rotate(-360deg);
  transform: rotate(-360deg);}


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

/* ---------1500px以下-------------------------------------------------------- */
@media screen and ( max-width :1500px)
{
/* -------------------- header --------------------------------- */
header{height: 50px;}
header h3{font-size: 15px;}/* --headerのパーツ全て-------- */
.header_title{/* --headerのTITLE---------- */
  font-size: 20px;padding-top: 12px;margin-left: 20px;}
/* -TOPに戻る--------------------------------------------- */
.to_top{height: 50px;width: 120px;}
.btn_top{margin: 0px 0 0px 0px;padding: 20px;width: 120px;height:50px;}
/* --直前に戻る-------------------------------------------- */
.return{width:120px;height:50px;}
.p_return{width:30px;height:30px;margin: 10px 0px 0 70px;}
}

/* ---------450px以下-------------------------------------------------------- */
@media screen and ( max-width :450px)
{
/* -------------------- header ------------------------------------- */
header{height: 40px;}
header h3{font-size: 10px;}/* --headerのパーツ全て---------- */
.header_title{/* --headerのTITLE---------- */
  font-size: 15px;padding-top: 10px;margin-left: 15px;}
/* -TOPに戻る------------------------------------------------------ */
.to_top{height: 40px;width: 70px;}
.btn_top{margin: 0px 0 0px 0px;padding: 20px;width: 80px;height:40px;}
/* --直前に戻る------------------------------------------------------ */
.return{width:70px;height:40px;}
.p_return{width:30px;height:30px;margin: 5px 0px 0 30px;}
}

/* ---------320px以下-------------------------------------------------------- */
@media screen and ( max-width :320px)
{
}