@charset "utf-8";
/* CSS Document */

/*==================================================
ギャラリーのためのcss
===================================*/

.tabs{
	padding: 0 20px;
}

.reagion_tab {
	display: inline-block;
	padding: 8px 20px;
	background: #f0f0f0;
	margin: 0 8px 8px 0;
	cursor: pointer;
	box-sizing: border-box;
}
.reagion_tab.active {
	background: #ddd;
	font-weight: bold;
}


.kome{
	display:block;
	font-size:0.9em;
	margin-bottom:8px;
	color:#333333;
}
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
	background: #d2dee0;
	padding: 0 20px 20px 20px;
	margin-bottom:0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.item strong{
	display: block;
	margin:4px auto 4px auto;
	font-size:1.2em;
	color: #000;	
}

.item strong span{
	font-size: 0.8em;
}

.sort-btn dt{
	font-weight: bold;
	margin:30px 0 10px 0;
}

.sort-btn dd{
	margin:0 0 10px 0;
}

.sort-btn ul{
	display: flex;
	flex-wrap: wrap;
}

.sort-btn li{
	margin:0 10px;
list-style:none;
}

.allItems li{
	font-weight: bold;
}

.sort-btn ul li{
	position: relative;
	cursor: pointer;
	padding:0 0 0 30px;
	margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
	width:100%;
	margin:0;
}
	
.sort-btn ul li{
	width:auto;
}	
}

header{
	border-bottom: 1px solid #fff;
}

/*チェックマークの枠*/
.allItems li::before,
.pref-list li::before{
	content:'';
	position: absolute;
	left:0;
	width:20px;
	height:20px;
	border:2px solid #acadb8;
}

/*現在地＝activeというクラス名がついたらチェックマークを出現*/
.allItems li.active::after,
.pref-list li.active::after{  
	content:'';
	position: absolute;
	left:5px;	
	top:0;
    /*チェックマークの色や形*/
	border-left:2px solid #333;
	border-bottom:2px solid #333;
	width:16px;
	height:9px;
	transform:rotate(-45deg);
}

/*ラジオボタンの枠*/
.team li::before,
.series li::before{
	content:'';
	position: absolute;
	left:0;
	width:20px;
	height:20px;
	border:2px solid #acadb8;
	border-radius:50%;
}

/*現在地＝activeというクラス名がついたらラジオボタンを出現*/
.team li.active::after,
.series li.active::after{  
	content:'●';
	position: absolute;
	left:5px;	
	top:0;
}

.sort_window {
	margin:0 auto;
	text-align:center;
	background:#f3f3f3;
}

/*Shuffle.jsのレイアウトのための調整 */
.grid {
	margin: 0 auto;
	text-align: center;
}

.sort_frame {
	margin-left:4vw;
	box-sizing:border-box;
	text-align: center;
}
  
.grid li {
	box-sizing: border-box;
	padding: 0.8em;
	margin: 1em 0.5em;
	text-align: center;
	background: #fff;
	border-radius: 6px;
	z-index: 1;
	list-style: none;
	text-align: center;
	min-width:17vw;
}

.grid li img{
	max-height:280px;
}


@media only screen and (min-width: 769px) {
	.sp_only{
		display:none;
	}
}

.tags_container {
	display:flex;
	flex-flow: row wrap;
}

.tags {
	border-radius:6px;
	padding:3px 5px;
	margin:2px 0 2px 3px;
	display:inline-block;
	font-size:0.74em;
}

.t_red{background:#f66052;color:#fff;}
.t_pink{background:#d69495;color:#fff;}
.t_gold{background:#d8a057;color:#000;}
.t_orange{background:#e0830a;color:#fff;}	
.t_blue{background:#5d909d;color:#fff;}	
.t_moca{background:#b29f97;color:#fff;}	
.t_navy{background:#315694;color:#fff;}	
.t_ivory{background:#f8f4e6;color:#315694;}
.t_mint{background:#78c093;color:#fff;}
.t_brown{background:#3c151c;color:#fff;}
.t_maroon{background:linear-gradient(90deg, #671c2a 0%, #671c2a 50%, #b6b30b 50%, #b6b30b 100%);color:#fff;}
.t_skyblue{background:#2da4da;color:#fff;}
.t_yellow{background:#f0e59c;color:#121415;}
.t_purple{background:#77306c; color:#fff;}
.t_green{background:#09793f; color:#fff;}
.t_jrwest{background:#0f3e9b; color:#fff;}
.t_jrcent{background:#ec922c; color:#fff;}
.t_deeppink{background:#db0242; color:#fff;}
.t_khaki{background: #516d54; color:#fff;}
.t_snow{background:#afe3f3; color: #333;}
.t_jrh{background:#45b035; color: #fff;}
.t_jreast{background:#008803; color: #fff;}
.t_jrs{background:#319ac6; color: #fff;}
.t_jrq{background:#e50012; color: #fff;}
.t_sgred{background:#ed2939; color: #fff;}
.t_swred{background:#ff0000; color: #fff;}
.t_ukr{background:#005bbb; color: #ffd500;}

@media only screen and (max-width: 768px) {
	.sort-btn {
		padding-bottom: 4px;
		margin-top:4px;
	}
	.sort-btn dt{
		font-weight: bold;
		margin: 10px 0;
	}
	.grid li {
		margin: 0.5em 0.2em;
		font-size: 0.8em;
		height: 250px;
		padding:0.7em;
		width:41vw;
	}
	.grid li img{
		max-height:150px;
	}

	.tags {
		padding:2px 4px;
		margin:2px 1px;
		font-size:0.75em;
	}

	.shuffle-item--visible:nth-child(even){
		margin-right:0;
	}
}