@charset "utf-8";

/*  【注意】このファイルsample1はAPIを複数呼び出していて複雑なので、単純なサンプルとしてsample2～4も参照のこと */

/*  デザイン例（本番は外部CSS推奨） */

/* 必須 */
[class^="blog-system-postmonths-yearmonth-"] {/* 将来の機能拡張に備えいったん全てを非表示にする */
    display: none;
}
.blog-system-postmonths-yearmonth-co@charset "utf-8";

/*  【注意】このファイルsample1はAPIを複数呼び出していて複雑なので、単純なサンプルとしてsample2～4も参照のこと */

/*  デザイン例（本番は外部CSS推奨） */

/* 必須 */
[class^="blog-system-postmonths-yearmonth-"] {/* 将来の機能拡張に備えいったん全てを非表示にする */
    display: none;
}
.blog-system-postmonths-yearmonth-container,
.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {/* 必要なパーツのみを明示的に表示 */
    display: inline;
}
[class^="blog-system-headlines-headline-"] {/* 必須（将来の機能拡張に備えいったん全てを非表示にする） */
    display: none;
}
.blog-system-headlines-headline-container,
.blog-system-headlines-headline-date,
.blog-system-headlines-headline-title,
.blog-system-headlines-headline-body,
.blog-system-headlines-headline-img1 {/* （↑の続き）必要なパーツのみを明示的に表示 */
    display: block;
}
/* ここから下は全くの自由 */


.blog-system-headlines-headline-img1{

    position: relative;

    top: -40px;

    left: 0;
}	

/* box index list 使用  F9F4F4(ピンク系)  FCFCFC*/
.blog-system-headlines-headline-container{
    width: 28%;
    /*   border: 1px #ddd solid;*/
    padding: 1%;
    margin: 1%;
    float: left;
    min-height: 160px;
    /* background: #fefefe; */
    /* border: 1px solid #ddd; */
    border-bottom: 1px solid #ddd;
    max-height: 100px;
    position: relative;
    top: 0;
    left: 0;
    width: 95%;
}

.blog-system-headlines-headline-title{
    /* font-size: 1em; */
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #074952;
    font-size: 0.8rem;
    position: absolute;
    top: 30px;
    left: 210px;
    font-size: 1em;
    z-index: 1;
}

.blog-system-headlines-headline-title a:hover{

    color: #1d9eae;
}


.blog-system-postmonths-yearmonth{

}


.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {
    font-size: 17px;
    color: #222;
}

.blog-system-postmonths-yearmonth-year{
    padding-left: 1px;
}

.blog-system-postmonths-yearmonth-count{
    padding-left: 10px;
}
.blog-system-postmonths-yearmonth-count:before {
    content: '(';
}
.blog-system-postmonths-yearmonth-count:after {
    content: ')';
}
.blog-system-postmonths-yearmonth-year:after {
    content: '年';
}
.blog-system-postmonths-yearmonth-month2:after {
    content: '月';
}
.blog-system-headlines-headline-date {
    color: #000;
    font-size: large;
    font-weight: bold;
    /* display: none; */
    font-size: 18px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 160px;
    /* width: calc(100% - 160px); */
    overflow: hidden;
}
.blog-system-headlines-headline-img1 img {
    width: 100%;
    height: auto;
    padding: 2%;
    /* max-height: 150px; */
    /* max-width: 90%; */
    overflow: hidden;
    width: 50%;/* トリミングしたい枠の幅 */
    height: 50%;/* トリミングしたい枠の高さ */
    position: relative;
    /* overflow: hidden; */
    /* width: 150px; *//* トリミングしたい枠の幅 */
    width: 180px;
    height: 150px;/* トリミングしたい枠の高さ */
    position: absolute;
    object-fit: cover;
    top: 35px;
}


.blog-system-headlines-headline-body{
    font-size: 0.9em;
    color: #222;
    position: absolute;
    top: 65px;
    left: 160px;
    font-size: 1rem;
    max-height: 3.5em;
    line-height: 1.2;
    overflow: hidden;
    letter-spacing: 0.08em;
    padding: 1px 5px 0 0;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    font-size: 16px;
}

/* ここから下は自由に記述可 */
.blog-system-post-post-date {
    margin-top: 15px;
    color: #000;
    font-size: large;
    font-weight: 400;
    /* display: none; */
    text-align: right;
}
.blog-system-post-post-title{
    color: #fff;
    font-size: large;
    font-weight: 600;
    background: #330401;
    margin-bottom: 10px;
    padding: 8px;
}

.blog-system-post-post-body{
    color: #000000;
    margin-top: 10px;
    font-size: 17px;
    line-height: 2;
}


.blog-system-post-post-body img {
    max-width: 400px;
    height: auto;
}
[class^="blog-system-post-post-img"] img {
    max-width: 100%;
    height: auto;

}


.blog-system-post-post-img1,.blog-system-post-post-img2,.blog-system-post-post-img3,{
    width: 100%;
    max-width: 450px;
}

.t_title{
    font-size: 1.3em;
    margin-bottom: 15px;
    text-align: left;
}


.s_title{
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 1px #999 solid;
    text-align: center;
    background: #330401;
    color: #fff; 
    padding: 5px;
}




[data-img-pos="右"] .blog-system-post-post-img1,
[data-img-pos="右"] .blog-system-post-post-img2,
[data-img-pos="右"] .blog-system-post-post-img3{
    float: right;
    width:40%;

}

[data-img-pos="右"] .blog-system-post-post-body {
    width: 59%;
    margin-right: 1%;
    float: left;
}


[data-img-pos="左"] .blog-system-post-post-img1,
[data-img-pos="左"] .blog-system-post-post-img2,
[data-img-pos="左"] .blog-system-post-post-img3{
    float: left;
    width: 40%;
}

[data-img-pos="左"] .blog-system-post-post-body {
    width: 59%;
    float: right;
    margin-left: 1%:
}

[data-img-pos="下"] .blog-system-post-post-img1 img,
[data-img-pos="下"] .blog-system-post-post-img2 img,
[data-img-pos="下"] .blog-system-post-post-img3 img{
    float: left;
    width: 31%;
    padding: 1%;
}

[data-img-pos="下"] .blog-system-post-post-body {
    width: 100%;
}
[data-img-pos="上"] .blog-system-post-post-img1 img,
[data-img-pos="上"] .blog-system-post-post-img2 img,
[data-img-pos="上"] .blog-system-post-post-img3 img{
    float: left;
    width: 31%;
    padding: 1%;
}

[data-img-pos="上"] .blog-system-post-post-body {
    width: 100%;
}




.int_blogR{
    width: 15%;
    margin-left: 1%;
    float: right;
}

.int_blogL{
    width: 82%;
    padding-right: 1%;
    float: left;
    border-right: 1px solid #f1efef;
    text-align: left;
}

.int_blog{
    width: 100%;
}


/* pad SIZE */
@media screen and (max-width: 1024px){


    .int_blogL{
        width: 70%;
    }
    .int_blogR{
        width: 25%;
    }	



    .blog-system-headlines-headline-container{
        width: 42%;
        min-height:350px;
    }


}


/* SMARTPHONES SIZE */
@media screen and (max-width: 850px){

    .blog-system-headlines-headline-container{
        width: 98%;
        /* border: 1px #eee solid; */
        padding: 1%;
        margin: 1%;
        float: left;
        min-height: 320px;
    }

    .blog-system-postmonths-yearmonth{
        display: inline; 
        float: left;
        padding: 1%;
        margin-right: 1%;
        margin-bottom: 1%;
        border: 1px solid #999;
        min-width: 29.3%;
    }

    .blog-system-postmonths-yearmonth-year,
    .blog-system-postmonths-yearmonth-month2,
    .blog-system-postmonths-yearmonth-count {
        font-size: 0.9em;
    }

    .blog-system-postmonths-yearmonth-year{
        padding-left: 2px;
    }



    .int_blogR{
        width: 98%;
        margin-left: 1%;
        float: right;
        margin: 2%;
        margin-left:2%;
    }

    .int_blogL{
        width: 98%;
        padding-right: 1%;
        float: left;
        border-right: none;
        margin: 2%;
    }

    .int_blog{
        width: 100%;
    }



}





/* SMARTPHONES SIZE */
@media screen and (max-width: 667px){



}

/* SMARTPHONES SIZE */
@media screen and (max-width: 400px){


    .blog-system-postmonths-yearmonth{
        min-width: 44.3%;
    }


    .blog-system-headlines-headline-container{
        width: 96%;
        border: 1px #999 solid;
        padding: 2%;
        margin: 10px 1%;
        float: left;
        min-height: 250px;
    }




    [data-img-pos="右"] .blog-system-post-post-img1,
    [data-img-pos="右"] .blog-system-post-post-img2,
    [data-img-pos="右"] .blog-system-post-post-img3{
        float: right;
        width:90%;
        padding: 5%;

    }

    [data-img-pos="右"] .blog-system-post-post-body {
        width: 100%;
        margin-right: 0%;
        float: left;
    }


    [data-img-pos="左"] .blog-system-post-post-img1,
    [data-img-pos="左"] .blog-system-post-post-img2,
    [data-img-pos="左"] .blog-system-post-post-img3{
        float: left;
        width: 90%;
        padding: 5%;
    }

    [data-img-pos="左"] .blog-system-post-post-body {
        width: 100%;
        float: right;
        margin-left: 0%:
    }



}ntainer,
.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {/* 必要なパーツのみを明示的に表示 */
    display: inline;
}
[class^="blog-system-headlines-headline-"] {/* 必須（将来の機能拡張に備えいったん全てを非表示にする） */
    display: none;
}
.blog-system-headlines-headline-container,
.blog-system-headlines-headline-date,
.blog-system-headlines-headline-title,
.blog-system-headlines-headline-body,
.blog-system-headlines-headline-img1 {/* （↑の続き）必要なパーツのみを明示的に表示 */
    display: block;
}
/* ここから下は全くの自由 */


.blog-system-headlines-headline-img1{

    position: relative;
    top: -40px;
    left: 0;
}	


.blog-system-headlines-headline-img1 img {padding-left: 10px;/* width:40%; */max-width: 150px;}	




/* box index list 使用  F9F4F4(ピンク系)  FCFCFC*/
.blog-system-headlines-headline-container{
    width: 28%;
    /*   border: 1px #ddd solid;*/
    padding: 1%;
    margin: 1%;
    float: left;
    min-height: 160px;
    /* background: #fefefe; */
    border-top: 1px solid #eee;
    max-height: 100px;
    position: relative;
    top: 0;
    left: 0;
    width: 95%;
    table-layout: fixed;
}

.blog-system-headlines-headline-title{/* font-size: 1em; */overflow: hidden;text-align: left;white-space: nowrap;text-overflow: ellipsis;font-weight: 600;color: #333;font-size: 0.8rem;position: absolute;top: 30px;left: 160px;font-size: 18px;line-height: 2;z-index: 1;overflow: hidden; */white-space: nowrap;text-overflow: ellipsis;overflow: hidden;/* white-space: nowrap; */text-overflow: ellipsis;word-break: break-all;width: calc(100% - 220px);}
.blog-system-headlines-headline-title a{
    color: #050754;
}

.blog-system-headlines-headline-title a:hover
{
    color: rgba(112, 11, 11, 0.8);
}


.blog-system-postmonths-yearmonth{

}


.blog-system-postmonths-yearmonth-year,
.blog-system-postmonths-yearmonth-month2,
.blog-system-postmonths-yearmonth-count {
    font-size: 17px;
    color: #222;
}

.blog-system-postmonths-yearmonth-year{
    padding-left: 1px;
}

.blog-system-postmonths-yearmonth-count{
    padding-left: 10px;
}
.blog-system-postmonths-yearmonth-count:before {
    content: '(';
}
.blog-system-postmonths-yearmonth-count:after {
    content: ')';
}
.blog-system-postmonths-yearmonth-year:after {
    content: '年';
}
.blog-system-postmonths-yearmonth-month2:after {
    content: '月';
}
.blog-system-headlines-headline-date {
    color: #333;
    font-size: large;
    font-weight: bold;
    /* display: none; */
    font-size: 1rem;
    text-align: left;
    position: relative;
    top: 0;
    padding-left: 0;
    left: 205px;
    width: calc(100% - 220px);
    /* width: calc(100px + 50px); */
    overflow: hidden;
}
.blog-system-headlines-headline-img1 img {
    width: 100%;
    height: auto;
    padding: 2%;
    /* max-height: 150px; */
    /* max-width: 90%; */
    overflow: hidden;
    width: 50%;/* トリミングしたい枠の幅 */
    height: 50%;/* トリミングしたい枠の高さ */
    position: relative;
    overflow: hidden;
    width: 160px;/* トリミングしたい枠の幅 */
    height: 140px;/* トリミングしたい枠の高さ */
    position: relative;
    object-fit: cover;
}


.blog-system-headlines-headline-body{
    font-size: 0.9em;
    color: #222;
    position: absolute;
    top: 60px;
    left: 210px;
    font-size: 1rem;
    max-height: 3.5em;
    line-height: 1.2;
    overflow: hidden;
    letter-spacing: 0.08em;
    padding: 1px 5px 0 0;
    line-height: 1.3;
    margin: 0;
    overflow: visible;
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
}

/* ここから下は自由に記述可 */
.blog-system-post-post-date {
    margin-top: 15px;
    color: #000;
    font-size: large;
    font-weight: 400;
    /* display: none; */
}


.blog-system-post-post-body{
    color: #000000;
    margin-top: 10px;
    font-size: 17px;
}


.blog-system-post-post-body img {
    max-width: 400px;
    height: auto;
}
[class^="blog-system-post-post-img"] img {
    max-width: 100%;
    height: auto;

}


.blog-system-post-post-img1{
    width: 100%;
    /* max-width: 450px; */
}

.t_title{
    font-size: 1.3em;
    margin-bottom: 15px;
    text-align: left;
}


.s_title{
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 1px #999 solid;
    text-align: center;
    background: #330401;
    color: #fff; 
    padding: 5px;
}




[data-img-pos="右"] .blog-system-post-post-img1,
[data-img-pos="右"] .blog-system-post-post-img2,
[data-img-pos="右"] .blog-system-post-post-img3{
    float: right;
    width:40%;

}

[data-img-pos="右"] .blog-system-post-post-body {
    width: 59%;
    margin-right: 1%;
    float: left;
}



.blog-system-post-post-body a{
    color: #fff;
    background: #7eccd6;
    padding: 3px 10px;
    border-radius: 5px;
}
.blog-system-post-post-body a:hover{
    color:#111;
    background: #caedf2;
    padding: 3px 10px;
    border-radius: 5px;
}

.section_youtube {
    width: 100%;
    width: 450px;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.5% 20px;
    border: 1px solid #ddd;
    padding: 1%;
}

@media ( max-width : 500px ){
    .section_youtube {
        margin: 10px 0 20px;
        width: 100%;
    }
}

.video{
    position:relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 10px;
}
.video iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}


[data-img-pos="左"] .blog-system-post-post-img1,
[data-img-pos="左"] .blog-system-post-post-img2,
[data-img-pos="左"] .blog-system-post-post-img3{
    float: left;
    width: 40%;
}

[data-img-pos="左"] .blog-system-post-post-body {
    width: 59%;
    float: right;
    margin-left: 1%:
}



.int_blogR{
    width: 15%;
    margin-left: 1%;
    float: right;
}

.int_blogL{
    width: 82%;
    padding-right: 1%;
    float: left;
    border-right: 1px solid #b5b2ac;
}

.int_blog{
    width: 100%;
}


.clearf{
    clear:both;
}



/* pad SIZE */
@media screen and (max-width: 1024px){


    .int_blogL{
        width: 70%;
    }
    .int_blogR{
        width: 25%;
    }	



    .blog-system-headlines-headline-container{
        width: 100%;
        /* min-height:350px; */
    }


}


/* SMARTPHONES SIZE */
@media screen and (max-width: 850px){

    .blog-system-headlines-headline-container{
        width: 98%;
        /* border: 1px #eee solid; */
        padding: 1%;
        margin: 1%;
        float: left;
        min-height: 320px;
    }

    .blog-system-postmonths-yearmonth{
        display: inline; 
        float: left;
        padding: 1%;
        margin-right: 1%;
        margin-bottom: 1%;
        border: 1px solid #999;
        min-width: 29.3%;
    }

    .blog-system-postmonths-yearmonth-year,
    .blog-system-postmonths-yearmonth-month2,
    .blog-system-postmonths-yearmonth-count {
        font-size: 0.9em;
    }

    .blog-system-postmonths-yearmonth-year{
        padding-left: 2px;
    }



    .int_blogR{
        width: 98%;
        margin-left: 1%;
        float: right;
        margin: 2%;
        margin-left:2%;
    }

    .int_blogL{
        width: 98%;
        padding-right: 1%;
        float: left;
        border-right: none;
        margin: 2%;
    }

    .int_blog{
        width: 100%;
    }



}





/* SMARTPHONES SIZE */
@media screen and (max-width: 667px){



}

/* SMARTPHONES SIZE */
@media screen and (max-width: 500px){


    .blog-system-headlines-headline-date {
        left: 130px;
    }


    .blog-system-headlines-headline-title {
        left: 130px;
    }

    .blog-system-headlines-headline-body {
        left: 130px;
    }


    .blog-system-headlines-headline-img1 img {
        width: 100%;
        padding: 2%;
        /* max-height: 150px; */
        /* max-width: 90%; */
        overflow: hidden;
        width: 50%;
        height: 50%;
        position: relative;
        overflow: hidden;
        width: 110px;
        height: 110px;
        position: relative;
        object-fit: cover;
    }



    .blog-system-postmonths-yearmonth{
        min-width: 44.3%;
    }


    .blog-system-headlines-headline-container{
        width: 96%;
        border: none;
        padding: 2%;
        margin: 10px 1%;
        float: left;
        min-height: 140px;
    }




    [data-img-pos="右"] .blog-system-post-post-img1,
    [data-img-pos="右"] .blog-system-post-post-img2,
    [data-img-pos="右"] .blog-system-post-post-img3{
        float: right;
        width:90%;
        padding: 5%;

    }

    [data-img-pos="右"] .blog-system-post-post-body {
        width: 100%;
        margin-right: 0%;
        float: left;
    }


    [data-img-pos="左"] .blog-system-post-post-img1,
    [data-img-pos="左"] .blog-system-post-post-img2,
    [data-img-pos="左"] .blog-system-post-post-img3{
        float: left;
        width: 90%;
        padding: 5%;
    }

    [data-img-pos="左"] .blog-system-post-post-body {
        width: 100%;
        float: right;
        margin-left: 0%:
    }



}
[data-img-pos="左"] .blog-system-post-post-img1,
[data-img-pos="左"] .blog-system-post-post-img2,
[data-img-pos="左"] .blog-system-post-post-img3{
    float: left;
    width: 90%;
    padding: 5%;
}

[data-img-pos="左"] .blog-system-post-post-body {
    width: 100%;
    float: right;
    margin-left: 0%:
}



table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

table th,table td{
    padding: 10px 0;
    text-align: center;
}

table tr:nth-child(odd){
    background-color: #eee
}