/* common */
.ttpost-wrap{

}

.ttpost-wrap a:hover{
  opacity: 0.8;
}

.ttpost-wrap h2{
  margin:0px 0px 0.2em 0px;
  font-weight: normal;
}

.ttpost-wrap h2 a{
  font-size:18px;
  text-decoration: none;
  cursor: pointer;
}

.ttpost-wrap h2 a:hover{
  opacity: 0.8;
}

.ttpost-wrap p{
  margin:0px 0px 0.5em 0px;
  font-size:14px;
}

.ttpost-wrap .ttPost {
  margin:0px 0px 30px 0px;
  padding:0px 0px 0px 0px;
}

.ttpost-wrap .ttPost ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  overflow: hidden;
}

.ttpost-wrap .ttPost ul li{
  display: inline-block;
  margin:0px 1em 0px 0px;
  padding:0px 0px 0px 0px;
  list-style: none;
  float: left;
  font-size:12px;
  color:#aaa;
}

.ttpost-wrap .ttPost img{
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* type1 */
.ttpost-wrap .ttPostType1{
  width: 100%;
  overflow: hidden;
}

.ttpost-wrap .ttPostType1 .left{
  width: 40%;
  float: left;
  height: 200px;
}


.ttpost-wrap .ttPostType1 .left a{
  display: block;
  width: 100%;
  overflow: hidden;
}

.ttpost-wrap .ttPostType1 .left img{
  width: 100%;
  float: left;
  height: 200px;
  object-fit: cover;
}



.ttpost-wrap .ttPostType1 .right{
  width: 58%;
  float: right;
  height: auto;
}


/* type2 */
.ttpost-wrap .ttPostType2Wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ttpost-wrap .ttPostType2Wrap .ttPostType2{
  width: 50%;
  margin:0px 0px 20px 0px;
  padding:5px 5px 5px 5px;
  box-sizing:border-box;
}

.ttpost-wrap .ttPostType2Wrap .ttPostType2 .img{
  width: 100%;
  margin:0px 0px 7px 0px;
}

.ttpost-wrap .ttPostType2 .img a{
  width: 100%;
  overflow: hidden;
}

.ttpost-wrap .ttPostType2 .img img{
  width: 100%;
  float: left;
  height: 200px;
  object-fit: cover;
}


.ttpost-wrap .ttPostType2Wrap .ttPostType2 .text{
  padding:5px 5px 5px 5px;
}

/* type3 */
.ttpost-wrap .ttPostType3{
  overflow: hidden;
  clear: both;
  margin:0px 0px 0.5em 0px;
}

.ttpost-wrap .ttPostType3 span{
  display: inline-block;
  margin:0px 1em 0px 0px;
  font-size:14px;
}

.ttpost-wrap .ttPostType3 h2{
  display: inline-block;
}

.ttpost-wrap .ttPostType3 h2 a{
  font-size:14px;
}

/* type1 */
.ttpost-wrap .ttPostType4{
  width: 100%;
  overflow: hidden;
}

.ttpost-wrap .ttPostType4 .left{
  width: 40%;
  float: left;
  height: 200px;
}


.ttpost-wrap .ttPostType4 .left a{
  width: 100%;
  overflow: hidden;
}

.ttpost-wrap .ttPostType4 .left img{
  width: 100%;
  float: left;
  height: 200px;
  object-fit: cover;
}

.ttpost-wrap .ttPostType4 .right{
  width: 55%;
  float: right;
  height: auto;
  padding:1.2em 0px 0px 0.5em;
}

/* pagination */
.ttpost-wrap .pagination{
  text-align: center;
}

.ttpost-wrap .pagination ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  overflow: hidden;
}

.ttpost-wrap .pagination ul li{
  display: inline-block;
  margin:0px 1em 0px 1em;
  padding:0px 0px 0px 0px;
}

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

@media screen and (max-width:600px){
  /* type1 */
  .ttpost-wrap .ttPostType1{
    width: 100%;
    overflow: inherit;
  }

  .ttpost-wrap .ttPostType1 .left{
    width: 100%;
    float: none;
    height: 200px;
  }

  .ttpost-wrap .ttPostType1 .right{
    width: 100%;
    float: none;
    height: auto;
  }

  /* type2 */
  .ttpost-wrap .ttPostType2Wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .ttpost-wrap .ttPostType2Wrap .ttPostType2{
    width: 100%;
    margin:0px 0px 20px 0px;
    padding:5px 5px 5px 5px;
    box-sizing:border-box;
  }

  .ttpost-wrap .ttPostType2Wrap .ttPostType2 .img{
    width: 100%;
    margin:0px 0px 7px 0px;
    height: 200px;
  }

  .ttpost-wrap .ttPostType2Wrap .ttPostType2 .text{
    padding:5px 5px 5px 5px;
  }

  /* type4 */
  .ttpost-wrap .ttPostType4{
    width: 100%;
    overflow: inherit;
  }

  .ttpost-wrap .ttPostType4 .left{
    width: 100%;
    float: none;
    height: 200px;
  }

  .ttpost-wrap .ttPostType4 .right{
    width: 100%;
    float: none;
    height: auto;
  }


}

.ttpost-wrap .monthly-divider-title{
	width: 100%;
	flex-wrap: wrap;
}

.ttpost-wrap .ttpost-type5-wrap{
	display: flex;
	flex-wrap: wrap;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost{
	width: 50%;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost .ttpost-anchor{
	width: 95%;
	margin: 0 auto;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-anchor{
	display: block;
	text-decoration: none;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-title{
	font-size: 1rem;
	color: rgb(61, 61, 61);
	width: 100%;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-content{
	font-size: 0.7rem;
	color: rgb(78, 78, 78);
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-img-wrap{
	position: relative;
	width: 100%;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-img-wrap::before{
	content: "";
	display: block;
	padding-top: 75%;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-postmeta{
	display: flex;
	flex-wrap: wrap;
	margin: 0.5rem 0 0 0;
	padding: 0 0 0 0;
}

.ttpost-wrap .ttpost-type5-wrap .ttpost-postmeta .ttpost-postmeta-list{
	list-style: none;
	font-size: 0.7rem;
	margin: 0 1rem 0 0;
	color: #666;
}

.ttpost-monthly-archive-wrap{
	display: flex;
	flex-direction: column;
	margin: 1rem 0 1rem 0;
}

.ttpost-monthly-archive-wrap .monthly-archive-title{
	font-size: 0.7em;
	color: #666;
	margin: 0 0 0.4em 0;
}

.ttpost-monthly-archive-wrap .monthly-archive-selector{
	border-radius: 3px;
	padding: 0.2em 0.6em 0.2em 0.6em;
	box-sizing: border-box;
}

@media screen and (min-width: 48em){
	.ttpost-wrap .ttpost-type5-wrap{
		flex-direction: row;

	} 
}

@media screen and (min-width: 67em){

	.ttpost-wrap .ttpost-type5-wrap .ttpost{
		width: 25%;
	}

	.ttpost-wrap .ttpost-type5-wrap .ttpost-postmeta{
		flex-direction: column;
		margin: 0 0 0 0;
	}

	.ttpost-wrap .ttpost-type5-wrap .ttpost-postmeta .ttpost-date{
		margin: 0 0 0.2em 0;
	}
}