/*
Theme Name: share-third
Author: Share
Author URI: http://www.share-ts.co.jp/
Description: 株式会社シェア サード
Version: 12
Text Domain: shrae-third
*/

/*　お問い合わせ：郵便番号　*/
.post-deco {
    background: #f3f3f3;
    padding: 10px;
    margin-bottom: 15px;
	color:#333333;
}

/*　タップ・ロールオーバーで拡大　*/
a.touch-hover  {
	display:block;
    width: 100%;	
    height: auto;
	overflow:hidden;
}
a.touch-hover img {
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;	
}

a.touch-hover.hover img {
	-webkit-transform: scale(1.1);
	 transform: scale(1.1);
}

@media screen and (min-width: 768px){
a.touch-hover:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
}

/* ブログ目次 */
.page-template-page-blog-php .cat-links {margin-bottom:10px;}
.page-template-page-blog-php .fa.fa-1 {margin-right:10px;}

.switch-contents {text-align: right;}

input[name="layout"] { display: none;}

.switch-contents label {
  display: inline-block;
  margin: 0 0 0 1em;
  cursor: pointer;
}

.switch-contents label:hover {
  border-bottom: 2px solid #000;
}
input[name="layout"]:checked + label {
  border-bottom: 2px solid #999999;
  cursor: default;
}

.switch-contents ul { text-align: left;}

.post-list {
    margin-top: 20px;
}

#next {
    background: #eeeeee;
    padding:2px;
}

img#loading {
    margin: 0 auto;
}	

/* シングル・カラム共通詳細　*/
.blog-title a {	text-decoration:none;}

.blog-thumnail img {
	object-fit: cover;
	width:100%;
	height:100%;
	vertical-align:bottom;
}
.object-fit-img {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

#layout-single:checked ~ ul > li,
#layout-column:checked ~ ul > li {position:relative;}
#layout-single:checked ~ ul > li:before,
#layout-column:checked ~ ul > li:before {
	content:'';
	display:block;
	width:100%;
	height:20px;
	background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	position:absolute;
	bottom:0;
}

.date-box {
	display:inline;
	font-size:90%;
	color:#999999;
}

.post-categories {overflow: hidden;}
.post-categories li {
	float:left;
	background-color:#999999;
	padding:0 10px;
	font-size: 80%;
	margin:0 5px 5px 0;
}

.post-categories li a {
	text-decoration:none;
	color:#ffffff;
	
}

.excerpt-content {color:#333333;}
	 
/* シングル表示　*/
#layout-single:checked ~ ul > li {
  display:flex;
  border-bottom:1px dotted #acacac;
  padding:20px 20px 1px;
  max-height:180px;
  overflow:hidden;
  background:#ffffff;
}

#layout-single:checked ~ ul li .blog-thumnail {
	width:31%;
	height:140px;
	margin-right:2%;
}

#layout-single:checked ~ ul li > div {
	width:69%;
}
#layout-single:checked ~ ul li > div + p {margin:0;}


/* カラム表示　*/
#layout-column:checked ~ ul {
  display: flex;
  flex-wrap: wrap;
}
#layout-column:checked ~ ul > li {
  width: calc(33.1% - 0.7em);
  margin-top: 2em;
  margin-right:1em;
  border:1px solid #cccccc;
  max-height: 380px;
  overflow: hidden;
  box-sizing:initial;
  background:#ffffff;
}
#layout-column:checked ~ ul > li:nth-child(3n) {margin-right:0;}

#layout-column:checked ~ ul li .blog-thumnail {
	width:100%;
	height:150px;
}
#layout-column:checked ~ ul li > div {padding:0 10px;}
	
@media screen and (max-width:767px){
.switch-contents label {display:none;}

#layout-single:checked ~ ul > li {
  display:inline-block;
  width:100%;
  margin-top: 2em;
  margin-right:1em;
  border:1px solid #cccccc;
  max-height: 380px;
  overflow: hidden;
  box-sizing:initial;
  padding:0;
}
#layout-single:checked ~ ul li .blog-thumnail {
	width:100%;
	height:150px;
	margin-right:0;
}

#layout-single:checked ~ ul li > div {
	width:auto;
	padding:0 10px;
}

}