/*!
Theme Name: fortina
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fortina
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

fortina is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

#menu-btn-check {
    display: none;
}

.indent-1 {
    display: inline-block;
    padding-left: 3em;
    text-indent: -1em;
    width: calc(100% - 3em);
}

.pnavi{
    height: 1em;
    padding-top: .3em;
    margin-top: 1.5em;
    margin-bottom: 2em;
    position: relative;
    border-top: 1px solid #ccc;
}

.pnavi .page-numbers{
    display: none;
}

.pnavi .prev,
.pnavi .next{
    display: block;
}

.pnavi .prev,
.pnavi .next,
.pnavi .current-page{
    position: absolute;
}

.pnavi .prev{
    left: 0;
}
.pnavi .next{
    right: 0;
}
.pnavi .current-page{
    left: 50%;
    margin-left: -1em;
}

.spOnly{
    display: none;
}

@media all and (max-width: 480px) {
    body{
        overflow-x: hidden;
    }
    
    .indent-1 {
        display: inline-block;
        padding-left: 1em;
        text-indent: -1em;
        width:calc(100% - 1em);
    }

    .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #aaa;
}
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 22px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
        transition : .2s;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }


    #gNavi {
        width: 100%;
        height: 100%;
        padding-top: 50px;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 80;
        background-color: rgba(100,100,100,.95);
        transition: all 0.3s;
    }
    #menu-btn-check:checked ~ #gNavi {
        left: 0;
    }
    ul#gNavi  {
        padding: 70px 0;
    }
    ul#gNavi  li {
        /*border-bottom: solid 1px #ffffff;*/
        border: none;
        list-style: none;
        width: 100%;
    }
    ul#gNavi li a,
    ul#gNavi li.nmt8 a{
        display: block;
        width: 90%!important;
        margin: 0 auto;
        font-size: 16px!important;
        box-sizing: border-box;
        color:#ffffff!important;
        text-decoration: none;
        padding: 20px 13px 30px!important;
        position: relative;
    }
    ul#gNavi li a:hover{
        text-decoration: none!important;
        background: none!important;
    }
    ul#gNavi li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 28px;
    }

    
    
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    div#header,
    div#mainImgBox,
    div#mainContents,
    div#newTopics dl,
    div.wrapBox{
        width:100%;
    }
    
    div#header{
        height: 70px;
    }
    
    div#header h1 img{
        width:150px;
        height: auto;
    }
    
    
    /* トップページ*/
    /* ------------- */
    div#mainImgBox{
        height: auto;
        min-height: inherit;
        background-size: contain;
    }
    
    div#mainImgBox div#mainMessageBox{
        padding-top: 50vw;
        padding-bottom: 10px;
        background-color: transparent;
        width: auto;
        min-height:inherit;
    }
    
    div#mainContents div.topicsBox{
        width:auto;
        padding: 0 20px;
        margin-left: 0;
    }
    
    div#newTopics{
        padding: 0 20px 40px;
    }

    div#newTopics dl dt {
        border-bottom: 0;
    }
    div#newTopics dl dd {
        margin-left: 0;
        padding-left: 80px;
    }
    div#bannerBox{
        margin: 40px auto 0;
        width: 290px;
        max-width: 290px;
        float: none;
    }
    div#bannerBox ul li{
        clear: both;
    }
    
    /* 下層ページ */
    div.wrapBox{
        padding-top: 0;
    }
    
    h2{
        padding-left: 20px;
        padding-right: 20px;
    }
    
    h3{
        margin: 0 20px;
    }
    
    #mainContents p:not(.mB20),
    body:not(.home) #mainContents ul{
        padding: 0 20px;
    }
    
    a.more{
        white-space: normal;
    }
    
    
    
    
    
    
    div#leftContents{
        width:auto;
        margin-top: 40px;
        margin-left: 20px;
    }
    
    div#leftContents ul#subNavigation{
        margin-bottom: 0;
    }
    
    .footer-navi a{
        display: inline-block;
    }
    
    div#footer{
        padding: 0 10px;
    }
    
    
    
    
    /* 汎用 */
    input, textarea{
        max-width: 280px; 
    }
    
    
    .spOnly_w_auto{
        width:auto!important;
    }
    .spOnly_m_20{
        margin-left: 20px!important;
        margin-right: 20px!important;
    }
    .spOnly_p_20{
        padding: 0 20px!important;
    }
    .spOnly_p_20 h3{
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .spOnly_pl_0{
        padding-left: 0!important;
    }
    .spOnly_mt_10{
        margin-top: 10px!important;
    }
    .spOnly_ml_0{
        margin-left: 0!important;
    }
    .spOnly_ml_20{
        margin-left: 20px!important;
    }
    .spOnly_mr_0{
        margin-right: 0!important;
    }
    .spOnly_mb_30{
        margin-bottom: 30px!important;
    }
    
    
    
    
    .spOnly{
        display: block;
    }
}