@charset "utf-8";

.titlewrap {
	width:calc(100% - 60px);
	max-width:1100px;
	margin:0 auto;
    h1 {
		font-size:2.0rem;
		display:grid;
		grid-template-columns:repeat(3,auto);
		grid-column-gap:1em;
		align-items:center;
		justify-content:start;
		padding:3em 0 2em;
		position:relative;
		.font_en {
			font-size:6.0rem;
			letter-spacing:.05em;
		}
		.txt {
			color:#777777;
			&::before {
				content:'ー';
				margin-right:.25em;
			}
		}
		img {
			width:6.6em;
		}
    }
    .aioseo-breadcrumbs {
        font-size:1.2rem;
		line-height:1.3;
    }
}

.pagenavi {
    padding-top:50px;
    .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.5rem;
				font-weight:600;
				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:#F7CB0E;
        }
		&.next,&.prev {
			background:none;
			color:#000000;
		}
    }
}

section {
    .wrap {
        padding-bottom:120px;
        .contents {
            h2 {
                font-size:4.5rem;
                line-height:1.5;
                margin-bottom:1em;
            }
            h3 {
                font-size: 2.0rem;
                line-height: 1.5;
                margin-bottom: 1em;
            }
			ul {
				&.tab {
					display:flex;
					flex-wrap:wrap;
					grid-gap:20px;
					align-items:center;
					justify-content:flex-start;
					margin-bottom:60px;
					li {
						flex-grow:1;
						max-width:calc(25% - 15px);
						a {
							display:grid;
							height:3em;
							align-items:center;
							justify-content:center;
							border:1px solid #1A80FF;
                            color:#1A80FF;
							border-radius:1.5em;
                            cursor: pointer;
							padding:0 2em;
							white-space: nowrap;
							&.active {
								color:#ffffff;
								background-color:#1A80FF;
							}
						}
					}
				}
			}
			.tab_content {
                position: relative;
				.item {
                    top:0;
                    left: 0;
                    transition: .3s;
                    opacity: 1;
                    z-index: 1;
                    pointer-events: all;
                    position: relative;
                    transform: translateY(0);
					&:not(.active) {
                        position: absolute;
                        z-index: -1;
                        opacity: 0;
                        pointer-events: none;
                        /* transform: translateY(20px); */
					}
				}
			}
        }
    }
}
.titlewrap {
    & + section {
        .wrap {
            padding-top:90px;
        }
    }
}

@media ( hover:hover ){

    section {
        .wrap {
            .contents {
                ul {
                    &.tab {
                        li {
                            a {
                                transition: .3s;
                                &:hover {
                                    color:#ffffff;
                                    background-color:#1A80FF;
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}


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


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

}

@media screen and (max-width:1024px){
    
    
	.titlewrap {
		width:calc(100% - 50px);
	    h1 {
			font-size:1.8rem;
			.font_en {
				font-size:5.0rem;
			}
	    }
	}

    section {
        .wrap {
            padding-bottom:90px;
			.contents {
				ul {
					&.tab {
						li {
							max-width:calc(50% - 10px);
							width:calc(50% - 10px);
						}
					}
				}
			}
        }
    }
}

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

    .titlewrap {
		width:calc(100% - 40px);
		
	    h1 {
            display: flex;
            flex-wrap: wrap;
			font-size:1.6rem;
			padding:2em 0;
			row-gap:.5em;
			&:has(img) {
				padding-bottom:2.5em;
			}
			.font_en {
				font-size:min(9vw,4.0rem);
			}
			img {
				position:absolute;
				right:-1em;
				bottom:0;
			}
	    }
    	.aioseo-breadcrumbs {
            font-size:1.1rem;
        }
    }

    section {
        .wrap {
            padding-bottom:60px;
            .contents {
                h2 {
                    font-size:2.0rem;
                }
                h3 {
                    font-size:1.8rem;
                }
				ul {
					&.tab {
						gap:10px;
						justify-content:center;
						li {
							max-width: 400px;
							width:100%;
							a {
								font-size:1.4rem;
							}
							&:not(:has( + li)):not(last-child):first-child {
								flex-grow: unset;
							}
						}
					}
				}
            }
        }
    }
	.titlewrap {
	    & + section {
	        .wrap {
	            padding-top:45px;
	        }
	    }
	}

    .pagenavi {
        padding-top:30px;
        .page-numbers {
	        li {
	            a,span {
	            font-size:1.2rem;
				}
			}
        }
    }

	
}