body,p,h1,h2,h3,h4,h5,h6,
span,small,strong,
div,ul,li,
figure,img,form,input,button,
header,footer,nav,section{
    margin:0;
    padding:0;
}
html,body{ height:100%; }
#footer{ position: sticky;
top: 100vh; 
top: 100dvh; }

:root {
  --background-color: #f6f4f2;
  --black-color: #000;
  --header-color: #48403a;
  --border-color: #b0a8a0;
  --para-color: #222;
  --gray-color: #666;
  --palegray-color: #999;
  
  --first-color: #049;
  --second-color: #a85000;
  --red: #e00;
  --blue: #07d;
  
  --hashi:#ffd4c8; 
  --totsu:#f4ccff; 
  --fumi:#d8c8ff; 
  --gochi:#c8e8f8; 
  --tsuka:#f8e8cc; 
  --uchi:#ddd; 
  --hashi-v:#f76; 
  --totsu-v:#e7f; 
  --fumi-v:#a7f; 
  --gochi-v:#6af; 
  --tsuka-v:#fe0; 
  
  --side-margin: 3vw;
  --title-margin: 2vw;
}

@media (orientation:landscape){
	.cast_box {	width:18.5%; min-width:120px; max-width:200px;	}
	.casts{ gap:0.4rem 0.8rem;}
	.js_modalContInner { min-width: 600px; width: 75%;}
	.js_modalCont {  height: 95%;}
}
@media (orientation: portrait){
	.cast_box {	width:23.5%; min-width:120px; max-width:200px;	}
	.casts{ gap:1.2vw 1.6vw;}	
	.js_modalContInner { width: 90%;}
	.js_modalCont {  height: 95%;}
}

#content {
		width:90%;
		max-width:1000px;
		margin:0 auto;	}	

.new_songs{ 
	padding:0.2rem ; margin-top:1rem;
	background-color:#fff;
	border: solid 0.1rem var(--border-color);
	border-radius: 0.4rem; }
div.flex_top div.button, div.flex_top button { margin: 0.3rem 0}
.new_songs div.flex_top div.button, .new_songs div.flex_top button, .new_songs h5 { margin: 0.4rem}
div.new_song{	margin:0.2rem; }

div.new_song{
	width:48%;	}
div.flex_wrap{
	width:49%;	}	
@media (max-width:450px){
	div.new_song,div.flex_wrap{
		width:100%;
}	}