/* ! 検索 ============================== */

.inputarea{
	padding: 25px 35px;
	border-radius: 6px;
}
.inputarea form,
.inputarea form > div{
	 display: -webkit-flex; display: flex;
	  -webkit-flex-wrap: wrap; flex-wrap: wrap;
	  -webkit-align-items: center; align-items: center;
	  -webkit-justify-content: space-between; justify-content: space-between;
}
.inputarea label{
	width: 160px;
	display: block;
}
.inputarea label + label{
	margin: 0 0 0 20px;
}

.inputarea + .white_wrap{
	margin: 40px 0 0;
	margin-top: 0;
}



@media screen and (max-width: 970px){
	.inputarea form > div{
		width: 100%;
	}
	.inputarea label{
		width: calc((100% - 20px) / 3);
		width: -webkit-calc((100% - 20px) / 3);
		margin: 0 !important;
	}
	.inputarea form > div + button{
    margin: 15px auto 0;
	}
}
@media screen and (max-width: 640px){
	.inputarea{
		border-radius: 0;
	}
	.inputarea + .google-auto-placed{
		margin: -10px auto 15px !important;
	}
}
@media screen and (max-width: 570px){
	.inputarea label{
		width: calc((100% - 20px) / 2);
		width: -webkit-calc((100% - 20px) / 2);
		margin: 5px 0 !important;
	}

}

/* ! page navi ============================== */

.btnarea{
	margin: 50px auto 0;
}
.wp-pagenavi span,
.wp-pagenavi a{
	border: solid 1px #454545;
	border-radius: 4px;
	font-weight: bold;
	color: #333;
	margin: 0 4px;
	font-size: 13px;
	background: white;
	width: 35px; height: 35px;
	display: -webkit-inline-flex; display: inline-flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.wp-pagenavi a:hover{
	background: #58AEDD;
	color: white;
	border: none;
	-webkit-box-shadow: 0px 5px 8px rgba(0,0,0,.08);
		  box-shadow: 0px 5px 8px rgba(0,0,0,.08);
}
.wp-pagenavi span.current{
	background: #58AEDD;
	color: white;
	border: none;
}
a.nextpostslink,
a.previouspostslink,
a.first,
a.last,
a.page_top{
	width: 65px;
  background: #DDDDDD;
  border-color: transparent !important;
  border: solid 2px ;
  margin: 0 5px;
  font-weight: 500;
  font-size: 12px;
}
a.page_top{
  background: #828282;
  border-color: #828282;
  color: white;
}
a.page_top.btn_{
  margin: 0 5px;
  padding: 15px 25px;
  font-size: 14px;
  width: auto;
}

a.page_top.btn_:hover{
	border: solid 2px #828282 !important;
}
span.extend {
  background: none !important;
  border: none;
  display: none;
}
@media screen and (max-width: 640px){
	span.extend{
		display: none;
	}
	.wp-pagenavi span, .wp-pagenavi a{
		margin: 4px 4px;
	}
}

@media screen and (max-width: 540px){
	a.page.smaller,
	a.larger.page{
		display: none;
	}
	.btnarea{
		margin: 30px auto 0;
		width: 100%;
	}
	.wp-pagenavi span, .wp-pagenavi a{
		margin: 0;
		position: relative;
		height: 50px;
	}
	.wp-pagenavi a:hover,.wp-pagenavi a:active{
		background: #efefef;
    border-top: solid thin #ddd;
    border-bottom: solid thin #ddd;
    -webkit-box-shadow: none;
	  box-shadow: none;
	  color: #333;
	}
	.wp-pagenavi {
		margin-top: -30px;
    padding: 0px;
    background: #efefef;
    border-top: solid thin #ddd;
    border-bottom: solid thin #ddd;
     display: -webkit-flex; display: flex;
      -webkit-flex-wrap: wrap; flex-wrap: wrap;
      -webkit-align-items: center; align-items: center;
      -webkit-justify-content: center; justify-content: center;
      margin-left: -1px;
	}
	a.nextpostslink, a.previouspostslink, a.first, a.last,
	.wp-pagenavi span.current,
	a.page_top{
		background: none;
		border-radius: 0;
		width: 20%;
		width: calc((20% + 1px));
		width: -webkit-calc((20% + 1px));
	}
	a.page_top{
		color: #333;
	}
	a.page_top.btn_{
		background: #828282;
    border-color: #828282;
    color: white;
    border-radius: 3px;
	}
	.wp-pagenavi span.current{
		color: #444;
	}
	.wp-pagenavi a:before,
	.wp-pagenavi span.current:before{
/*
		content: '';
		display: block;
		height: 100%; width: 1px;
		background: #dedede;
		left: 0; position: absolute;
		top: 50%;
		transform: translate(0,-50%);
*/
	}
	.wp-pagenavi span.current{
		background: #e8e8e8;		
	}
	a.last,
	a.first,
	.wp-pagenavi span.current,
	.wp-pagenavi a{
		border-right: solid thin #dedede !important;	
		border-left: solid thin #dedede !important;			
		margin-right: -1px;
	}
	a.last:after,
	a.first:before{
		content: '';
		display: inline-block;
		width: 8px; height: 10px;
		background: url(../img/icon_arrow_last.svg)no-repeat center;
		background-size: cover;
		margin: 0 0 0 6px;
		transform: translate(15px,1px);
		opacity: .3;
	}
	a.first:before{
		background: url(../img/icon_arrow_first.svg)no-repeat center;
		background-size: cover;
		transform: translate(-15px,1px) !important;
		top: 0;
		margin: 0 6px 0 0;
		position: inherit !important;
	}
}