@charset "UTF-8";


.flex-tab .su-tabs-pane li{
position:relative;
overflow:hidden;
/*min-height:60px;*/
margin-bottom:10px;
/*padding-left:10px;*/
list-style-type:none;
}
.flex-tab .su-tabs-pane li img{
transition: .3s ease-in-out;
}
.flex-tab .su-tabs-pane li:hover img{
transform: scale(1.1);
}
.flex-tab .su-tabs-nav,.flex-center{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
justify-content:space-between;
}
.flex-end{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
align-items: flex-end;
justify-content:flex-end;
}
.flex-start{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-start;
align-items: flex-start;
justify-content:flex-start;
}
.flex-tab .su-tabs-nav span{
text-align:center;
width:33.34%;
}
.flex-tab .su-tabs-nav span:last-child{
margin-right:0;
}
#coodelist li{
position:relative;
}
input[type=submit].ok_bt{
color:#fff;
background:#2490d0;
border:none;
border-radius:4px;
}
input[type=button].cl_bt{
color:#2490d0;
background:none;
border:1px solid #2490d0;
border-radius:4px;
}
/*side-serach-area*/
.input-range{
margin-bottom:15px;
}
.input-area{
margin-bottom:20px;
}
.input-button-area{
margin-bottom:30px;
}
.input-range{
width:100%;
}
.space5{
padding:2px 5px;
}
.input-range-box .ui-slider-handle{
border-radius:50%;
outline:none;
}
.cube_ul{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
justify-content:flex-start;
}
.cube_ul li{
display:inline-block;
padding:1px;
border-radius:5px;
}
.cube:hover{
outline: groove 3px #aaa;
}
.cube{
display:inline-block;
background:#fff;
width:30px;
height:30px;
border:1px solid #aaa;
border-radius:5px;
}
.cube.black{
background:#000;
}
.cube.gray{
background:gray;
}
.cube.brown{
background:brown;
}
.cube.beige{
background:beige;
}
.cube.green{
background:green;
}
.cube.blue{
background:blue;
}
.cube.purple{
background:purple;
}
.cube.yellow{
background:yellow;
}
.cube.pink{
background:pink;
}
.cube.red{
background:red;
}
.cube.orange{
background:orange;
}
.cube.silver{
background:silver;
}
.cube.gold{
background:gold;
}
.cube.other{
background:url(icon/ico_color.png);
background-size:200% auto;
background-position:12% 12%;
}
.fas.dele{
margin-right:5px;
margin-top:6px;
vertical-align:top;
}
/*サイドバーカテゴリ*/
ul.main-cat li{
position:relative;
}
ul.main-cat li:hover ul.sub-cat.disno.abs{
position:absolute;
top:46px;
left:0;
display:block;
background:#fff;
z-index:99;
padding:0;
box-shadow: 0 2px 8px rgba(77, 77, 77, 0.2);
border-radius: 4px;
}
ul.sub-cat{
/*padding-left:25px;*/
}
.widget ul.sub-cat li,ul.sub-cat li{
margin:6px;
}
.disno{
display:none;
}
ul.detail-check{
padding-left:15px;
}
ul.detail-check .fas{
margin-right:10px;
}
ul.detail-check .fas{
cursor:pointer;
color:#aaa;
}
.input-detail:checked + .fas{
color:#2490d0;
}
/*--------------------------------------
wppでランキング順位を表示する
--------------------------------------*/
/* カウンタをリセット */
.ranking .su-tabs-pane {
    counter-reset: wpp-ranking;
}
/* 一覧の表示 */
.ranking .su-tabs-pane li {
    position: relative;
}
/* 順位を表示 */
.ranking .su-tabs-pane li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
 	display: inline-block;
 	position: absolute;
 	z-index: 1;
 	top: 0;
 	left: 0;
 	width: 25px;
 	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
}
/* 1位 */
.ranking .su-tabs-pane li:nth-child(1):before {
	background: #FCE36b;
	color: #fff;
}
/* 2位 */
.ranking .su-tabs-pane li:nth-child(2):before {
	background: #FCE36b;
	color: #fff;
}
/* 3位 */
.ranking .su-tabs-pane li:nth-child(3):before {
	background: #FCE36b;
	color: #fff;
}
/* 4位以降の色 */
.ranking .su-tabs-pane li:nth-child(n + 4):before{
	background: #f3f3f3;
	color: #9a9a9a;
}
/*like*/
.my-clip{
position:absolute;
bottom:1px;
right:1px;
padding:5px;
cursor:pointer;
color:#ff9;
}
.my-clip.on{
color:pink;
}
@media print, screen and (max-width: 480px){
.flex-tab .su-tabs-nav{
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-tab .su-tabs-nav span{
text-align:center;
width:48%;
}
.flex-tab .su-tabs-nav span:nth-child(2){
margin-right:0;
}
}