/*==========================================
共通設定
===========================================*/
a {
  color:#FFF;
}

#content_header {
  height:790px;
  background-image: url("../img/bg/blog/bg_blog_top.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}


.content_logo{
  padding-top:290px;
  text-align:center;
}


.content_logo img{
  width:385px;
}


.content_logo h1,
.content_logo p{
  text-align:center;
  color:#FFF;
  font-size:22px;
  font-weight:bold;
}


@media (max-width: 767px) {
/*ページリンク*/
#content_header {
  padding-top:15px;
  height: 380px
}
.content_logo{
  padding-top:100px;
  text-align: center;
}
.content_logo img{
  width:80%;
  max-width: 385px
}
.content_logo p{
  font-size:18px;
}
}
/*==========================================
 blog.php
===========================================*/
#blog_list_area {
  height:auto;
  background: url(../img/bg/blog/bg_blog.jpg) 50% top fixed;
  padding:60px 0;
}

#blog_list_area .inner {
  width:1030px;
  padding:0;
}
/*カテゴリーリスト設定*/
nav#category_list ul {
  text-align: center;
  padding:30px 0;
  margin-bottom:30px;
}
nav#category_list ul li {
  display: inline-block;
  padding:10px;
  font-size: 16px;
}
nav#category_list ul li a{
  color:#000;
  font-weight: bold;
  padding-bottom:3px;
}
nav#category_list ul li a span{
  font-size: 18px;
  padding-bottom:3px;
}
nav#category_list ul li a.active{
  border-bottom:2px solid #333;
}
nav#category_list ul li a:hover{
  border-bottom: 2px solid #333;
}

/*ブログリスト設定*/
#blog_list {
 width: 1030px
}
#blog_list ul {
 padding:0;
}
#blog_list ul li {
  padding:40px 50px;

}


#blog_list ul li:hover {
  cursor: pointer
}
#blog_list ul li img {
  opacity: 1;
}
#blog_list ul li .blog_list_inner{
  padding:0px;
  position: relative;
  height:500px;
}
#blog_list ul li .blog_list_img {
  height:275px!important;
  overflow: hidden;
  position: relative;
}
#blog_list ul li:hover .blog_list_img {
  width:100%;
  height: auto;
  overflow: hidden;
}
#blog_list ul li .blog_list_img img{
  transform: scale(1,1);
  transition: 0.3s;
}
#blog_list ul li:hover .blog_list_img img{
  transform: scale(1.5,1.5);
  transition: 0.8s;
}
.blog_list_text {
  margin:0px auto 0;
  color:#000;
  overflow: hidden;
  height:55%;
  width:100%;
  position:absolute;
  top:45%;
  padding:20px 30px;
}
.text_inner {
  background: url(../img/bg/blog/bg_blog_list_text.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  padding:20px;
  width: 100%;
  overflow: hidden;
  margin: auto;
  height: 100%;
}

.blog_list_text .blog_time {
  font-size:15px;
}
.blog_list_text .blog_title {
  font-size:16px;
  font-weight: bold;
  line-height: 30px;
  margin-bottom:15px;
  height:60px;
  overflow: hidden;
}
.blog_list_text .blog_text {
  font-size:14px;
  line-height: 20px;
}

#blog_list .new_icon {
  width:45px;
  position: absolute;
  top:-3px;
  left:10px;
}
#blog_list .category {
  background: #222;
  font-size:14px;
  line-height: 20px;
  padding:0 30px;
  position: absolute;
  top:0px;
  right:0px;
}

/*ページネーション*/
#blog_archive_pagenation ul {
  text-align:center;
  margin:0 20px;
}
#blog_archive_pagenation ul li {
  display: inline-block;
  color:#fff;
  font-weight: bold;
  padding:5px;
}
#blog_archive_pagenation ul li:first-child {
  padding-right:30px;
}


/*ブログアーカイブ*/
#blog_archive_area {
  text-align: center;
  padding:50px 0;
  margin-bottom: 30px;
}
#blog_archive_area h3 {
  font-size:20px;
  padding-bottom:5px;
  font-weight: bold;
  letter-spacing: 0.3rem;
  background: url(../img/parts/blog/parts_archive_line.svg);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: bottom center;
  margin-bottom: 35px;
}
.post_count_year {
  letter-spacing: -.4em;
  margin-bottom: 30px;

}
.post_count_year dt {
  display: inline-block;
  background: #433C58;
  border: 2px solid #433C58;
  color:#FFF;
  letter-spacing: 0em;
  padding:0px 10px;
  line-height: 26px;
  font-weight: bold;
  font-size:20px;

}
.post_count_year dd {
  display: inline-block;
  border-left: none;
  letter-spacing: 0em;
  padding:1px 10px;
  line-height: 26px;
  font-size:20px;
  font-weight: bold;
  border: 1px solid #433C58;
  color:#433C58;
}

.post_count_month {
  letter-spacing: -.4em;
  display: inline-block;
  margin-bottom: 30px;
}

.post_count_month dl:last-of-type {
  margin-right:0px!important;
}

.post_count_month dl {
  display: inline-block;
  margin-right: 25px;
}

.post_count_month dt {
  display: inline-block;
  border: 1px solid #AAA;
  color:#000;
  letter-spacing: 0em;
  line-height: 26px;
  font-weight: bold;
  font-size:20px;
  padding: 1px 5px;


}
.post_count_month dd {
  display: inline-block;
  background: #AAA;
  border: 1px solid #AAA;
  letter-spacing: 0em;
  padding:1px 10px;
  line-height: 26px;
  font-size:20px;
  font-weight: bold;
  color:#fff;
  margin-bottom: 0;
}
@media (min-width:  991px){
  .container {
    max-width:100%;
}
}
@media (min-width: 768px){
    .container {
    max-width:100%;
}
}
@media (max-width:  1199px){
#blog_list {
  width:980px;
}
#blog_list ul li .blog_list_inner{
  height:460px;
}

}
@media (max-width:  991px){
  #blog_list {
  width:760px;
}

#blog_list ul li {
  padding:40px 20px;
}
#blog_list ul li .blog_list_inner{
  height:400px;
}

.blog_list_text {
  padding:0;
}
}
@media (max-width:  767px){
  #blog_list_area {
    padding-top:30px;
  }
nav#category_list ul li {
    font-size:14px;
  }

nav#category_list ul li a span {
  font-size:15px;
}
  #blog_list {
  width:540px;
}

#blog_list ul li {
  padding:40px 10px;
}
#blog_list ul li .blog_list_inner {
  height:300px;
}
.blog_list_text {
  top:50%;
}
.text_inner {
  padding:10px;
}
.blog_list_text .blog_time {
  font-size:14px;
  margin-bottom: 0;
}
.blog_list_text .blog_title {
  line-height: 20px;
  font-size:14px;
  margin-bottom: 5px;
  height:auto;
}
.blog_list_text .blog_text {
  font-size:12px;
  line-height: 14px
}
}
@media (max-width:  575px){
  #blog_list {
    width:100%;
  max-width:300px;
}

#blog_list ul li {
  padding:40px 0px;
}
#blog_list ul li .blog_list_inner {
  height:360px;
}
.blog_list_text .blog_time {
  font-size:15px;
  margin-bottom: 0;
}
.blog_list_text .blog_title {
  line-height: 25px;
  font-size:15px;
  margin-bottom: 5px;
  height:auto;
}
.blog_list_text .blog_text {
  font-size:14px;
  line-height: 20px
}
}

/*==========================================
blog_detail.php
===========================================*/

#blog_area {
  height:auto;
  background: url(../img/bg/blog/bg_blog.jpg) 50% top fixed;
  padding:60px 0;
  color:#000;
}

#blog_article {
  width: 900px;
  margin:auto;
  background: rgba(255,255,255,.5);
  padding:20px 50px 60px;
  position: relative;
  margin-top:55px;
}
.blog_new {
  width:57px;
  position: absolute;
  top:0;
}
#blog_header {
  position: relative;
}
#blog_header .post_time {
  font-size:40px;
  font-weight: bold;
  padding-top: 40px;
}

#blog_header .post_title {
  font-size:20px;
  font-weight: bold;
  margin-top: 20px;
  line-height: 40px;
}

#blog_header .blog_category {
  position: absolute;
  top:0;
  right:0;
  background: #000;
  color: #FFF;
  padding:0 10px;
  font-weight: bold;
}

#blog_body {
  background: #FFF;
  padding:80px 100px;
  margin-top:50px;
}
#blog_body .thumbnail{
  margin-bottom: 50px;
}
#blog_body p{
  font-size:16px;
  margin:20px 0;

}

#blog_body_footer {
  margin-top: 60px;
  color: #000;
  overflow:hidden;
}

#blog_body_footer div{
  width: 155px;
  height: 50px;
  text-align: center;
  padding-top: 10px;
  background: pink;
}
#blog_body_footer div a{
  color: #000;
  font-size:16px;
  font-weight: bold;
}
#blog_body_footer div.left{
  background: url(../img/parts/blog/parts_prev.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

#blog_body_footer div.right{
  background: url(../img/parts/blog/parts_next.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.blog_archive_link {
  width: 240px;
  height: 60px;
  margin:auto;
  background: url(../img/parts/blog/parts_archive_link.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  line-height: 60px;
  padding-left:30px;
  margin-top: 70px;
}

.blog_archive_link p a{
  color: #000;
  font-weight:bold;
}

@media (max-width: 991px){
#blog_article {
  width:100%;
  margin-top:0px;
}

#blog_area {
  padding-top: 0;
}
}

@media (max-width: 767px){
  #blog_article {
  margin-top:0px;
  padding:10px;
}
#blog_header .post_time {
  font-size:5vw;
}
#blog_header .post_title{
  font-size:3vw;
  margin-bottom: 20px;
}
#blog_body {
  padding:10%;
  margin-top: 10px;
}

}

@media (max-width: 575px){


  #blog_header .post_title{
  font-size:4vw;
  line-height: 30px;
  margin-bottom: 20px;
}
#blog_body {
  padding:5%;
  margin-top: 10px;
}
#blog_body p {
  font-size:14px;
}
#blog_body_footer div {
  width: 40%;
  padding-top:20px;
}
#blog_body_footer div a{
  font-size:3vw;
}
.blog_archive_link {
  text-align:center;
  font-size:16px;
  padding-right:60px;
}
}