@charset "UTF-8";
/* CSS Document */




.list {
	width:835px;
	margin:0 auto;
}
.list ul {
	overflow:hidden;
	margin-right:-15px;
	margin-bottom:-25px;
	padding-bottom:30px
}
.list ul li {
	background: #1f1f1f !important;
	
	width:197px;
	float:left;
	margin-right:15px;
	margin-bottom:25px;
}
.thum-list-wrap {
	overflow:hidden;
	background:url(../img/no-photo@2x.png) no-repeat;
	height:132px !important;
	background-size:197px auto;
}
.thum-list img {
	width:197px !important;
}
.list ul .more_org {
    background: url("../img/work_more_blk@2x.png") no-repeat;
		background-position:bottom right;
		background-size:197px 33px		
}
.list ul .more_org a {    
    background: url("../img/work_more_org@2x.png") no-repeat;
    display: block;   
		background-position:bottom right;
		background-size:197px 33px
}
.list ul .more_org a:hover {
    background-image: url("../img/work_more_blk@2x.png");
		
}
.list ul li .title {
	padding:20px;
	color:#ffffff;
	min-height:45px
}
.list ul li .btarea {
	height:33px;
}
.list ul li .btarea .listday {
	width:120px;
	padding-top:5px;
	color:#d0d0d0;
	text-align:center
}

.detail .day {
	background:#000000;
	padding:5px 15px;
	color:#ffffff;
	overflow:hidden
}
.boxinner {
	border-top:2px solid #000000;
	border-bottom:2px solid #000000;
	padding:40px 0
}
#topics_body {
	width:830px;
	margin:0 auto;
	padding-left:30px;
}
.topics_photo {
	display:block;
	border:3px solid #000000;
	margin-right:30px;
	margin-bottom:20px;
	margin-top:20px;
}
#topics_body div {
	width:376px;
}
 a:hover .thum-list-wrap {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
@media screen and (max-width: 480px) {

.list ul .more_org {
  background: url("../../img/work_more_blk@2x.png") no-repeat;
  background-position: bottom right;
  background-size: 197px 33px;
 margin:0 auto 20px;
 float:none}
.list {
	        width: auto;
        margin: 0;
        padding: 30px 10px;
}
.list ul {
	margin:0 auto;
	margin-bottom:-25px;
	padding-bottom:15px

}
.list ul li {
	background: #1f1f1f !important;	
	/* width:45%; */
	margin-right:3%;
	margin-bottom:25px;
}

#topics_body {
	width:96%;
	margin:0 auto;
	padding-left:2%;
	padding-right:2%;
	font-size:14px;
	line-height:1.8;
}

.topics_photo {
	border:3px solid #000000;
	margin-right:0px;
	margin-bottom:20px;
	width:100%;
}


}
/* =========================
   TOPICS ページ番号 修正版
========================= */

#topics_paging {
  margin: 45px auto 80px;
  text-align: center;
  clear: both;
}

/* 前へ・次へ */
#topics_paging #page ul.topics-pager {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

#topics_paging #page ul.topics-pager li {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#topics_paging #page ul.topics-pager li:empty {
  display: none !important;
}

#topics_paging #page ul.topics-pager li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 36px;
  background: #111;
  color: #fff !important;
  font-size: 12px;
  text-decoration: none !important;
  letter-spacing: 0.04em;
}

#topics_paging #page ul.topics-pager li a:hover {
  background: #ff8a00;
  color: #000 !important;
}

/* ページ番号 */
#topics_paging #navi {
  text-align: center;
}

#topics_paging #navi ul.topics-pager2 {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#topics_paging #navi ul.topics-pager2 li {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid #222;
  background: #fff;
  color: #111;
  font-size: 13px;
  line-height: 1;
  font-family: Arial, sans-serif;
}

#topics_paging #navi ul.topics-pager2 li:empty {
  display: none !important;
}

#topics_paging #navi ul.topics-pager2 li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #111 !important;
  text-decoration: none !important;
}

#topics_paging #navi ul.topics-pager2 li a:hover {
  background: #ff8a00;
  color: #000 !important;
}

/* 現在ページ：リンクが無い li だけ黒にする */
#topics_paging #navi ul.topics-pager2 li:not(:has(a)) {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* リンクがあるページ番号は白ボタン */
#topics_paging #navi ul.topics-pager2 li:has(a) {
  background: #fff !important;
  color: #111 !important;
  border-color: #222 !important;
}

#topics_paging #navi ul.topics-pager2 li:has(a) a {
  color: #111 !important;
}

#topics_body img {
    display: block;
    border: 3px solid #000000;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
    max-width:500px
}
.DalignC {
    text-align: center;
    padding-top: 50px;
}
/* =========================
   WORK一覧：カード高さ揃え
========================= */

#topicsArea .list ul li,
#topicsArea .list li,
.list ul li.more_org {
  height: 259px !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* サムネイル */
#topicsArea .list li .thum-list-wrap,
.list li .thum-list-wrap {
  width: 197px;
  height: 119px;
  margin: 0 !important;
  overflow: hidden;
}

#topicsArea .list li .thum-list-wrap img,
.list li .thum-list-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル欄を固定 */
#topicsArea .list li .title,
.list li .title {
  height: 88px !important;
  margin: 0 !important;
  padding: 16px 16px 8px !important;
  box-sizing: border-box;
  background: #1f1f1f;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  overflow: hidden;
}

/* タイトル文字：最大3行で止める */
#topicsArea .list li .title span,
.list li .title span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日付＋MORE欄を必ず下に固定 */
#topicsArea .list li .ymd_area,
.list li .ymd_area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 197px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  background: #333;
  box-sizing: border-box;
}
/* MOREボタン位置調整 */
#topicsArea .list li .more,
.list li .more,
#topicsArea .list li .more_btn,
.list li .more_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ff8700;
}
/* =========================
   WORK一覧：MORE下の余白解消
========================= */

/* liの中のリンク全体をカードいっぱいにする */
#topicsArea .list li > a,
.list ul li.more_org > a {
  display: block !important;
  width: 100%;
  height: 100% !important;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

/* 日付＋MORE欄をカード最下部に固定 */
#topicsArea .list li .ymd_area,
.list ul li.more_org .ymd_area {
  position: absolute !important;
  left: 0;
  bottom: 0 !important;
  width: 197px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: #333;
}

/* タイトル欄は日付欄の直前まで */
#topicsArea .list li .title,
.list ul li.more_org .title {
  height: 100px !important;
  margin: 0 !important;
  padding: 16px 14px 8px !important;
  box-sizing: border-box;
  background: #1f1f1f;
  overflow: hidden;
}

/* タイトル最大3行 */
#topicsArea .list li .title span,
.list ul li.more_org .title span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サムネイル高さ固定 */
#topicsArea .list li .thum-list-wrap,
.list ul li.more_org .thum-list-wrap {
  width: 197px !important;
  height: 119px !important;
  margin: 0 !important;
  overflow: hidden;
}
/* =========================
   WORK一覧：日付/MORE 横位置修正
========================= */

#topicsArea .list li .ymd_area,
.list ul li.more_org .ymd_area {
  position: absolute !important;
  left: 0;
  bottom: 0 !important;
  width: 197px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  background: #333;
  box-sizing: border-box;
}

/* 日付側 */
#topicsArea .list li .ymd_area .listday,
.list ul li.more_org .ymd_area .listday {
  width: 118px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 40px !important;
  color: #ccc;
  font-size: 11px;
  background: #333;
  box-sizing: border-box;
}

/* 日付のspan */
#topicsArea .list li .ymd_area .listday span,
.list ul li.more_org .ymd_area .listday span,
#topicsArea .list li .ymd_area #topics_date,
.list ul li.more_org .ymd_area #topics_date {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important;
}

/* MORE側 */
#topicsArea .list li .ymd_area .more,
.list ul li.more_org .ymd_area .more {
  width: 79px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 40px !important;
  background: #ff8700;
  color: #000;
  font-weight: bold;
  box-sizing: border-box;
}
/* =========================
   WORK一覧：btarea内にMOREを再生成
========================= */

#topicsArea .list ul li .btarea,
#topicsArea .list li .btarea,
.list ul li .btarea,
.list ul li.more_org .btarea {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 197px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  background: #333 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 日付側 */
#topicsArea .list ul li .btarea .listday,
#topicsArea .list li .btarea .listday,
.list ul li .btarea .listday,
.list ul li.more_org .btarea .listday {
  width: 120px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 40px !important;
  background: #333 !important;
  color: #ccc !important;
  font-size: 11px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* spanの余白も消す */
#topicsArea .list ul li .btarea .listday span,
#topicsArea .list li .btarea .listday span,
.list ul li .btarea .listday span,
.list ul li.more_org .btarea .listday span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important;
}

/* MOREボタンを疑似要素で作る */
#topicsArea .list ul li .btarea::after,
#topicsArea .list li .btarea::after,
.list ul li .btarea::after,
.list ul li.more_org .btarea::after {
  content: "MORE";
  width: 77px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ff8700 !important;
  color: #000 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
}
/* =========================
   SP トピックス一覧 2列表示
========================= */
@media screen and (max-width: 480px) {

  .list {
    width: 100%;
    box-sizing: border-box;
  }

  .list ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 10px;
    margin: 0 auto !important;
    padding: 0 12px 30px !important;
    box-sizing: border-box;
  }

  .list ul li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .list ul li a {
    display: block;
    width: 100%;
    text-decoration: none;
  }

  .list ul li .thum-list-wrap {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
  }

  .list ul li .thum-list,
  .list ul li .thum-list img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .list ul li .title {
    min-height: 74px;
    padding: 10px 9px;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.5;
  }

  .list ul li .title span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .list ul li .btarea {
    display: flex;
    height: 34px;
  }

  .list ul li .listday {
    flex: 1;
    margin: 0;
    padding-left: 8px;
    display: flex;
    align-items: center;
    font-size: 10px;
  }

  .list ul li .more_org::after,
  .list ul li .more {
    width: 54px;
  }
  #topics_body img {
    max-width: 100%;
}
#topicsArea {
  padding: 30px 0;
}
}