/* ----------------------------------------------------------------------
 トップページ、アーカイブページ
---------------------------------------------------------------------- */

/* トップページのNEWS */
#index_news { width:1200px; height:55px; background:#fff; overflow:hidden; font-size:12px; margin:0 0 38px 0; }
#index_news .headline { width:132px; height:55px; line-height:55px; text-align:center; float:left; }
#index_news .newsticker { position: relative; overflow: hidden; width:878px; height:55px; margin:0; float:left; }
#index_news ol { margin:0; position:absolute; top:0px; }
#index_news ol li { height:55px; overflow:hidden; }
#index_news ol .date { width:90px; height:55px; line-height:55px; display:block; color:#6db8e2; float:left; }
#index_news ol .title { width:770px; height:55px; line-height:55px; display:block; float:left;  }
#index_news .link {
  text-decoration:none; width:190px; height:55px; line-height:55px; display:block; background:#bbb url(img/common/arrow_right.png) no-repeat 150px 19px; color:#fff; float:right; padding-left:35px; 
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}

/* アーカイブページの見出し */
.archive_headline { width:1160px; padding:0 20px; height:50px; line-height:50px; background:#6bb8e4; color:#fff; font-size:12px; margin:0 0 38px 0; }
#category_desc { margin:-20px 0 38px 0; }


/* 記事一覧（トップページ） */
#post_list_type1 { width:1200px; overflow:hidden; position:relative; padding-bottom:62px; }
#post_list_type1 #post_list { position:relative; margin:0 -13px 0 0; padding:0; }
#post_list_type1 #post_list > li { float:left; margin:0 13px 13px 0; width:274px; height:280px; background:#fff; position: relative; }
#post_list_type1 #post_list li .title { font-size:12px; -ms-word-wrap:break-word; word-wrap:break-word; }
#post_list_type1 #post_list li .title a { display:block; width:270px; height:60px; line-height:60px; overflow:hidden; text-align:center; padding:0 10px; text-decoration:none; }
#post_list_type1 #post_list li .title a:hover { color:#fff; background:#222; }
#post_list_type1 #post_list .image a { color:#fff; }
#post_list_type1 #post_list .excerpt a { display:block; }


/* 記事一覧（アーカイブページ） */
#post_list_type2 { width:1200px; overflow:hidden; position:relative; padding-bottom:62px; }
#post_list_type2 #post_list { position:relative; margin:0 -13px 0 0; padding:0; }
#post_list_type2 #post_list > li { float:left; margin:0 13px 13px 0; width:290px; height:386px; background:#fff; position: relative; }
#post_list_type2 #post_list > li.no_desc { height:280px; }
#post_list_type2 #post_list li .title { font-size:12px; -ms-word-wrap:break-word; word-wrap:break-word; }
#post_list_type2 #post_list li .title a { display:block; width:270px; height:60px; line-height:60px; overflow:hidden; text-align:center; padding:0 10px; text-decoration:none; }
#post_list_type2 #post_list li .title a:hover { color:#fff; background:#222; }
#post_list_type2 #post_list .excerpt { margin:0 20px; border-top:1px solid #ddd; padding:20px 0; line-height:180%; height:47px; overflow:hidden; font-size:12px; }
#post_list_type2 #post_list .excerpt a { display:block; }
#post_list_type2 #post_list .image a { color:#fff; }


/* 記事一覧の上にフェードインするエフェクト */
#post_list .article.active {
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
  opacity:1;
}
@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}


/* サムネイルをオンマウスした時のアニメーション */
#post_list li .image { position:relative; display:block; overflow:hidden; text-align:center; width:275px; height:220px; background:#000; }
#post_list li .image img {
	position:relative; display:block; max-width:none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); height:auto;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#post_list li .image:hover img {
	opacity:0.4;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#post_list li .image .desc { text-align:left; -webkit-backface-visibility:hidden; backface-visibility:hidden; position:absolute; bottom:0; left:0; width:100%; height:auto; color:#fff; }
#post_list li .image .desc::before, #post_list li .image .desc::after { pointer-events:none; }
#post_list li .image .desc.no_meta { bottom:auto; text-align:center; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#post_list li .image ul li { line-height:160%; height:20px; overflow:hidden; margin:0 0 10px 0; }
#post_list li .image ul li.date { }
#post_list li .image ul li.category { background:url(img/common/icon_category.png) no-repeat 2px 3px; padding:0 0 0 24px; }
#post_list li .image ul li.link { background:url(img/common/icon_link.png) no-repeat left 3px; padding:0 0 0 24px; }

#post_list li .image ul {
	position:relative; overflow:hidden; padding:15px 20px; opacity:0; height:80px; font-size:12px; 
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translateX(-100%); transform: translateX(-100%);
}
#post_list li .image:hover ul {
	opacity:1;
	-webkit-transform: translateX(0); transform: translateX(0);
}

#post_list li .image ul::after {
	position:absolute; bottom:0; left:0; width:100%; height:1px;
	background: #fff; background:rgba(255,255,255,0.6); 
	content:'';
	-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);
}
#post_list li .image:hover ul::after {
  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}

#post_list li .image p.excerpt {
	padding:15px 0; margin:0; line-height:160%; opacity:0; font-size:12px;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translateX(100%); transform: translateX(100%);
}
#post_list li .image:hover p.excerpt {
	opacity:1;
	-webkit-transform: translateX(0); transform: translateX(0);
}
#post_list li .image p.excerpt a { padding:0px 20px; height:40px; overflow:hidden; }


/* type2用 */
#post_list_type2 #post_list li .image ul { padding:70px 20px 0; }
#post_list_type2 #post_list li .image ul::after { display:none; }


/* ローディングボタン */
#load_post { text-align:center; padding:30px 0 0 0; height:60px; position:relative; }
#load_post a { font-size:12px; color:#fff; display:inline-block; background:#bbb url(img/common/arrow_bottom.png) no-repeat 210px 20px; text-decoration:none; height:50px; line-height:50px; width:250px; text-align:center; }
#load_post a:hover { color:#fff; background:#6bb8e4; }

#infscr-loading {
  z-index:9999; color:#fff; text-align:center; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); display:block; padding:20px 50px;
  background:rgba(0,0,0,0.8); border:1px solid #111; box-shadow:0 0 4px 0 rgba(0,0,0,0.2);
}
#infscr-loading img { display:block; margin:0 auto 8px; }


#post_list_type1 .button {
  border: 1px solid #000;
  padding: 4px 10px;
  text-align: center;
  width: 60%;
  font-size: 13px;
  margin: 0 auto;
  color: black;
  margin-top: 14px;
  transition: .5s; }
#post_list_type1 .button:hover {
    background: black;
    color: white; }