@charset "utf-8";
/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* http://www.webplus.jp/                                       */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/




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

　#loop

-------------------------------------------------------------- */
#loop ul {
    margin: 0;
}

#loop li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
    list-style-type: none;
}

#loop li .postTitle {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4rem;
}

#loop li .postTitle a, #loop li .postTitle a:visited {
    color: rgba(106, 57, 6, 1.0)
}

#loop li .postTitle a:hover {
    color: rgba(255, 135, 0, 1.0);
}

#loop li .postTitle::after {
    visibility: hidden;
    font-family: "FontAwesome";
    content: "\f061";
    color: rgba(255, 135, 0, 1.0);
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

#loop li .postTitle:hover::after {
    visibility: visible;
    padding-left: 10px;
    content: "\f061";
    color: rgba(255, 135, 0, 1.0);
}

#loop .new {
    margin-left: 10px;
    color: rgba(255, 0, 0, 1.0);
    font-size: 0.8rem;
    font-weight: 500;
}

#loop li .postMeta {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2rem;
}

#loop .wp-pagenavi span, #loop .wp-pagenavi a {
    font-size: 0.9rem;
}

@media only screen and (min-width:768px) {

    #loop li h4 {
        font-size: 1.125rem;
    }

}

@media only screen and (min-width:992px) {

    #loop li .postTitle {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    #loop li .postMeta {
        font-size: 1.0rem;
    }

}

@media only screen and (min-width:1200px) {

    #loop li .postTitle {
        font-size: 1.4rem;
        line-height: 1.6rem;
    }

}

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

　#postContent

-------------------------------------------------------------- */
#postContent > h2 {
    padding: 15px 10px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.4rem;
    line-height: 1.8rem;
}

#postContent > h3, #postContent h4, #postContent h5, #postContent h6 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6rem;
}

#postContent > h3 {
    border-bottom: 1px solid rgba(143, 195, 31, 0.5);
    color: rgba(143, 195, 31, 1.0);
    font-size: 1.3rem;
}

#postContent h4 {
    border-bottom: 1px solid rgba(255, 135, 0, 0.5);
    color: rgba(255, 135, 0, 1.0);
}

#postContent h5 {
    border-bottom: 1px solid rgba(236, 109, 123, 0.5);
    color: rgba(236, 109, 123, 1.0);
}

/* p, li */
#postContent p, li, dd {
    line-height: 1.8rem;
}

#postContent p {
    margin-bottom: 1.2rem;
}

#postContent ul {
    margin: 20px 0 20px 26px;
}

#postContent ul li {
    color: rgba(105, 130, 27, 1.0);
    list-style-type: disc;
}

#postContent ol {
    margin: 20px 0 20px 30px;
}

#postContent ol li {
    color: rgba(0, 104, 183, 1.0);
    list-style-type: decimal;
}

#postContent dl {
    margin: 20px 0;
}

#postContent dt {
    margin: 0;
    color: rgba(255, 135, 0, 1.0);
    font-weight: 500;
}

#postContent dd {
    margin: 0;
    margin-bottom: 10px;
    padding-left: 20px;
    color: rgba(255, 135, 0, 0.7);
}

/*　image
/*-------------------------------------------*/
#postContent img[class*="wp-image"] {
    max-width: 100%;
    height: auto;
}

#postContent img.alignright {
    float: right;
    margin: 0 0 0 20px;
}

#postContent img.alignleft {
    float: left;
    margin: 0 20px 0 0;
}

#postContent img.aligncenter {
    margin: 20px auto;
}

/*　table
/*-------------------------------------------*/
#postContent table {
    margin: 0;
    margin: 10px 0 20px;
    width: 98% !important;
    border: 3px solid rgba(153, 108, 51, 0.2);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}

#postContent th {
    padding: 5px 10px;
    background: rgba(236, 109, 123, 0.1);
    border: 1px solid rgba(153, 108, 51, 0.2);
    font-weight: 500;
    vertical-align: top;
    white-space: nowrap;
}

#postContent tr:first-child th {
    background: rgba(0, 175, 235, 0.1);
}

#postContent tr:first-child th:first-child {
    background: rgba(0, 0, 0, 0.1);
}

#postContent td {
    padding: 5px 10px;
    border: 1px solid rgba(153, 108, 51, 0.2);
    background: rgba(255, 255, 255, 0.3);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

#postContent .table-responsive {
    clear: both;
    border: none;
    text-align: center;
}

#postContent caption {
    padding: 3px 5px;
    color: rgba(255, 0, 0, 1.0);
    font-size: 1.0rem;
}

/*　.postFooter
/*-------------------------------------------*/
.postFooter {
    padding-top: 20px;
    border-top: 1px solid rgba(153, 108, 51, 0.5);
}

.postFooter h2, .postFooter h3 {
    margin: 0;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    font-weight: 400;
    text-align: right;
}

/*　prev, next
/*-------------------------------------------*/
#postContent .navigation {
    clear: both;
    margin: 30px 0 0;
    padding: 10px 0 40px;
    background: rgba(0, 123, 187, 0.1);
}

#postContent .navigation a {
    font-size: 1.0rem;
    text-decoration: none;
}

#postContent .navigation a:hover {
    color: rgba(0, 123, 187, 1.0);
}

#postContent .prev {
    float: left;
    width: 45%;
    text-align: right;
}

#postContent .prev a::before {
    padding-right: 5px;
    font-family: "FontAwesome";
    content: "\f060";
}

#postContent .next {
    float: right;
    width: 45%;
    text-align: left;
}

#postContent .next a::after {
    padding-left: 5px;
    font-family: "FontAwesome";
    content: "\f061";
}

@media only screen and (min-width:768px) {

    #postContent ul {
        margin: 20px 0 20px 35px;
    }

    #postContent ol {
        margin: 20px 0 20px 40px;
    }

    #postContent table {
        margin: 10px 0 20px 10px;
        border: 5px solid rgba(153, 108, 51, 0.2);
    }

}

@media only screen and (min-width:992px) {

    #postContent ul {
        margin: 20px 0 20px 30px;
    }

    #postContent ol {
        margin: 20px 0 20px 38px;
    }

    #postContent th {
        white-space: normal;
    }

    #postContent td {
        white-space: normal;
    }

    #postContent caption {
        display: none;
    }

}

@media only screen and (min-width:1200px) {

    #postContent table {
        border: 8px solid rgba(153, 108, 51, 0.2);
    }

}

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

　#sidebar

-------------------------------------------------------------- */
#sidebar {
    padding-top: 5vh;
    border-top: 3px solid rgba(0, 0, 0, 0.1);
}

#sidebar ul {
    list-style: none;
}

#sidebar li {
    margin-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
    line-height: 1.6rem;
}

#sidebar li:last-child {
    border-bottom: none;
}

#sidebar li a {
    color: rgba(106, 57, 6, 1.0);
    font-weight: 300;
}

#sidebar li a:hover {
    color: rgba(255, 135, 0, 1.0);
}

#sidebar .widget {
    margin-bottom: 40px;
}

#sidebar .widget h3 {
    margin: 0;
    margin-bottom: 10px;
    padding: 5px 0;
    background: rgba(143, 195, 31, 0.5);
    border-radius: 6px;
    color: rgba(105, 130, 27, 1.0);
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
}

#sidebar .widget label {
    display: none;
}

#sidebar .widget select {
    margin-left: 10%;
    padding-left: 10px;
    width: 80%;
    height: 40px;
    font-size: 1.0rem;
}

#sidebar .cat-item-1 {
    display: none;
}

@media only screen and (min-width:768px) {

    #sidebar {
        padding-top: 0;
        border-top: none;
    }

    #sidebar ul ul {
        margin-left: 16px;
    }

    #sidebar li {
        line-height: 1.2rem;
    }

    #sidebar .widget h3 {
        font-size: 1.2rem;
    }

    #sidebar .widget a {
        font-size: 1.0rem;
    }

    #sidebar .widget select {
        margin-left: 0;
        width: 100%;
        height: 30px;
    }

}

@media only screen and (min-width:992px) {

    #sidebar ul ul {
        margin-left: 20px;
    }

    #sidebar li {
        line-height: 1.6rem;
    }

    #sidebar .widget a {
        font-size: 1.2rem;
    }

    #sidebar .widget select {
        height: 40px;
        font-size: 1.2rem;
    }

}