/* Controls
---------------------------------------------------------------------- */


.sortmenu .control {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.mixitup-control-active {
	color: #fff;
}
.controls_outer {
    width: 100%;
    background: #e9e9e9;
}
.controls {
	float: none;
	text-align: center;
	padding: 10px;
	background: #e9e9e9;
	width: 100%;
	margin: 0 auto;
	max-width: 1100px;
}
.control {
	position: relative;
	cursor: pointer;
	text-align: center;
	font-size: 12px;
	color: #000;
	transition: background 150ms;
	letter-spacing: 0.7px;
	border: none;
	outline: none;
	background: #FFF;
	display: inline-block;
	padding: 5px 15px 1px;
	margin: 5px 7px;
	font-family: "メイリオ", Meiryo, sans-serif;
}
.control:hover {
	opacity: 1;
}
.select {
	padding-top: 5px;
	background: #FFF;
}

.control.btn_all {
    background: #c2c2c2;
}
.control.btn_all.mixitup-control-active {
    background: #000;
}
.control.btn_all.mixitup-control-active:hover {
	color: #8eff00;
}
@media only screen and (min-width:600px) {
.control {
	font-size: 14px;
	display: inline-block;
	transition: all 0.2s ease;
}
.controls {
	padding: 30px 20px 20px 30px;
	display: block;
}
.select {
	padding-top: 40px;
}
.control.all {
	padding: 6px 15px 5px;
}
}
.control:hover {
	color: #6abd02;
}
.mixitup-control-active {
	color: #000;
}
.mixitup-control-active {
	background: #6abd02;
	color: #FFF;
}
.mixitup-control-active:hover {
	color: #FFF;
	opacity: 0.7;
}
/* Container
---------------------------------------------------------------------- */

.container {
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #666;
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	font-family:'cgr', 'Century Gothic','Avenir-Light',Futura, helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}
.container:after {
	content: '';
	display: inline-block;
	width: 100%;
}
.container img {
	width: 100%;
	padding-bottom: 2px;
}
.container span {
    padding: 0px 0 10px 2.5rem;
    text-indent: -2.5rem;
    display: inline-block;
}
.tubbox {
	position: absolute;
	top: -25px;
	clear: both;
}
.tubbox p {
	paddin: 0px;
	width: 65px;
	background: rgba(241,240,221,1.00);
	margin-right: 8px;
	margin-bottom: 8px;
	text-align: center;
	color: #000;
	font-size: 11px;
	display: inline-block;
}
.tubbox p.c2 {
	background: rgba(208,220,223,1.00);
}
/* Target Elements
---------------------------------------------------------------------- */

.mix, .gap {
	display: inline-block;
	vertical-align: top;
}
.mix {
	/*background: #fff;
    border-top: .5rem solid currentColor;
    border-radius: 2px;*/
	margin-bottom: 1rem;
	position: relative;
}
.mix a {
	color: #000;
	font-size: 12px;
	display: inline-block;
	line-height: 14px;
	text-align: left;
	text-justify: none;
}
.mix a:hover {
	color: #6abd02;
}

@media screen and (min-width: 800px) {
.mix {
	margin-bottom: 3rem;
}
.mix a {
	font-size: 22px;
	line-height: 26px;
}
}
/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

.mix, .gap {
 width: calc(98%/2 - (((2 - 1) * 3%) / 2));
}

/* 3 Columns */

@media screen and (min-width: 800px) {
.mix, .gap {
 width:calc(98%/2 - (((2 - 1) * 2.5rem) / 2));
/*width: calc(100%/3 - (((3 - 1) * 2.5rem) / 3));*/
}
}