@charset "utf-8";

.koebox {	
width: 452px; 
height: 200px; 
text-align: left;
border-radius: 3px;
background-color: #FFFACA;
padding: 10px;
margin-right: 15px;
margin-bottom: 15px;	
 }


.koebox .title {
display: flex;
width: 452px;
margin-bottom: 10px;
}

.koebox .title .title-txt {
margin-left: 10px;	
}  


.koearea {
display: flex;
flex-wrap: wrap;	
width: 975px;
}

.btn2clm{
	margin:20px auto 30px;
}
.btn2clm ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}
.btn2clm ul li{
	margin:0 1%;
}
.btn2clm ul li a{
	display:inline-block;
	background:#cc0000;
	text-decoration: none;
	color:#fff;
	padding:0.8em 1.8em;
	border-radius:3px;
	transition:.3s;
	font-size:110%;
}
.btn2clm ul li a:hover{
	opacity:0.7;
}
.btn2clm ul li.in a:before{
	font-family: 'jpsmt';
	content: "\3E";
	margin-right:0.5em;
	font-size:90%;
}
.btn2clm ul li.out a:before{
	font-family: 'jpsmt';
	content: "\26";
	margin-right:0.5em;
	font-size:90%;
}
.btn2clm ul li.in a{
	background:#009FE8;
}
.btn2clm ul li.out a{
	background:#00A95F;
}

@media screen and (max-width: 640px) {

.koebox {	
width: 100%; 
height: 100%; 
 }		

.koearea {
flex-direction: column;	
width: 100%;
}
	
.koebox .title {
width: 100%;	
}
	
.koebox .title p{
font-size: 95%;}	
	
	.btn2clm ul{
		display:block;
	}
	.btn2clm ul li{
		margin:10px auto;
	}
	.btn2clm ul li a{
		display:block;
		text-align:center;
		padding:1em 0.8em;
	}

}