@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{--ink:#27475a;--sky:#dff5ff;--blue:#55bde7;--yellow:#ffd84e;--green:#7dcd82;--pink:#ff9cba;--cream:#fffaf0;--line:#d8e9ed}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.9;background:#fff}a{text-decoration:none;color:inherit}img{display:block;width:100%;object-fit:cover}.wrap{width:min(1100px,calc(100% - 42px));margin:auto}.header{height:84px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:relative;z-index:10}.logo{font-family:Fredoka,'Noto Sans JP',sans-serif;font-size:25px;font-weight:700;color:var(--blue);line-height:1}.logo small{display:block;font-family:'Noto Sans JP';font-size:9px;letter-spacing:.14em;color:var(--ink);margin-top:7px}.nav{display:flex;align-items:center;gap:23px;font-weight:700;font-size:12px}.nav a:hover{color:var(--blue)}.button{background:var(--pink);color:#fff;border-radius:999px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 5px 0 #e979a0;transition:.2s}.button:hover{transform:translateY(2px);box-shadow:0 3px 0 #e979a0}.button--green{background:var(--green);box-shadow:0 5px 0 #56a95d}.menu{display:none}
.hero{min-height:610px;background:linear-gradient(#b9eaff 0 64%,#a8dc81 64%);position:relative;overflow:hidden;display:flex;align-items:center}.cloud{position:absolute;background:#fff;border-radius:100px;width:150px;height:42px;opacity:.9}.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:#fff}.cloud:before{width:60px;height:60px;left:24px;bottom:10px}.cloud:after{width:46px;height:46px;right:20px;bottom:7px}.cloud--one{top:85px;left:7%}.cloud--two{top:160px;right:10%;transform:scale(.72)}.sun{position:absolute;right:14%;top:60px;width:70px;height:70px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 15px rgba(255,216,78,.22)}.hero .wrap{position:relative;z-index:3}.hero h1{font-family:Fredoka,'Noto Sans JP';font-size:clamp(43px,6.4vw,74px);line-height:1.15;margin:9px 0 18px;letter-spacing:.04em}.hero h1 span{color:#fff;text-shadow:0 4px 0 rgba(58,134,91,.25)}.hero p{font-weight:500;font-size:16px}.hero .button{margin-right:12px;margin-top:15px}.playhouse{position:absolute;right:10%;bottom:0;width:360px;height:315px;background:#ffcf56;border-radius:180px 180px 20px 20px;border:10px solid #fff7df;box-shadow:inset 0 -10px #efaf3d}.playhouse:before{content:'';position:absolute;width:100px;height:120px;background:#66bfe1;bottom:0;left:130px;border-radius:50px 50px 0 0;border:7px solid #fff7df}.playhouse:after{content:'';position:absolute;width:70px;height:70px;background:#ff9cba;border-radius:50%;top:-35px;left:135px;border:7px solid #fff7df}.grass{position:absolute;bottom:-8px;left:-2%;right:-2%;height:55px;background:var(--green);border-radius:50% 50% 0 0/100% 100% 0 0}.kicker{font-family:Fredoka;color:#f39a40;letter-spacing:.1em}.title{font-family:Fredoka,'Noto Sans JP';font-size:clamp(31px,4vw,48px);line-height:1.25;margin:8px 0 18px}.section{padding:95px 0}.center{text-align:center}.intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.play-card{height:350px;border-radius:30px;background:linear-gradient(145deg,#c7f0ff,#fff4b8);position:relative;overflow:hidden}.play-card:before{content:'★';position:absolute;color:#ffcc44;font-size:110px;top:25px;left:45px}.play-card:after{content:'☺';position:absolute;font-family:Fredoka;color:#fff;font-size:210px;bottom:-75px;right:28px;text-shadow:0 7px #ff9cba}.checks{padding:0;margin:25px 0;list-style:none}.checks li{padding:9px 0;font-weight:700}.checks li:before{content:'✓';display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--yellow);margin-right:10px}.worry{background:var(--cream)}.worry-grid,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:43px}.worry-item,.card{background:#fff;border-radius:20px;padding:28px 23px;box-shadow:0 7px 0 rgba(39,71,90,.04)}.worry-item i{font-style:normal;font-size:38px}.worry-item h3,.card h3{font-size:17px;margin:10px 0 5px}.worry-item p,.card p{font-size:12px;margin:0;color:#58707d}.card{padding:0;overflow:hidden}.card-image{height:190px;background:var(--sky);display:grid;place-items:center;font-size:70px}.card:nth-child(2) .card-image{background:#fff1b4}.card:nth-child(3) .card-image{background:#ffd9e6}.card-body{padding:22px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}.step{position:relative;text-align:center;background:#fff;border:2px dashed #bde0ec;border-radius:20px;padding:20px 12px}.step b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;margin:auto;font-family:Fredoka;font-size:20px}.step p{font-size:12px;margin:8px 0 0}.cta{background:var(--blue);color:#fff;padding:65px 0;text-align:center}.cta .title{margin-bottom:20px}.cta .button{background:#fff;color:var(--blue);box-shadow:0 5px 0 #338cb7;margin:7px}.footer{background:#27475a;color:#fff;padding:50px 0 20px}.footer-row{display:flex;justify-content:space-between;gap:30px}.footer p{font-size:11px}.copyright{font-size:10px;margin-top:25px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.page-hero{padding:70px 0;background:var(--sky);text-align:center;position:relative;overflow:hidden}.page-hero:before,.page-hero:after{content:'●';position:absolute;color:#fff;font-size:120px;opacity:.65}.page-hero:before{left:7%;top:-53px}.page-hero:after{right:9%;bottom:-70px}.page-hero .title{position:relative;margin-bottom:0}.page-hero p{position:relative;margin:6px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;margin-bottom:80px}.two-col:nth-child(even){direction:rtl}.two-col:nth-child(even)>*{direction:ltr}.visual{height:330px;border-radius:28px;background:#fff0ab;display:grid;place-items:center;font-size:130px}.two-col:nth-child(even) .visual{background:#d6f4ff}.fee{width:100%;border-collapse:collapse;margin-top:30px}.fee th,.fee td{padding:17px;border-bottom:1px solid var(--line);text-align:left}.fee th{background:#f4fbfd}.fee td:last-child{font-family:Fredoka;font-size:19px;color:#f28c60}.access{display:grid;grid-template-columns:1fr 1fr;gap:50px}.map{height:370px;border-radius:25px;background:linear-gradient(135deg,#dff5ff 25%,#c1e6a5 25% 50%,#fff3b1 50% 75%,#ffcede 75%);display:grid;place-items:center;font-family:Fredoka;font-size:30px;color:#fff}.faq{max-width:760px;margin:35px auto}.faq details{padding:18px;border-bottom:1px solid var(--line)}.faq summary{font-weight:700;cursor:pointer}.faq p{font-size:12px;color:#58707d}
@media(max-width:760px){.wrap{width:min(100% - 30px,560px)}.header{height:70px}.nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;z-index:11;padding:12px 16px 19px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 13px 18px rgba(39,71,90,.12)}.nav.is-open{display:flex}.nav>a{padding:12px 2px;border-bottom:1px solid var(--line)}.nav .button{margin-top:12px;text-align:center}.menu{display:block;width:42px;height:42px;border:0;background:transparent;position:relative;font-size:0}.menu:before,.menu:after,.menu span{content:'';position:absolute;left:9px;width:24px;height:2px;background:var(--ink);transition:.2s}.menu:before{top:13px}.menu span{top:20px}.menu:after{top:27px}.menu.is-open:before{top:20px;transform:rotate(45deg)}.menu.is-open span{opacity:0}.menu.is-open:after{top:20px;transform:rotate(-45deg)}.hero{min-height:590px;align-items:flex-start;padding-top:75px}.hero h1{font-size:45px}.hero p{font-size:13px}.playhouse{transform:scale(.6);transform-origin:bottom right;right:-30px}.sun{right:30px;top:30px}.cloud--two{display:none}.intro,.two-col,.access{grid-template-columns:1fr;gap:32px}.section{padding:65px 0}.worry-grid,.cards,.steps{grid-template-columns:1fr}.step{display:flex;align-items:center;gap:14px;text-align:left}.step b{margin:0;flex:0 0 auto}.step p{margin:0}.two-col:nth-child(even){direction:ltr}.visual{height:260px}.footer-row{display:block}.fee{font-size:12px}.fee th,.fee td{padding:12px 8px}}

/* 実写中心の小児歯科デザイン */
.hero{background-image:linear-gradient(90deg,rgba(26,68,83,.78),rgba(26,68,83,.35)),url('https://cdn.job-medley.com/customers/image_files/converted_v1-4965810a-b0f2-4254-b5ff-f181ece1e288.jpg');background-size:cover;background-position:center;min-height:650px}.hero .cloud,.hero .sun,.hero .playhouse,.hero .grass{display:none}.hero h1,.hero p{color:#fff;text-shadow:0 2px 15px rgba(0,0,0,.22)}.hero h1 span{color:#fff;text-shadow:none}.hero .kicker{color:#ffe577}.hero .button--green{background:#53af87;box-shadow:0 5px 0 #398265}.play-card{background:url('https://mozu-dental.com/wp-content/uploads/2018/05/infoimg2.jpg') center/cover}.play-card:before,.play-card:after{display:none}.worry-item i{display:none}.worry-item:before{content:'';display:block;width:46px;height:46px;border-radius:15px;background:var(--yellow);box-shadow:16px -8px 0 #c8edfb}.worry-item:nth-child(2):before{background:var(--pink);box-shadow:16px -8px 0 #ffd971}.worry-item:nth-child(3):before{background:var(--green);box-shadow:16px -8px 0 #bfe8f8}.card-image{font-size:0;background-position:center;background-size:cover}.cards .card:nth-child(1) .card-image{background-image:url('https://clover-dc.biz/menu/images/child_img01.jpg')}.cards .card:nth-child(2) .card-image{background-image:url('https://www.maebashi373.jp/img/clinic/slide02.jpg')}.cards .card:nth-child(3) .card-image{background-image:url('https://www.jda.or.jp/upd_dental/77532/pic3.jpg')}.visual{font-size:0;background:url('https://www.horie-kodomo-dc.com/images/clinic/img1.jpg') center/cover}.two-col:nth-child(even) .visual{background-image:url('https://www.koishi-child-dental.com/images/clinic_img_02.jpg')}.map{font-size:0;background:linear-gradient(rgba(38,91,105,.1),rgba(38,91,105,.1)),url('https://plus.kyousei-shika.net/image/1793/02.jpg') center/cover}
@media(max-width:760px){.hero{min-height:565px;padding-top:90px;background-position:62% center}.hero h1{font-size:43px}.hero p{font-size:14px}.play-card{height:285px}}

/* 遊具のある院内を主役にするトップ訴求 */
.hero h1{font-size:0;max-width:620px}.hero h1:after{content:'歯医者さんなのに、\A 遊具がある！';white-space:pre-line;font-family:Fredoka,'Noto Sans JP',sans-serif;font-size:clamp(43px,6.4vw,74px);line-height:1.15;letter-spacing:.04em;color:#fff}.hero p{font-size:0;max-width:430px}.hero p:after{content:'遊んで、慣れて、笑顔で診察へ。\A お子さまの「行きたい！」を育てる小児歯科です。';white-space:pre-line;font-size:16px;font-weight:500;line-height:1.9}.hero .button:first-of-type{font-size:0}.hero .button:first-of-type:after{content:'遊具のある院内を見る';font-size:14px}.intro .title:before{content:'遊具があるから、\A 来院前からわくわく。';white-space:pre-line}.intro .title{font-size:0}.intro .title:before{font-size:clamp(31px,4vw,48px);line-height:1.25}@media(max-width:760px){.hero h1:after{font-size:43px}.hero p:after{font-size:14px}.intro .title:before{font-size:31px}}
.hero .button:first-of-type{font-size:14px}.hero .button:first-of-type:after{content:none}

/* ローカルに保存した写真を使用 */
.hero{background-image:linear-gradient(90deg,rgba(26,68,83,.78),rgba(26,68,83,.35)),url('assets/playground.jpg')}.play-card{background-image:url('assets/kids-space.jpg')}.cards .card:nth-child(1) .card-image{background-image:url('assets/kids-space.jpg')}.cards .card:nth-child(2) .card-image{background-image:url('assets/waiting-room.jpg')}.cards .card:nth-child(3) .card-image{background-image:url('assets/play-corner.jpg')}.visual{background-image:url('assets/playground.jpg')}.two-col:nth-child(even) .visual{background-image:url('assets/kids-space.jpg')}.map{background-image:linear-gradient(rgba(38,91,105,.1),rgba(38,91,105,.1)),url('assets/waiting-room.jpg')}.step{min-height:205px;padding:120px 12px 14px;overflow:hidden;border:0;background:#fff;box-shadow:0 7px 0 rgba(39,71,90,.04)}.step:before{content:'';position:absolute;top:0;left:0;right:0;height:102px;background:center/cover url('assets/playground.jpg')}.step:nth-child(2):before{background-image:url('assets/kids-space.jpg')}.step:nth-child(3):before{background-image:url('assets/waiting-room.jpg')}.step:nth-child(4):before{background-image:url('assets/play-corner.jpg')}.step b{position:absolute;z-index:1;top:80px;left:calc(50% - 21px);border:3px solid #fff}.step p{position:relative;z-index:1}
@media(max-width:760px){.step{min-height:125px;padding:12px 12px 12px 130px}.step:before{width:112px;height:100%;right:auto}.step b{top:12px;left:90px;width:34px;height:34px;font-size:16px}.step p{margin:0}}

/* CSS背景ではなく画像要素として配置し、確実に表示する */
.play-card img,.card-image img{width:100%;height:100%;object-fit:cover}.step:before{display:none}.step{padding:120px 12px 14px}.step-photo{position:absolute;top:0;left:0;width:100%;height:102px;object-fit:cover}.step b{z-index:2}.step p{z-index:2}@media(max-width:760px){.step{padding:12px 12px 12px 130px}.step-photo{width:112px;height:100%}}

/* 写真とテキストを分離して可読性を確保 */
.cards .card{display:flex;flex-direction:column;background:#fff}.cards .card-image{height:210px;flex:0 0 210px;overflow:hidden;background:#e9f4f7}.cards .card-image img{display:block;width:100%;height:210px;object-fit:cover}.cards .card-body{position:relative;z-index:2;min-height:142px;padding:24px 24px 27px;background:#fff;color:var(--ink)}.cards .card-body h3{margin:0 0 8px}.cards .card-body p{color:#58707d;line-height:1.8}.steps .step{background:#fff}.steps .step p{background:#fff;border-radius:10px;padding:3px 7px;line-height:1.65}@media(max-width:760px){.cards .card-image,.cards .card-image img{height:190px;flex-basis:190px}.cards .card-body{min-height:0}}
