@charset "utf-8";

#msg {
	.wrap {
		padding:90px 0;
		background-color:var(--color_bg4);
		.contents {
			p {
				font-size:1.8rem;
				text-align:center;
			}
		}
	}
}

#area {
    .wrap {
        padding:90px 0 150px;
        .contents {
            .area_list {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-gap:min(2vw,30px);
                li {
					height:100%;
					a {
						display:block;
						height:100%;
	                    background-color:var(--color_bg4);
	                    padding:min(3vw,30px);
	                    border-radius:12px;
	                    h3 {
	                        font-size:2.4rem;
	                        margin-bottom:.5em;
	                    }
	                    .img {
	                        overflow:hidden;
	                        border-radius:8px;
	                        img {
	                            display:block;
	                            aspect-ratio:2.35;
	                        }
	                    }
	                    .count {
	                        font-size:1.5rem;
	                        color:var(--color_sub);
	                        line-height:1;
	                        padding:1em 0;
							span {
								font-size:1.1em;
								margin:0 .2em;
							}
	                    }
	                    .link {
	                        color:var(--color_main);
	                        font-size:1.6rem;
	                        line-height:1;
	                        display:inline-grid;
	                        grid-template-columns:auto .5em;
	                        grid-column-gap:.15em;
	                        align-items:center;
							&::after {
								content:'';
								aspect-ratio:1;
								border-right:2px solid var(--color_main);
								border-bottom:2px solid var(--color_main);
								transform:translateY(.1em) rotate(-45deg);
							}
	                    }
					}
                }
            }
        }
    }
}

@media (hover:hover){

	#area {
	    .wrap {
	        .contents {
	            .area_list {
	                li {
						a {
							transition:.3s;
		                    .img {
		                        img {
									transition:.3s;
		                        }
		                    }
		                    .link {
								&::after {
									transition:.3s;
								}
		                    }
							&:hover {
								opacity:1;
			                    .img {
			                        img {
										transform:scale(1.05);
			                        }
			                    }
			                    .link {
									&::after {
										transform:translate(3px, .1em) rotate(-45deg);
									}
			                    }
							}
						}
	                }
	            }
	        }
	    }
	}

}

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

}

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

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

	#msg {
		.wrap {
			padding:30px 0;
			.contents {
				p {
					font-size:1.6rem;
					text-align:left;
				}
			}
		}
	}

	#area {
	    .wrap {
	        padding:45px 0 90px;
	        .contents {
	            .area_list {
	                grid-template-columns:repeat(2,1fr);
	                grid-gap:min(2.5vw,30px);
	                li {
						a {
		                    padding:min(4vw,30px);
		                    border-radius:8px;
		                    h3 {
		                        font-size:min(4.6vw,2.4rem);
		                    }
		                    .img {
		                        border-radius:5px;
		                    }
		                    .count {
		                        font-size:min(3.4vw,1.5rem);
								padding-bottom:.66em;
		                    }
		                    .link {
		                        font-size:min(3.4vw,1.5rem);
		                        grid-column-gap:.05em;
								margin-right:-1em;
								&::after {
									transform:translateY(0) rotate(-45deg);
								}
		                    }
						}
	                }
	            }
	        }
	    }
	}
    
}