@charset "utf-8";

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

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


.titlewrap {

    h1 {
        /*width:calc(100% - 60px);
        max-width:1100px;*/
        margin:0 auto;
        font-size:1.4rem;
        display:grid;
        grid-row-gap:.66em;
        padding:6em 0 2em;
        font-weight:400; 
        text-align: center;
        justify-content: center;
        text-transform: uppercase;
        span {
            letter-spacing: 0.5em;
            font-size:4.4rem;
            font-weight:500;
            position: relative;
            &:first-letter {
                font-size:1.2em;
            }
            &::before{
                content:"";
                background-color: #fff;
                width: 2em;
                height: 2em;
                position: absolute;
                top: -0.5em;
                left: -1em;
                border-radius: 100px;
                z-index: -1;
            }
        }
    }
}
    
.rank-math-breadcrumb {
    background-color: #EAE7E1;
    text-align: right;
    padding: 10px 20px;
    p {
        margin:0 auto;
        max-width: 1200px;
        line-height: 1.6;
        font-size: 1.4rem;
        .separator {
            color:#011C5E;
            margin:0 .5em;
        }
        &:hover{
            color: #011C5E;
        }
    }
}

.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:#fff;
                font-size:1.2rem;
                min-height:2em;
                line-height:2;
                min-width:2em;
                color: #001B5D;
                padding: 0.5em 1.2em;
            }
        }
        .current {
            font-weight:700;
            background-color: #e5ddce;
        }
    }
}

section {
    .wrap {
        .contents {
            h2 {
                font-size:2.8rem;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:1em;
                position: relative;
                padding-left: 1em;
            	&::before{
                    content: "";
                    background-color: #001B5D;
                    border-radius: 50px;
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    position: absolute;
                    left:0;
                    top:0.5em;
                    /*top: 50%;
                    transform: translateY(-50%);*/
                }
            }
            p{
                &.mb20{
                    margin-bottom: 20px;
                }
            }
            .btn.dl{
                a{
                padding:0.5em 1.5em;
                border-radius: 50px;
                border: 1px #001B5D solid;
                display: grid;
                grid-template-columns: 20px auto 20px;
                align-items: center;
                grid-column-gap: 1em;
                color: #001B5D;
                font-weight: 500;
                width: 17em;
                margin: 0 auto;
                justify-content: center;
                justify-self: center;
                &:hover{
                    background-color: #b9ccfc;
                }
                }
            }
        }
    }
}

@media ( hover:hover ){
    
}


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


@media screen and (max-width:1200px){
    .titlewrap {
        h1 {
            padding:5em 0 0;
            span {
                letter-spacing: 0.4em;
                font-size:3.8rem;
            }
        }
    }
    section {
        .wrap {
            .contents {
                h2 {
                    font-size:2.4rem;
                    &::before{
                        width: 12px;
                        height: 12px;
                    }
                }
                p{
                    &.mb20{
                        margin-bottom: 1em;
                    }
                }
                .btn.dl{
                    a{
                    font-size: 1.5rem;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1024px){
    
    .titlewrap {
        h1 {
            padding:4em 0 0;
            span {
                font-size:3.2rem;
            }
        }
    }
    section {
        .wrap {
            .contents {
                h2 {
                    font-size:2.0rem;
                    &::before{
                        width: 10px;
                        height: 10px;
                    }
                }
                p{
                    &.mb20{
                        margin-bottom: 1em;
                    }
                }
                .btn.dl{
                    a{
                    font-size: 1.4rem;
                    }
                }
            }
        }
    }
    .rank-math-breadcrumb {
        p {
            font-size: 1.3rem;
        }
    }
    .pagenavi {
        padding-top:50px;
    }
}

@media screen and (max-width:768px){
    
    .titlewrap {
        h1 {
            padding:3em 0 1em;
            span {
                font-size:2.4rem;
            }
        }
    }
    section {
        .wrap {
            .contents {
                h2 {
                    font-size:1.6rem;
                    &::before{
                        width: 10px;
                        height: 10px;
                    }
                }
                p{
                    &.mb20{
                        margin-bottom: 1em;
                    }
                }
                .btn.dl{
                    a{
                    font-size: 1.4rem;
                    }
                }
            }
        }
    }
    .rank-math-breadcrumb {
        p {
            font-size: 1.2rem;
        }
    }
    .pagenavi {
        padding-top:30px;
    }
    .btn.dl{
    a{
        grid-template-columns: 15px auto 15px;
        width: 17em;
        }
    }

}