@charset "utf-8";

.titlewrap {
    h1 {
        width:calc(100% - 60px);
        max-width:1200px;
        margin:0 auto;
        font-size:1.8rem;
        display:grid;
        justify-items:center;
        text-align:center;
        grid-row-gap:.66em;
        padding:3em 0;
        font-weight:500;
        span {
            font-size:4.4rem;
            font-weight:600;
            color:var(--color_main);
        }
    }
    .rank-math-breadcrumb {
        background-color:#f5f5f5;
        font-size:1.3rem;
        p {
            width:calc(100% - 60px);
            max-width:1200px;
            margin:0 auto;
            padding:.5em 0;
            text-align:right;
            line-height:1.3;
        }
    }
}

.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;
		}
    }
}

section {
    .wrap {
        padding-bottom:120px;
        .contents {
            h2 {
                font-size:2.8rem;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:1.5em;
                display:grid;
                grid-template-columns:repeat(2,auto);
                align-items:center;
                justify-content:start;
                grid-column-gap:.5em;
                &::before {
                    content:'';
                    width:1.25em;
                    height:1em;
                    background:url(../img/common/titbg.svg) no-repeat center center/contain;
                    margin-left:-.66em;
                }
            }
            strong {
                font-weight:600;
                color:var(--color_sub);
            }
        }
    }
}
.titlewrap {
    & + section {
        .wrap {
            padding-top:90px;
        }
    }
}

#usecase {
	.wrap {
		overflow:clip;
		.contents {
			h2 {
				justify-items:center;
                grid-template-columns:1fr;
                font-size:2.0rem;
                font-weight:600;
                .font_en {
                    color:var(--color_sub);
                    font-size:2em;
                }
                &::before {
                    content:none;
                }
			}
			.case_slider {
				padding:30px 0;
				margin-bottom:0;
				position:relative;
				&::before {
					content:'';
					display:block;
					width:100vw;
					height:100%;
					position:absolute;
					z-index:-1;
					background-color:#FAFAFA;
					top:0;
					left:50%;
					transform:translateX(-50%);
				}
				.slick-list {
					overflow:visible;
				}
				.case_slide {
					width:360px;
					padding:0 10px;
					.case {
						background-color:#FFFFFF;
						padding:20px 20px 10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						border-radius:10px 10px 20px 10px;
						.cat {
							display:flex;
							flex-wrap:wrap;
							font-size:1.2rem;
							gap:5px;
							margin-bottom:1em;
							a {
								display:grid;
								align-items:center;
								justify-content:center;
								height:2em;
								background-color:#EFEFEF;
								line-height:1;
								padding: 0 1em;
								border-radius:1em;
							}
						}
						h3 {
							font-size:1.6rem;
							color:var(--color_sub);
							line-height:1.5;
							margin-bottom:.5em;
						}
						.img {
							img {
								display:block;
								aspect-ratio:3/2;
								object-fit:cover;
								border-radius:5px;
							}
						}
						p {
							font-size:1.5rem;
							line-height:1.5;
							padding:1em 0;
						}
						& > a {
							display:grid;
							font-size:1.5rem;
							color:var(--color_main);
							grid-template-columns:1fr 2.6em;
							align-items:center;
							width:9em;
							margin-left:auto;
							margin-right:-10px;
						}
					}
				}
				.slick-dots {
					position: relative;
					width:80%;
					max-width:500px;
					bottom: 0;
					display:flex;
					margin:20px auto 0;
					li {
						margin:0;
						width:auto;
						padding:20px 0;
						flex-grow:1;
						&.slick-active {
							button {
								background-color:var(--color_sub);
							}
						}
					}
					button {
						width:100%;
						height:4px;
						padding:0;
						background-color:#cccccc;
						&::before {
							content:none;
						}
					}
				}
			}
			.btnwrap {
				padding-top:30px;
				.btn {
					max-width:15em;
					font-size:2.0rem;
                    margin:0 auto;
				}
			}
		}
	}
}

@media ( hover:hover ){

	#usecase {
		.wrap {
			.contents {
				.case_slider {
					.case_slide {
						.case {
							& > a {
								transition:.3s;
								&:hover {
									width:8.6em;
									opacity:1;
								}
							}
						}
					}
				}
			}
		}
	}
    
}


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


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

}

@media screen and (max-width:1024px){
    
    
    .titlewrap {
        h1 {
            width:calc(100% - 50px);
            font-size:1.6rem;
            span {
                font-size:4.0rem;
            }
        }
        .rank-math-breadcrumb {
            font-size:1.2rem;
            p {
                width:calc(100% - 50px);
            }
        }
    }

    section {
        .wrap {
            padding-bottom:90px;
        }
    }
}

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

    .titlewrap {
        h1 {
            width:calc(100% - 40px);
            font-size:1.4rem;
            padding:2em 0;
            span {
                font-size:3.0rem;
            }
        }
        .rank-math-breadcrumb {
            font-size:1.2rem;
            p {
                width:calc(100% - 40px);
            }
        }
    }

    section {
        .wrap {
            padding-bottom:60px;
            .contents {
                h2 {
                    font-size:2.0rem;
					margin-bottom:1em;
                }
            }
        }
    }
	.titlewrap {
	    & + section {
	        .wrap {
	            padding-top:45px;
	        }
	    }
	}

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

	#usecase {
		.wrap {
			.contents {
				h2 {
	                font-size:1.6rem;
				}
				.case_slider {
					padding:20px 0;
					text-align:initial;
					.case_slide {
						width:300px;
						padding:0 5px;
						.case {
							padding:20px 10px 10px;
							.cat {
								font-size:1.1rem;
							}
							h3 {
								font-size:1.5rem;
							}
							p {
								font-size:1.4rem;
							}
							& > a {
								margin-right:0px;
							}
						}
					}
					.slick-dots {
						width:100%;
						li {
							padding:10px 0;
						}
					}
				}
				.btnwrap {
					.btn {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	
}