/* blog css style ver 3.22
1. blog Menu blocks
2. Common blog    
    2-1 books
    2-2 movie
    2-3 meething
    2-4 mayumi
3. Tts
*/



/* store movie */

.embed_movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
}
.embed_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/* ------------------------------ blog ------------------------------ */



.blog_head {
    width: 100%;
    padding: 0;
    margin: 0 0 40px 0;
	border-radius: 8px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blog_head img {
    width: 100%;
}
.blog_image , .blog_image  img {
    width: 100%;
    margin-bottom: 20px;
}  



.blog_main {
    position: relative;
    width: 100%;
    overflow: hidden;
}



.blog_body {
    width: 100%;
    margin-bottom: 80px;
}


.blog_title {
	font-size: 2.8rem;
    margin-bottom: 25px;
	line-height: 1.4;
}
.blog_date {
    margin-bottom: 45px;
}


/* -------------  blog index -------------- */

.blog_index_wrap {
    position: relative;
}

.blog_index_each_article {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    padding-bottom: 30px;
    border-bottom: 1px dotted #aaaaaa;
    margin-bottom: 40px;
}

.blog_index_each_image {
    flex: 0 1 auto;
    width: 20%;
    position: relative;
}


.blog_index_each_image:before {
    content: "";
    display: block;
    padding-top: 75%;
  }
.blog_index_each_image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding:2px;
  object-fit: cover;
  border:1px solid #d8d8d8;
}

/*
.blog_index_each_image {
    flex: 0 1 auto;
    width: 28%;
    position: relative;
    overflow: hidden;
}
.blog_index_each_image img {
    max-height:200px;
    object-fit: contain;
    position: absolute;
    top: 0;
    bottom:0;
    border: 1px solid #e0e0e0;
    padding: 2px;
}
    */
.feature_block_label_new {
    position: absolute;
    top:0;
    left: 0;
    width: 45px;
    z-index:100;
}
.feature_block_label_new img {
    border: none;

}



.blog_index_each_info {
    flex: 0 1 auto;
    width: 78%;
}

.blog_index_each_tags {
    display: inline-block;
}
.blog_index_each_kind {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 14px;
    border-radius: 4px;
    background: #888776;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: normal;
}
.blog_index_each_kind a,
.blog_index_each_kind a:visited {
    color: #ffffff;
}
.blog_index_each_kind a:hover {
    color: #ffd000;
}
.blog_index_each_date {
    display: inline-block;
    font-size:1.4rem;
    color:#666666;
}

.blog_index_each_info h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    border:none;
    padding: 0;
}
.blog_index_each_title a {
    color: #000000;
}


.blog_index_each_lead {
    font-size: 1.5rem;
    color: #666666;
    line-height: 1.5;
    text-align: justify;
}



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

  

    .blog_index_each_article {
        flex: none;
        width: 100%;
        padding: 0;

        display: block;
        flex-wrap: nowrap;
        margin-bottom: 15px;

    }
    .blog_index_each_image {
        flex: none;
        width: 35%;
        float: right;
    
    }
    .blog_index_each_info {
        flex: none;
        width: 100%;
        padding-bottom: 1em;
    }
    .blog_index_each_info h2 {
        font-size: 1.6rem;
    }



    .blog_index_wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .blog_index_eachthema,.blog_index_wrap_findex .blog_index_eachthema {
        flex: 0 1 auto;
        width: 100%;
        
        position: relative;
        overflow: hidden;
        padding:0 0 10px 10px;
        margin-bottom: 20px;
    }

    .blog_main,  .blog_side  {
        float: none;
        width: 100%;
    }
  
}


/* -------------  blog side -------------- */
.blog_side {
    position: relative;
    margin-bottom: 100px;
}
.blog_side_block {
    margin-bottom: 40px;
}
.blog_side_block h3 {
    font-size:1.7rem;
    font-weight: bold;
    padding: 1px 0 6px 4px;
    border-bottom: 2px solid #999999;
    margin-bottom: 20px;
}
.blog_side_eachs {
    padding:0;
}
ul li.blog_side_each {
    list-style: none;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    background-image: url(/img/common/dot_yellow.avif);
    background-repeat: no-repeat;
    background-position: 0 center;
    padding: 0 0 0 18px;
}
.blog_side_each a {
    color: #444444;
}
.blog_side_each a:hover {
    color: #009999;
}