@charset "UTF-8";
#page_wrapper {
	&.res {
		width:100%;
		max-width:2000px;
		padding:0;
		overflow:clip;
	}
	#reservation {
		background-color:#FFFFFF;
		* {
			color:#60553e;
		}
		&.soon {
			ul {
				li {
					a {
						&[href*="inukokoro-cart.com"] {
							pointer-events:none;
							background:url(./img/reservation/soon.png) no-repeat center center/contain;
							img {
								opacity:0;
							}
						}
					}
				}
			}
		}
		.contents {
			width:calc(100% - 100px);
			max-width:1000px;
			margin:0 auto;
			position:relative;
			.penon {
				pointer-events:none;
			}
		}
		ul,li {
			list-style:none;
		}
	}
	#mv {
		.wrap {
			background-color:rgba(95,164,169,.7);
			padding:5em 0 2.5em;
			h2 {
				max-width:600px;
				margin:0 auto 2em;
			}
			h3 {
				max-width:540px;
				margin:0 auto 3em;
			}
			.contents_inner{
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:2%;
				div {
					position:relative;
					a {
						display:block;
						width:54%;
						position:absolute;
						top:56%;
						left:23%;
					}
				}
				&.btn_box {
					max-width:800px;
					margin:0 auto 3em;
				}
			}
		}
	}
	#se1 {
		.wrap {
			padding:5em 0;
			.contents {
				.contents_inner {
					max-width:780px;
					margin:0 auto;
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-column-gap:4%;
					& > div {
						display:grid;
						grid-template-rows:auto 1fr auto;
					}
					h2 {
						font-size:1.3rem;
						text-align:center;
						padding:1em 0 .75em;
						span {
							display:block;
							font-size:1.2rem;
							font-weight:500;
							line-height:1.5;
						}
					}
					a {
						display:block;
						width:64%;
						margin:0 auto;
					}
				}
			}
		}
	}
	.cartbox {
		&#byouki {
			.wrap {
				padding-bottom:10em;
			}
		}
		&#dog {
			.wrap {
				padding-bottom:6em;
			}
		}
		.wrap {
			.contents {
				h2 {
					margin-bottom:5em;
				}
				.contents_inner {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-row-gap:5em;
					& > div {
						&:nth-child(odd) {
							padding-right:3em;
							border-right:3px dotted #60553e;
						}
						&:nth-child(even) {
							margin-left:3em;
						}
						ul {
							display:grid;
							grid-template-columns:repeat(2,1fr);
							grid-column-gap:8%;
							padding-bottom:2em;
							border-bottom:2px solid #60553e;
							li {
								display:grid;
								grid-row-gap:1em;
							}
						}
						h4 {
							font-size:1.1rem;
							margin-bottom:.5em;
							padding-top:1em;
							font-weight:600;
							text-indent:-.5em;
							span {
								color:#60abb1!important;
							}
						}
						& > dl {
							border-top:2px dotted #60553e;
							margin-top:1em;
							padding-top:1em;
							border-bottom:2px solid #60553e;
							padding-bottom:.5em;
							& > dt,h5 {
								font-size:1.1rem;
								margin-bottom:.5em;
								font-weight:600;
								text-indent:-.5em;
								span {
									color:#60abb1!important;
								}
							}
							& > dt {
								position:relative;
								cursor:pointer;
								padding-right:1em;
								.icon {
									width:.8em;
									height:.8em;
									position:absolute;
									right:0;
									top:50%;
									transform:translateY(-50%);
									&::before,&::after {
										content:'';
										display:block;
										width:100%;
										height:2px;
										background-color:#60553e;
										transition:.3s;
										position:absolute;
										top:50%;
										left:50%;
										transform:translate(-50%,-50%) rotate(0deg);
									}
									&::after {
										transform:translate(-50%,-50%) rotate(90deg);
									}
								}
								&.open {
									.icon {
										&::before {
											transform:translate(-50%,-50%) rotate(90deg);
											opacity:0;
										}
										&::after {
											transform:translate(-50%,-50%) rotate(180deg);
										}
									}
								}
							}
							& > dd {
								display:none;
								p {
									margin-bottom:1.5em;
								}
							}
							dl {
								display:flex;
								flex-wrap:wrap;
								align-items:center;
								justify-content:space-between;
								padding-bottom:1em;
								dt {
									font-weight:500;
									background-color:#FFFFFF;
									position:relative;
									width:60%;
									flex-grow:1;
									display:grid;
									grid-template-columns:auto 1fr;
									grid-column-gap:.5em;
									align-items:center;
									margin-right:.5em;
									&::after {
										content:'';
										height:2px;
										border-top:2px dotted #60553e;
									}
								}
								dd {
									width:auto;
									background-color:#FFFFFF;
								}
							}
						}
					}
				}
			}
		}
	}
	#zairyo {
		.wrap {
			background-color:#f9f8f2;
			padding:6em 0;
			.contents {
				h2 {
					font-size:2.4rem;
					line-height:1.2;
					border-left:10px solid #f5db4a;
					padding-left:.66em;
					margin-bottom:.66em;
					& + p {
						font-size:1.3rem;
						margin-bottom:1.5em;
						line-height:1.5;
					}
				}
				.contents_inner {
					background-color:#FFFFFF;
					padding:1.5em;
					display:grid;
					grid-template-columns:1fr 26%;
					align-items:center;
					grid-column-gap:3%;
					margin-bottom:3em;
					h3 {
						font-size:1.3rem;
						display:grid;
						grid-template-columns:9em 1fr;
						align-content:center;
						grid-column-gap:.33em;
						margin-bottom:.5em;
					}
					p {
						font-size:.9em;
					}
				}
				& > h3 {
					font-size:1.6rem;
					display:grid;
					grid-template-columns:1em 1fr;
					align-items:center;
					grid-column-gap:.5em;
					margin-bottom:1em;
				}
				table {
					&:not(:last-child) {
						margin-bottom:3em;
					}
					width:100%;
					border-collapse:collapse;
					border:2px solid #60abb1;
					th {
						width:50%;
						font-size:1.1rem;
						background-color:rgba(96,171,177,.7);
						color:#FFFFFF;
						padding:.33em .66em;
						vertical-align:middle;
						img {
							width:1em;
							vertical-align:baseline;
							margin-right:.33em;
						}
						&:first-child {
							border-right:2px solid #FFFFFF;
						}
					}
					td {
						font-size:1rem;
						vertical-align:middle;
						padding:.66em;
						background-color:#FFFFFF;
						&:first-child {
							border-right:2px dotted #60abb1;
						}
						&.bg {
							background-color:#f1f1f1;
						}
						dl {
							display:grid;
							grid-template-columns:6em 1fr;
							align-items:center;
							grid-column-gap:1em;
							dt {
								color:#60abb1;
								font-weight:600;
							}
							dd {
								div {
									display:grid;
									grid-template-columns:1fr .8em 1fr;
									text-align:center;
									align-items:center;
								}
								span {
									span {
										color:#ee898a;
										font-weight:600;
									}
								}
							}
						}
					}
					&.tbl2 {
						th {
							width:60%;
							&:first-child {
								width:40%;
							}
						}
						td {
							dl {
								grid-template-columns:4em 1fr;
							}
						}
					}
				}
				.tbl_sp {
					display:none;
				}
			}
		}
	}
}


@media (max-width: 1024px) {
	
	#page_wrapper {
		#reservation {
			.contents {
				width:calc(100% - 60px);
			}
		}
	}
	
}


@media (max-width: 768px) {
	
	#page_wrapper {
		#reservation {
			.contents {
				width:84%;
			}
		}
		#mv {
			.wrap {
				padding:12vw 0 8vw;
				h2 {
					margin:0 auto 8vw;
				}
				h3 {
					margin:0 auto 8vw;
				}
				.contents_inner{
					grid-template-columns:1fr;
					grid-row-gap:3vw;
					&.btn_box {
						max-width:90%;
						grid-row-gap:5vw;
						margin:0 auto 8vw;
					}
				}
			}
		}
		#se1 {
			.wrap {
				padding:10vw 0;
				.contents {
					.contents_inner {
						grid-column-gap:8%;
						& > div {
							display:grid;
							grid-template-rows:auto 1fr auto;
						}
						h2 {
							font-size:min(4vw,1.3rem);
							span {
								font-size:min(3.0vw,1.1rem);
								padding-top:.66em;
							}
						}
						a {
							width:100%;
						}
					}
				}
			}
		}
		.cartbox {
			&#byouki {
				.wrap {
					padding-bottom:20vw;
				}
			}
			&#dog {
				.wrap {
					padding-bottom:15vw;
				}
			}
			.wrap {
				.contents {
					h2 {
						margin-bottom:10vw;
					}
					.contents_inner {
						grid-template-columns:1fr;
						grid-row-gap:0;
						& > div {
							&:nth-child(odd) {
								padding-right:0;
								border-right:none;
							}
							&:nth-child(even) {
								margin-left:0;
							}
							&:not(:first-child) {
								margin-top:12vw;
								border-top:1px dotted #60553e;
								padding-top:6vw;
							}
							ul {
								grid-template-columns:1fr;
								padding-bottom:2em;
								grid-row-gap:8vw;
								li {
									display:grid;
									grid-template-columns:26% 1fr;
									grid-column-gap:3%;
									grid-row-gap:0;
									h3 {
										grid-area:1/1/4/2;
										img {
											width:120%;
											max-width:120%;
											margin-left:-20%;
										}
									}
									& > img {
										width:60%;
										margin:2vw 0 3vw;
									}
								}
							}
							h4 {
								font-size:.9rem;
							}
							& > dl {
								& > dt,h5 {
								font-size:.9rem;
								}
							}
						}
					}
				}
			}
		}
		#zairyo {
			.wrap {
				padding:12vw 0;
				.contents {
					h2 {
						font-size:1.2rem;
						border-left:5px solid #f5db4a;
						& + p {
							font-size:.8rem;
						}
					}
					.contents_inner {
						padding:1em;
						grid-template-columns:1fr 40%;
						align-items:start;
						margin-bottom:8vw;
						& > div {
							&:first-child {
								display:contents;
							}
						}
						h3 {
							font-size:1rem;
							grid-template-columns:8em 1fr;
							grid-area:1/1/2/3;
						}
						p {
							font-size:.9em;
							line-height:1.5;
							br {
								display:none;
							}
						}
					}
					& > h3 {
						font-size:1rem;
						display:grid;
					}
					.tbl {
						display:none;
					}
					.tbl_sp {
						display:block;
						border:2px solid #60abb1;
						margin-bottom:3vw;
						& + h3 {
							margin-top:10vw;
						}
						& > dt {
							font-size:.9rem;
							background-color:rgba(96,171,177,.7);
							font-weight:600;
							color:#FFFFFF;
							padding:.33em .66em;
							img {
								width:1em;
								vertical-align:baseline;
								margin-right:.33em;
							}
						}
						& > dd {
							font-size:.8rem;
							padding:.66em;
							background-color:#FFFFFF;
							&.bg {
								background-color:#f1f1f1;
							}
							dl {
								display:grid;
								grid-template-columns:6em 1fr;
								align-items:center;
								grid-column-gap:1em;
								dt {
									color:#60abb1;
									font-weight:600;
								}
								dd {
									div {
										display:grid;
										grid-template-columns:auto .8em auto;
										text-align:center;
										justify-content:start;
										grid-column-gap:.5em;
										align-items:center;
									}
									span {
										span {
											color:#ee898a;
											font-weight:600;
										}
									}
								}
							}
						}
						&.tbl2 {
							& > dd {
								dl {
									grid-template-columns:4em 1fr;
								}
							}
						}
					}
				}
			}
		}
	}
	
}


/**animation**/
.animation {
	opacity: 0;
	transition-duration: 1.5s;
	transition-timing-function:cubic-bezier(0.190, 1.000, 0.220, 1.000);
	filter:blur(2);
	&.fade-left {
		transform: translateX(-100px);
	}
	&.fade-right {
		transform: translateX(100px);
	}
	&.fade-up {
		transform: translateY(100px);
	}
	&.delay-1 {
		transition-delay: .33s;
	}
	&.delay-2 {
		transition-delay: .66s;
	}
	&.delay-0 {
		transition-delay: .16s;
	}
	&.delay-3 {
		transition-delay: .49s;
	}
	&:hover {
		&.delay-1 {
			transition-delay: 0s;
		}
		&.delay-2 {
			transition-delay: 0s;
		}
		&.delay-0 {
			transition-delay: 0s;
		}
		&.delay-3 {
			transition-delay: 0s;
		}
	}
}
.animation {
	&.show {
		opacity: 1;
		filter:blur(0);
		&.fade-left {
			transform: translate(0,0);
		}
		&.fade-right {
			transform: translate(0,0);
		}
		&.fade-up {
			transform: translate(0,0);
		}
	}
}



@media (max-width: 768px) {
	
	.animation {
		&.fade-left {
			transform: translateX(-50px);
		}
		&.fade-right {
			transform: translateX(50px);
		}
		&.fade-up {
			transform: translateY(50px);
		}
	}
	
}