@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;
        display:grid;
        grid-row-gap:1em;
        padding:4em 0 4em;
        text-align: center;
        justify-items: center;
        span {
            font-size: 3.2rem;
            letter-spacing: .5em;
            font-weight: 400;
        }
        span.english {
            color: #FF9F2F;
            font-size: 1.8rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform:capitalize;
        }
        img {
            width: 2.5em;
            margin-bottom: 1em;
        }
    }
}

.rank-math-breadcrumb {
    background-color: #f4f3f1;
    text-align: right;
    padding: 0.3em 20px;
    p {
        margin:0 auto;
        max-width: 1200px;
        line-height: 1.6;
        font-size: 1.4rem;
    }
}

.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: #FF9F2F;
            border-radius: 50%;
        }
    }
}

section {
    .wrap {
        &:last-child{
            border-bottom: #FF9F2F 1px solid;
            margin-bottom: 50px;
        }
        padding-bottom:90px;
        .contents {
            h2 {
                font-size:2.8rem;
                text-align:center;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:1em;
            }
        }
    }
}

@media ( hover:hover ){
    
}


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


@media screen and (max-width:1200px){
    .titlewrap {
        h1{
            padding: 3em 0 3em;
            img{
                width:2.2em;
                margin-bottom: 0.5em;
            }
            span{
                font-size: 2.8rem;
                letter-spacing: .3em;
            }
            span.english{
                font-size: 1.6rem;
            }
        }
    }
    .rank-math-breadcrumb {
        p {
            max-width: 100%;
            font-size: 1.3rem;
        }
    }
	h3{
		font-size: 2.4rem;
		letter-spacing: 0.2em;
	}
    section {
        .wrap {
            &:last-child{
                margin-bottom: 40px;
            }
            padding-bottom:70px;
        }
    }
}

@media screen and (max-width:1024px){
    
    .titlewrap {
        h1{
            img{
                width:1.8em;
            }
            span{
                font-size: 2.4rem;
                letter-spacing: .2em;
            }
            span.english{
                font-size: 1.5rem;
            }
        }
    }

    section {
        .wrap {
            &:last-child{
                margin-bottom: 40px;
            }
            padding-bottom:50px;
        }
    }
    
    .breadcrumbs {
        .aioseo-breadcrumbs {
            width:calc(100% - 50px);
        }
    }
}

@media screen and (max-width:768px){
    
    #main {
        /* padding-bottom: 90px; */
    }
    
    .titlewrap {
        h1{
            padding: 2em 0 2em;
            grid-row-gap: 0.6em;
            span{
                font-size: 2rem;
                letter-spacing: .1em;
            }
            span.english{
                font-size: 1.4rem;
            }
        }
    }

    section {
        .wrap {
            &:last-child{
                margin-bottom: 30px;
            }
            padding-bottom:30px;
        }
    }
    
    .breadcrumbs {
        .aioseo-breadcrumbs {
            width:calc(100% - 40px);
            padding:1em 0;
            font-size:1.2rem;
        }
    }
    
    .pagenavi {
        padding-top:30px;
    }
}