@charset "utf-8";
/* reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-style:normal;font-weight:normal;font-size:100%;vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} html{overflow-y:scroll;} a{text-decoration:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} input, textarea{margin:0;padding:0;} ol, ul{list-style:none;} table{border-collapse:collapse;border-spacing:0;} caption, th{text-align:left;} a:focus{outline:none;} abbr[title]{text-decoration:none;border-bottom:none;}

/* main CSS */
: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, 3.5vw, 40px);
--space-sm: clamp(12px, 1.5vw, 16px);
--space-md: clamp(24px, 3vw, 32px);
--space-lg: clamp(36px, 5vw, 80px);
--space-mlg: clamp(80px, 8vw, 140px);
--font: "M PLUS 1p", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
--font-en: "Open Sans";
--bg-color: #f5f5f5;
--base-color: #d7e7f1;
--accent-color: #1f7fbc;
--border-blk: 1px solid #1f7fbc;
}

body {
font-family: var(--font);
font-size: var(--font-base);
font-weight: 500;
line-height: 180%;
color: #020202;
word-break: break-all;
background: var(--bg-color);
}
img, video, iframe {
inline-size:100%; max-inline-size: 100%; block-size: auto; vertical-align: bottom;
}
a, a:hover {
text-decoration: none; color: #555;
}
a.btn { background: #bbb; color: #fff; display: table; font-size: 0.9em; padding: 16px var(--space-lg); border-radius: 40px;
	span { letter-spacing: 10px; transform:translateX(5px); display:table; }
}

#preloader {
position: fixed;
inset: 0;
background: #ffffff;
display: grid;
place-items: center;
z-index: 99999;
transition: opacity .4s ease, visibility .4s ease;
}
#preloader .pl__box {
display: grid;
justify-items: center;
gap: .75rem;
padding: 1rem 1.25rem;
border-radius: 14px;
}
#preloader .pl__spinner {
inline-size: 56px;
block-size: 56px;
border-radius: 50%;
border: 4px solid #e5e7eb;
border-top-color: #3b82f6;
animation: pl-spin 1s linear infinite;
}
@keyframes pl-spin {
to { transform: rotate(360deg); }
}
#preloader .pl__text {
font: 600 0.95rem/1.4 system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
color: #374151;
letter-spacing: .02em;
}
#preloader.is-done {
opacity: 0;
visibility: hidden;
}
html.preloading, body.preloading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
#preloader .pl__spinner { animation: none; }
#preloader { transition: none; }
}
noscript #preloader { display: none !important; }

html.preloading, body.preloading { overflow: hidden; }

.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: .5em 1em;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
div.headline { 
	h2 { white-space:nowrap; }
}

#header { background: var(--accent-color); color: #fff; padding-block: var(--space-sm); border-bottom: 1px solid var(--base-color);
	.header__inner { position: relative;
		#logo { inline-size: 40%;
			a {
				img { filter: brightness(1000%); }
			}
		}
		#gnav {
			ul {
				li {
					a { display:block; font-size:0.9em; letter-spacing:0; }
				}
				li:nth-last-child(2) {
					a { background:#ef520d; border-radius:50%; display: grid; place-items: center; }
				}
				li:last-child {
					a { background:#fae02f; color: #020202; border-radius:20px; }
				}
			}
		}
	}
}

#hero { background: url(../imgs/symbol.svg) no-repeat center right 20% var(--accent-color); background-size: auto 60%;
	.hero__inner { position: relative;
		h1 { position:absolute; inline-size: 100%; top: 50%; left: 0; transform: translateY(-50%); z-index: 5;
			> span { position: relative; z-index: 5; display: block; inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
				span { display: table; color:#000; font-size:var(--font-xlarge); line-height:200%; letter-spacing:8px; background:#fff; border-radius: 0 30px 30px 0; padding-right:var(--space-md); }
			}
		}
		h1::before { content:""; inline-size:50%; block-size:100%; background:#fff; position:absolute; left:0; top:0; z-index:4; }
		ul { padding-block: var(--space-md);
			li { padding-inline: 2.5vw;
				img { border-radius:30px; }
			}
		}
		#schedule { color: #fff; display: flex;
			h2 { inline-size: 50px; line-height: 0.1; display: flex; align-items: center;
				span { writing-mode: vertical-rl; letter-spacing:4px; }
			}
			.clinic-hours { border-collapse: collapse; inline-size: 100%;
				th, td { border: 1px solid #ddd; padding: .5rem; text-align: center; font-size:0.8em; letter-spacing:0; }
				th[scope="row"] { white-space: nowrap; }
				td {
					.dot { display: inline-block; inline-size: .7em; block-size: .7em; border-radius: 50%; background: currentColor; }
					.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
				}
				tfoot {
					td { line-height: 1.2;
						span { display:block; text-decoration:underline; text-align:left; font-size:0.95em;  }
					}
				}
			}
		}
	}
}
#hero .slider-l,#hero .slider-r { opacity: 0; }
body.is-fv-play #hero .slider-l { opacity: 1; transition: opacity 1s ease .18s; }
body.is-fv-play #hero .slider-r { opacity: 1; transition: opacity 1s ease .18s; transition-delay:.5s; }
body.is-fv-play #schedule { transform: none; transition: transform 1s ease .42s; }
@media (prefers-reduced-motion: reduce){
#hero .hero__inner h1, #hero .slider-l, #hero .slider-r, #schedule { opacity: 1 !important; transform: none !important; transition: none !important; }
}

#main > section { padding-bottom:var(--space-mlg);
	h2 { font-size:var(--font-xlarge); margin-bottom:var(--space-lg); }
	div[class$="inner"] { inline-size: 90%; max-inline-size: 1280px; }
}

[data-reveal]{ opacity:0; transition: 1s ease; }
.is-inview{ opacity:1; }

#news { background: var(--base-color); padding-top: var(--space-mlg); margin-bottom: var(--space-mlg);
	div[class$="inner"] { margin-inline: auto;
		h2#news-title { color:var(--accent-color); display:table; margin-inline:auto; position:relative; padding-bottom:30px; }
		h2::after { position:absolute; bottom: 0; left: 50%; transform: translateX(-50%); content:""; inline-size:100px; block-size:8px; background:var(--accent-color); border-radius:10px; }
		ul.news-list { padding-bottom: var(--space-lg);
			li { transform: translateY(50px);
				a { display: block; position: relative;
					img { position:relative; display:block; }
					time { display:table; font-size:0.7em; background:var(--accent-color); color:#fff; padding:4px 12px; border-radius:8px; }
					p { font-size:0.8em; }
				}
			}
			li.is-inview { transform:none; }
		}
		> a.btn { margin-inline:auto; }
	}
}
main.page #news { padding-top: 0; margin-bottom: 0; }
.pager {
	ul { display:flex; justify-content: center;
		li { background:var(--accent-color); padding: 4px 10px; border-left: 1px solid #fff;
			a { color:#fff; padding:8px; }
		}
		li:first-child { border-left:none; border-radius:30px 0 0 30px; }
		li:last-child { border-radius:0 30px 30px 0; }
	}
}
#entry { padding-bottom:var(--space-mlg);
	div[class$="inner"] { inline-size: 90%; max-inline-size: 1280px; margin-inline:auto;
		> h2 { font-weight:900; font-size:var(--font-large); padding-bottom:var(--space-sm); }
		> time { display:block; text-align:right; font-size:0.9em; padding-bottom:var(--space-lg); }
		p { padding-bottom:var(--space-md); }
		p#thumb { max-inline-size:640px; margin-inline:auto; }
		p:last-child { padding-bottom:0; }
	}
}

#about {
	div[class$="inner"] { margin-inline: auto;
		.headline { filter: blur(1rem); }
		.headline.is-inview { filter: blur(0); }
		p { font-size:0.9em; padding-bottom:var(--space-md); }
		ul.about-list {
			li { color:var(--accent-color); position: relative;
				h4 { text-align:center; font-weight:bold; font-size:1.1em; }
				img { display:block; margin-inline:auto; padding-bottom:var(--space-sm); }
				p { font-size:0.9em; font-weight:bold; letter-spacing:0; }
			}
			li[data-reveal] { opacity:1; }
			li::after { opacity: 0; content:""; display:block; inline-size:20px; block-size:20px; border-radius: 50%; background:#fae02f; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:-1; transition:1s; }
			li.is-inview::after { opacity: 1; inline-size:clamp(180px, 21vw, 300px); block-size:clamp(180px, 21vw, 300px); }
		}
	}
}

#main > section#dr { padding-bottom:0; margin-bottom:var(--space-mlg); }
#dr { position: relative;
	> div { position:relative; z-index:2; margin-inline:auto;
		> div { display:table; padding-block:var(--space-mlg); inline-size:80%; max-inline-size:800px; background:var(--accent-color); padding-right:var(--space-md); border-radius:0 30px 30px 0; color:#fff;
			h2 { position:relative;
				span { display:table; background:var(--accent-color); position:relative; z-index:3; padding-right:10px; }
			}
			h2[data-reveal] { opacity:1; }
			h2::after { content:""; display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; inline-size:0; block-size:4px; background:#fff; transition:1.5s; }
			h2.is-inview::after { inline-size:100%; }
			p { transform:translateY(var(--space-md)); padding-bottom: var(--space-md);
				strong { font-weight:bold; text-decoration:underline; }
			}
			p.is-inview { transform:none; }
			a { cursor: pointer; background:#fff; border-radius:30px; padding:8px var(--space-md); }
		}
	}
}
#dr[data-reveal] { opacity:1; }
#dr::after, #dr::before { position: absolute; content:""; display:block; }
#dr::before { opacity: 0; transition: 1s; transition-delay: .5s; top: -5%; right: 5%; z-index: 0; inline-size:40vw; block-size:110%; background:url(../imgs/dr.avif) no-repeat center center; border-radius:30px; background-size:auto 120%; }
#dr.is-inview::before { opacity:1; background-size:auto 100%; }
#dr::after { top: 0; left: 0; z-index: 1; inline-size:50%; block-size:100%; background:var(--accent-color); }
.modal { display: none; position: fixed; z-index: 20000; left: 0; top: 0; inline-size: 100%; block-size: 100%; overflow: auto; background:#00000099;
	.modal-content { background: #fefefe; margin: 50px auto; padding: 20px; border: 1px solid #888; inline-size: 90%; max-inline-size: 800px; box-sizing: border-box;
		h3 { font-size:var(--font-middle); padding-bottom:20px; }
		h4 { font-size:1.1em; margin: 30px 0 10px; padding-left:10px; border-left:8px solid var(--accent-color); }
		p { line-height:180%; }
		> p { padding-bottom:10px; }
		.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
		.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
	}
}

#treatment { inline-size:100%; max-inline-size:1440px; margin-inline:auto;
	div.headline { filter: blur(1rem); inline-size:90%; max-inline-size:1280px; margin-inline:auto; }
	div.headline.is-inview { filter: blur(0); }
	#treatment-services { inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
		ol {
			li { position:relative; background:var(--bg-color);
				span { position:absolute; top: 0; left: 0; transform: translate(-50%,-50%); inline-size:40px; block-size:40px; line-height: 40px; font-size: 20px; display: block; text-align: center; border-radius:50%; background:var(--accent-color); color:#fff; }
				h4 { padding:10px 20px; margin-bottom: 10px; background:#fae02f; font-size:1.1em; }
				p { font-size:16px; }
			}
		}
	}
}

#main section#reserve { background: var(--accent-color); color:#fff; border-radius: 30px; inline-size: 90%; max-inline-size: 960px; padding: var(--space-md); margin-inline: auto; margin-bottom: var(--space-mlg);
	h2#reserve-title { display:table; margin-inline:auto; position:relative; padding-bottom:30px; }
	h2::after { position:absolute; bottom: 0; left: 50%; transform: translateX(-50%); content:""; inline-size:100px; block-size:8px; background:#fff; border-radius:10px; }
	p { padding-bottom:var(--space-lg); }
	h3[data-reveal], ul[data-reveal] { opacity:1; display:table; position:relative; }
	h3 { padding-bottom:var(--space-sm); font-size:1.2em; }
	h3::before, ul::before { content:""; display:block; inline-size:100%; block-size:100%; position:absolute; top:0; right: 0; background: var(--accent-color); transition: 1s;}
	h3.is-inview::before, ul.is-inview::before { inline-size:0; }
	ul { padding-bottom:var(--space-md); list-style-type:square; margin-left:20px; }
	ul:last-child { padding-bottom:0; }
}

#bottomContents {
	h2 { font-size:var(--font-middle); padding-bottom:var(--space-md); }
}
.faq {
	details { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: .75rem 1rem; transition: box-shadow .25s ease, border-color .25s ease, opacity 1s; }
	details + details { margin-top: .75rem; }
	details:hover { border-color: #d1d5db; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
	summary { list-style: none; cursor: pointer; display: flex;align-items: center; gap: .6rem; outline: none; }
	summary::-webkit-details-marker { display: none; }
	summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: 4px; border-radius: 6px; }
	summary::before{ content:""; inline-size: .6rem; block-size: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .25s ease;}
	details[open] summary::before{ transform: rotate(45deg); }
	.faq__a{ overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); transition: max-height .4s ease, opacity .3s ease, transform .4s ease; will-change: max-height, opacity, transform; padding-top: 0; }
	details[open] .faq__a{ max-height: 600px; opacity: 1; transform: translateY(0); padding-top: .5rem; }
	.faq__a p, .faq__a { color:#374151; line-height:1.8; }
}
@media (prefers-reduced-motion: reduce){
  .faq details,
  .faq summary::before,
  .faq .faq__a{
    transition: none !important;
  }
}
#access {
	h2 { color:var(--accent-color); }
	.map-wrap { padding-bottom:var(--space-md); }
	address { background:#fff; padding: 16px; border-radius: 30px; color: var(--accent-color);
		h6 { border-bottom:var(--border-blk); padding-bottom:var(--space-sm); margin-bottom:var(--space-sm);
			img { inline-size:30%; max-inline-size:200px; }
		}
		dl {
			dt { font-size:0.9em; }
			dd { font-size:0.9em; border-bottom:1px dotted #ccc; box-sizing:border-box;
				a { color: var(--accent-color); }
			}
		}
		.clinic-hours { border-collapse: collapse; inline-size: 100%;
			th, td { border: 1px solid #ddd; padding: .5rem; text-align: center; font-size:0.8em; letter-spacing:0; }
			th[scope="row"] { white-space: nowrap; }
			td {
			.dot { display: inline-block; inline-size: .7em; block-size: .7em; border-radius: 50%; background: currentColor; }
			.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
			}
			tfoot {
				td { line-height: 1.4;
					span { display:block; text-decoration:underline; font-size:0.95em;  }
				}
			}
		}
	}
}


#footer { background:var(--accent-color); color:#fff; padding-top: var(--space-md);
	h6 { inline-size:90%; max-inline-size:1280px; margin-inline:auto; border-bottom:1px solid #ccc; padding-bottom:var(--space-sm); margin-bottom:var(--space-md); }
	.footer__inner { inline-size:90%; max-inline-size:1280px; margin-inline:auto; padding-bottom:var(--space-md);
		a { color: #fff;
			i { font-size:28px; padding-right:8px; transform:translateY(10%); }
		}
		a[href^="tel"] { display: table; padding: 16px var(--space-lg); border-radius: 40px; border:1px solid #fff;
			span { display:table; }
		}
	}
	ul { padding-bottom: var(--space-md); inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
		li {
			a { color:#fff; }
		}
	}
	small { display:block; text-align:center; font-size:12px; letter-spacing:1px; }
}

#floating { position: fixed; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 500; display: flex; align-items: center;
	li {
		a { display: block; font-size: clamp(13px, 1vw, 18px); font-weight:bold;
			i { font-size:1.5em; line-height:0.2; }
		}
	}
}
#floating.show { opacity: 1; visibility: visible; }

.breadcrumb { padding-block: var(--space-md) var(--space-lg);
	ol { display:flex; inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
		li { position:relative; padding-right:30px; margin-right:10px; font-size: 0.85em;
			a { text-decoration:underline; }
		}
		li::after { position:absolute; right:0; top:50%; transform:translateY(-50%); content: '\f105'; font-family: 'Font Awesome 5 Pro'; }
		li:last-child { padding-right:0; margin-right:0; }
		li:last-child::after { content:none; }
	}
}
.b__color { background:var(--base-color); }

@media (max-width: 560px){
body { letter-spacing:2px; }
h2, h3 { line-height:1.8; }
p, li { line-height:2; }
.speechBubble { position: relative; display: inline-block; margin-top: 10px; padding: 16px; border: 2px solid #303030; border-radius: 8px; background: var(--base-color); }
.speechBubble::before { content: ""; position: absolute; top: 0; left: 10%; border-style: solid; border-width: 0 15px 10px 15px; border-color: transparent transparent #303030; translate: -50% -100%; }
.speechBubble::after { content: ""; position: absolute; top: 0; left: 10%; border-style: solid; border-width: 0 11.4px 7.6px 11.4px; border-color: transparent transparent var(--base-color); translate: -50% -100%; }

#header {
	.header__inner {
		#logo { inline-size: 40%; }
		.header__reserve { padding:4px 4vw; font-size:3.5vw; right:70px; }
	}
}

.spnav{
	.spnav__panel {
		.spnav__list { padding-bottom: var(--space-md);
			li { line-height: 1;
				a { font-size:3.5vw; }
			}
			li:last-child { inline-size: calc(100% - 68px);
				a { display:block; text-align:center; padding-block:16px; }
			}
		}
		h6 { inline-size:50%; padding-bottom:16px; }
		dl {
			dt,dd { font-size:3.5vw; color:var(--accent-color); }
			dt { padding-bottom:8px; }
			dd { padding-bottom:16px;
				a { color:var(--accent-color); }
			}
		}
		.clinic-hours { border-collapse: collapse; inline-size: 100%; background: #fff;
			th, td { border: 1px solid #ddd; padding: .5rem; text-align: center; font-size:3.2vw; letter-spacing:0; color:var(--accent-color); }
			th[scope="row"] { white-space: nowrap; }
			td {
				.dot { display: inline-block; inline-size: .7em; block-size: .7em; border-radius: 50%; background: currentColor; }
				.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
			}
			tbody td:last-child { font-size:2.8vw; }
		}
	}
}

#hero { background: url(../imgs/symbol.svg) no-repeat top 22vw right 10% var(--accent-color); background-size: auto 40%;
	.hero__inner {
		h1 { top: 39vw;
			> span {
				span { border-radius: 0 10px 10px 0; }
			}
		}
		ul {
			li {
				img { border-radius:10px; }
			}
		}
		#schedule { padding: var(--space-sm); background: #606060;
			h2 { inline-size: 42px; font-size: 3.5vw; }
			.clinic-hours {
				th, td { font-size:3.2vw; }
				tbody td:last-child { font-size:2.8vw; }
			}
		}
	}
}
#schedule { transform:translateY(50px); opacity:0; }
body.is-fv-play #schedule { opacity:1; transition: opacity 1s ease .18s, transform 1s ease .42s; }

#main { overflow-x:hidden; }

#news {
	div[class$="inner"] {
		h2 { font-size:6vw; }
		ul.news-list {
			li { margin-bottom: 60px;
				a {
					img { padding-bottom:10px; z-index:1 }
					time { position:absolute; z-index:2; top:0; right:-10px; transform:translateY(-50%); font-size:3.2vw; padding:8px 12px; }
					h3 { font-size:4vw; padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid #ccc; }
					p { font-size:3.5vw }
				}
			}
			li:last-child { margin-bottom:0; }
		}
		> a.btn { font-size:3.8vw; }
	}
}
.pager {
	ul {
		li {
			a { font-size:3.3vw; line-height:1.5; letter-spacing:0; }
		}
	}
}
#entry {
	div[class$="inner"] { line-height: 180%;
		> h2 { font-size:4.2vw; }
		> time { font-size:3.2vw; }
		p { font-size:3.5vw; line-height:2; }
	}
}

#about {
	div[class$="inner"] { margin-inline: auto;
		.headline { padding-bottom: 60px;
			h2 { font-size:6vw; }
			h3 { font-size:4vw; }
		}
		p { font-size:3.5vw; }
		ul.about-list {
			li { padding-bottom: 30px;
				h4 { font-size:4.4vw; padding-bottom:16px; }
				img { max-inline-size:200px; inline-size:50%;  }
				p { font-size:3.5vw; }
			}
			li:last-child { padding-bottom:0; }
		}
	}
}

#dr {
	> div {
		> div {
			h2 {
				span { font-size:6vw; }
			}
			p { font-size:3.5vw; }
			a { font-size:3.8vw }
		}
	}
}
#dr::before { inline-size:80vw; right:5px; }
.modal {
	.modal-content { margin: 10vh auto 0;
		h3 { font-size:5vw;  }
		h4 { font-size:4.2vw; }
		p { font-size:3.5vw; }
	}
}

#treatment {
	.headline { padding-bottom: 60px;
			h2 { font-size:6vw; }
			h3 { font-size:4vw; }
	}
	#treatment-services {
		ol {
			li {
				h4 { font-size:4vw; }
				p { font-size:3.5vw; }
			}
		}
	}
}



#main section#reserve { inline-size: 100%; border-radius: 0; padding: var(--space-mlg) 5%; box-sizing: border-box; margin-bottom: 0;
	h2#reserve-title { font-size:6vw; }
	p { font-size:3.5vw; }
	h3 { font-size:4vw; }
	ul {
		li { font-size:3.5vw; padding-bottom: 8px;}
	}
}

#bottomContents {
	h2 { font-size:6vw; }
}
.faq {
	details { font-size:3.5vw; line-height:180%; }
}

#access {
	address {
		h6 { margin-bottom:20px;
			img { inline-size:50%; max-inline-size:250px; }
		}
		dl {
			dt,dd { font-size:3.5vw; }
			dt { padding-bottom:8px }
			dd { padding-bottom: 12px; margin-bottom: 12px; }
		}
		.clinic-hours {
			th, td { font-size:3.2vw; }
		}
	}
}

#footer { padding-bottom: 10px;
	h6 { font-size:3.2vw; text-align:center; }
	.footer__inner { inline-size:90%; max-inline-size:1280px; margin-inline:auto; padding-bottom:var(--space-md);
		a { font-size: 4vw; display: block; margin-bottom:16px;
			span { display:table; margin-inline:auto; }
		}
		a[href^="tel"] { display: block;
			span { display:table; margin-inline:auto; }
		}
	}
	ul { padding-bottom: var(--space-md); inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
		li {
			a { color:#fff; }
		}
	}
	small { display:block; text-align:center; font-size:12px; letter-spacing:1px; }
}

#floating { right: 0; left: 2%; bottom: 10px; inline-size: 96%; box-sizing: border-box;
	li:nth-child(1) { padding-right: 20px;
		a {
			i { font-size:8vw; transform:translateY(5px); color:#fae02f; }
		}
	}
	li:nth-last-child(-n+2) { background:#fae02f; padding-block:10px; }
	li:nth-child(2) { border-radius:8px 0 0 8px;
		a { border-right:1px solid #303030; padding-inline:20px; }
	}
	li:nth-child(3) { border-radius:0 8px 8px 0;
		a { padding-inline:20px; }
	}
}

.breadcrumb {
	ol {
		li { font-size:3.3vw; line-height:1.5; }
		li:nth-child(3) { padding-top:10px; }
	}
}
}

@media (min-width: 561px){
a[href^="tel:"] { pointer-events: none; }

body { letter-spacing: 3px; }
#hero {
	.hero__inner {
		#schedule { position: absolute; bottom: clamp(-60px, -7vw, -100px); right: 0; background: var(--accent-color); z-index: 2; border-radius: 30px 0 0 30px; padding: 14px; }
	}
}
#schedule { transform:translateX(100%); }

#main > section {
	div.headline { display:flex; align-items: center; padding-bottom: var(--space-lg);
		h2, h3 { display:table; margin-bottom:0; }
		h3 { padding-left:34px; margin-left:30px; border-left:4px solid #020202; }
	}
}

#about {
	div.about__inner {
		ul.about-list { display: flex; justify-content: space-between;
			li { inline-size:30%;
				img { max-inline-size:200px; }
			}
		}
	}
}

#access {
	address {
		dl { display: flex; flex-wrap: wrap;
			dt { inline-size:100px; border-bottom:1px dotted #ccc; box-sizing:border-box; padding-bottom:10px; margin-bottom:10px; }
			dd { inline-size:calc(100% - 100px); padding: 0 0 10px 20px; margin-bottom:10px; }
		}
	}
}

#footer { 
	.footer__inner { display:flex; align-items: center; justify-content: flex-end;
		a[href^="tel"] { margin-right:20px; }
	}
}

#floating { left: 20px; bottom: 20px; background:#fae02f; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: var(--space-sm) var(--space-md);
	li:nth-child(2) { border-left:2px solid #555; border-right:2px solid #555; padding-inline: var(--space-md); margin-inline:var(--space-md); }
}
}

@media (min-width:561px) and ( max-width:1024px) {
#header {
	.header__inner {
		#logo { inline-size: 50%; max-inline-size: 300px; }
		.header__reserve { padding:8px 30px; font-size:0.9em; right:90px; }
	}
}

.spnav{
	.spnav__panel {
		.spnav__list{
			li {
				a { font-size:18px; }
			}
		}
	}
	h6, dl, table { display:none; }
}

#news {
	div[class$="inner"] {
		ul.news-list {
			li { padding-bottom: var(--space-md);
				a{ display: grid;  grid-template-columns: 300px 1fr; grid-template-rows: auto auto auto; grid-template-areas: "thumb time" "thumb title" "thumb desc"; column-gap: 1rem; align-items: start;
					img  { grid-area: thumb; inline-size: 100%; block-size: auto; }
					time { grid-area: time; display:block; inline-size:150px; text-align:center; }
					h3   { grid-area: title; }
					p    { grid-area: desc; }
				}
			}
		}
	}
}
}

@media (max-width: 768px){
.modal {
	.modal-content {
		h3 { letter-spacing: 0;
			span { font-size:0.8em; padding-left:8px; }
		}
	}
}

#treatment {
	#treatment-services {
		ol {
			li { margin-bottom:var(--space-lg); }
			li:last-child { margin-bottom:0; }
		}
	}
}

#bottomContents {
	> div {
		> section { padding:var(--space-mlg) 5%; }
	}
}
#faq { background:#bcbcbc; }
#access { background:var(--base-color);
	.map-wrap {
		iframe { block-size:50vh; }
	}
}

#footer {
	ul {
		li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #fff;
			a { font-size: clamp(16px, 2.8vw, 20px); text-align:center; }
		}
		li:last-child { border-bottom:none; }
	}
}
}

@media (min-width: 769px){
#treatment-services {
	ol { display: flex; justify-content: space-between;
		li { inline-size:23%; }
	}
}

#bottomContents { position: relative; padding-block: var(--space-mlg);
	> div { position: relative; z-index: 2; inline-size:90%; max-inline-size:1280px; display:flex; margin-inline: auto;
		> section { inline-size:50%; }
		#faq { padding-right:var(--space-md); }
		#access { padding-left:var(--space-md); }
	}
}
#bottomContents::before, #bottomContents::after { content:""; display:block; inline-size:50%; block-size:100%; position:absolute; top:0; z-index:1; }
#bottomContents::before { left:0; background:#bcbcbc; }
#bottomContents::after { left:50%; background:var(--base-color); }
#access {
	.map-wrap {
		iframe { block-size:500px; }
	}
	address {  }
}

#footer {
	ul { display: flex; justify-content: flex-end;
		li { padding-left: 20px;
			a { font-size: clamp(13px, 1vw, 16px); }
		}
		li:first-child { padding-left:0; }
	}
}
}

@media (max-width: 1024px){
#header {
	.header__inner {
		#logo { padding-left: 5%; }
		#gnav { display: none; }
		.header__reserve { display:table; position:absolute; top:50%; transform:translateY(-50%); background:#fae02f; border-radius:8px; font-weight:bold; }
	}
}

.spnav-toggle {
position: fixed;
right: 20px;
top: 3vw;
z-index: 10001;
display:inline-flex;
flex-direction:column;
justify-content:center;
gap:8px;
inline-size:42px; block-size:42px;
background:transparent; cursor:pointer; border: 0;
background: var(--accent-color); border-radius: 3px;
	.spnav-toggle__bar {
	display:block; inline-size:30px; block-size:2px; background:#fff; border-radius:2px;
	transition:transform .25s ease, opacity .25s ease;
	}
}
.is-nav-open .spnav-toggle__bar:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.is-nav-open .spnav-toggle__bar:nth-child(2){ opacity:0; }
.is-nav-open .spnav-toggle__bar:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

.spnav{ position:fixed; inset:0; z-index:10000; pointer-events:none;
	.spnav__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .22s ease; }
	.spnav__panel { position:absolute; top:0; right:0; block-size:100%; inline-size:min(88vw, 360px); background:var(--base-color); box-shadow:-8px 0 24px rgba(0,0,0,.12); transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; padding:18px;
		.spnav__list{ padding-top:var(--space-lg); display: flex; flex-wrap: wrap; align-items: center;
			li { padding-bottom: var(--space-sm);
				a { display:block; }
			}
			li:nth-child(-n+5) { inline-size: 100%;
				a { padding-bottom: var(--space-sm); border-bottom:1px solid #ccc; }
			}
			li:nth-last-child(2) { margin-right: 20px; padding-bottom:0;
					a { background:#ef520d; border-radius:50%; display: grid; place-items: center; inline-size: 48px; block-size: 48px;
						i { color:#fff; letter-spacing:0; }
					}
			}
			li:last-child { padding-bottom:0;
				a { background:#fae02f; color: #020202; padding: 10px 20px; border-radius:10px; }
			}
		}
	}
}
.is-nav-open .spnav{ pointer-events:auto; }
.is-nav-open .spnav__backdrop{ opacity:1; }
.is-nav-open .spnav__panel{ transform:translateX(0); }
html.is-nav-open, body.is-nav-open{ overflow:hidden; }

.breadcrumb {
	ol { flex-wrap: wrap;
		li:nth-child(3) { inline-size:100%; }
	}
}
}

@media (prefers-reduced-motion: reduce){
.spnav__backdrop, .spnav__panel, .spnav-toggle__bar{ transition:none !important; }
}

@media (min-width: 1025px){
#header {
	.header__inner {
		#logo { inline-size: 90%; max-inline-size: 1280px; margin-inline: auto; position: relative;
			a {
				img { max-inline-size:220px }
			}
		}
		#gnav { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
			ul { display: flex; justify-content: flex-end;
				li { margin-right: 1.1vw;
					a { color: #fff; }
				}
				li:nth-last-child(2) { margin-left: 1.1vw;
					a { inline-size:40px; block-size:40px; font-size: 1.2em;}
				}
				li:last-child {
					a { padding-inline:24px; }
				}
			}
		}
		.header__reserve { display:none; }
		.spnav-toggle { display:none; }
	}
}
#spnav { display:none; }

#news {
	div[class$="inner"] {
		ul.news-list { display:flex;
			li { inline-size:32%; margin-right:2%;
				a {
					img { padding-bottom:10px; z-index:1 }
					time { position:absolute; z-index:2; top:0; right:10px; transform:translateY(-50%); }
				}
			}
			li.is-inview:nth-child(2) { transition-delay:.3s; }
			li.is-inview:nth-child(3) { transition-delay:.6s; }
			li:last-child { margin-right:0 }
		}
	}
}
main.page #news { 
	div[class$="inner"] {
		ul.news-list { flex-wrap: wrap;
			li { padding-bottom:40px; }
			li.is-inview:nth-child(3n+2) { transition-delay:.3s; }
			li:nth-child(3n) { margin-right:0; transition-delay:.6s; }
			li:nth-last-child(-n+3) { padding-bottom:0; }
		}
	}
}
}