﻿@charset "UTF-8";

.staff-contents-search-conditions--narrow-down{width: 33%;}
.staff-contents-search-conditions--select-sort{width: 33%;}

/*===========================================================================
						表示形式
===========================================================================*/

.staff-contents-search-conditions .list-d-switching {
	position: relative;
	width: 114px;
    float: right;
	z-index: 1;	
}
	
.staff-contents-search-conditions .list-d-switching .list-d-now-select{
	position: relative;
	border-radius: 3px;
	font-size: 12px;
	padding: 8px 15px 8px 18px;
	color: #333;
	cursor: pointer;
    border-left: 1px solid #e5e5e5;	
}

.staff-contents-search-conditions .list-d-switching .list-d-now-select span{
	padding-left: 30px;
	color: #757575;
}

.staff-contents-search-conditions .list-d-switching .list-d-now-select:after{
	content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -6px 0 0 0;
    border-right: solid 1px #5f5f5f;
    border-bottom: solid 1px #5f5f5f;
    transform: rotate(45deg);
}
	
.staff-contents-search-conditions .list-d-switching ul{
	width: 88%;
	position: absolute;
	top: 31px;
	left: 0;
	border: solid 1px #707070;
	display: none;
}
	
.staff-contents-search-conditions .list-d-switching .select-pull-on + ul{
	display: block;		
}

.staff-contents-search-conditions .list-d-switching ul li{
	cursor: pointer;
	padding: 10px;
	background: #fff;
	color: #333;
}
	
.staff-contents-search-conditions .list-d-switching ul li span{
	position: relative;
	padding-left: 30px;	
	color: #757575;
	font-size: 12px;
}
	
.staff-contents-search-conditions .list-d-switching .list-d-now-select span{padding-left: 22px;}	

.staff-contents-search-conditions .list-d-switching ul li:nth-child(1) span:before,
.staff-contents-search-conditions .list-d-switching ul li:nth-child(2) span:before,
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-normal span:before,
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-large span:before{
	position: absolute;
	top: 50%;
	content: "";
	left: 8px;
}
	
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-normal span:before,
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-large span:before{left: 16px;}	
	
.staff-contents-search-conditions .list-d-switching ul li:nth-child(1) span:before,
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-normal span:before{
	width: 17px;
	height: 14px;
	margin: -7px 0 0 0;
	background: url("../img/normal_sp.png") no-repeat;
	background-size: 17px 14px;
}
	
.staff-contents-search-conditions .list-d-switching ul li:nth-child(2) span:before,
.staff-contents-search-conditions .list-d-switching .list-d-now-select.ico-large span:before{
	width: 17px;
	height: 17px;
	margin: -8.5px 0 0 0;	
	background: url("../img/large_sp.png") no-repeat;
	background-size: 17px 17px;
}
	
.staff-contents-search-conditions .list-d-switching ul li.active:nth-child(1) span:before{
	background: url("../img/normal_on_sp.png") no-repeat;
	background-size: 17px 14px;
}

.staff-contents-search-conditions .list-d-switching ul li.active:nth-child(2) span:before{
	background: url("../img/large_on_sp.png") no-repeat;
	background-size: 17px 17px;	
}	
	
.staff-contents-search-conditions .list-d-switching ul li.active{background: #B6E1F5;}
.staff-contents-search-conditions .list-d-switching ul li.active span{color: #fff;}

/* 拡大 コーディネート一覧、ブログ */
.coordinate-list.coordinate-list-large .coordinate-item-mobile,
.article-list.article-list-large .article-item-mobile{
	width: 100%;
	margin-right: 0;
}

.coordinate-list.coordinate-list-large .coordinate-item-mobile:nth-child(2n),
.article-list.article-list-large .article-item-mobile:nth-child(2n){margin-right: 0;}

.article-list.article-list-large .article-item--description{justify-content: flex-start;}

/*===========================================================================
						モーダル
===========================================================================*/
.page-contentspages .staff-contents-block-left-menu-frame-next {
    position: fixed;
    top: 0;
	left: 100%;
    bottom: 0;
    background-color: #ddd;
    width: 100%;
    padding: 15px;
    animation-duration: 0.6s;
    overflow: scroll;
    margin: 0 20px 0 0;
    z-index: 11000;
    /* display: none; */
    transition: .3s;
}

.page-contentspages .staff-contents-block-left-menu-frame-next.is-active {
	/* display: block; */
	left: 0;
}

.page-contentspages .staff-contents-block-left-menu-frame-next .staff-contents-modal-head{position: relative;}
.page-contentspages .staff-contents-block-left-menu-frame-next .staff-contents-modal-head--button-prev{
	position: absolute;
    top: 10px;
}

.page-contentspages .staff-contents-block-left-menu-frame-next .staff-contents-modal-head--button-prev span{
	position: relative;
	font-size: 14px;
	font-weight: bold;
	padding-left: 22px;
}

.page-contentspages .staff-contents-block-left-menu-frame-next .staff-contents-modal-head--button-prev span:after{
	position: absolute;
	top: 4px;
	left: 8px;
	content: "";
	width: 7px;
	height: 12.5px;
	background: url("../img/arrow.png") no-repeat left center;
	background-size: 7px 12.5px;
}

.page-contentspages .staff-contents-block-left-menu-frame-next .staff-contents-menubox > div .label-mobile{
    padding: 1.5em 8px;	
}

/* ボタン */
.page-contentspages .staff-contents-block-left-menu-frame #block_of_filter .submit_ .reset_,
.page-contentspages .staff-contents-block-left-menu-frame #block_of_filter .submit_ .filter-button,
.page-contentspages .staff-contents-block-left-menu-frame-next #block_of_filter .submit_ .reset_,
.page-contentspages .staff-contents-block-left-menu-frame-next #block_of_filter .submit_ .filter-button,
.page-contentspages .staff-contents-block-left-menu-frame #block_of_filter_next .submit_ .reset_,
.page-contentspages .staff-contents-block-left-menu-frame #block_of_filter_next .submit_ .filter-button,
.page-contentspages .staff-contents-block-left-menu-frame-next #block_of_filter_next .submit_ .reset_,
.page-contentspages .staff-contents-block-left-menu-frame-next #block_of_filter_next .submit_ .filter-button{
	width: 47.5%;
}

.page-contentspages #block_of_filter,
.page-contentspages #block_of_filter_next{
	position: static;
	background: transparent;
}

.page-contentspages #block_of_filter_next .submit_{
	text-align: center;
}

.page-contentspages .staff-contents-menubox .search-condition-shop-link{
	cursor: pointer;
	position: relative;
	padding: 1.5em 0;
    border-bottom: 1px solid #eee;
	font-size: 14px;
}

.page-contentspages .staff-contents-menubox .search-condition-shop-link:after{
	position: absolute;
	content: "";
	right: 10px;
	top: 50%;
	margin: -6.5px 0 0 0;
	width: 7.5px;
	height: 13px;
	font-size: 14px;
	background: url("../img/link_arrow.png") no-repeat;
	background-size: 7.5px 13px;
}

.page-contentspages #block_of_filter input[type="submit"],
.page-contentspages #block_of_filter input[type="button"],
.page-contentspages #block_of_filter button,
.page-contentspages #block_of_filter_next input[type="submit"],
.page-contentspages #block_of_filter_next input[type="button"],
.page-contentspages #block_of_filter_next button{-webkit-appearance: none;}

.page-contentspages #block_of_filter_next {
    padding: 15px 1%;
    width: 100%;
    height: 72px;
}

#block_of_filter_next .submit_ .reset_,
#block_of_filter_next .submit_ .filter-button {
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.0;
    display: inline-block;
    letter-spacing: 0;
    width: 46%;
    border: 0;
    padding: 14px 0;
    background: none;
    text-align: center;
    border-radius: 50px;
}

#block_of_filter_next .submit_ .filter-button {
    color: #ffffff;
    background-color: #3C3C3C;
	border: 1px solid #3C3C3C;	
}

#block_of_filter_next .submit_ .reset_ {
    background-color: #fff;
	border: 1px solid #000;	
}