/*/////////////// CSS変数設定 ///////////////////*/
@import "./root.css";
/*/////////////// CSS変数設定 ///////////////////*/

/*-------------------------- Sortmenu ----------------------------------*/
@media screen and (max-width: 1049px) {
	.womansort_menu{width:100%;}	
}
@media screen and (min-width: 1050px) {
	.womansort_menu{width:1050px;height:40px;}
}
.ws_menu a{color:#fff;}
.ws_menu a:hover{color:#fff;}
.ws_menu a:visited{color:#fff;}
/*------- Sortmenu Button ----------------*/
@media screen and (max-width: 1049px) {
	.sortbox{width:100%;}
	.btn-group{margin:0 auto 10px;width:100%;}	
}
@media screen and (min-width: 1050px) {
	.sortbox{width:1050px;height:44px;}
	.btn-group{margin:0 auto 10px;width:1050px;height:44px;}	
}
.groupbox{
		height:44px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;

		-ms-flex-wrap: wrap;	
		flex-wrap: wrap;
	
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
		
}
.sortmenubox{
		margin:0 auto 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;

		-ms-flex-wrap: wrap;	
		flex-wrap: wrap;
	
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}
.btn-group .btn {border-radius: 0;float:left;}
.btn-group .btn:first-child {border-radius: 3px 0 0 3px;}
.btn-group .btn:not(:first-child) {margin-left: -1px;}
.btn-group .btn:last-child {border-radius: 0 3px 3px 0;}
.btn-group label{}
.btn-group label.btn input[type=radio] {clip: rect(0, 0, 0, 0);pointer-events: none;position: absolute;}
.btn {
	width:100px;
	-webkit-appearance: none;
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

	border: 1px solid var(--main_color);
	border-radius: 3px;
	color: var(--main_color);
	cursor: pointer;
	font-size:14px;
	font-size:1.4rem;
	padding:10px;
	text-align: center;
	transition: .4s ease-out;
}

@media (-moz-touch-enabled:0), (pointer:fine) {
    .btn:hover {
        background: var(--main_color);
        color: var(--nav-txt-color);
        text-decoration: none;
    }
}
.btn:focus {box-shadow: 0 0 0 2px rgba(31,31,64,0.4);outline-width: 0}
.btn.active, .btn:active {background:var(--main_color);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);color: #fff;}
.btn:focus.active {box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 2px rgba(52, 73, 94, .4)}
.btn:disabled {background-color: rgba(52, 73, 94, 0);color: #1f1f40;cursor: not-allowed;opacity: .7;}


/************************************************************
 * 在籍リスト
************************************************************/
@media screen and (max-width: 1049px) {
	.ws_panel_listbox{width:100%;}	
}
@media screen and (min-width: 1050px) {
	.ws_panel_listbox{margin:30px auto 0px;width:1050px;}
}

/***    ulをセンター寄せ    *****/
.ws_panel_listbox ul{
		list-style-type:none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;

		-ms-flex-wrap: wrap;	
		flex-wrap: wrap;
	
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}


@media screen and (max-width: 629px) {
	.ws_panel_listbox ul li{
		width:calc(96vw / 2);
		margin:5px 2px 10px 2px;
		text-align:center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
	}
}
@media screen and (min-width:630px) and (max-width:839px) {
	.ws_panel_listbox ul li{
		width:calc(100vw / 3);
		margin:5px 0 10px;
		text-align:center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
	}
}
@media screen and (min-width:840px) and (max-width:1049px) {
	.ws_panel_listbox ul li{
		width:calc(100vw / 4);
		margin:5px 0 10px;
		text-align:center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
	}
}
@media screen and (min-width: 1050px) {
	.ws_panel_listbox ul li{
		width:210px;
		margin:5px 0 10px;
		text-align:center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
	}
}






/*.ws_panel_listbox ul li:nth-child(odd){background:#ff6600;}*/
/*.ws_panel_listbox ul li:nth-child(even){background:#336600;}*/

:root {
 	--w1: 1050px;/*変数定義*/
 	--lisum: 3;/*変数定義*/	 
}
.calctest{
	width: calc(var(--w1) / var(--lisum));
	height:100px;
	background:#996600;
	text-align:center;
}