@charset "utf-8";


.rank-math-breadcrumb {
	background-color:#f5f5f5;
	font-size:1.2rem;
	p {
		width:calc(100% - 60px);
		max-width:1200px;
		margin:0 auto;
		padding:.5em 0;
		line-height:1.3;
	}
}

header {
    &#title {
        .title {
            max-width: 1200px;
            width: calc(100% - 60px);
            margin:0 auto;
            padding:50px 0;
            h1 {
                font-size:4.0rem;
                color:var(--color_main);
                font-weight: 500;
                text-align: center;
				line-height: 1.2;
            }
        }
    }
}

.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:#000000;
                font-size:1.3rem;
				aspect-ratio:1;
                min-height:2em;
                line-height:2;
                min-width:2em;
                padding:0 .5em;
				border-radius:50%;
            }
        }
        .current {
            font-weight:700;
			color:#FFFFFF;
			background-color:var(--color_main);
        }
		&.next,&.prev {
			background:none;
			color:#000000;
		}
    }
}

@media ( hover:hover ){
}


/* =================================================================
    section
================================================================= */


@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

	.rank-math-breadcrumb {
		p {
			width:calc(100% - 50px);
		}
	}
	
	header {
	    &#title {
	        .title {
	            width: calc(100% - 50px);
	            h1 {
	                font-size:3.2rem;
	            }
	        }
	    }
	}

}

@media screen and (max-width:768px){

	.rank-math-breadcrumb {
		p {
			width:calc(100% - 40px);
		}
	}
	
	header {
	    &#title {
	        .title {
	            width: calc(100% - 40px);
	            h1 {
	                font-size:2.4rem;
	            }
	        }
	    }
	}
	
	.pagenavi {
	    padding-top:40px;
	    .page-numbers {
	        li {
	            a,span {
	                font-size:1.2rem;
	            }
	        }
	    }
	}
	
}