*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}.demo a{text-decoration:underline}.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.arrow::after{content:" ↗"}:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.seen{opacity:1;transform:none}@media(max-width:720px){.demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}.desktop{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none!important}}
:root{--bg:#f15536;--ink:#fff9ed;--body:"M PLUS Rounded 1c","Yu Gothic",sans-serif}.capsule{position:fixed;z-index:30;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:26px;width:min(820px,calc(100% - 32px));padding:10px 12px 10px 22px;border-radius:999px;background:#fff;color:#173e3b;box-shadow:0 10px 40px #631b1233;font-size:12px}.capsule>a:first-child{font-weight:900;margin-right:auto}.capsule nav{display:flex;gap:18px}.pill{background:#183f3c;color:white;border-radius:999px;padding:13px 22px}.red-hero{min-height:100svh;padding:18vh 5vw 11vh;display:grid;grid-template-columns:3fr 2fr;position:relative}.red-hero h1{font-size:clamp(70px,10vw,145px);line-height:1.05;letter-spacing:-.07em;margin:20px 0}.red-hero aside{align-self:end;max-width:440px;font-size:22px;line-height:1.65;padding-bottom:7vh}.red-hero aside a{display:inline-block;margin-top:26px;border-bottom:2px solid}.tooth{position:absolute;right:8vw;top:13vh;width:160px;height:160px;border-radius:44% 44% 48% 48%;background:#fff9ed;color:#f15536;display:grid;place-items:center;font-size:64px;transform:rotate(8deg)}.sticky-story{background:#f8f1df;color:#133d39;display:grid;grid-template-columns:1fr 1.25fr;padding:12vh 5vw;gap:6vw}.sticky-copy{position:sticky;top:10vh;align-self:start}.sticky-copy h2{font-size:clamp(45px,6vw,82px);line-height:1.05}.step-dots{display:flex;gap:10px}.step-dots button{border:1px solid;border-radius:50%;width:44px;height:44px;background:none}.step-cards{display:grid;gap:26vh}.step-cards article{min-height:70vh;border-radius:42px;padding:8vw 6vw;display:flex;flex-direction:column;justify-content:center;background:#1e6863;color:#fff}.step-cards article:nth-child(2){background:#ffd166;color:#153c38}.step-cards article:nth-child(3){background:#f05b42}.step-cards h3{font-size:clamp(56px,8vw,104px);margin:.2em 0}.step-cards p{font-size:18px;line-height:1.9;max-width:540px}.icon{font-size:90px;align-self:flex-end}.care-band{width:100%;overflow:hidden}
.care-band img{width:100%;height:auto;display:block}
.care{display:grid;grid-template-columns:1.1fr .9fr;min-height:90vh;background:#b7ddd2;color:#143c39}.care-photo{margin:5vw;border-radius:50%;overflow:hidden}.care>div:last-child{align-self:center;padding:8vw 6vw}.care h2{font-size:clamp(50px,7vw,96px);line-height:1}.care li{padding:18px 0;border-bottom:1px solid;font-size:18px}.voices{padding:14vh 6vw;background:#fff7e8;color:#153c39}.voices h2{font-size:clamp(44px,6vw,86px);max-width:1100px}.voices div{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.voices p{border:1px solid;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;text-align:center}.booking{min-height:80vh;padding:10vh 6vw;display:grid;place-items:center;text-align:center}.booking h2{font-size:clamp(55px,9vw,120px);line-height:1}.booking a{background:#173e3b;padding:18px 30px;border-radius:999px}footer{padding:50px 5vw 100px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}@media(max-width:720px){.capsule nav{display:none}.red-hero{grid-template-columns:1fr;padding:100px 22px 100px}.red-hero h1{font-size:68px}.red-hero aside{font-size:17px}.tooth{width:88px;height:88px;font-size:36px;right:18px;top:80px}.sticky-story{grid-template-columns:1fr;padding:80px 16px}.sticky-copy{position:relative;top:0}.sticky-copy h2{font-size:42px}.step-cards{gap:20px}.step-cards article{min-height:560px;border-radius:28px;padding:40px 24px}.step-cards h3{font-size:60px}.care{grid-template-columns:1fr}.care-photo{aspect-ratio:1}.voices div{grid-template-columns:1fr 1fr}.booking h2{font-size:54px}footer{grid-template-columns:1fr}}
@media(max-width:720px){.capsule>a:first-child{font-size:12px;letter-spacing:-.02em}}
/*HEADING-LEADING-20260811 ── 見出しの行間。
日本語の見出しは字が枠いっぱいなので、行間 1.00 では行と行が接して読みにくい。
2 行以上に折り返し、行間が 1.06 未満で、日本語を含む見出しだけを 1.25 にそろえる。
1.06 以上のものは隙間が見えているので触らない。
欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらないため)。
セレクタが長いのは、あとから読み込まれる共有のスタイルシートに勝たせるため。
*/
html body div#main main section#care.care div h2{line-height:1.25!important}
html body div#main main section#booking.booking h2{line-height:1.25!important}
html body div#main main section#flow.sticky-story div.sticky-copy h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/
/* 医院案内の 4 つの円。絵と文字を 2 段に組む。
絵は円の大きさに連動させる(固定値にすると、円が小さくなる幅で文字が円の線に重なる)。
align-content は grid の行が伸びて絵と文字が離れるのを止める。 */
.voices p{gap:clamp(6px,4%,10px);align-content:center}
.voices p .md-icon{width:clamp(22px,calc(30% - 12px),84px);height:auto}
/* 線が太くなる番が、左の円から右の円へ 0.9 秒ずつ渡る。
太くなった瞬間だけ、線の色がページのベースカラーに変わる。
位置・大きさ・角度は 1 つも動かないので、文字との間隔も円との隙間も静止したまま。
動きを止める設定のときは、このファイル冒頭の指定が全部止める
(止まった状態の色は SVG 側の属性が持つ元の色)。 */
.md-icon>*{animation:mdInk 3.6s ease-in-out infinite}
.md-toy>*{animation-delay:.9s}
.md-pram>*{animation-delay:1.8s}
.md-calc>*{animation-delay:2.7s}
@keyframes mdInk{
0%,42%,100%{stroke-width:2;stroke:currentColor}
18%{stroke-width:3.6;stroke:var(--bg)}
}
/* 麻酔の前の四つの手順(#ease)と、よくある質問(#faq)。
どちらも 左に見出し / 右に本体 の 2 列。720px 以下で 1 列になる。
見出しの字の大きさは、列の内側の幅を 2 行目の字数で割った値から決めている。
日本語は 1 字 = 字の大きさなので、9 字が入るには 列の内幅 ÷ 9 が要る。
列がいちばん狭くなるのは画面がいちばん狭いときではなく、
4 列のまま画面が狭くなる 721px 付近である。
1 行に 1〜2 字だけの行を作らないことを合否にしている。 */
.unknot,.faq{padding:14vh 6vw;display:grid;gap:6vw;align-items:start}
.unknot h2,.faq h2{font-size:clamp(25px,3.5vw,52px);line-height:1.25;margin:.2em 0 0}
.unknot{background:#173e3b;color:#fff9ed;grid-template-columns:1fr 1.4fr}
.unknot ol{list-style:none;margin:0;padding:0;display:grid;gap:38px}
.unknot li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.unknot .ring{width:clamp(56px,7vw,96px);aspect-ratio:1;border:1px solid;border-radius:50%;display:grid;place-items:center}
.unknot .ring svg{width:54%;height:auto}
.unknot .no{font-size:12px;letter-spacing:.16em}
.unknot h3{font-size:clamp(21px,2.3vw,29px);line-height:1.4;margin:.3em 0 .45em}
.unknot p{font-size:16px;line-height:1.9;margin:0;max-width:460px}
/* よくある質問。開閉は details/summary だけで作り、JS を使わない。
summary は既定の高さが 23px しかないので、指で押せる 44px まで自分で広げる。
開閉の記号は全角どうしでそろえる(＋ と －)。
半角や数学記号と混ぜると、開閉のたびに記号の幅が変わって行がずれる。 */
.faq{background:#b7ddd2;color:#143c39;grid-template-columns:1fr 1.3fr}
.faq details{border-top:1px solid}
.faq details:last-child{border-bottom:1px solid}
.faq summary{display:flex;gap:16px;align-items:center;min-height:44px;padding:14px 0;font-size:17px;line-height:1.6;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";margin-left:auto;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"－"}
.faq details p{margin:0 0 20px;font-size:16px;line-height:1.9;max-width:560px}
/* 720px 以下は 1 列になり列が広がるので字を大きくする。
下限 28px は、いちばん狭い列に 9 字が入る値。 */
@media(max-width:720px){
.unknot,.faq{grid-template-columns:1fr;padding:80px 22px;gap:30px}
.unknot h2,.faq h2{font-size:clamp(28px,8.6vw,40px);text-wrap:balance}
.unknot ol{gap:30px}
.unknot li{gap:16px}
}
/* ヒーローと予約に散らす円。地より濃い同系色で、節の端で切れる。
本文より下の層に敷く。円は絶対配置の飾りで、文字の位置は動かさない。
縦位置は節の高さに対する割合で置く。画面の高さを基準にすると、
端末によってアドレスバーのぶんだけ節の中での位置がずれる。 */
.red-hero,.booking{overflow:hidden}
.booking{position:relative}
.red-hero>div:first-of-type,.red-hero>aside,.booking>h2,.booking>a{position:relative;z-index:1}
.tooth{z-index:1;animation:mdBreath 3.6s ease-in-out infinite}
.md-orb{position:absolute;z-index:0;border-radius:50%;background:#c33a20;pointer-events:none;
animation:mdDrift 4.2s ease-in-out infinite}
.md-o1{width:min(48vw,540px);aspect-ratio:1;left:-13vw;bottom:-26vw}
.md-o2{width:min(19vw,200px);aspect-ratio:1;right:1vw;top:62%;animation-duration:3.4s;animation-delay:-1.1s}
.md-o3{width:min(12vw,124px);aspect-ratio:1;left:53vw;top:7%;animation-duration:5s;animation-delay:-2.5s}
.md-o4{width:min(38vw,420px);aspect-ratio:1;left:-9vw;top:-11vw;animation-duration:4.6s;animation-delay:-1.5s}
.md-o5{width:min(22vw,240px);aspect-ratio:1;right:-4vw;bottom:-6vw;animation-duration:3.8s;animation-delay:-2.9s}
@keyframes mdDrift{0%,100%{transform:translateY(-34px)}50%{transform:translateY(34px)}}
/* 歯のバッジ。ふくらみながら左右にゆれ、ときどき目を 2 回つぶる。
元からの傾きは動きの中でも書き直して保つ。まばたきの中心は目そのものの中心から取る。 */
.tooth .md-face{width:66%;height:auto}
.md-eye-l,.md-eye-r{transform-box:fill-box;transform-origin:center;animation:mdBlink 4s ease-in-out infinite}
@keyframes mdBreath{
0%,100%{transform:rotate(4deg) scale(.985)}
50%{transform:rotate(11deg) scale(1.06)}
}
@keyframes mdBlink{
0%,84%,100%{transform:scaleY(1)}
87%{transform:scaleY(.06)}
90%{transform:scaleY(1)}
93%{transform:scaleY(.06)}
96%{transform:scaleY(1)}
}
/* 麻酔の手順の 4 つの丸の絵も、上から順に線が太くなってオレンジに変わる。
医院案内の 4 つの円と同じ動きで、順番が上から下へ 0.9 秒ずつ渡る。
2 番目の絵だけ部品ごとに線の太さが違うので、太さの比を保ったまま 1.8 倍にする。 */
.unknot .ring svg>*{animation:mdInk 3.6s ease-in-out infinite}
.unknot li:nth-child(2) .ring svg path:nth-of-type(1){animation-name:mdInkBold}
.unknot li:nth-child(2) .ring svg path:nth-of-type(2){animation-name:mdInkThin}
.unknot li:nth-child(2) .ring svg>*{animation-delay:.9s}
.unknot li:nth-child(3) .ring svg>*{animation-delay:1.8s}
.unknot li:nth-child(4) .ring svg>*{animation-delay:2.7s}
@keyframes mdInkBold{
0%,42%,100%{stroke-width:5;stroke:currentColor}
18%{stroke-width:9;stroke:var(--bg)}
}
@keyframes mdInkThin{
0%,42%,100%{stroke-width:1.5;stroke:currentColor}
18%{stroke-width:2.7;stroke:var(--bg)}
}
/* 診療の流れ。3枚のカードの背面にドットの影を敷く。
ドットはカードの背面・節の地の前面に出したいので、この列に重ね合わせの文脈を持たせる。
絵はカードごとに違う部品が動く。
吹き出しの中の点は、左から順に大きく跳ねて、波のように渡っていく。
3枚の幅がそろっていないのは、実際に見えている線の大きさをそろえるため。
1枚目は横長、3枚目は斜めなので、同じ幅にすると3枚の大きさが違って見える。 */
.step-cards{isolation:isolate}
.step-cards article{position:relative}
.step-cards article::after{content:"";position:absolute;z-index:-1;inset:16px -16px -16px 16px;
border-radius:42px;background:radial-gradient(#133d39 1.3px,transparent 1.4px) 0 0/9px 9px}
.icon .md-step{height:auto;display:block}
.md-s1{width:clamp(69px,7.9vw,97px)}
.md-s2{width:clamp(74px,8.5vw,104px)}
.md-s3{width:clamp(87px,10vw,122px)}
.md-dot1,.md-dot2,.md-dot3{transform-box:fill-box;transform-origin:center;
animation:mdTalk 1.2s ease-in-out infinite}
.md-dot2{animation-delay:.16s}
.md-dot3{animation-delay:.32s}
.md-lens{animation:mdLook 4.2s ease-in-out infinite}
.md-brush{animation:mdBrush 2.4s ease-in-out infinite}
@keyframes mdTalk{
0%,62%,100%{opacity:.2;transform:translateY(2.6px) scale(.5)}
30%{opacity:1;transform:translateY(-3.6px) scale(1.62)}
}
@keyframes mdLook{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes mdBrush{0%,100%{transform:translateY(-2.4px)}50%{transform:translateY(2.4px)}}
/* 予防ケア。円い写真がまんまるからゆがんだ形へ大きく形を変え、
中の写真もはっきり寄る。輪郭を変えるのは器、寄せるのは中の写真。
器を拡大すると写真は寄らないので分けている。器は重ね合わせを分けている。
4 つの角の丸みは、向かい合う 2 つの和がいつも 100 になる値だけを使う。
和が 100 を超えると途中でまとめて縮められて、形がはねる。 */
.care-photo{isolation:isolate;animation:mdBlob 5s ease-in-out infinite}
.care-photo img{animation:mdZoom 5s ease-in-out infinite alternate}
@keyframes mdBlob{0%,100%{border-radius:50%}
33%{border-radius:68% 32% 41% 59%/57% 68% 32% 43%}
66%{border-radius:33% 67% 62% 38%/44% 35% 65% 56%}}
@keyframes mdZoom{from{transform:scale(1)}to{transform:scale(1.2)}}
/* 予約。ボタンから輪がひろがって消える。影を広げているだけなので、
ボタンの大きさも押せる範囲も変わらない。 */
.booking a{animation:mdRing 3.2s ease-out infinite}
@keyframes mdRing{0%{box-shadow:0 0 0 0 #173e3b66}70%{box-shadow:0 0 0 26px #173e3b00}
100%{box-shadow:0 0 0 0 #173e3b00}}
/* 触れるところは、触れると分かるようにする。 */
.red-hero aside a,.booking a{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.red-hero aside a:hover{color:#0e2523;border-color:#0e2523}
.booking a:hover{background:#0f2f2c}
/* 麻酔の前の四つの手順の地の色は、診療の流れのカードと同じ濃さにそろえる。
前の色は暗すぎて、ページの中でここだけ沈んで見えた。 */
.unknot{background:#1e6863}
@media(max-width:720px){
.step-cards article::after{inset:10px -10px -10px 10px;border-radius:28px}
.md-o1{width:64vw;left:-18vw;bottom:-34vw}
.md-o2{width:26vw;right:-4vw;top:64%}
.md-o3{display:none}
.md-o4{width:52vw;left:-14vw;top:-16vw}
.md-o5{width:30vw;right:-8vw;bottom:-10vw}
}
/* いちばん狭い画面では、ふくらんだバッジが見出しにも画面の右端にも触れてしまうので、
その幅だけ少し小さくして内側へ寄せる。 */
@media(max-width:340px){
.tooth{width:76px;height:76px;right:16px}
}
/* 予防ケアの見出しは、画面幅 721〜759px の帯だけ 1 段小さくする。
この帯は列が 2 つのまま画面だけが狭くなるので、
見出しの 1 行目の末尾が画面の右端からはみ出して切れる。
共有のスタイルシートがこの見出しの大きさを固定しているため、
同じ強さで上書きしないと当たらない。 */
@media(min-width:721px) and (max-width:759px){
html body div#main main section#care.care div h2{font-size:39px!important}
}
/* ── 院内のようす(文字を置かない。端から端まで写真で埋める)──────────────
★比を 9:4 に固定してある理由: 左 2fr・右 1fr を上下 2 段に割ると、
どの幅でも 左 = 3:2 / 右 = 3:2 になる。**写真を 1536x1024 で焼けば静止時の切り取りが 0%。**
器の比を変えるときは、焼く指示文の寸法も同時に変えること(片方だけ直すと黙って切れる)。
★寄りは既存の mdZoom(1.2 倍 / 5 秒)を使い回す。負の delay で 3 枚をずらす。
★隙間を空けない = オーナー指示「全域を画像で端まで表示」。 */
/* ★2026-08-19 オーナー指摘「3 枚の背景が似通っていて境界線がわからない」。
→ 3 枚を**クリーム地に置いた 3 枚のカード**にした。この頁の語彙(角丸 28px の
ステップカード / 999px のピル / 円)に合わせてある。地は --ink(#fff9ed)= 頁の紙の色。
★帯そのものは画面の端から端まで届いたまま(左右にマージンを作らない)。
隙間は **カードとカードの間と、帯の内側の縁だけ**。
★比を 20/9 にしたのは、隙間を入れても左のカードが 3:2 のままになる値だから
(計算: (W-2p-g)*2/3 = 1.5*(H-2p) を p=g=12px で解いた)。 */
.rooms{--gut:.85%;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
gap:var(--gut);padding:var(--gut);aspect-ratio:2.2/1;background:var(--ink)}
.rooms figure{margin:0;overflow:hidden;border-radius:28px}
.rooms figure:first-child{grid-column:1;grid-row:1/3}
/* ★2026-08-19 オーナー指示「今回追加した写真には動的演出は不要」。
→ 常時ズーム(mdZoom)を外した。写真は静止したまま表示する。
器の切り取りが 1.00% → 0% に戻る(寄りの頂点でのはみ出しが無くなるため)。 */
@media(max-width:720px){
/* 狭い画面では 3 枚を縦に積む。カードの丸みと隙間はそのまま */
.rooms{--gut:10px;grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto}
.rooms figure:first-child{grid-column:1;grid-row:auto}
.rooms figure{aspect-ratio:3/2;border-radius:20px}
}