@charset "utf-8";

#about {
    .wrap {
        padding:60px 0;
        background-color:var(--color_bg4);
        .contents {
            h2 {
                font-size:3.6rem;
                font-weight:500;
                text-align:center;
                line-height:1.5;
                margin-bottom:.33em;
                span {
                    font:inherit;
                    color:var(--color_sub);
                }
            }
            p {
                text-align:center;
                font-size:1.8rem;
                margin-bottom:1.5em;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-column-gap:6%;
                img {
                    border-radius:6px;
                }
            }
        }
    }
}

#search {
    .wrap {
        padding:60px 0;
        .contents {
            background-color:var(--color_bg4);
            padding:50px;
            border-radius:14px;
            dl {
                background-color:#FFFFFF;
                padding:15px;
                margin-bottom:20px;
                dt {
                    font-size:1.8rem;
                    margin-bottom:.66em;
                }
                dd {
                    &:has(label) {
                        display:flex;
                        flex-wrap:wrap;
                        gap:15px;
                    }
                    label {
                        display:grid;
                        min-width:8em;
                        height:3em;
                        padding:0 1em;
                        border:1px solid #cccccc;
                        border-radius:5px;
                        grid-template-columns:1em 1fr;
                        align-items:center;
                        justify-content:center;
                        grid-column-gap:.66em;
                        input {
                            transform:translateY(.1em);
                        }
                        &:has(input:checked) {
                            background-color:var(--color_main);
                            color:#FFFFFF;
                        }
                    }
                    input {
                        &[type="search"] {
                            padding:1em;
                            width:100%;
                            border:1px solid #cccccc;
                            border-radius:6px;
                        }
                    }
                }
            }
            button {
                display:grid;
                background-color:var(--color_main);
                color:var(--color_white);
                width:100%;
                height:3.6em;
                align-items:center;
                justify-content:center;
                border:none;
                border-radius:2em;
                font-size:1.8rem;
            }
        }
    }
}

#tomb {
    .wrap {
        padding:60px 0 90px;
        .contents {
            .count {
                display:block;
                font-size:1.8rem;
                margin-bottom:2em;
                span {
                    font-size:1.5em;
                    color:var(--color_sub);
                    margin:0 .2em;
                }
            }
            .tomb {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-gap:50px 30px;
				margin-bottom:50px;
                li {
                    height:100%;
                    .img {
                        overflow:hidden;
                        border-radius:10px;
						display: block;
                        img {
                            display:block;
                            aspect-ratio:2/1;
                            object-fit:cover;
                        }
                    }
                    h3 {
                        font-size:2.4rem;
                        display:grid;
                        grid-row-gap:.33em;
                        padding:1em 0 .5em;
                        ruby {
                            font-size:1.4rem;
                            grid-area:1/1/2/2;
                            font-weight:500;
                        }
                    }
                    .cate {
                        display:flex;
                        flex-wrap:wrap;
                        font-size:1.4rem;
                        grid-gap:.5em;
                        li {
                            a {
                                color:var(--color_white);
                                display:block;
                                line-height:2;
                                padding:0 1em;
                                border-radius:1em;
                            }
                            &.area {
                                a {
                                    background-color:var(--color_sub);
                                }
                            }
                            &.grave {
                                a {
                                    background-color:var(--color_main);
                                }
                            }
                        }
                    }
                    .catch {
                        font-size:1.8rem;
                        line-height:1.5;
                        color:var(--color_sub);
                        padding:.5em 0;
                    }
                    .info {
                        display:grid;
                        grid-template-columns:auto 1fr;
                        align-items: start;
                        grid-column-gap:.5em;
                        margin-bottom:.66em;
                        dt {
                            font-size:1.4rem;
                            color:var(--color_sub);
                            border:1px solid var(--color_sub);
                            line-height:1.8;
                            border-radius:6px;
                            padding:0 .5em;
                        }
                        dd {
                            line-height:1.5;
                            padding-top:.1em;
                        }
                    }
                    .freetxt {
                        line-height:1.5;
                        line-height:1.5;
                        color:var(--color_sub);
                        padding:.33em 0;
                    }
                    .btnwrap {
                        display:grid;
                        grid-template-columns:1fr auto;
						align-items:end;
						padding-top:.66em;
						.tag {
							display:flex;
							flex-wrap:wrap;
							font-size:1.4rem;
							gap:.5em;
							li {
								color:var(--color_main);
								border:1px solid var(--color_main);
								line-height:2;
								padding:0 .33em;
								border-radius:5px;
							}
						}
                        .btn {
							width:9em;
							height:2.4em;
							border-radius:1.3em;
                            background-color:var(--color_main);
                            color:#FFFFFF;
                            display:grid;
                            grid-template-columns:auto .5em;
							align-items:center;
							justify-content:center;
							grid-column-gap:1em;
							&::after {
								content:'';
								aspect-ratio:1;
								border-right:2px solid var(--color_white);
								border-bottom:2px solid var(--color_white);
								transform:translateY(.1em) rotate(-45deg);
							}
                        }
                    }
                }
            }
        }
    }
}


.tomb_single {
	h2 {
		font-size:3.6rem;
		line-height:1.5;
		margin-bottom:.5em;
		span {
			color:var(--color_sub);
			font:inherit;
		}
	}
}

#tomb_slide{
	.wrap {
		padding:60px 0;
		background-color:var(--color_bg4);
		.contents {
			.cate {
				display:flex;
				flex-wrap:wrap;
				font-size:1.4rem;
				grid-gap:.5em;
				margin-bottom:1.5em;
				li {
					a {
						color:var(--color_white);
						display:block;
						line-height:2;
						padding:0 1em;
						border-radius:1em;
					}
					&.area {
						a {
							background-color:var(--color_sub);
						}
					}
					&.grave {
						a {
							background-color:var(--color_main);
						}
					}
				}
			}
			.catch {
				font-size:1.8rem;
				line-height:1.5;
				color:var(--color_sub);
				margin-bottom:1em;
			}
			.slider_wrap {
				overflow:hidden;
				#main_slider {
					margin-bottom:10px;
					.splide__slide {
						width:100%;
						img {
							display:block;
							width:100%;
							aspect-ratio:2;
							object-fit:cover;
							border-radius:15px;
						}
					}
				}
				#thumb_slider {
					.splide__slide {
						width:calc((100% - 40px)/5);
						border:none;
						img {
							display:block;
							width:100%;
							aspect-ratio:2;
							object-fit:cover;
							border-radius:10px;
						}
						&.is-active {
							border:none;
							&::before {
								content:'';
								display:block;
								width:100%;
								height:100%;
								position:absolute;
								left:0;
								top:0;
								z-index:1;
								background-color:var(--color_def);
								border-radius:10px;
								opacity:.33;
							}
						}
					}
				}
			}
		}
	}
}

#tomb_detail {
	.wrap {
		padding:60px 0 120px;
		.contents {
			.contents_inner {
				&:not(:last-child) {
					margin-bottom:60px;
				}
				.body {
					font-size:1.8rem;
				}
				.infotbl {
					border-collapse: collapse;
					width: 100%;
					border-radius:10px;
					overflow:hidden;
					font-size:1.8rem;
					box-shadow:0 0 2px rgba(0,0,0,.33);
					th,td {
						padding:1em 1.5em;
						line-height:1.5;
						text-align:left;
						vertical-align:middle;
					}
					th {
						background-color:var(--color_bg4);
						width:12em;
					}
				}
				.plantbl {
					border-collapse: collapse;
					width: 100%;
                    min-width: 700px;
					border-radius:10px;
					overflow:hidden;
					font-size:1.8rem;
					box-shadow:0 0 2px rgba(0,0,0,.33);
					th,td {
						padding:1em 1.5em;
						line-height:1.5;
						text-align:left;
						vertical-align:middle;
					}
					thead {
						th {
							background-color:var(--color_main);
							color:#FFFFFF;
							text-align:center;
							width:25%;
							&:not(:last-child) {
								border-right:2px solid #FFFFFF;
							}
						}
					}
					tbody {
						th {
							background-color:var(--color_bg4);
							border-right:2px solid #efefef;
						}
						td {
							&:not(:last-child) {
								border-right:2px solid #efefef;
							}
						}
						tr {
							&:not(:last-child) {
								th,td {
									border-bottom:2px solid #efefef;
								}
							}
						}
					}
				}
			}
			.gallery {
				display:grid;
				grid-template-columns:repeat(3,1fr);
				grid-gap:10px;
				li {
					height:100%;
					border-radius:10px;
					overflow:hidden;
					.img {
						img {
							display:block;
							aspect-ratio:2;
							object-fit:cover;
						}
					}
					.capt {
						line-height:1.5;
						padding:1em;
					}
				}
			}
		}
	}
}

#access {
	.wrap {
		padding:60px 0;
		background-color:var(--color_bg4);
		.contents {
			.map {
				iframe {
					display:block;
					width:100%;
					height:auto;
					aspect-ratio:3;
					border-radius:10px;
				}
				& + p {
					margin-top:1.5em;
				}
			}
			p {
				text-align:center;
				line-height:1.5;
				margin-top:.5em;
			}
		}
	}
}

#reservation {
	.wrap {
		padding:60px 0;
		h2 {
			& + p {
				font-size:1.8rem;
				margin-block:1em;
			}
		}
		h3 {
			font-size:1.8rem;
			color:var(--color_white);
			background-color:var(--color_main);
			max-width:20em;
			display:grid;
			height:3em;
			border-radius:5px;
			grid-template-columns:repeat(2,auto);
			align-items:center;
			justify-content:center;
			margin-block:1em;
			&::before {
				content:'▼';
			}
		}
		.calendar {
			.ui-widget.ui-widget-content {
				border: none;
				width:100%;
				margin-bottom:20px;
			}
			.ui-datepicker-header {
				background-color:#f5f5f5;
				padding:.5em;
				.ui-datepicker-next,
				.ui-datepicker-prev {
					display:grid;
					align-items:center;
					justify-content:center;
					font-size:1.6rem;
					width:auto;
					height:2em;
					padding:0 1em;
					background-color:var(--color_white);
					top:50%;
					transform:translateY(-50%);
					right:10px;
					border:1px solid #cccccc;
					span {
						display:none;
					}
					&::before {
						content:'次の月';
					}
				}
				.ui-datepicker-prev {
					right:auto;
					left:10px;
					&::before {
						content:'前の月';
					}
				}
			}
			.ui-datepicker-title {
				font-size:2.0rem;
			}
			.ui-datepicker-calendar {
				border-collapse:collapse;
				th,td {
					font-size:1.8rem;
					border:1px solid #efefef;
					a {
						border: none;
						background: none;
						font-weight: normal;
						text-align:center;
						display:grid;
						grid-row-gap:.66em;
						&::after {
							content:'　';
							display:block;
							text-align:center;
						}
					}
				}
				.ui-datepicker-today {
					a {
						&::after {
							content:'TEL';
						}
					}
				}
				tbody {
					td {
						padding:.5em;
						&.is-future {
							a {
								&::after {
									content:'○';
								}
							}
						}
						&.is-past {
                            pointer-events: none;
                            background-color: #fafafa;
							a {
								opacity: .5;
							}
                        }
						&.day-saturday {
							a {
								color:#0000ff;
							}
						}
						&.day-sunday {
							a {
								color:#ff0000;
							}
						}
                        a {
                            &.ui-state-active {
                                color:var(--color_white);
                            }
                        }
                        &:has(.ui-state-active) {
                            background-color: var(--color_main);
                        }
					}
				}
			}
		}
		.btn {
			font-size:2.2rem;
			font-weight:600;
			border:2px solid var(--color_main);
			border-radius:10px;
			display:grid;
			height:3em;
			grid-template-columns:auto .5em;
			align-items:center;
			justify-content:center;
			grid-column-gap:1em;
			&::after {
				content:'';
				aspect-ratio:1;
				border-right:2px solid var(--color_def);
				border-bottom:2px solid var(--color_def);
				transform:translateY(.1em) rotate(-45deg);
			}
			&.deactive {
				pointer-events: none;
			}
		}
	}
}

#intro {
	.wrap {
		background-color:var(--color_main);
		padding:60px 0;
		.contents {
			h2 {
				font-size:3.0rem;
				text-align:center;
				color:var(--color_white);
				line-height:1.5;
			}
			p {
				color:var(--color_white);
				text-align:center;
				line-height:1.5;
				margin-bottom:1.5em;
			}
			ul {
				display:flex;
				align-items:center;
				column-gap:15px;
				font-size:2.0rem;
				&:not(:has(li:nth-child(3))) {
					max-width: 700px;
					margin:0 auto;
				}
				li {
					flex-grow:1;
					a {
						display:grid;
						grid-template-columns:2.6em 1fr.66em;
						align-items:center;
						grid-column-gap:.5em;
						border:2px solid var(--color_main);
						border-radius:8px;
						line-height:1.5;
						height:4em;
						padding:0 1em;
						background-color:var(--color_bg1);
						.icon {
							aspect-ratio:1;
							background-color:var(--color_main);
							border-radius:50%;
							display:grid;
							align-items:center;
							justify-content:center;
							grid-template-columns:50%;
						}
                        .txt {
                            .inline {
                                display: inline-block;
                                font:inherit;
                            }
                        }
						&::after {
							content:'';
							aspect-ratio:1;
							border-right:2px solid var(--color_def);
							border-bottom:2px solid var(--color_def);
							transform:rotate(-45deg);
						}
						&.btn_tel {
							border-color:var(--color_sub);
							background-color:var(--color_bg2);
							.icon {
								background-color:var(--color_sub);
							}
						}
						&.btn_online {
							border-color:#FF9D00;
							background-color:#FFF1DA;
							.icon {
								background-color:#FF9D00
							}
						}
					}
				}
			}
		}
	}
}


@media (hover:hover) {

	#search {
	    .wrap {
	        .contents {
	            button {
					transition:.3s;
					&:hover {
						filter:brightness(1.2);
					}
	            }
	        }
	    }
	}
	
	#tomb {
	    .wrap {
	        .contents {
	            .tomb {
	                li {
						.img {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: scale(1.05);
								}
							}
						}
						a {
							transition:.3s;
							&:hover {
								filter:brightness(1.2);
							}
	                    }
	                }
	            }
	        }
	    }
	}
	
}

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

}

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

@media screen and (max-width:768px){
    
	#about {
	    .wrap {
	        padding:30px 0;
	        background-color:var(--color_bg4);
	        .contents {
	            h2 {
	                font-size:min(6vw,3.6rem);
	            }
	            p {
	                font-size:min(3.6vw,1.5rem);
	                margin-bottom:1.5em;
	            }
	            .contents_inner {
	                grid-column-gap:2%;
	            }
	        }
	    }
	}
	
	#search {
	    .wrap {
	        padding:30px 0;
	        .contents {
				width:100%;
	            padding:20px;
	            border-radius:10px;
	            dl {
	                padding:10px;
	                margin-bottom:15px;
	                dt {
	                    font-size:1.6rem;
	                }
	                dd {
	                    &:has(label) {
							font-size:1.4rem;
	                        gap:10px;
	                    }
	                    label {
	                        min-width:5em;
							height:2.6em;
	                        padding:0 .66em;
	                        grid-column-gap:.33em;
	                    }
	                    input {
	                        &[type="search"] {
	                            padding:.66em;
	                        }
	                    }
	                }
	            }
	            button {
	                font-size:1.6rem;
	            }
	        }
	    }
	}
	
	#tomb {
	    .wrap {
	        padding:30px 0 60px;
	        .contents {
	            .count {
	                font-size:1.6rem;
	            }
	            .tomb {
	                grid-template-columns:1fr;
	                grid-gap:30px;
					margin-bottom:30px;
	                li {
	                    .cate {
	                        font-size:1.3rem;
	                    }
	                    .catch {
	                        font-size:1.6rem;
	                    }
	                    .info {
							font-size:1.4rem;
	                        dt {
	                            font-size:1.3rem;
	                        }
	                    }
	                    .btnwrap {
	                        display:grid;
	                        grid-template-columns:1fr;
							grid-row-gap:1em;
							.tag {
								font-size:1.3rem;
							}
	                        .btn {
								width:100%;
	                        }
	                    }
	                }
	            }
	        }
	    }
	}

	.tomb_single {
		h2 {
			font-size:2.4rem;
		}
	}
	
	#tomb_slide{
		.wrap {
			padding:30px 0;
			.contents {
				.cate {
					font-size:1.3rem;
				}
				.catch {
					font-size:1.5rem;
				}
				.slider_wrap {
					#main_slider {
						.splide__slide {
							img {
								border-radius:10px;
							}
						}
					}
					#thumb_slider {
						.splide__slide {
							img {
								border-radius:5px;
							}
						}
					}
				}
			}
		}
	}
	
	#tomb_detail {
		.wrap {
			padding:30px 0 60px;
			.contents {
				.contents_inner {
					&:not(:last-child) {
						margin-bottom:30px;
					}
					.body {
						font-size:1.5rem;
					}
					.infotbl {
						font-size:1.4rem;
						th,td {
							padding:1em;
						}
						th {
							width:8.5em;
						}
					}
					.plantbl {
						font-size:1.4rem;
						th,td {
							padding:1em;
							line-height:1.5;
							text-align:left;
							vertical-align:middle;
						}
						thead {
							th {
								padding:1em .5em;
								width: 20%;
								&:nth-child(3) {
									width: 40%;
								}
							}
						}
						tbody {
							th {
								background-color:var(--color_bg4);
								border-right:2px solid #efefef;
							}
							td {
								&:not(:last-child) {
									border-right:2px solid #efefef;
								}
							}
							tr {
								&:not(:last-child) {
									th,td {
										border-bottom:2px solid #efefef;
									}
								}
							}
						}
					}
				}
				.gallery {
					grid-template-columns:repeat(2,1fr);
					li {
						border-radius:6px;
						.capt {
							padding:.5em;
						}
					}
				}
			}
		}
	}
	
	#access {
		.wrap {
			padding:30px 0;
			.contents {
				.map {
					iframe {
						aspect-ratio:1.5;
					}
				}
			}
		}
	}
	
	#reservation {
		.wrap {
			padding:30px 0;
			h2 {
				& + p {
					font-size:1.5rem;
				}
			}
			h3 {
				font-size:1.6rem;
				max-width:100%;
			}
			.calendar {
				.ui-datepicker-header {
					.ui-datepicker-next,
					.ui-datepicker-prev {
						font-size:1.4rem;
					}
				}
				.ui-datepicker-title {
					font-size:1.6rem;
				}
				.ui-datepicker-calendar {
					th,td {
						font-size:1.4rem;
					}
				}
			}
			.btn {
				font-size:1.6rem;
				border-radius:6px;
			}
		}
	}
	
	#intro {
		.wrap {
			padding:30px 0;
			.contents {
				h2 {
					font-size:2.4rem;
				}
				ul {
					display:grid;
					grid-row-gap:10px;
					font-size:1.8rem;
					max-width:340px;
					margin:0 auto;
					&:not(:has(li:nth-child(3))) {
						max-width:340px;
					}
				}
			}
		}
	}
    
}