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

@import url(detail.css);

.topics {
	padding-bottom: 0 !important;
}

.newslist {
	border-bottom: dotted 1px #c6c6b1;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.newslist-img {
	float: left;
	width: 68px;
	border: solid 1px #dddddd;
}
.newslist-text {
	float: right;
	width: 550px;
}
.newslist-text h5 {
	font-size: 14px;
	font-weight: bold;
	color: #0077BB;
	margin-bottom: 10px;
}
.newslist-text h5 a:link,
.newslist-text h5 a:visited {
	text-decoration: none;
}
.newslist-text h5 a:hover,
.newslist-text h5 a:active {
	text-decoration: underline;
}

.latest {
	width: 600px;
	margin-top: 10px;
	margin-right: 10px;
	line-height:150%;
	padding-left:10px;
}
.latest p{
	margin-bottom:5px;
}

.rss {
	float: right;
	margin: 7px 7px 0 0;
}

.dot {
	clear: both;
	border-bottom: dotted 1px #c6c6b1;
	height: 1px;
}

.like-h4.ttl,
h4.ttl {
	margin: 20px 0;
	background-color: #f1f1eb !important;
}

.clear {
	clear: both;
}

.archive {
	display: inline;
}

.archive li {
	float: left;
	margin-right: 20px;
}

.news-article .like-h4,
.news-article h4 {
	font-size: 18px;
	font-weight: bold;
	color: #0077BB;
	margin: 2px 0 10px 0;
	line-height:1.3em;
}

*html .news-article .like-h4,
*html .news-article h4 {
	font-size: 18px;
	font-weight: bold;
	color: #0077BB;
	margin-bottom: 10px;
	padding:5px 0;
}

#main .main-content.clearfix .news-article p{
	font-size:1.2em;
	line-height: 1.6em;
}

.news-article-ph {
	border: solid 1px #e2e2d8;
	background: #f8f8f5;
	width: 130px;
	padding: 4px;
	float: right;
	/*float: left;*/
	margin: 0 0 20px 20px;
}

.news-article-ph img {
	width: 128px;
	border: solid 1px #ffffff;
}

.news-article-cap {
	font-size: 10px;
	margin-top: 5px;
}
.news-article img.bookImg{
	max-width:170px;
	height:auto;
}
/* sub-nav--------------------------------------------------------- */


#content #main #sub-nav ul.sub-nav01 {
	background: url(../images/nav/sub01.jpg) left top no-repeat;
	height: 37px;
}

#content #main #sub-nav ul.sub-nav01 li {
	float: left;
	text-align: center;
}

#content #main #sub-nav ul.sub-nav01 li a {
	display: block;
	width: 150px;
	height: 24px;
	padding-top: 10px;
	text-decoration: none;
	line-height: 1.8em;
	color: #FFF;
}

#content #main #sub-nav ul.sub-nav01 li.cur a,
#content #main #sub-nav ul.sub-nav01 li a:hover {
	background: url(../images/nav/s01_on.jpg) no-repeat;
	font-size: 1.1em;
	line-height: 1.3em;
}

/* icon--------------------------------------------------------- */

#content #main ul.icon li {
	float: left;
	/*text-indent: -9999px;*/
	padding-left: 4px;
}

#content #main ul.icon li a {
	display: block;
	width: 16px;
	height: 16px;
}

#content #main ul.icon li.icon01 a {
	background: url(../images/common/icon01.gif) no-repeat;
}

#content #main ul.icon li.icon02 a {
	background: url(../images/common/icon02.gif) no-repeat;
}

#content #main ul.icon li.icon03 a {
	background: url(../images/common/icon03.gif) no-repeat;
}

#content #main ul.icon li.icon04 a {
	background: url(../images/common/icon04.gif) no-repeat;
}

#content #main ul.icon li.icon05 a {
	background: url(../images/common/icon05.gif) no-repeat;
}

#content #main ul.icon li.icon06 a {
	background: url(../images/common/icon06.gif) no-repeat;
}

/* special--------------------------------------------------------- */

.banner,
.banner_right {
	float: left;
	width: 305px;
}
.banner_right {
	margin-left: 20px;
}
.banner img,
.banner_right img {
	margin-bottom: 10px;
}
/* youtube--------------------------------------------------------- */
.iframe {
  width: 560px;
  height: 315px;
  display: block;
  margin:10px auto;
}

/*ベースのスタイル設定*/
#content .news-article h1 {
font-size: 1.8em;
    line-height: 1.4em;
    padding: 1em 0;
    color: #000;
    border-bottom: 3px solid #36890B;
    border-top: solid 3px #36890B;
    clear: both;
    margin: 0 0 1em 0;
    background: none;
    height: 100%;
}
#content #main .news-article h2:not(.title){
  border: solid 2px #36890B;
  background: none;
  height: auto;
  font-size: 1.7em;
  color: #000;
  padding: .5em;
  margin: .5em 0;
  line-height: 1.4em;
}
#content #main .news-article h3{
  border-bottom: double 5px #36890B;
  background: none;
  border-top: none;
  height: auto;
  font-size: 1.6em;
  color: #000;
  padding: .5em;
  margin: .5em 0;
  line-height: 1.4em;
}
/****************
New Topics
*****************/
#content #main div.main-content h3#cat{
font-size: 1.3em;
    line-height: 1.6em;
    padding: .75em .5em;
    color: #36890B;
    border-bottom: 1px solid #dedede;
    border-top: solid 3px #36890B;
    clear: both;
    margin: 1em 0;
    background: none;
    height: 100%;
    display: flex;
    align-items: center;
}

.new_topic_area{
  display: flex;
  flex-grow: 1;
  flex-flow: row wrap;
  justify-content: space-between;
  width:630px;
}
.new_topic_area::after{
   content:"";
  display: block;
  width:200px;
}

/*ベースのスタイル設定*/
.l-card{
  overflow: hidden;
  width: 200px;
  padding: 0;
  border: 1px solid #ddd;
  background: #fff;
  margin:.5em 0;
}
.l-card a{
  text-decoration: none;
}
.text-content {
  padding: .5em;
}
.text-content .title {
    margin: 0 0 .25em 0;
       font-size: 15px;
    line-height: 1.4em;
    color: #000;
    font-weight: normal;
}
.content-meta {
  overflow: hidden;
  width: 100%;
  font-size: 12px;
}
.date {
  float: left;
  color: #aaa;
}
.like {
  display: inline-block;
  color: #4cc48e;
}
.like .material-icons {
  vertical-align: middle;
  font-size: 16px;
}
/*ここからthumbnailのスタイル設定*/
.l-thumbnail {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.l-thumbnail::before, .l-thumbnail::after {
  transition: opacity 0.1s, width 0.3s 0.1s, height 0.3s 0.4s;
  z-index: 2;
  box-sizing: border-box;
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
}
.l-thumbnail::before {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  left: 16px;
  top: 16px;
}
.l-thumbnail::after {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  right: 16px;
  bottom: 16px;
}
.thumbnail-wrapper {
  transition: 0.3s;
  display: block;
  margin: 0;
  padding: 0;
}
.thumbnail-wrapper::after {
  transition: 0.3s;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.thumbnail-wrapper img{
  transition: 0.1s;
  display: block;
  width:200px;
  height:123px;
  object-fit: cover;
}
.more-text {
  transition: 0.3s;
  position: absolute;
  top: 50%;
  transform: translateY(-120%);
  opacity: 0;
  display: block;
  width: 100%;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.l-card:hover .l-thumbnail::before, .l-card:hover .l-thumbnail::after {
  opacity: 1;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.l-card:hover .thumbnail-wrapper {
  transform: scale(1.15);
}
.l-card:hover .thumbnail-wrapper::after {
  opacity: 1;
}
.l-card:hover .thumbnail-wrapper img {
  filter: blur(4px);
}
.l-card:hover .more-text {
  opacity: 1;
  transform: translateY(-50%);
}
.l-card:hover{
  border:1px solid rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  
}
#content #main div.main-content h3.title{
  background: none;
  margin: 0 0 .25em 0;
    font-size: 15px;
    line-height: 1.4em;
    color: #000;
    font-weight: normal;
    background: none;
    height: auto;
    padding: 0;
    border-top:none;
}
/*****************
object-fit for IE,Edge
***************/
.object-fit-img {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}
#content #main div.news-article p {
    margin-bottom: .5em;
    color:#000;
}