@charset "utf-8";
html{ /*remとpxを合わせるため記載 ※1.6rem = 16pxとなる*/
  font-size: 62.5%;
}

body{ /*576px未満の基本フォントサイズ*/
  font-size: 0.9rem;
}

@media (min-width: 576px) { /* 576～767pxのフォントサイズ */
  body{font-size: 1.4rem;}
}


@media (min-width: 768px) { /* 768～991pxのフォントサイズ */
  body{font-size: 1.8rem;}
}

@media (min-width: 992px) { /* 992～1199pxのフォントサイズ */
  body{font-size: 2rem;}
}


@media (min-width: 1200px) { /* 1200px以上のフォントサイズ */
  body{font-size: 2.2rem;}
}

body{
  background-color:hsl(235, 30%, 7.5%);
  color:hsl(32,100%,90%);
}

/*スマホからなら横幅100%*/
.custom-container{
  width:100%;
  margin:0 auto;
  padding: 0 30px;
}

/*PCからは横幅60～80%*/
@media (min-width: 768px){
  .custom-container{
    width:720px;
  }
}

@media (min-width: 992px){
  .custom-container{
    width:960px;
  }
}

@media (min-width: 1200px){
  .custom-container{
    width:1140px;
  }
}

div.div-popup{
  background-color:hsl(210, 100%, 98%);
}

div.div-header{
  background-color:hsl(235, 30%, 7.5%);
}

div.div-main{
 padding:0 15px; 
 margin-bottom: 2em;
}

div.div-footer-comment{
  padding:0 15px;
  background-color:hsl(240, 0%, 0%);
}

div.div-header-text-read{
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}

div.div-header-default-setting{
  margin-bottom: 5px;
}

div.div-header-music-sort{
  margin-bottom: 5px;
}

div.div-header-music-select{
  margin-bottom: 5px;
}

table[data-table-music] {
  width:100%;
  background-color: hsl(230, 25%, 10%);
  border-color:hsla(32,100%,100%,0.3);
  border-width: 1px;
  text-align: center;
}

/*768px未満のテーブル幅*/
.col-add-remove,
.col-bpm,
.col-green,
.col-hs,
.col-sud,
.col-lift
{
  width:calc(100% / 13);
}

  .col-action
  { /*操作内容は幅1.8列ぶん*/
  width:calc((100% / 13) * 1.8);
  }

  .col-input-value
  { /*操作値は幅1.2列ぶん*/
  width:calc((100% / 13) * 1.2);
  }

.col-memo{ /*メモ列は4幅ぶん*/
  width:calc((100% / 13) * 4);
}

@media (min-width: 768px) { /* 768～991pxのテーブル幅 */
	.col-add-remove,
	.col-bpm,
	.col-green,
	.col-hs,
	.col-sud,
	.col-lift
	{
	  width:calc(100% / 13);
	}

  .col-action
  { /*操作内容は幅1.8列ぶん*/
  width:calc((100% / 13) * 1.8);
  }

  .col-input-value
  { /*操作値は幅1.2列ぶん*/
  width:calc((100% / 13) * 1.2);
  }

  .col-memo{ /*メモ幅は4列ぶん*/
	  width:calc((100% / 13) * 4);
	}
}

@media (min-width: 992px) { /* 992～1199pxのテーブル幅 */
	.col-add-remove,
	.col-input-value,
	.col-bpm,
	.col-green,
	.col-hs,
	.col-sud,
	.col-lift
	{
	  width:calc(100% / 15);
	}

  .col-action
  { /*操作内容は幅1.8列ぶん*/
  width:calc((100% / 15) * 1.8);
  }

  .col-input-value
  { /*操作値は幅1.2列ぶん*/
  width:calc((100% / 15) * 1.2);
  }

  .col-memo{ /*メモ幅は6列ぶん*/
	  width:calc((100% / 15) * 6);
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.col-add-remove,
	.col-action,
	.col-bpm,
	.col-green,
	.col-hs,
	.col-sud,
	.col-lift
	{
	  width:calc(100% / 17);
	}

  .col-action
  { /*操作内容は幅1.8列ぶん*/
  width:calc((100% / 17) * 1.8);
  }
  .col-input-value
  { /*操作値は幅1.2列ぶん*/
  width:calc((100% / 17) * 1.2);
  }

  .col-memo{ /*メモ幅は8列ぶん*/
	  width:calc((100% / 17) * 8);
	}
}

/*行ごとに表示色を変える*/
tr.tr-mod0{
  background-color: hsl(220, 70%, 10%);

}

tr.tr-mod1{
  background-color: hsl(160, 50%, 10%);  
}

tr.tr-mod2{
  background-color: hsl(100, 40%, 10%);  
}

tr.tr-mod3{
  background-color: hsl(40, 40%, 10%);    
}

tr.tr-mod4{
  background-color: hsl(340, 40%, 10%);  
}

tr.tr-mod5{
  background-color: hsl(280, 50%, 10%);   
}

td[data-td-sud]{
	color:hsl(32,20%,90%);
}

td[data-td-lift]{
	color:hsl(32,20%,90%);
}

td[data-td-memo]{
	text-align: left;
}

td.td-s{
	opacity: 0.83;
}

td.td-vs{
	opacity: 0.67;
}

td.td-vvs{
	opacity: 0.5;
}

/*アクション行ではBPM列を透明に*/
tr[data-tr-type="action"] td[data-td-bpm]{
  opacity: 0;
}

#input-default-green{
  margin-right: 10px;
  padding:0 auto;
  padding-block:0;
  padding-inline:0;
  width:calc(3em + 10px);
  background-color: hsl(210, 10%, 95%);
  text-align:center; 
  color:hsl(240, 100%, 10%);
}

#input-default-sud{
  margin-right: 10px;
  padding:0 auto;
  padding-block:0;
  padding-inline:0;
  width:calc(3em + 10px);
  background-color: hsl(210, 10%, 95%);
  text-align:center; 
  color:hsl(240, 100%, 10%);
}

#input-default-lift{
  width:calc(3em + 10px);
  padding:0 auto;
  padding-block:0;
  padding-inline:0;
  background-color: hsl(210, 10%, 95%);
  text-align:center; 
  color:hsl(240, 100%, 10%);
}

#MUSIC_SELECT{
  width:100%;
  background-color: hsl(210, 10%, 95%);
  color:hsl(240,0%,0%);
  font-size: 2em;
  font-family: monospace;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[data-input-add-row] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: auto;
  border: none;
  border-radius: 5px;
  background-color: hsl(230, 20%, 20%);
  text-align: center;
  color: hsl(32,100%,90%);
}

input[data-input-add-row]:hover {
  background-color: hsl(210, 10%, 50%);
}

input[data-input-delete-row] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: auto;
  border: none;
  border-radius: 0px;
  background-color: hsl(230, 20%, 20%);
  text-align:center;
  color: hsl(32,100%,90%);
}

input[data-input-delete-row]:hover {
    background-color: hsl(210, 10%, 50%);
}

select[data-select-action]{
  width:100%;
  background-color: hsl(210, 10%, 95%);
  text-align:center; 
  color:hsl(240, 100%, 10%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select[data-select-action="ST+SCR"]{
  background: radial-gradient(circle,hsl(0, 80%, 50%) 0%,hsl(0, 80%, 50%) 10%,hsl(210, 20%, 40%) 11%,hsl(210, 20%, 40%) 30%,hsl(210, 10%, 95%) 31%,hsl(210, 10%, 95%) 100%);
}

select[data-select-action="ST+KEY"]{
  background: linear-gradient(0deg,hsl(210, 10%, 90%) 0%,hsl(210, 0%, 100%) 20%,hsl(210, 25%, 70%) 21%,hsl(210, 0%, 90%) 80%,hsl(240, 80%, 50%) 81%,hsl(240, 70%, 50%) 100%);
}

select[data-select-action="ST→ST"]{
  background: linear-gradient(90deg,hsl(210, 50%, 90%) 0%,hsl(210, 0%, 100%) 48%,hsl(240, 0%, 50%) 49%,hsl(210, 0%, 50%) 55%,hsl(210,5%, 60%) 100%);
}

[data-element-input-value]{
  padding:0 auto;
  padding-block:0;
  padding-inline:0;
  width:100%;
  background-color: hsl(210, 10%, 95%);
  text-align:center;
  text-align-last: center;
  color:hsl(240, 100%, 10%);
  appearance: none;
}

input[data-element-input-value][name="input-show-hide-sud"]{
  background-color: hsl(220, 10%, 50%);
}

textarea[data-textarea-memo]{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0;
  width:100%;
  height: 1.4em;
  box-sizing: border-box;
  field-sizing: content;
  resize:none;
  overflow: hidden;
  background-color: hsl(230, 25%, 10%);
  color:hsl(32,100%,90%);
}