@charset "utf-8";

#header {
    box-shadow:0 1px 3px rgba(0,0,0,.15);    
}

#main {
    /* padding-bottom: 150px; */
}


.titlewrap {
    background-color: #027A36;
    position: relative;
    &::after{
        content: "";
        display: block;
        background-image: url('../img/common/tit_bg.jpg');
        background-position: center;
        background-size: cover;
        position: absolute;
        z-index: 1;
        top: 0;
        right:0;
        width: calc(50vw + 150px);
        height: 100%;
    }
    h1 {
        color:#fff;
        width:calc(100% - 60px);
        max-width:1100px;
        margin:0 auto;
        font-size:1.8rem;
        display:grid;
        grid-row-gap:.5em;
        align-content: center;
        font-weight:500;
        height: 175px;
        span {
            font-size:5rem;
            font-weight:500;
            &:first-letter {
                font-size:1.2em;
            }
        }
    }
}

.rank-math-breadcrumb {
    width:calc(100% - 60px);
    max-width:1100px;
    margin:0 auto;
    padding:1.5em 0;
    font-size:1.4rem;
    line-height:1.2;
    text-align: right;
    margin-bottom: 90px;
}

.pagenavi {
    padding-top:60px;
    .screen-reader-text {
        display:none;
    }
    .page-numbers {
        display:flex;
        align-items:start;
        justify-content:center;
        gap:.5em .33em;
        li {
            a,span {
                background-color: #adabab;
                color:var(--color_main);
                font-size:1.4rem;
                min-height:2em;
                line-height:2;
                min-width:2em;
                padding:0 .5em;
                color: #FFFFFF;
            }
        }
        .current {
            font-weight:700;
            background-color: #027A36;
            color: #FFFFFF;
        }
    }
}

section {
    .wrap {
        padding-bottom:90px;
        .contents {
            h2 {
                font-size:1.6rem;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:2em;
                span{
                    font-size:4.2rem;
                    margin-right: 0.5em;
                }
            }
        }
    }
}

@media ( hover:hover ){
    
}


/* =================================================================
    section
================================================================= */


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

}

@media screen and (max-width:1024px){
    
    .titlewrap {
        h1 {
            width:calc(100% - 50px);
        }
    }

    section {
        .wrap {
            padding-bottom:90px;
        }
    }
    
    .breadcrumbs {
        .aioseo-breadcrumbs {
            width:calc(100% - 50px);
        }
    }
}

@media screen and (max-width:768px){
    
    #main {
        /* padding-bottom: 90px; */
    }
    
    .titlewrap {
        h1 {
            width:calc(100% - 40px);
            font-size:1.3rem;
            padding:2em 0 3em;
            span {
                font-size:3.2rem;
            }
        }
    }

    section {
        .wrap {
            padding-bottom:60px;
            .contents {
                h2 {
                    font-size:2.2rem;
                }
            }
        }
    }
    
    .breadcrumbs {
        .aioseo-breadcrumbs {
            width:calc(100% - 40px);
            padding:1em 0;
            font-size:1.2rem;
        }
    }
    
    .pagenavi {
        padding-top:45px;
        .page-numbers {
            font-size:1.4rem;
        }
    }
}