/*
Theme Name: custom_ww
Author: socueus
Description: WEST WELL BLOG
Text Domain: socueus
*/

/*---------------------------------------------------------------------------------------------
　WordPress twentyeleven default CSS
---------------------------------------------------------------------------------------------*/
/* =Images
-------------------------------------------------------------- */
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
  max-width: 100%;
  height: auto;
}

.alignleft,
img.alignleft {
  display: inline;
  float: left;
  margin: 0 20px 10px 0;
  padding: 0;
}

.alignright,
img.alignright {
  display: inline;
  float: right;
  margin: 0 0 10px 20px;
  padding: 0;
}

.aligncenter,
img.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 40px auto;
  text-align: center;
}
.aligncenter + p,
.aligncenter + h4{
	margin-top: 40px;
}

.wp-caption {
  max-width: 632px !important;
  text-align: center;
}

.wp-caption img {
  margin: 0;
  padding: 0;
}

.wp-caption p.wp-caption-text {
  margin: 0 5px;
  padding: 0;
  font-size: 90%;
  color: #555;
}

.wp-smiley {
  margin: 0;
}

/*---------------------------------------------------------------------------------------------
　Socueus originall CSS
---------------------------------------------------------------------------------------------*/
body{
	overflow-x: hidden;
}
h3{
	text-align: center;
	margin-bottom: 25px;
}
h4,
h5{
	margin-bottom: 10px;
	line-height: 2.0;
	padding-left: 0;
}
#collaboratin h4,
#interview h4,
#collaboratin h5,
#interview h5{
	font-size: 1.4rem;
	font-weight: 600;
}
#collaboratin h4:before,
#interview h4:before{
	content: '―'; 
}
.fs-c-breadcrumb{
	margin-bottom: 20px;
}
.time{
	font-size: 1.2rem;
	color: #717171;
}
.thum{
	position: relative;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	z-index: 1;
}
.cblock.hv{
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
}
.cblock.hv{
	position: relative;
	top: -160px;
	padding: 75px 0 0 0;
	z-index: 2;
}
.cblock.hv .aligncenter{
	width: calc(100% + 100px);
	margin: 0 -50px;
}
.excerpt{
	padding: 0 190px;
}
.aligncenter .caption,
.center .caption{
	margin-top: 10px;
	text-align: center;
}
.center.flex img{
	max-width: 49%;
}
iframe{
	max-width: 100%;
}

/* #blogmenu */
#blogmenu{
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
}
#blogmenu ul{
	justify-content: center;
}
#blogmenu a{
	margin: 0 15px;
	color: #005725;
	text-decoration: underline;
}

/* .article_wrap */
#list h3{
	text-align: left;
}
.thum_s{
	margin: 0 0 33px 0;
}
.news_wrap section + section{
	padding-top: 40px;
	border-top: #CBCBCB solid 1px;
}

.article_wrap{
	position: relative;
}
.article_wrap:before,
.article_wrap:after{
	content: ''; 
	display: block; 
	width: calc( 100% / 5 - 16px);
}
.article_wrap:before{
	order: 1;
}
.article_wrap h3{
	margin-bottom: 15px;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.86;
	text-align: left;
}
.article{
	width: calc( 100% / 5 - 16px);
}
.article.empty{
	width: calc( 100% / 5 - 16px);
	padding: 0;
	height: 0;
}  
.article_cat{
	list-style-type: none;
}
.square_image {
	display: block;
	position: relative;
	max-width: 100%;
}
.square_image::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.square_image img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: cover;
}

/* .prof */
.prof{
	padding: 40px;
	font-size: 1.2rem;
	border: #CBCBCB solid 2px;
}
.prof h6{
	font-size: 1.6rem;
	color: #005726;
}
.prof p:last-of-type{
	margin-bottom: 0;
}
.prof .sns img{
	padding-right: 10px;
}

/* width */
.flexcenter{
	justify-content: center;
}
.w33{
	max-width: 33.3%;
}

/*---------------------------------------
　searchform.php
---------------------------------------*/
.searchform {
  margin: 0;
  padding: 0;
  border: #ccc solid 1px;
  border-radius: 5px;
}

.searchform input {
  float: left;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 10px;
  font-size: 1.8rem;
  border: 0;
  box-sizing: border-box;
}

.searchform input[type="text"] {
  width: calc(100% - 50px);
  margin: 0;
  border-radius: 5px 0 0 5px;
}

.searchform input:focus[type="text"] {
  background: #ffc;
}

.searchform input[type="submit"] {
  width: 50px;
  border-radius: 0 5px 5px 0;
  border-left: #ccc solid 1px;
  background: #fff url(../../../img/ico_search.svg) 50% 50% no-repeat;
  cursor: pointer;
}

.searchform input:hover[type="submit"] {
  background: #9c8253 url(../../../img/ico_search_on.svg) 50% 50% no-repeat;
}

/*------------------------------ Plugin ------------------------------*/
/*---------------------------------------
 .wp-pagenavi
---------------------------------------*/
.wp-pagenavi {
  margin: 40px auto;
  padding: 0;
  text-align: center;
  clear: both;
}

.wp-pagenavi .pages,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .current,
.wp-pagenavi a {
  margin: 0 2px;
  padding: 3px 10px;
  font-size: 1.3rem;
  text-decoration: none;
  border: #005725 solid 1px;
}

.wp-pagenavi .current,
.wp-pagenavi a:hover {
  background: #005725;
  color: #fff;
}

.wp-pagenavi .current {
  font-weight: bold;
}


/*------------------------------ tablet & sphone setting ------------------------------*/
/*------------------------------ 800px ------------------------------*/
@media screen and (max-width: 800px) {

	#snav{
		align-items: center;
	}
	.cblock.hv{
		max-width: 90%;
		top: -80px;
		padding-top: 40px;
	}
	.cblock.hv .aligncenter{
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.excerpt{
		padding: 0 30px;
	}

	/* #blogmenu */
	#blogmenu ul{
		flex-wrap: wrap;
	}

	/* .article_wrap */
	.thum_s{
		margin-bottom: 20px;
	}
	.article_wrap:before,
	.article_wrap:after{
		content: ''; 
		display: block; 
		width: calc( 100% / 2 - 16px);
	}
	.article_wrap h3{
		margin-bottom: 0;
	}
	.article{
		width: calc( 100% / 2 - 16px);
	}
	.article.empty{
		width: calc( 100% / 2 - 16px);
	}
	.article_wrap .article:nth-of-type(n + 3) {
		 display: block;
	}

}


/*------------------------------ sphone setting ------------------------------*/
/*------------------------------ 640px ------------------------------*/
@media screen and (max-width: 640px) {

	h3{
		font-size: 1.8rem;
	}

}