#wrap{
    max-width: 1000px;
    margin:0 auto;
}

#fake-main{
    margin:6% auto;
    width:90%;
    max-width:1000px;
}

#fake-main.posts-index{
    margin:0 auto 6%;
    padding-top:calc(100vh*(80 / 1080));
    width:100%;
    max-width:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:40px;
    align-items:flex-start;
}

#fake-main.posts-index > #breadcrumb{
    order:2;
    flex:0 0 90%;
    max-width:1200px;
}

#fake-main.posts-index > .page-hero{
    order:1;
    flex:0 0 100%;
    max-width:none;
    width:100%;
}

#fake-main.posts-index > main.sub-main{
    order:3;
    float:none;
    flex:0 1 calc(min(90vw, 1200px) * .7);
    width:70%;
    max-width:840px;
    margin-left:0;
    margin-right:0;
}

#fake-main.posts-index > #side{
    order:4;
    float:none;
    flex:0 1 calc(min(90vw, 1200px) * .25);
    width:25%;
    max-width:300px;
    margin-left:0;
}

#fake-main.posts-index > #foot-widget{
    order:5;
    flex:0 0 90%;
    max-width:1200px;
}

h1,h2,h3,h4,li,p,span,a{
    letter-spacing: .1em;
}

h1:before, h2:before, h3:before, h4:before, h5:before{
    content:none;
}

.top-h1{
    text-align: center;
    margin:4em auto;
    
    h1{
        font-size: 1em;
        font-weight:normal;
        margin-top:.5em;
    }
    
    span{
        font-weight: normal;
        padding-bottom:.2em;
        font-size:1.8em;
    }
}

#breadcrumb{
    text-align: right;
    margin-bottom:2em;
}

#breadcrumb {
    ul{
        display: flex;
    }

    li{
        display: inline-block;
        padding:0 .2em;
        font-size:.9em;
    }

    li a{
        text-decoration: none;
        color:#2d2d2d;
    }

    li a:hover{
        color:#006400;
        text-decoration: underline;
    }
}

@media screen  and (max-width:430px) {
    #breadcrumb li{
        font-size: 0.8em;
    }
}

/*2colomun*/

main{
    width:70%;
    margin-right:5%;
    float:left;
}

#side{
    width:20%;
    margin-left:5%;
    float:left;
}

@media screen  and (max-width:820px) {
    main{
        margin-right:2%;
    }

    #side{
        width:27%;
        margin-left:1%;
    }
}

@media screen  and (max-width:500px) {
    main,#side{
        float:none;
        width:100%;
    }
}

@media screen and (max-width:768px) and (min-width:451px) {
    #fake-main.posts-index{
        padding-top:calc(100vh * (80 / 1080) * 2);
    }
}

@media screen and (max-width:900px) {
    #fake-main.posts-index{
        column-gap:0;
    }

    #fake-main.posts-index > .page-hero{
        background-position:left center;
    }

    #fake-main.posts-index > main.sub-main,
    #fake-main.posts-index > #side,
    #fake-main.posts-index > #breadcrumb,
    #fake-main.posts-index > #foot-widget{
        flex:0 0 90%;
        width:90%;
        max-width:1200px;
        margin-left:0;
        margin-right:0;
    }

    #fake-main.posts-index > #side{
        margin-top:60px;
    }
}


/*取得結果*/
#search-result{
    a{
        text-decoration: none;
    }
}

.search-pad{
    margin-bottom:2em;
    background-color: #f2f2f2;
    padding:1em;
    font-size:.8em;

    div,h2{
        margin-bottom:1em;
    }

    h2{
        font-size:1.2em;
        font-weight:bolder;
    }

    .kijiwoyomu{
        text-align: right;
        padding-right:1em;
    }
}

.search-pad:hover{
    outline: dashed 1px #006400;
    background-color: #fff;

    .kijiwoyomu{
        color:#006400;
        font-weight:bolder;
    }
}

/*ページャー*/
.nav-links{
    margin-bottom:3em;
    text-align: right;

    .current{
        color:#006400;
        font-weight: bolder;
        font-size:1.1em;
    }

    a{
        display: inline-block;
        color:#2d2d2d;
        text-decoration: none;
    }

    a:hover{
        background-color: #2d2d2d;
        color: #fff;
    }
}

.page-numbers{
    margin:auto .1em;
    border:#2d2d2d 1px solid;
    padding:5px;
}

/*------サイドバー------*/
.side_widget{
    margin-bottom:2em;

    h2{
        background-color: #af998b;
        color:#fff;
        font-weight: normal;
        font-size:1em;
        text-align: center;
        padding:5px 2em;
        font-family: "Open Sans","游ゴシック Medium","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", noto-sans-cjk-jp,"Yu Gothic Medium","游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    }
}

@media screen  and (max-width:830px) {
    .side_widget{
        font-size:0.8em;
    }
}


/*カテゴリ*/
.side_cat {
    h1{
        border:solid 1px #af998b;
    }

    li{
        list-style: none;
        text-align: center;
        border:solid 1px #af998b;
        margin-bottom: -1px;
        padding:.4em;
        background-color: #fff;
    }

    a{
        text-decoration: none;
        color:#2d2d2d;
        font-size: 0.9em;
    }

    a:hover{
        text-decoration: underline;
        text-underline-offset: 5px;
        color:#006400;
    }
}

/*SNS*/
.side_sns{
    h2{
        margin-bottom: 1em;
    }

    div{
        margin:auto;
        width:100%;
    }

    a{
        margin-left:1em;
        margin-bottom:.3em;
        text-decoration: none;
        font-family:"Open Sans","游ゴシック Medium","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", noto-sans-cjk-jp,"Yu Gothic Medium","游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    }

    a:before{
        font-family:"Font Awesome 6 Brands";
        font-weight:400;
        padding-right:1em;
    }
}