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

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

/* --section------「使用音源」----------------------------------------- */
section{position: fixed;top:70px;width:100%;height:40px;background: white;
        text-align: center;padding-top: 5px;font-size:20px;color: #522A27;}
section h3{letter-spacing: 0.1em;font-family: 'Playfair Display', serif;}

/* --aside （pulldown）の指定-------------------------------------- */
aside{width:100%;margin-top: 120px;font-size: 15px;text-align: center;}
.pulldown label{height:50px;background: #1a1a1a;}
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:200px;}/* --pulldown の高さ------- */
.pulldown li {margin: 0;padding: 0;font-size: 15px;line-height: 1;}
/* --pulldown の中身の指定---------------- */
.pulldown ul a {display: block;text-decoration: none;
      padding:30px 0px 0px 0px;/* --pulldown リストの位置-------- */
      color: tan;/* ---pulldownのリストの色------ */}
.pulldown li:last-child a {padding-bottom:30px;}
/* --label（コンテンツ） の指定--------------- */
label {display: block;cursor: pointer;
      padding:10px;color: tan;font-size: 20px;}
label:hover {color: yellow;transition: 1s ease-in-out;}
/* ---「open ▼ close 」のhover--------- */
.pulldown label:hover {color:darkorange;}
/* ---「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-left: solid 1px tan;border-right: solid 1px tan;
  background: #1a1a1a;margin-left: 0px;margin-top: 10px;}

/* -------slideの指定--------------------------------- */
.slide{position:relative;height:550px;top:40px;z-index: -10;}
.slide img {position:absolute;opacity:0;transition:all 1s ease-in-out;
	          height:300px;object-fit:contain;}
#slide_speed {transform:rotateY(180deg);margin: 90px auto;}
.slide_controll{display: none;}

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

/* ---------レスポンシブ----------------------------------------------------- */
/* ---------1500px以下------------------------------------------------------- */
@media screen and ( max-width :1500px)
{
/* --section------「INSTRUMENT」--------------------------- */
section{top:50px;height:40px;padding-top: 5px;font-size:20px;}
/* --aside （pulldown）の指定------------------------------ */
aside{margin-top: 100px;font-size: 15px;}
.pulldown label{height:40px;}
/* -------slideの指定--------------------------------- */
.slide{height:250px;top:40px;z-index: -10;}
.slide img {height:250px;}
}

/* ---------600px以下-------------------------------------------------------- */
@media screen and ( max-width :600px)
{
/* -------slideの指定--------------------------------- */
.slide img {height:200px;}
}

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

section{top:40px;height:30px;padding-top: 3px;font-size:15px;}
aside{margin-top: 70px;font-size: 15px;}
/* -------slideの指定--------------------------------- */
.slide{height:750px;top:-150px;z-index: -10;}
.slide img {height:600px;object-fit:contain;}
/* --pulldown の指定---------------- */
label {padding:5px;color: darkorange;font-size: 15px;}
label pulldown_contents2{padding:5px;color: darkorange;font-size: 10px;}
#pulldown_contents:checked + ul{height:200px;}/* --pulldown の高さ------- */
.pulldown li :hover {cursor: pointer;transform: scale(1.2,1.2);}
.pulldown li {margin: 0;padding: 0;font-size: 13px;line-height: 2;}
.pulldown ul a {padding:12px 0px 12px 0px;/* --pulldown リストの位置-------- */}
/* --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;}
}

/* ---------320px以下-------------------------------------------------------- */
@media screen and ( max-width :320px)
{
section{top:40px;height:25px;padding-top:3px;font-size:12px;}
aside{margin-top:65px;font-size: 15px;}
/* -------slideの指定--------------------------------- */
.slide{height:750px;top:-170px;z-index: -10;}
/* --pulldown の指定---------------- */
#pulldown_contents:checked + ul{height:180px;}/* --pulldown の高さ------- */
li {margin: 0;padding: 0;font-size: 12px;line-height: 1.1;}
/* --label（コンテンツ） の指定--------------- */
label {margin-top: 10px;font-size: 12px;}
.pulldown ul a {padding:5px 0px 10px 0px;}
.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;}
}