@charset "utf-8";

@media (min-width:768px) {
    ul.nav {
        display: block !important
    }

    #m-nav {
        display: none
    }

    .sm-only {
        display: none
    }

    .pc-only {
        display: inline-block
    }

    /******/
    .f_box {
        display: flex;

        flex-direction: row;
        gap: 0 2.5%;
        justify-content: center;
        /*flex-direction: row;
        flex-flow: column wrap;
        flex-wrap: wrap;*/
        border: 1px dotted #d4ceb5;

        border-top: none;
        overflow: none;

    }

    .r_box,
    .l_box {
        margin: 0;
        padding: 0;
    }

    .ctr-topics .post {
        /*width: calc(50% - 20px);*/
        width: 450px;
    }

    .posts>article>.post {
        color: red;

    }
}

@media (max-width:767px) {
    #g-nav {
        display: none
    }

    .sm-only {
        display: inline-block
    }

    .pc-only {
        display: none
    }

    ul.nav {
        display: none;
        width: auto;
        padding: 0;
        border-top: 1px solid #2d54a1;
        line-height: 1.1
    }

    ul.nav li {
        float: none;
        margin: 0;
        padding: 0;
        border: none
    }

    ul.nav li a {
        padding: 10px 10px 10px 20px;
        border: 1px solid #2d54a1;
        border-top: none;
        background: #eaeaea url(/files/000000031.gif) no-repeat 0 center;
        border-radius: 0;
        text-align: left;
        color: #2d54a1
    }

    ul>li a:hover {
        text-decoration: none
    }

    ul.nav li.selected a,
    ul.nav li.selected a:hover,
    ul.nav li.selected a:link,
    ul.nav li.selected a:visited {
        background-color: #fff;
        color: #fff
    }

    #m-nav ul {
        display: none;
        width: auto;
        padding: 0;
        border-top: #fad1e3 1px solid;
        line-height: 1.1
    }

    #m-nav ul li {
        float: none;
        margin: 0;
        padding: 0;
        border: none
    }

    #m-nav ul li,
    #m-nav ul li:first-child {
        width: auto;
        border: none;
        border-bottom: #fad1e3 1px solid
    }

    #m-nav ul li {
        width: 100%;
        border-bottom: #fad1e3 1px solid
    }

    #m-nav ul li a {
        padding: 15px 20px;
        text-align: left;
        display: block;
        background: #09b7ad;
        position: relative;
        border-top: none;
        border-radius: 0;
        color: #fff;
        text-decoration: none;
        font-size: 1.8rem
    }

    #m-nav ul li a:after {
        content: "";
        margin-top: -4px;
        top: 50%;
        right: 15px;
        width: 8px;
        height: 8px;
        color: #888;
        font-size: 1em;
        font-weight: 700;
        line-height: 1.2em;
        display: block;
        position: absolute;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    #m-nav ul li a:hover {
        text-decoration: none
    }

    #m-nav ul li.selected a,
    #m-nav ul li.selected a:hover,
    #m-nav ul li.selected a:link,
    #m-nav ul li.selected a:visited {
        color: #fff
    }

    #header #m-nav li a:hover,
    #m-nav ul li.selected a {
        border-radius: 0
    }

    #m-nav ul li.sub ul {
        padding: 10px 0;
        border: 1px solid #2d54a1;
        border-top: none
    }

    #m-nav ul li.sub ul li a {
        position: relative;
        border: none;
        background: 0 0;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 13px
    }

    #m-nav ul li.sub ul li a:hover {
        color: #2d54a1;
        text-decoration: underline
    }

    #m-nav ul li.sub ul li a::before {
        content: "";
        display: inline-block;
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 4px;
        height: 4px;
        border: 4px solid transparent;
        border-left: 4px solid #d2e059
    }

    .drawer {
        position: absolute;
        right: 10px;
        top: 40px;
        display: block;
        width: 45px;
        height: 45px;
        border: 1px solid #ccc;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        z-index: 3;
        background-color: #fff
    }

    .drawer .icon,
    .drawer .icon::after,
    .drawer .icon::before {
        position: relative;
        display: block;
        top: 50%;
        left: 50%;
        height: 3px;
        width: 32px;
        background: #000;
        content: "";
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

    .drawer .text {
        position: relative;
        display: block;
        top: calc(100% - 14px);
        font-size: 10px;
        color: #000;
        text-align: center
    }

    .drawer .text::after,
    .drawer .text::before {
        position: absolute;
        width: 100%;
        left: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        font-size: 10px;
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8);
        -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
        transform-origin: center top
    }

    .drawer .text::before {
        content: "メニュー";
        visibility: visible;
        opacity: 1
    }

    .drawer .text::after {
        content: "閉じる";
        visibility: hidden;
        opacity: 0
    }

    .drawer .icon {
        -webkit-transform: translate3d(-50%, -5px, 0);
        transform: translate3d(-50%, -5px, 0)
    }

    .drawer .icon::before {
        -webkit-transform: translate3d(-50%, -11.5px, 0);
        transform: translate3d(-50%, -11.5px, 0)
    }

    .drawer .icon::after {
        -webkit-transform: translate3d(-50%, 5px, 0);
        transform: translate3d(-50%, 5px, 0)
    }

    .drawer.is-active .icon {
        background-color: transparent
    }

    .drawer.is-active .icon::after,
    .drawer.is-active .icon::before {
        top: 0
    }

    .drawer.is-active .icon::before {
        -webkit-transform: translateX(-50%) rotate(45deg);
        -ms-transform: translateX(-50%) rotate(45deg);
        transform: translateX(-50%) rotate(45deg);
        top: 0
    }

    .drawer.is-active .icon::after {
        -webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
        -ms-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
        transform: translateX(-50%) translateY(-10px) rotate(-45deg);
        top: 7px
    }

    .drawer.is-active .text::before {
        visibility: hidden;
        opacity: 0
    }

    .drawer.is-active .text::after {
        visibility: visible;
        opacity: 1
    }

}