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

appraisersearch.css

------------------------------------------------------------ */

/* ------------------------------------------------------------
 searchTable
------------------------------------------------------------ */

.searchTable {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
	width:100%;
	max-width:800px;
	margin:0 auto;
	border:1px solid #dddddd;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
}
.searchTable dt {
	color:#ffffff;
	background:#909090;
}
.searchTable dt:nth-child(1),
.searchTable dd:nth-child(2) {
	border-top:none;
}
.searchTable dd.w100 {
	width:100%;
	background:#eeeeee;
}

@media screen and (max-width: 559px){
	.searchTable dt {
		width:100%;
		padding:10px 20px;
		text-align:center;
	}
	.searchTable dd {
		width:100%;
		padding:20px;
	}
}
@media screen and (min-width: 560px){
	.searchTable dt {
		width:180px;
		padding:15px 20px;
		border-top:1px solid #dddddd;
		border-right:1px solid #dddddd;
	}
	.searchTable dd {
		width: calc(100% - 180px);
		padding:15px 20px;
		border-top:1px solid #dddddd;
	}
}

/* ------------------------------------------------------------
 searchBox
------------------------------------------------------------ */
#searchBox {
	width:100%;
	padding:20px 20px;
	/*display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;*/
}
#searchBox .typeSearchSelect{
	width:100%;
	text-align:right;
}
#searchBox .typeSearchSelect select{
	/* デフォルトクリア */
	outline:none;
	text-overflow: '';
	/* width: 30%;*/
	vertical-align: middle;
	line-height: 1;
	padding:15px 40px 15px 10px;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #B3C8CB;
	position: relative;
	cursor: pointer;
	box-shadow: 5px 5px 20px -15px rgb(0, 0, 0, 0.03);
	display: inline-block;
}
#searchBox .typeSearchSelect label{
	position: relative;
}
#searchBox .typeSearchSelect label::before{
	display: block;
	content: '';
	width: 1px;
	height: 36px;
	background: #cccccc;
	margin-top: -17px;
	position: absolute;
	top: 50%;
	right: 28px;
	z-index: 3;
}
#searchBox .typeSearchSelect label:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(45deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 13px;
}
.typeSelect .after-label{
	vertical-align: middle;
	font-size: 12px;
}
#searchBox .searchBtn {
	/*display:block;*/
	/*display:inline-block;*/
	/*width:20%;*/
	height:50px;
	padding:15px 0;
	font-size:2.8rem;
	line-height:24px;
	text-align:center;
	text-decoration:none;
	border-radius:24px;
	background-repeat:no-repeat;
	background-color:#ffffff;
	transition:all 0.5s ease;
	box-shadow: 0 0 1px 0px rgba(0,0,0,0.2);
	cursor:pointer;
}

@media screen and (max-width: 767px){
	#searchBox .typeSearchSelect select {
		width: 100%;
		margin-bottom: 10px;
	}
	#searchBox .searchBtn {
		display:block;
		width:100%;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 768px){
	#searchBox .typeSearchSelect select {
		width: 30%;
	}
	#searchBox .searchBtn {
		display:inline-block;
		width:20%;
	}
}


/* ------------------------------------------------------------
 result
------------------------------------------------------------ */

#result .inner{
	padding-left:0;
	padding-right:0;
}
#result .leadtxt{
	margin-top:5px;
	padding-left:5%;
	padding-right:5%;
}
.resultList {
	margin:0 auto 20px;
	position:relative;
	overflow:hidden;
	line-height:1.2;
}
.resultList.c5 {
	max-width:1000px;
}

.resultList .box {
	padding:15px;
	float:left;
	position:relative;
}
.resultList .box .profilePhoto{
	width:100%;
	max-width:240px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.resultList .box .profilePhoto img{
	border-radius:120px;
	overflow:hidden;
}
.resultList .box .name{
	padding:10px 0 0;
	text-align:center;
	font-size:1.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.resultList .box .name span{
	padding:15px 0;
	font-size:2.2rem;
	text-align:center;
	letter-spacing:0.1em;
	text-indent:0.1em;
}
.resultList .box .price {
	padding:5px 0 15px;
	text-align:center;
	font-size:1.4rem;
}
.resultList .box .price span{
	font-size:2.2rem;
	letter-spacing:0;
	text-indent:0;
}

.resultList .box .btn{
	padding-left:14px;
}

.resultList .icon_status{
	width:50px;
	height:50px;
    line-height:53px;
    padding-left:1px;
}


.box.rank .profilePhoto::before {
	content: "";
	display: block;
	width: 110px;
	height: 26px;
	margin:0 auto;
	color:#fff;
	font-size:1.6rem;
	line-height:26px;
	letter-spacing:0.2em;
	text-indent:0.2em;
	text-align:center;
	font-family: 'Sawarabi Mincho', sans-serif;
	background:linear-gradient(#961d8c,#720069);
	background:-moz-linear-gradient(#961d8c,#720069);
	background:-webkit-linear-gradient(#961d8c,#720069);
	border-radius:13px;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index:6;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
}
.box.rank1 .profilePhoto::before {
	content: "1位";
	background:linear-gradient(#cdbb7c,#b99f46);
	background:-moz-linear-gradient(#cdbb7c,#b99f46);
	background:-webkit-linear-gradient(#cdbb7c,#b99f46);
}
.box.rank2 .profilePhoto::before {
	content: "2位";
	background:linear-gradient(#b9b9b9,#9b9b9b);
	background:-moz-linear-gradient(#b9b9b9,#9b9b9b);
	background:-webkit-linear-gradient(#b9b9b9,#9b9b9b);
}
.box.rank3 .profilePhoto::before {
	content: "3位";
	background:linear-gradient(#bf9f7b,#a57744);
	background:-moz-linear-gradient(#bf9f7b,#a57744);
	background:-webkit-linear-gradient(#bf9f7b,#a57744);
}

@media screen and (max-width: 719px){

	.btnnext {
		color:#4f3aa9;
		background-color:#ffffff;
		border:2px solid #4f3aa9;
		background-position:15px 50%;
		background-size:18px auto;
	}
	
	.resultList {
		margin:0 auto 20px;
		position:relative;
		overflow:hidden;
		line-height:1.5;
	}
	
	.resultList.c5 .box {
		width:31%;
		margin:0 1%;
		float:left;
		padding:10px 0 20px;
		height:280px;
	}

	.resultList.c5 .box .txt {
		display:none;
	}
	
	.resultList .box .name {
		padding:0;
		margin-top: 3px;
	}
	
	.resultList .box .name span {
	    padding:0;
	    font-size: 1.8rem;
	}	
	
	.resultList .box .profilePhoto{
		width:120px;
		height:120px;
	}

	.resultList .box .price{
		padding:0;
		margin-bottom: 8px;
	}
	
	.resultList .box .price span{
		font-size:1.4rem;
	}
	
	#result .btn1,
	#ranking .btn1{
		font-size: 1.8rem;
	}
	
	
	#result .icon_status,
	#ranking .icon_status{
		width:50px;
		height:50px;
	}
	
	#result.icon_status:after,
	#ranking .icon_status:after{
		top:-4px;
	}

}
@media screen and (min-width: 720px){
	
	.btnnext {
		color:#4f3aa9;
		background-image:url(/common/img/arrow_b.png);
		background-color:#ffffff;
		border:2px solid #4f3aa9;
		background-position:15px 50%;
		background-size:18px auto;
	}

	.resultList.c5 .box {
		width:31.33%;
		margin:0 0.5%;
		height:400px;
	}
}
@media screen and (min-width: 960px){

	.resultList.c5 .box {
		width:18%;
		margin:0 1%;
		height:400px;
	}
}





/* ------------------------------------------------------------
 resultList
------------------------------------------------------------ */
#resultList2 .box {
	margin-bottom:60px;
	position:relative;
	border: 3px solid #4d1669;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
}
#resultList2 .box .nameArea {
	padding-bottom:25px;
	border-bottom:2px solid #4d1669;
}
#resultList2 .box .name {
	line-height:1.5;
	letter-spacing:0.15em;
	display:inline-block;
}
#resultList2 .box .name span {
	font-size:3.2rem;
}
#resultList2 .box .price {
	padding:0 1em;
	font-size:1.4rem;
	line-height:1.6;
	display:inline-block;
	border:1px solid #dddddd;
	border-radius:5px;
	background:#ffffff;
}
#resultList2 .box .price .number{
	font-size:2.0rem;
	letter-spacing:0;
}
#resultList2 .box .profileTxt {
	margin:25px 0;
}
#resultList2 .box .profileTxt p {
	margin-top:1em;
}

@media screen and (max-width: 767px){
	#resultList2 .box {
		padding:185px 25px 25px;
	}
	#resultList2 .box {
		border-radius:8px;
	}
	#resultList2 .box .name {
		width:100%;
		text-align:center;
	}
	#resultList2 .box .price {
		display:block;
		width:200px;
		margin:5px auto;
		text-align:center;
	}
	#resultList2 .box .profileBtn {
		margin-top:20px;
	}
}
@media screen and (min-width: 768px){
	#resultList2 .box {
		padding:35px;
		border-radius:100px 8px 8px 8px;
	}
	#resultList2 .box .name {
		padding-left:200px;
	}
	#resultList2 .box .profileTxt {
		min-height:100px;
		padding-left:200px;
	}
	#resultList2 .box .price {
		margin-left:20px;
	}
	#resultList2 .box .profileBtn {
		margin-top:30px;
	}
}


/* ------------------------------------------------------------
 profilePhoto
------------------------------------------------------------ */

#resultList2 .profilePhoto {
	position:absolute;
	z-index:5;
}

#resultList2 .profilePhoto img {
	width:100%;
	height:100%;
	border-radius:100%;
	overflow:hidden;
	border:10px solid #4b1486;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.2);
}
#resultList2 .profilePhoto .price {
	width:140px;
	margin:0 auto;
	font-size:1.4rem;
	line-height:1.6;
	text-align:center;
	color:#ffffff;
	background:#666666;
	border-radius:3px;
	position:absolute;
	bottom:10px;
	left:0;
	right:0;
}
#resultList2 .profilePhoto .price .number{
	font-size:2.0rem;
	letter-spacing:0;
}

@media screen and (max-width: 767px){
	#resultList2 .profilePhoto {
		width:200px;
		height:200px;
		margin:0 auto;
		top:-30px;
		left:0;
		right:0;
	}
}
@media screen and (min-width: 768px){
	#resultList2 .profilePhoto {
		width:220px;
		height:220px;
		top:-20px;
		left:-20px;
	}
}


/* ------------------------------------------------------------
 genre
------------------------------------------------------------ */

.genreArea {
	display:table;
	width:100%;
	margin-top:20px;
}
.genreArea dt {
	text-align:center;
	vertical-align:middle;
	background:#d8d8d8;
}
.genreArea dd {
	padding:5px 15px;
	border:1px solid #d8d8d8;
	background:#ffffff;
}
.genreList {
	width:100%;
}
.genreList li {
	display:inline-block;
	margin:5px ;
	padding:5px 1em;
	font-size:1.4rem;
	line-height:1.5;
	letter-spacing:0.1em;
	color:#ffffff;
	text-align:center;
	background:#581477;
	border-radius:5px;
}
@media screen and (max-width: 767px){
	.genreArea dt {
		display:dlock;
		width:100%;
	}
	.genreArea dd {
		display:dlock;
		width:100%;
		padding:5px 15px;
		text-align:center;
	}
	.genreList li {
		font-size:1.6rem;
	}
}
@media screen and (min-width: 768px){
	.genreArea dt {
		display:table-cell;
		width:150px;
	}
	.genreArea dd {
		display:table-cell;
		width: calc(100% - 150px);
		padding:5px 15px;
	}
	.genreList li {
		font-size:1.6rem;
	}
}



/* ------------------------------------------------------------
 ranking
------------------------------------------------------------ */
.box.rank1,
.box.rank1 .profilePhoto img,
.box.rank1 .nameArea {
	border-color:#d5c499!important;
}
.box.rank2,
.box.rank2 .profilePhoto img,
.box.rank2 .nameArea {
	border-color:#c8c6c5!important;
}
.box.rank3,
.box.rank3 .profilePhoto img,
.box.rank3 .nameArea {
	border-color:#c5ac99!important;
}

.rank1 .profilePhoto::after,
.rank2 .profilePhoto::after,
.rank3 .profilePhoto::after{
	content: "";
	display: block;
	width: 60px;
	height: 40px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	z-index:6;
}
.box.rank1 .profilePhoto::after {
	background-image:url(/common/img/icon_ranking01.png);
}
.box.rank2 .profilePhoto::after {
	background-image:url(/common/img/icon_ranking02.png);
}
.box.rank3 .profilePhoto::after {
	background-image:url(/common/img/icon_ranking03.png);
}

.box.rank .profilePhoto::before {
	content: "";
	display: block;
	width: 110px;
	height: 26px;
	margin:0 auto;
	color:#fff;
	font-size:1.6rem;
	line-height:26px;
	letter-spacing:0.2em;
	text-indent:0.2em;
	text-align:center;
	font-family: 'Sawarabi Mincho', sans-serif;
	background:linear-gradient(#961d8c,#720069);
	background:-moz-linear-gradient(#961d8c,#720069);
	background:-webkit-linear-gradient(#961d8c,#720069);
	border-radius:13px;
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	z-index:6;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
}
.box.rank1 .profilePhoto::before {
	content: "1位";
	background:linear-gradient(#cdbb7c,#b99f46);
	background:-moz-linear-gradient(#cdbb7c,#b99f46);
	background:-webkit-linear-gradient(#cdbb7c,#b99f46);
}
.box.rank2 .profilePhoto::before {
	content: "2位";
	background:linear-gradient(#b9b9b9,#9b9b9b);
	background:-moz-linear-gradient(#b9b9b9,#9b9b9b);
	background:-webkit-linear-gradient(#b9b9b9,#9b9b9b);
}
.box.rank3 .profilePhoto::before {
	content: "3位";
	background:linear-gradient(#bf9f7b,#a57744);
	background:-moz-linear-gradient(#bf9f7b,#a57744);
	background:-webkit-linear-gradient(#bf9f7b,#a57744);
}
.box.rank4 .profilePhoto::before {
	content: "4位";
}
.box.rank5 .profilePhoto::before {
	content: "5位";
}

/* ------------------------------------------------------------
 form reset
------------------------------------------------------------ */
button,
input,
select,
textarea {
	outline: none;
	box-sizing: border-box;
	background-color: transparent;
	border-style: none;
	color: inherit;
}
select {
	-moz-appearance: none; /* Firefox 36+ */
	-webkit-appearance: none; /* Chrome 41+ */
}
select::-ms-expand {
	display: none; /* Internet Explorer 11+ */
}
select::-ms-value {
	color: currentColor; /* Internet Explorer 11+ */
}



/* ------------------------------------------------------------
 edit
------------------------------------------------------------ */

.fileBtn {
	display:block;
	width:200px;
	margin-top:10px;
	padding: 5px;
	font-size:1em;
	line-height:1.5;
	color: #111111;
	text-align:center;
	background-color: #dddddd;
	border-radius:5px;
	border:1px solid #cccccc;
	cursor: pointer;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
}
.fileBtn input {
	display:none;
}

textarea {
	width:100%;
	padding:12px;
	border: 1px solid #c5c5c5;
	background:#ffffff;
	border-radius:5px;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2) inset;
	font-size:1em;
}
textarea:focus{
    box-shadow: 0 0 7px #eeeeee;
    border: 1px solid #666666;
}

.inputTxt {
	width:100%;
	max-width:510px;
	margin:0;
	padding:12px;
	border: 1px solid #c5c5c5;
	border-radius:5px;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2) inset;
	font-size:1em;
}

.select {
	margin:0;
	padding:0;
	overflow:hidden;
}
.select li {
	width:100%;
	margin:0;
	padding:0;
}
.select.c5 li {
	width:33.33%;
	max-width:150px;
	float:left;
}
.select li label{
	display:inline-block;
	padding-left:1.75em;
	position:relative;
}
.select label input {
	display:block;
	float: left;
	width: 1.5em;
	height: 1.5em;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
	margin:0.4em 8px 0 0;
	padding:0;
	overflow: hidden;
	position:absolute;
	top:0;
	left:0;
}


.typeSelect{
	display:inline-block;
}
.typeSelect select{
	outline:none;
	text-overflow: '';
	width: 100%;
	vertical-align: middle;
	line-height: 1;
	padding:10px 30px 10px 10px;
	border-radius: 5px;
	font-size: 1em;
	background-color: #fff;
	border: 1px solid #cccccc;
	position: relative;
	cursor: pointer;
	box-shadow: 5px 5px 20px -15px rgb(0, 0, 0, 0.03);
	display: inline-block;
}
.typeSelect select.short{
	margin-right:5px;
}
.typeSelect select:focus{
    box-shadow: 0 0 7px #eeeeee;
    border: 1px solid #666666;
}
.typeSelect select::-ms-expand {
	display: none;
}
.typeSelect label{
	position: relative;
}
.typeSelect label::before{
	display: block;
	content: '';
	width: 1px;
	height: 36px;
	background: #cccccc;
	margin-top: -17px;
	position: absolute;
	top: 50%;
	right: 28px;
	z-index: 3;
}
.typeSelect label:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(45deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 13px;
}
.typeSelect .after-label{
	vertical-align: middle;
	font-size: 12px;
}


@media screen and (max-width: 767px){
	.typeSelect select.short{
		width: 85px;
	}
}
@media screen and (min-width: 768px){
	.typeSelect select.short{
		width: 100px;
	}
}
@media screen and (min-width: 960px){
	.typeSelect label::before{
		right: 35px;
	}
	.typeSelect label:after {
		right: 15px;
	}
}

/* ------------------------------------------------------------
 pageChange
------------------------------------------------------------ */
.pageChange {
	max-width:900px;
	margin:10px auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.pageChange .prevBtn,
.pageChange .nextBtn{
	width:100px;
	padding:3px 0;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	background:#ffffff;
	border:1px solid #bbbbbb;
	border-radius:5px;
	box-shadow: 0 0 1px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	transition:all 0.5s ease;
	position:relative;
}
.pageChange .prevBtnNotPush,
.pageChange .nextBtnNotPush {
	width:100px;
	padding:3px 0;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	background:#f5f5f5;
	border:1px solid #bbbbbb;
	border-radius:5px;
	box-shadow: 0 0 1px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	transition:all 0.5s ease;
	position:relative;
}
.pageChange .prevBtn:hover,
.pageChange .nextBtn:hover{
	opacity:0.6;
}
.pageChange .prevBtn:after,
.pageChange .prevBtnNotPush:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(135deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 10px;
}
.pageChange .nextBtn:after,
.pageChange .nextBtnNotPush:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(-45deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 10px;
}
.pageChange .pagetxt {
	padding:3px 0;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	position:relative;
}
@media screen and (min-width: 767px){
	.pageChange .prevBtn,
	.pageChange .nextBtn{
		width:120px;
		font-size:1.4rem;
	}
	.pageChange .pagetxt {
		font-size:1.4rem;
	}
}