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

a {text-decoration: none;}
body{background:black;}
/* -------------------- header ------------------------------------- */
header{width:100%;height:60px;background-color: darkblue;display:flex;top:0;
            position: fixed;justify-content: space-between;z-index: 100;}
/* ---------------INDEXに戻る------------ */
h3{font-family: 'Sawarabi Gothic', sans-serif}
.modoru{margin: 15px 0 0 30px;font-size: 20px;color:yellow;}
.modoru:hover{color:white;}

section{position: fixed;top:60px;width:100%;height:40px;background: white;}
/* ---------------INSTRUMENT 文字------------ */
section h3{font-family: 'Playfair Display', serif;font-size: 30px;
text-align: center;padding-top: 0px;color: #522A27;}

/* -------slideの指定--------------------------------- */
.slide{position:relative;height:550px;top:10px;z-index: -10;}
.slide img {position:absolute;
	          opacity:0;
	          transition:all 1s ease-in-out;
	          height:450px;
	          object-fit:contain;}
#slide_speed {transform:rotateY(180deg);margin: 90px auto;}
/* --footerの指定-------------------------------------- */
footer{width:100%;height:50px;background-color:black;
       text-align:center;color:white;padding:5px;margin-top:-110px;}

/* --aside （pulldown）の指定-------------------------------------- */
/* -- 「play MUSIC」 --- */
aside{width:100%;margin-top: 120px;font-size: 15px;text-align: center;}
.pulldown label{height:50px;background: black;}
input[type="checkbox"] {display: none;}
.pulldown ul {
  list-style: none;
  margin: 0 0 0 0;padding: 0;height: 0;
  overflow: hidden;transition: height 0.6s;
}
#pulldown_contents:checked + ul{height:350px;}/* --pulldown の高さ------- */
.pulldown li {margin: 0;padding: 0;font-size: 15px;line-height:0.3;}

/* --pulldown の中身の指定---------------- */
.pulldown ul a {display: block;text-decoration: none;
      padding:40px 0px 10px 0px;/* --pulldown リストの位置-------- */
      color: tan;/* ---pulldownのリストの色------ */}
.pulldown li:last-child a {padding-bottom:30px;}

/* --label（コンテンツ） の指定--------------- */
label {display: block;cursor: pointer;
      padding:10px;color: darkorange;font-size: 20px;}
/* --label（コンテンツ） hoverの指定------------- */
label:hover {color: yellow;transition: 1s ease-in-out;}
/* ---「play music」のhover--------- */
.pulldown label:hover {color:yellow;}
/* ---「pulldownの項目」のhover--------- */
.pulldown a:hover {color:white;}
.pulldown li a {transition: all 0.9s ease 0s;}
.pulldown li :hover {cursor: pointer;transform: scale(1.5,1.5);}
/* --プルダウン の指定--------------- */
.pulldown ul{display: flex;text-align: center;}

.dl{width: 50%; border-right: solid 1px tan;background: black;margin-left: 0px}
.seisaku{width: 50%;background: black;margin-right: 0px;}
.dl a{color: yellow;}

/* --直前に戻る------------------------------------------------------ */
.return{display: flex;font-size:18px;width:30px;height:30px;border-radius: 50%;
          background-color: green;
          margin: 15px auto;padding: 2px 0 0 4px;}
.return a{color: white;}
.return a:hover{color: green;transition: 1s ease-in-out;}
.return h6{font-size:20px;padding-top: 0px;padding-left: 15px; color: white;}

/* ---------レスポンシブ-------------------------------------------------- */
/* ---------1500px以下-------------- */
@media screen and ( max-width :1500px)
{
	header{background:#de3400;}
	/* -------slideの指定--------------------------------- */
	.slide{height:350px;top:20px;z-index: -10;}
	.slide img {height:350px;}
	#slide_speed {transform:rotateY(180deg);margin:10px auto;}
	footer{height:50px;padding:5px;margin-top:50px;}
}

/* ---------600px以下-------------- */
@media screen and ( max-width :600px)
{
  header{background:#ff2599;}
  /* -- 「play MUSIC」 --- */
  .pulldown label{height:40px;}
  #slide_speed {transform:rotateY(180deg);margin: -0px auto;}
	/* -------slideの指定--------------------------------- */
	footer{height:50px;padding:5px;margin-top:50px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px)
{
header{height:40px;background-color:tan;}
.modoru{margin: 12px 0 0 15px;font-size: 15px;color:darkred;}
nav{text-align: center;margin-left: 3px;}
section{top:40px;height:30px;}
/* ---------------INSTRUMENT 文字------------ */
section h3{font-size:18px;padding-top: 3px;}
aside{margin-top: 70px;font-size: 15px;}
/* -------slideの指定--------------------------------- */
.slide{height:750px;top:-150px;z-index: -10;}
.slide img {height:600px;object-fit:contain;}
label {padding:5px;color: darkorange;font-size: 15px;}
label pulldown_contents2{padding:5px;color: darkorange;font-size: 10px;}
#pulldown_contents:checked + ul{height:260px;}/* --pulldown の高さ------- */
.pulldown li :hover {cursor: pointer;transform: scale(1.2,1.2);}
.pulldown li {margin: 0;padding: 0;font-size: 13px;line-height: 1.5;}
/* --pulldown の中身の指定---------------- */
.pulldown ul a {padding:12px 0px 12px 0px;/* --pulldown リストの位置-------- */}

/* --直前に戻る------------------------------------------------------ */
.return{font-size:18px;width:30px;height:30px;border-radius: 50%;
  					margin: 5px auto;padding: 2px 0 0 4px;}
.return h6{font-size:20px;padding-top: 2px;padding-left: 15px;}
/* --footerの指定-------------------------------------- */
footer{height:50px;padding:5px;margin-top:-400px;}
}

/* ---------320px以下-------------- */
@media screen and ( max-width :320px)
{
header{background: #de3400;}
.modoru{margin: 10px 0 0 15px;font-size: 15px;color:yellow;}
/* -------slideの指定--------------------------------- */
.slide{height:750px;top:-170px;z-index: -10}
#pulldown_contents:checked + ul{height:270px;}/* --pulldown の高さ------- */
li {margin: 0;padding: 0;font-size: 12px;line-height: 2;}
/* --label（コンテンツ） の指定--------------- */
label {margin-top: 10px;color: red;font-size: 12px;}
}