:root{
	
	--red:#7d151d;
	--brown:#220000;
	--gray:#e3e3e3;	
	--dark-orange:pink; 
	--gray-color:red;
	--orange-color:#eb9800;
	--green-color:#176b14;
}

html{
	font-size:1.4rem;
	color:#220000;
	font-family: 'メイリオ','Meiryo','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serif;
}

select, a{
	color:#220000;
}

button{
	cursor: pointer;
}

* {
	margin: 0px;
	padding: 0px;
}

.picker * {
	font-size:0.8rem;	
}


#css_media{
	min-height: 100vh;
}

@media screen and (768px <= width < 1920px) {
	#css_media{
		margin-left: 22vw;
		margin-right: 22vw;
	}
}

@media screen and (1920px <= width < 9999px) {
	#css_media{
		margin-left: 32vw;
		margin-right: 32vw;
	}
}



input:focus {
	border:none;
	outline: none; 
}

.no_scroll{
	overflow: hidden;
}

/*  ==================

  loading

==================  */

#css_loading {
	width: 100%;
	height: 100%;
	background: #FFF;
	opacity: 0.8;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

#css_loading_img {
	position: absolute;
	top: 50%;
	left: 45%;
	right: 55%;
	width: auto;
}


/*  ==========

modal


==========  */
.modal_overlay {
	background-color: rgba(0, 0, 0, 0.6);
	   display: none;
	   height: 100%;
	   left: 0;
	   position: fixed;
	   top: 0;
	   width: 100%;
	   z-index: 50;
   }
   
   .modal_overlay.active {
	   display: block;
   }
   
   
   .modal {
	   background-color: rgba(0, 0, 0, 0.8);
	   color:#fff;
	   display: none;
	   left: 50%;
	   max-height: 75vh;
	   max-width: 650px;
	   overflow-y: auto;
	   position: fixed;
	   top: calc(50% - 30px);
	   transform: translate(-50%, -30%);
	   width: calc(100% - 20px);
	   z-index: 51;
   }
   
   .modal dev{
	   color:#fff;
   }
   
   .modal.active {
	   display: block;
   }


   .mes_modal_close_btn{
   	font-size:2.0rem;
   	border:none;
   	background-color:transparent;
   	color:#fff;
   	margin-top:-10px;
	padding:2px;
   }