@charset "UTF-8";

:root {
--font-base: clamp(1px, 2vw, 20px);
--font-middle: clamp(1px, 2.6vw, 28px);
--font-large: clamp(1px, 3.2vw, 36px);
--font-xlarge: clamp(1px, 4vw, 42px);
--space-sm: clamp(12px, 1.5vw, 16px);
--space-md: clamp(24px, 3vw, 32px);
--space-lg: clamp(36px, 4vw, 80px);
--space-mlg: clamp(60px, 5vw, 100px);
--font: "Noto Sans JP", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
--font-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
--color: #000;
--accent-color: #c3c3c3;
--border-blk: 1px solid #000;
}

body {
font-family: var(--font);
font-size: var(--font-base);
font-weight: 500;
line-height: 180%;
color: var(--color);
word-break: break-all;
background: #fff;
}
body.active {
block-size: 100%;
overflow: hidden;
}
img, video, iframe {
inline-size:100%; max-inline-size: 100%; block-size: auto; vertical-align: bottom;
}
a, a:hover {
text-decoration: none; color: #555;
}
i {
font-size: 0.8em; padding-right: 5px;
}
.scroll-up { opacity: 0; transform: translateY(70px);transition: all 1.2s; }
.scroll-up.done { opacity : 1; transform: translateY(0); }
.light { font-weight: 300; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.lw220 { line-height:220%; }
.min { font-family: var(--font-serif); }
.u-max-w-960 { inline-size: 90%; max-inline-size: 960px; }
.u-max-w-1280 { inline-size: 90%; max-inline-size: 1280px; }
.u-mx-auto { margin-inline: auto; } .u-ml-a { margin-left:auto; } .u-mr-a { margin-right:auto; }

#header { position: relative; inline-size: 100%; background: url(../imgs/bgx2.avif) no-repeat center top; background-size: 100% auto; padding-block: var(--space-mlg);
	img { display:block; position: relative;}
	img.logo { z-index: 1; inline-size: 90%; max-inline-size: 800px; padding-top:100px; }
	img.family { z-index: 0; max-inline-size: 1280px; padding-bottom: var(--space-md); transform: translateY(-50px);}
	h1 { text-align:center; font-size:var(--font-xlarge); }
}

.drawer__button { position: fixed; right: 10px; top: 10px; background: #fff; border: 2px solid #007842; border-radius: 8px; cursor: pointer; z-index: 999;
	> span { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); block-size: 4px; background: #007842; }
	> span:first-child { transition: transform 0.3s ease; }
	> span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	> span:last-child { transition: transform 0.3s ease; }
}
.drawer__button.active {
	> span:first-child { transform: translate(-50%, -50%) rotate(-45deg); }
	> span:nth-child(2) { opacity: 0; }
	> span:last-child { transform: translate(-50%, -50%) rotate(45deg); }
}

.drawer__nav { position: fixed; z-index: 101; top: 0; left: 0; inline-size: 100%; block-size: 100vh; background: rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease; opacity: 0; visibility: hidden;
	.drawer__nav__inner { position: relative; block-size: 100%; background: #007842; overflow: scroll; transform: translateX(100%); transition: transform 0.3s ease; display: grid; place-items: center;
		> div { inline-size: 90%;
			.drawer__nav__menu {
				.drawer__nav__link { font-size: var(--font-base); display: block; color: #fff; }
				.drawer__nav__link:hover { color: #fff; }
			}
			p { font-size: var(--font-middle); color: #fff; border-bottom: 1px solid #fff; }
		}
	}
}
.drawer__nav.active { opacity: 1; visibility: visible;
	.drawer__nav__inner { transform: translateX(0); }
}

section { padding-bottom: var(--space-mlg);
	h2 { padding-bottom: var(--space-md);
		img { display:block; padding-bottom: var(--space-sm); }
		img.egg { inline-size: 15%; max-inline-size: 100px; margin-inline:auto; }
		img.dinopark { inline-size:35%; max-inline-size:300px; }
		span { display: block; text-align:center; padding-top: var(--space-sm); font-size:var(--font-large); }
	}
}

#about { background:url(../imgs/dino01.avif) no-repeat top right 5%; background-size: 20% auto; border-bottom: var(--border-blk); margin-bottom: var(--space-mlg);
	p { padding-bottom: var(--space-sm); 
		img { display: block; inline-size: 50%; }
	}
	#about1 { background:url(../imgs/dino02.avif) no-repeat bottom var(--space-sm) left 10%; background-size: 20% auto; }
	#about2 { background:url(../imgs/dino03.avif) no-repeat center right 20%; background-size: 20% auto; }
	#about3 { padding-bottom: var(--space-md); }
	h3 { text-align:center; font-size: var(--font-middle); padding-bottom: var(--space-md); }
	.about_map { display:block; max-inline-size:800px; }
}

#features {
	ul {
		li { padding-bottom: var(--space-lg);
			h3, img { padding-bottom:var(--space-sm); }
			h3 { font-size:var(--font-middle); }
			img { display:block; inline-size:80%; }
		}
		li:last-child { padding-bottom:0 }
		li:nth-child(2) p { padding-right:23%; background:url(../imgs/dino04.avif) no-repeat right bottom; background-size:20% auto; }
		li:nth-child(4) p { padding-right:21%; background:url(../imgs/dino05.avif) no-repeat right bottom; background-size:20% auto; }
	}
}

#section { position: relative; z-index: 1; background: url(../imgs/bg2.avif) repeat center; background-size: 960px auto; padding-block: var(--space-mlg);
	h3 { font-size:var(--font-middle); padding-bottom:var(--space-md); }
	p { padding-bottom:var(--space-lg); }
	p:last-child { padding-bottom:0; }
	.section_map { display:block; max-inline-size:800px; padding-bottom:var(--space-md); }
}

#point { position: relative; border-bottom: var(--border-blk); padding-block: var(--space-mlg); margin-bottom: var(--space-mlg);
	ol {
		> li { padding-bottom: var(--space-lg);
			h3 { font-size:var(--font-middle); padding-bottom: var(--space-md); display: flex; align-items: center;
				span { display: table; color:#a9a4a2; font-size:var(--font-xlarge); padding-right:10px; line-height:1em; }
			}
			p { padding-bottom:var(--space-sm); }
			img { display:block; inline-size:80%; max-inline-size:600px; padding-bottom:var(--space-sm); }
			ul { border:var(--border-blk); border-radius:10px; padding:var(--space-sm); list-style-type:square;
				li { margin-left:30px; padding-bottom:8px; }
				li:last-child { padding-bottom:0; }
			}
		}
		> li:last-child { padding: 20px 0 0; background:url(../imgs/dino07.avif) no-repeat right 5% top; background-size:20% auto;
			p { padding-bottom:0;}
		}
	}
}
#point:before { display: block; content: ""; inline-size: 100%; block-size: 400px; background: url(../imgs/dino06.avif) no-repeat top left 5%; background-size: 20% auto; position: absolute; z-index: 2; top: -30px;
}

#location { background:url(../imgs/dino08.avif) no-repeat left 10% top; background-size:25% auto;
	.location_neighborhood { inline-size:90%; max-inline-size:800px; margin-inline:auto; padding:var(--space-sm); box-sizing: border-box; border:var(--border-blk); border-radius:10px;
		table { inline-size:100%;
			td { font-size:0.8em; }
			td:nth-child(2):before { content:"… "; }
		}
	}
}
#location1 {
	h3 { font-size:var(--font-middle); padding-bottom:var(--space-md); }
	> p { padding-bottom:var(--space-md); }
	ul {
		li { padding-bottom:var(--space-lg);
			img { display:block; inline-size:80%; max-inline-size:640px; padding-bottom:var(--space-sm); }
			h4 { font-size: var(--font-middle); padding-bottom:var(--space-sm); display:flex; justify-content: space-between;
				span { display:table; font-size:0.8em; }
			}
		}
		li:last-child { background:url(../imgs/dino09.avif) no-repeat right bottom 30px; background-size:30% auto;
			p { padding:0 10% 40px 0 }
		}
	}
}
#location2 { background: #eef5e3; padding-block: var(--space-lg); margin-bottom: var(--space-lg);
	h3 { font-size:var(--font-middle); text-align:center; padding-bottom:var(--space-sm); }
	ul {
		li { padding-bottom: var(--space-lg);
			p:has(img) { display:flex; justify-content: space-between; padding-bottom:var(--space-sm);
				img { display:block; inline-size:48%; }
			}
			h4 { font-size:var(--font-middle); }
		}
		li:last-child { padding-bottom:0;
			p:has(img) { background:url(../imgs/dino10.avif) no-repeat right 15% bottom 10px; background-size:20% auto; }
		}
	}
}

#access { border-bottom: var(--border-blk); margin-bottom: var(--space-mlg);
	h2 { background:url(../imgs/dino11.avif) no-repeat left bottom var(--space-md); background-size:25% auto; }
	iframe { block-size:400px; padding-bottom:var(--space-md); }
	h3 { font-size:var(--font-middle); padding-bottom:var(--space-md); }
	ul { padding-bottom: var(--space-md);
		li { display:flex; justify-content: space-between;
			span { display:table; font-size:0.9em; }
			span:nth-child(2):before { content:"… "; }
		}
	}
	p { padding-bottom:var(--space-md);
		img { display: block; inline-size:48%; max-inline-size:480px; }
	}
	p:last-child { padding-bottom:0; background:url(../imgs/dino12.avif) no-repeat right top; background-size:20% auto; }
}

#contact { border-bottom: var(--border-blk); margin-bottom: var(--space-mlg);
	> p { padding-bottom:var(--space-md); }
	#tel { background: #d6eefb; margin-bottom: var(--space-md); padding: var(--space-sm); text-align: center;
		h3 { font-size:var(--font-middle); padding-bottom:var(--space-sm); }
		a { background:#008dd7; border-radius:8px; display:flex; justify-content:center; padding-block:var(--space-sm); margin-bottom: var(--space-sm);
			span { display: table; color:#fff; line-height:1em; font-size:var(--font-large); }
			i { display: grid; place-items: center; line-height:100%; border-radius:50%; color:#008dd7; background:#fff; margin-right:var(--space-sm); }
		}
	}
	hr { margin-bottom:var(--space-md); }
	#form {
		> h3, > p { background:#eee; }
		> h3 { text-align:center; padding-block:var(--space-md); }
		> p { padding-inline: var(--space-sm); padding-bottom: var(--space-md); margin-bottom: var(--space-md);
			span { background:red; display:inline-block; color:#fff; margin-right:8px; padding:2px 8px; }
		}
		form ul { padding-bottom: var(--space-md);
			li { padding:var(--space-md) var(--space-sm);
				p { padding-bottom: var(--space-sm);
					span { background:red; display:inline-block; color:#fff; margin-right:8px; padding:2px 8px; }
				}
				input[type="text"], input[type="email"], textarea { inline-size:100%; box-sizing: border-box; padding:var(--space-sm); font-size:16px; border:1px solid #999; }
				textarea { block-size:clamp(20vh, 10vw , 200px) }
				input[type="radio"] { margin-right:4px; }
				input[type="checkbox"] { margin-right:4px; }
				div { inline-size:90%; margin-inline:auto;
					a { display:block; text-decoration:underline; margin-bottom:var(--space-sm); }
					span { display:block; font-size:0.9em; padding-block:var(--space-sm); }
					button { all: unset; text-align: center; margin-top:var(--space-md); padding-block: var(--space-sm); inline-size:100%; border-radius:10px; background:#81c12e; font-size:var(--font-large); }
					button:disabled { background:#ccc; }

				}
			}
			li:nth-child(2n) { background:#eee; }
			li:last-child { background:url(../imgs/dino13.avif) no-repeat right 5% top var(--space-sm); background-size:20% auto; }
		}
		p#japfic { background:#fff; padding:0; margin:0;
			img { display:block; inline-size:20%; max-inline-size:140px; margin-inline:auto; padding-bottom:var(--space-sm); }
		}
	}
}

#footer { background: url(../imgs/footer_bg.webp) repeat-x center bottom; background-size: 1px auto; padding: var(--space-lg) 0 var(--space-sm);
	ul { padding-bottom: var(--space-md);
		li { padding-bottom: var(--space-sm);
			a { font-size:var(--font-middle); }
		}
	}
	img { display:block; max-inline-size: 800px; padding-bottom: var(--space-md);}
	small { display:block; text-align:center; font-size:12px; }
}

#goTop {display:block; position:fixed; z-index: 100; bottom:20px; right:20px; inline-size:25%; max-inline-size:200px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
#goTop.visible { opacity: 1; pointer-events: auto; }

.modal-overlay { position: fixed; top: 0; left: 0; inline-size: 100%; block-size: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 9999;
	.modal-content { background: #fff; box-sizing: border-box; padding: 2em; max-inline-size: 600px; inline-size: 90%; max-block-size: 80vh; overflow-y: auto; border-radius: 8px; position: relative;
		.modal-close { position: absolute; top: 0.5em; right: 0.8em; background: none; border: none; font-size: 1.5em; cursor: pointer; }
		#modalBody {
			h3 { font-weight:bold; padding-bottom:var(--space-md); font-size:1.2em; }
			h4 { font-weight:semibold; padding-bottom:var(--space-sm); font-size:1.1em }
			hr { margin-block:var(--space-mlg); }
			p, li { padding-bottom:var(--space-sm); }
		}
	}
}

@media (max-width: 560px){
body { font-size: 3.9vw; }
#header { background: url(../imgs/bg.avif) no-repeat center top; background-size: 100% auto;
	h1 { font-size:4.6vw; }
	img.logo { padding-top:0; }
	img.family { transform: translateY(-30px);}
}

.drawer__button { right: 5%; top: 10px; inline-size: 50px; block-size: 50px;
	> span { inline-size: 30px; }
	> span:first-child { transform: translate(-50%, calc(-50% - 10px)); }
	> span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	> span:last-child { transform: translate(-50%, calc(-50% + 10px)); }
}
.drawer__nav {
	.drawer__nav__inner { inline-size: 100%;
		> div {
			.drawer__nav__item { padding-bottom: 16px;
				.drawer__nav__link { font-size: 3.5vw; padding-left: 10px; }
			}
			p { font-size: 4.5vw; padding: 0 0 3px 5px; margin-bottom: 10px; }
		}
	}
}

section h2 span { font-size:5.5vw; }
#about h3 { font-size: 4.8vw; }
#features ul li h3, #section h3 { font-size: 4.4vw; }
#point ol > li h3 { font-size:4.6vw;
	span { font-size:10vw; }
}
#location1 {
	h3 { font-size:4.6vw; }
	ul li h4 { font-size: 4vw; }
}
#location2 {
	h3 { font-size:4.8vw; }
	ul li h4 { font-size:4.4vw; }
}
#location .location_neighborhood table td { font-size: 2.9vw; }
#access {
	iframe { block-size:40vh; }
	h3 { font-size:4.4vw; }
}

#contact {
	#tel {
		h3 { font-size:4vw; }
		a {
			span { font-size:6vw; }
			i { inline-size:30px; block-size:30px; font-size:4vw; }
		}
	}
	#form {
		> h3 { font-size:4.2vw; }
		> p { font-size: 3vw;
			span { font-size:2.4vw; }
		}
		form ul {
			li {
				p span { font-size:2.4vw; }
				div button { font-size:6vw; }
			}
		}
	}
}

#footer ul li a { font-size:4.4vw; }
}

@media (min-width: 561px) {
.drawer__button {
	> span:first-child { transform: translate(-50%, calc(-50% - 16px)); }
	> span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	> span:last-child { transform: translate(-50%, calc(-50% + 16px)); }
}
.drawer__nav__inner { inline-size: 450px;margin-left: auto;
	> div {
		.drawer__nav__item { padding-bottom: 20px;
			.drawer__nav__link { padding-left: 10px; }
		}
		p { padding: 0 0 5px 10px; margin-bottom: 20px; }
	}
}

#location {
	.location_neighborhood {
		table {
			td { font-size:1em; }
		}
	}
}

#access {
	ul { display: table; margin-inline: auto;
		li { justify-content: flex-start;
			span { font-size:1.1em; }
		}
	}
}
#contact {
	#tel {
		a {
			i { inline-size:32px; block-size:32px; font-size:22px; }
		}
	}
}
}

@media (min-width: 561px) and (max-width: 1024px){
.drawer__button { inline-size: 80px; block-size: 80px;
	> span { inline-size: 50px; }
}

#features {
	ul {
		li:nth-child(2) p { padding-top:80px; background:url(../imgs/dino04.avif) no-repeat right top; background-size:20% auto; }
		li:nth-child(4) p { padding-top:50px; background:url(../imgs/dino05.avif) no-repeat right top 10px; background-size:20% auto; }
	}
}
#point {
	ol {
		> li:last-child { padding: 60px 0 0; }
	}
}
}

@media (min-width: 1025px) {
.drawer__button { inline-size: 100px; block-size: 100px;
	> span { inline-size: 60px; }
}

#features {
	ul {
		li:nth-child(2) p { padding-top:120px; background:url(../imgs/dino04.avif) no-repeat right top; background-size:15% auto; }
		li:nth-child(4) p { padding-top:70px; background:url(../imgs/dino05.avif) no-repeat right top 10px; background-size:18% auto; }
	}
}
#point {
	ol {
		> li:last-child { padding: 60px 0 0; background:url(../imgs/dino07.avif) no-repeat right 5% top; background-size:15% auto; }
	}
}
#location { background:url(../imgs/dino08.avif) no-repeat left 10% top; background-size:15% auto; }
#location1 {
	ul {
		li:last-child { background:url(../imgs/dino09.avif) no-repeat right bottom 30px; background-size:20% auto; }
	}
}
}