@charset "utf-8";

.titleimg {
    img {
        width:100%;
        max-width:100%;
        height:auto;
        max-height:400px;
        object-fit:cover;
    }
    & ~ div,& ~ section {
        position:relative;
        z-index:1;
    }
    .breadcrumbs {
        font-size:1.4rem;
        line-height:1.2;
        text-align:right;
        padding:.5em 0;
        width:calc(100% - 60px);
        margin:0 auto;
    }
}

.titlewrap {
    h1 {
        width:calc(100% - 60px);
        max-width:1100px;
        margin:0 auto;
        text-align:center;
        font-size:4.2rem;
        padding:1em 0 1.5em;
        font-weight:400;
        letter-spacing:.05em;
        /* &:first-letter {
            font-size:1.2em;
            color:var(--color_main);
        } */
    }
}

.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:#f1f1f1;
                color:var(--color_main);
                font-size:1.2rem;
                min-height:2em;
                line-height:2;
                min-width:2em;
                padding:0 .5em;
            }
        }
        .current {
            font-weight:700;
        }
    }
}

section {
    .wrap {
        padding-bottom:120px;
    }
}

@media ( hover:hover ){
    
}


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


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

}

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

    section {
        .wrap {
            padding-bottom:90px;
        }
    }
    
}

@media screen and (max-width:768px){
    
    .titleimg {
        .breadcrumbs {
            width:calc(100% - 40px);
        }
    }
    
    .titlewrap {
        h1 {
            width:calc(100% - 40px);
            font-size:3rem;
        }
    }

    section {
        .wrap {
            padding-bottom:60px;
        }
    }
    
    .pagenavi {
        padding-top:45px;
        .page-numbers {
            font-size:1.4rem;
        }
    }
}