@charset "utf-8";

/* ==================================================================
    blog.css

=================================================================== */

#blog .wrap{
    width: 1080px;
    margin: 0 auto 0 auto;
    text-align: left;
    box-sizing: border-box;
}

#blog .main h3{
    text-align: left;
    background-color: rgb(222, 236, 239);
    position: relative;
    padding: 30px 30px 30px 50px;
}

#blog .main h3:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 50%;
    background-color: #444;
    border-radius: 2.5px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#blog ul.list{
    margin-bottom: 60px;
    overflow: hidden;
}

#blog ul.list li{
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}

#blog ul.list li.new{
}

#blog ul.list li.new:after{
    content: "NEW";
    position: absolute;
    display: inline-block;
    background: #FCF069;
    font-size: 88%;
    font-weight: 700;
    padding: 7px 15px;
    left: 154px;
    top: 5px;
    width: 63px;
    height: 35px;
    box-sizing: border-box;
}

#blog ul.list li a{
    display: block;
    overflow: hidden;
    color: rgb(68, 68, 68);
    padding: 10px 0px;
}

#blog ul.list li a:hover{
    color: #444;
    text-decoration: none;
    background: #F5F5F5;
}

#blog ul.list li p.image{
    display: inline-block;
    float: left;
    margin-bottom: 0;
}

#blog ul.list li dl{
    width: 508px;
    float: right;
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: left;
}

#blog ul.list li dl dt{
    margin-bottom: 10px;
}

#blog ul.list li dl dd{
    font-weight: 700;
}


#blog .pager .pagination li.pre, .pager .pagination li.next {
    width: 50px;
}


#blog .sub h3 {
    line-height: 2em;
    text-align: center;
    background-color: #444;
    color: #fff;
    margin-bottom: 0;
    font-size: 125%;
    font-weight: 400;
    padding: 10px;
}

.sub a{
    color: #444;
}

.sub a:hover{
    color:#8ED2E0;
}

.sub .chapter{
    width: auto;
}

#blog .sub{
    background: #f3f3f3;
}

        #blog .sub ul.menu{
            padding: 15px;
        }

            #blog .sub ul.menu li{
                position: relative;
            }


            #blog .sub ul.menu li a{
                padding: 10px 10px 10px 30px;
                position: relative;
            }

            #blog .sub ul.menu li:before{
                position: absolute;
                content: '';
                top: 0;
                bottom: 0;
                margin: auto;
                left: 0.5em;
                height: 0;
                width: 0;
                border-style: solid;
                border-width: 5px 0 5px 9px;
                border-color: transparent transparent transparent #014099;
            }

        #blog .sub ul.articlelist{
            font-size: 90%;
            padding: 15px;
        }

            #blog .sub ul.articlelist li{
                overflow: hidden;
                border-bottom: 2px solid #DDDDDD;
                padding: 10px;
            }

            #blog .sub ul.articlelist li a{
                color: #444;
            }

            #blog .sub ul.articlelist li p.post_img{
                width: 35%;
                float: left;
            }

            #blog .sub ul.articlelist li a:hover p.post_img{
                opacity: 0.7;
            }

            #blog .sub ul.articlelist li p.post_img img{
                width: 100%;
                height:auto;
            }

            #blog .sub ul.articlelist li dl{
                float: right;
                width: 59%;
            }

            #blog .sub ul.articlelist li dl dt{
                margin-bottom: 10px;
    }

            #blog .sub ul.articlelist li dl dd{
                font-weight: 700;
}

    #blog .sub .archive ul{
        list-style-type:none;
        font-size: 100%;
    }

        #blog .sub .archive ul li{
            position:relative;
            padding: 0 0 0 1.5em;
            line-height: 1;
        }

        #blog .sub .archive ul li:before{
            position:absolute;
            content:'';
            top: 0.8em;
            left: 0.5em;
            height:0;
            width:0;
            border-style: solid;
            border-width: 5px 0 5px 9px;
            border-color: transparent transparent transparent #014099;
        }

        #blog .sub .archive ul li a{
             color: #145BD4;
        }
            #blog .sub .archive ul li a:hover{
                background-color: #fff;
                color:#8ED2E0;
            }
ul.page-numbers{
    text-align:center;
}
ul.page-numbers li{
    display:inline;
    padding: 0 4px;
}

/* --------------------------------
   □ 詳細
-------------------------------- */

#blog .details{}

#blog .details h3{
    font-size: 175%;
}

#blog .details h3 span{
    display: block;
    font-size: 65%;
}

#blog .sentence{
    padding: 45px 0;
}

#blog .buttonStyle {
    text-align: center;
    margin-bottom: 45px;
}

#blog .share{
}

#blog .share ul{
    display: flex;
}

#blog .share ul li{
    margin-right: 20px;
}

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

    #blog .wrap{
        width: auto;
    }


    /* --------------------------------

    --------------------------------*/

    #blog .details h3 {
        font-size: 113%;
    }

    #blog ul.list li p.image {
        width: 30%;
    }

    #blog ul.list li dl {
        width: 70%;
    }
}