@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:3em 0 3em;
        font-weight:500;
        span {
            font-size:4.4rem;
            font-weight:500;
            &:first-letter {
                font-size:1.2em;
            }
        }
    }
}
.bread{
    background-color: #EBEBEB;
    margin-bottom: 90px;
    .rank-math-breadcrumb {   
        width:calc(100% - 60px);
        max-width:1100px;
        margin:0 auto;
        padding:0.4em 0 0.3em;   
        text-align: right;
        p {        
            font-size:1.4rem;
            line-height: 1.2;
            a{
                &:hover{
                    color: #139ba0;
                }  
            }           
        }
    }
}

.pagination{
    padding-top:40px;
    .screen-reader-text {
        display:none;
    }
    .nav-links{
        display:flex;
        align-items:start;
        justify-content:center;
        gap:.5em .33em;
        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: #1FC4CB;
            color: #fff;
        }
    }
}


section {
    .wrap {
        padding-bottom:90px;
        .contents {
            h2 {
                font-size: 2.4rem;
                font-weight: 500;
                border-bottom: dotted #1FC4CB 3px;
                padding-bottom: 5px;
                margin-bottom: 30px;
                letter-spacing: .1em;
                color: #333333;
                line-height: 1.5;
                text-indent: -1.5em;
                padding-left: 1.5em;
                img{
                    width: 1.2em;
                    padding-bottom: .3em;
                    margin-right: 0.3em;
                }
            }
            h3{
                font-size: 2.2rem;
                color: #fff;
                background-color: #1FC4CB;
                padding: 0.5em 1em;
                font-weight: 500;
                letter-spacing: .1em;
                margin-bottom: 30px;
                line-height: 1.5;
            }
            p{
                &.mb{
                    margin-bottom: 1em;
                }
                &.orange{
                    color: #FF8800;
                }
            }
            .contents_inner{
                &.ver1{
                    display: grid;
                    grid-template-columns: 1fr 320px;
                    grid-column-gap: 30px;
                }
                &.ver2{
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-column-gap: 30px;
                }
            }
            a.btn{
                background-color: #fbb565;
                padding: 0.8em 1.5em;
                border-radius: 10px;
                color: #fff;
                letter-spacing: 0.1em;
                display: grid;
                grid-template-columns: auto 1fr;
                justify-self: start;
                grid-column-gap: 0.5em;
                margin-top: 1.5em;
                width: 15.5em;
                align-items: center;
                img{
                    width: 1.3em;
                    aspect-ratio: inherit!important;
                }
            }
            ul{
                margin-bottom: 1em;
                li{
                    line-height: 1.5;
                    position: relative;
                    padding-left: 1em;
                    margin-bottom: 0.5em;
                    &::before{
                        content:"";
                        position: absolute;
                        left:0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0.6em;
                        height: 0.6em;
                        border-radius: 50px;
                        background-color: #1FC4CB;
                    }
                }
            }
        }
    }
}

@media ( hover:hover ){
    
}


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


@media screen and (max-width:1200px){
    .bread{
        margin-bottom: 70px;
    }
    section {
        .wrap {
            padding-bottom:70px;
        }
    }

}

@media screen and (max-width:1024px){
    
    .titlewrap {
        h1 {
            width:calc(100% - 50px);
            span{
                font-size: 4.0rem;
            }
        }
    }
    .bread{
        margin-bottom: 50px;
    }
    section {
        .wrap {
            padding-bottom:50px;
            .contents{
                h2 {
                    font-size: 2.2rem;
                    img{
                        width: 1.2em;
                    }
                }
                h3{
                    font-size: 2.0rem;
                }
                p{
                    font-size: 1.5rem;
                }
                .contents_inner{
                    &.ver1{
                        grid-template-columns: 1fr 240px;
                    }
                    &.ver2{
                        grid-column-gap: 20px;
                    }
                }
                a.btn{
                    font-size: 1.5rem;
                }
                ul{
                    li{
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }
    
    .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:1.5em 0 2em;
            span {
                font-size:3rem;
            }
        }
    }
    .bread{
        margin-bottom: 30px;
        span{
            font-size: 1.2rem;
        }
    }
    section {
        .wrap {
            padding-bottom:30px;
            .contents {
                h2 {
                    font-size:1.8rem;
                    margin-bottom: 20px;
                    letter-spacing: inherit;
                }
                h3{
                    font-size:1.6rem;
                    margin-bottom: 20px;
                    letter-spacing: inherit;
                }
                p{
                    font-size: 1.4rem;
                }
                .contents_inner{
                    &.ver1{
                        grid-template-columns: 1fr;
                        grid-row-gap: 20px;
                        img{
                            aspect-ratio: 5 / 3;
                            object-fit: cover; 
                            width: 100%; 
                            display: block;
                        }
                    }
                    &.ver2{
                        grid-column-gap: 5px;
                    }
                    a.btn{
                        font-size: 1.4rem;
                        img{
                            width: 1.5em;
                        }
                    }
                }
            }
        }
    }
    
    .pagenavi {
        padding-top:45px;
        .page-numbers {
            font-size:1.4rem;
        }
    }
}