@charset "utf-8";
/* ==========================================================================
中村歯科クリニック / PC TOP — Figma「354. 中村歯科クリニック / PCtop」再現
基準アートボード: 1440px / コンテナ: 1280px
========================================================================== */
/* --------------------------------------------------
1. Design tokens
-------------------------------------------------- */
:root{
/* color */
--c-pink: #f16c92; /* primary */
--c-pink-lt: #f0a7bc;
--c-pink-bg: #ffe5ed;
--c-pink-bg2: #ffedf7;
--c-pink-pale: #fef8fa;
--c-olive: #6f7853;
--c-green-lt: #c4d19e;
--c-olive-bg: #eff1e6;
--c-ink: #433337;
--c-line: #cccccc;
--c-white: #ffffff;
/* type */
--f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
--f-jp-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
--f-jp-round: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
--f-en: "Cormorant Garamond", "Times New Roman", serif;
--f-sign: "Parisienne", cursive;
/* layout */
--w-container: 1320px;
--h-header: 80px;
}
/* --------------------------------------------------
2. Reset / base
-------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--c-white)}
body{
margin:0;
/* デザインは PC=1440px / SP=375px のカンバスで、内部は絶対配置の固定レイアウト。
幅ごとに組み直すとレイアウトが破綻するため、ウィンドウ幅に合わせて
ページ全体を等倍で拡大縮小する。--nkm-zoom は のスクリプトが設定し、
768px 未満（SPカンバス）では設定しない＝等倍のまま流動レイアウトで表示する。 */
zoom:var(--nkm-zoom,1);
/* 拡大の上限に達したときだけカンバス幅を固定して中央に置く（--nkm-canvas は上のスクリプトが設定） */
max-width:var(--nkm-canvas,none);
margin-inline:auto;
font-family:var(--f-jp);
font-size:16px;
font-weight:400;
line-height:1.9;
color:var(--c-ink);
background:var(--c-white);
-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;vertical-align:middle;border:0}
a{color:inherit;text-decoration:none;transition:opacity .25s ease,background-color .25s ease,color .25s ease}
a:hover{opacity:.75}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* --------------------------------------------------
3. Layout helpers
-------------------------------------------------- */
.l-container{width:100%;max-width:var(--w-container);margin-inline:auto;padding-inline:20px}
.l-container--narrow{max-width:1256px}
.l-container--news{max-width:1300px}
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-sp{display:none}
/* 共通セクション見出し（英字スクリプト＋日本語） */
.c-head{text-align:center}
.c-head__en{
display:block;
font-family:var(--f-en);
font-style:italic;
font-weight:500;
font-size:30px;
line-height:1;
letter-spacing:.06em;
color:var(--c-pink);
}
.c-head__en--olive{color:var(--c-olive)}
.c-head__jp{
display:block;
margin-top:14px;
font-family:var(--f-jp-head);
font-weight:700;
font-size:49px;
line-height:1.5;
letter-spacing:.06em;
color:var(--c-ink);
}
/* 共通ボタン */
.c-btn{
display:inline-flex;align-items:center;justify-content:center;gap:14px;
min-width:320px;height:70px;padding:0 32px;
font-family:var(--f-en);font-style:italic;font-size:22px;letter-spacing:.08em;
color:var(--c-white);background:var(--c-pink);border-radius:999px;
}
.c-btn::after{
content:"";width:9px;height:16px;flex:none;
background:currentColor;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;
mask:var(--icon-chevron) center/contain no-repeat;
}
.c-btn:hover{opacity:1;background:#e85b84}
.c-btn--olive{background:var(--c-olive)}
.c-btn--olive:hover{background:#616a48}
.c-btn--jp{font-family:var(--f-jp-head);font-style:normal;font-size:18px;font-weight:500;letter-spacing:.08em}
.c-btn--sm{min-width:0;height:58px;font-size:20px;padding:0 40px}
:root{
--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M1 1l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --------------------------------------------------
4. Header
-------------------------------------------------- */
.p-header{
position:sticky;top:0;z-index:100;
display:flex;align-items:stretch;
height:var(--h-header);
background:var(--c-white);
}
.p-header__logo{display:flex;align-items:center;gap:12px;padding-left:19px}
.p-header__logo img{width:50px;height:50px;flex:none}
.p-header__logo-name{
display:block;
font-family:var(--f-jp-round);font-weight:700;font-size:26px;line-height:1.1;
letter-spacing:.02em;color:var(--c-pink);
}
.p-header__logo-sub{
display:block;margin-top:4px;
/* zoomでカンバスごと縮小されると実効サイズが7px台まで下がって読めなくなるため、
縮小分を打ち消して常に実効10pxを確保する（1024-1439pxの帯で効く）。
--nkm-zoom が外れる375〜1023pxでは calc(10px/1)=10pxとなるが、
直後のSP用メディアクエリで8.5pxに上書きされる。 */
font-size:calc(10px / var(--nkm-zoom,1));
font-weight:400;line-height:1;letter-spacing:.01em;color:var(--c-ink);
}
/* 項目はヘッダーの高さいっぱいに広げる。
文字の高さしかないとリンク下端とメガメニュー上端の間に隙間ができ、
マウスを下ろす途中でホバーが外れてメニューが閉じてしまう。 */
.p-header__nav{margin-left:auto;display:flex;align-items:stretch}
.p-header__nav > ul{display:flex;align-items:stretch;gap:28px}
.p-header__nav > ul > li{display:flex;align-items:center}
.p-header__nav > ul > li > a{
display:flex;align-items:center;height:100%;
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.03em;color:var(--c-ink);
}
.p-header__cta{display:flex;margin-left:32px}
.p-header__cta a{
width:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
color:var(--c-white);font-family:var(--f-jp-head);font-size:15px;font-weight:500;letter-spacing:.06em;
}
.p-header__cta a svg{width:20px;height:20px}
.p-header__cta a:first-child{background:var(--c-olive)}
.p-header__cta a:last-child{background:var(--c-pink-lt)}
.p-header__cta a:hover{opacity:.85}
/* --------------------------------------------------
5. Hero
-------------------------------------------------- */
/* バッジは写真の下端をまたいで白地にはみ出すデザインなので、
.p-hero では切らず、背景画像側だけを切り抜く */
.p-hero{position:relative;height:900px}
.p-hero__bg{position:absolute;inset:0;overflow:hidden}
.p-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero__bg-right{
/* 斜めの切り抜きは素材（hero-right.webp）のアルファに含まれるため CSS では切らない */
position:absolute;top:0;right:0;width:865px;height:900px;
}
.p-hero__bg-right img{width:100%;height:100%;object-fit:cover}
.p-hero__inner{
position:relative;z-index:2;
width:100%;max-width:var(--w-container);margin-inline:auto;padding:0 20px;
height:100%;
}
/* 見出し・バッジの左端はモックアップ実測で design x=100（コンテナ内側+40px） */
.p-hero__copy{position:absolute;left:40px;top:500px}
.p-hero__title{
font-family:var(--f-jp-head);font-weight:700;font-size:44px;line-height:1.34;
letter-spacing:0;color:var(--c-ink);
}
.p-hero__lead{
margin-top:15px;
font-size:22px;font-weight:500;line-height:1.55;letter-spacing:0;color:var(--c-ink);
}
.p-hero__badges{position:absolute;left:40px;top:752px;display:flex;gap:4px;z-index:3}
.p-hero__badge{
width:184px;height:184px;border-radius:50%;
background:rgba(233,110,149,.88);
display:flex;align-items:center;justify-content:center;text-align:center;
color:var(--c-white);font-family:var(--f-jp-head);font-weight:700;font-size:18px;line-height:1.47;
letter-spacing:.02em;
position:relative;
}
/* 縁のチェーン装飾 */
.p-hero__badge::before{
content:"";position:absolute;inset:11px;border-radius:50%;
border:2px dotted rgba(255,255,255,.85);
}
.p-hero__badge span{position:relative;padding:0 18px}
/* --------------------------------------------------
6. Information（医院案内）
-------------------------------------------------- */
.p-info{position:relative;padding:135px 0 178px}
.p-info__head{position:relative;z-index:0;width:986px;max-width:100%}
.p-info__head-img{display:block;width:100%}
.p-info__head-text{display:none}
.p-info__photo{
position:absolute;right:0;top:135px;width:581px;height:1022px;z-index:1;
container-type:inline-size; /* 縦書き看板の cqw 基準 */
}
.p-info__photo img{width:100%;height:100%;object-fit:cover}
/* 外観写真に重なる縦書き看板（Figma上はテキストレイヤー。未書き出しのためCSSで再現） */
.p-info__sign{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.p-info__sign-col{
position:absolute;
writing-mode:vertical-rl;text-orientation:upright;
/* 白い看板は1列で1本。折り返すと列が増えて枠からはみ出すため禁止する */
white-space:nowrap;
font-family:var(--f-jp-head);font-weight:700;font-size:36px;
/* 縦書きでは line-height が列の太さになる。看板の幅と同じにして文字を枠の中央に置く */
line-height:58px;
letter-spacing:.72em;
}
.p-info__sign-col--lead{
left:418px;top:65px;width:58px;padding:12px 0 14px;
letter-spacing:.5em;
background:var(--c-white);color:var(--c-olive);
}
.p-info__sign-col--main{
left:352px;top:0;width:58px;padding:12px 0 14px;
background:var(--c-white);color:var(--c-pink);
}
.p-info__sign-col--sub{
left:282px;top:0;width:58px;padding:12px 0 14px;
background:var(--c-white);color:var(--c-olive);
}
.p-info__list{position:relative;z-index:2;width:608px;margin:45px 0 0 145px}
.p-info__item{
display:flex;align-items:flex-start;gap:17px;
padding:22px 0;border-bottom:1px solid var(--c-line);
font-family:var(--f-jp-head);font-size:26px;font-weight:500;line-height:40px;letter-spacing:0;
}
.p-info__item:first-child{border-top:0}
.p-info__item img{width:34px;height:34px;flex:none;margin-top:3px}
.p-info__item em{font-style:normal;font-size:33px;color:var(--c-pink);font-weight:500}
.p-info__note{display:block;margin-top:2px;font-size:14px;font-weight:400;line-height:18px;color:var(--c-ink)}
.p-info__sup{font-size:calc(11px / var(--nkm-zoom,1));vertical-align:super}
/* --------------------------------------------------
7. お悩み（For your concerns）
-------------------------------------------------- */
.p-concerns{
padding:94px 0 103px;
background:linear-gradient(180deg,#fef8fa 0%,#fdf7f5 55%,var(--c-olive-bg) 100%);
}
.p-concerns .c-head__jp{margin-top:12px;font-size:43px;line-height:1.82}
.p-concerns__list{
margin-top:26px;
display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;
}
.p-concerns__item{
display:flex;align-items:center;gap:16px;
height:82px;padding:0 26px;
background:var(--c-white);border:1px solid var(--c-green-lt);border-radius:12px;
font-family:var(--f-jp-head);font-size:20px;font-weight:500;letter-spacing:.02em;
}
.p-concerns__item::before{
content:"";flex:none;width:26px;height:26px;border-radius:50%;
background:var(--c-green-lt) var(--icon-check) center/13px 10px no-repeat;
}
:root{
--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l4 3.5L12 1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --------------------------------------------------
8. 医院基本情報ブロック（所在地・診療時間・地図）
-------------------------------------------------- */
.p-clinic{padding:139px 0 122px}
.p-clinic__inner{display:flex;gap:0;align-items:flex-start}
.p-clinic__body{width:600px;flex:none}
.p-clinic__logo{display:flex;align-items:center;gap:14px;padding-left:92px}
.p-clinic__logo img{width:60px;height:60px;flex:none}
.p-clinic__logo-name{
display:block;
font-family:var(--f-jp-round);font-weight:700;font-size:31px;line-height:1.1;
letter-spacing:.02em;color:var(--c-pink);
}
.p-clinic__logo-sub{display:block;margin-top:5px;font-size:calc(11px / var(--nkm-zoom,1));font-weight:400;color:var(--c-ink)}
.p-clinic__dl{margin-top:11px}
.p-clinic__row{display:flex;gap:8px;height:76px;align-items:center}
.p-clinic__row dt{
width:112px;flex:none;align-self:stretch;display:flex;align-items:center;
font-size:19px;letter-spacing:.04em;border-bottom:1px solid var(--c-line);
}
.p-clinic__row dd{
margin:0;flex:none;width:420px;align-self:stretch;display:flex;align-items:center;
font-size:21px;letter-spacing:.01em;white-space:nowrap;border-bottom:1px solid var(--c-line);
}
.p-clinic__tel{
font-family:var(--f-jp-head);font-weight:500;font-size:55px;line-height:1.1;
letter-spacing:.01em;color:var(--c-pink);
}
.p-clinic__table{width:540px;margin-top:30px;border-collapse:collapse;text-align:center;table-layout:fixed}
.p-clinic__table th,.p-clinic__table td{
height:72px;padding:0;font-size:18px;font-weight:400;letter-spacing:.04em;
border-bottom:1px solid var(--c-line);
}
.p-clinic__table thead th{background:var(--c-pink-bg2);color:var(--c-pink);border-bottom:0}
.p-clinic__table thead th:first-child{width:150px}
.p-clinic__table tbody th{font-weight:400;font-size:17px}
.p-clinic__table .is-tri{color:var(--c-pink)}
.p-clinic__note{margin-top:9px;font-size:16px;letter-spacing:.04em}
.p-clinic__map{width:680px;flex:none}
.p-clinic__map-wrap{position:relative;border-radius:6px;overflow:hidden}
.p-clinic__map figure{margin:0;line-height:0}
.p-clinic__map iframe{display:block;width:100%;height:492px;border:0}
/* 地図左上の院名ラベル */
.p-clinic__map-label{
position:absolute;left:16px;top:16px;z-index:2;margin:0;
display:inline-flex;align-items:center;gap:10px;
padding:8px 20px 8px 10px;white-space:nowrap;
background:var(--c-white);border-radius:999px;
box-shadow:0 2px 10px rgba(67,51,55,.18);
}
.p-clinic__map-label img{width:34px;height:34px;flex:none}
.p-clinic__map-label span{
font-family:var(--f-jp-round);font-weight:700;font-size:18px;
letter-spacing:.02em;color:var(--c-pink);
}
/* --------------------------------------------------
9. 予約CTA（Reservation）
-------------------------------------------------- */
.p-cta{
position:relative;overflow:hidden;
height:448px;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:var(--c-pink-bg2);
}
.p-cta__bg,.p-price__bg{position:absolute;inset:0;z-index:0;display:block}
.p-cta__bg img,.p-price__bg img{width:100%;height:100%;object-fit:cover}
.p-cta > .c-head,.p-cta__btns{position:relative;z-index:1}
.p-cta .c-head__en{font-size:28px}
.p-cta .c-head__jp{margin-top:12px;font-size:49px}
.p-cta__btns{margin-top:48px;display:flex;gap:24px}
.p-cta__btn{
display:flex;align-items:center;gap:26px;
width:530px;height:110px;padding-left:60px;border-radius:999px;
color:var(--c-white);font-family:var(--f-jp-head);font-weight:500;font-size:26px;letter-spacing:.06em;
}
.p-cta__btn i{
flex:none;width:56px;height:56px;border-radius:50%;background:var(--c-white);
display:flex;align-items:center;justify-content:center;
}
.p-cta__btn--tel{background:var(--c-olive)}
.p-cta__btn--tel i svg{fill:var(--c-olive)}
.p-cta__btn--web{background:var(--c-pink)}
.p-cta__btn--web i svg{fill:var(--c-pink)}
.p-cta__btn:hover{opacity:.88}
/* --------------------------------------------------
10. 外部サイトバナー
-------------------------------------------------- */
.p-banners{padding:100px 0 101px}
.p-banners__list{display:flex;flex-direction:column;align-items:center;gap:39px}
.p-banner{position:relative;display:block;width:900px;border-radius:24px;overflow:hidden}
.p-banner img{display:block;width:100%}
.p-banner__inner{position:absolute;inset:0}
/* 小児矯正専門サイト */
.p-banner--ortho .p-banner__tag{
position:absolute;left:44px;top:32px;
display:inline-block;padding:3px 14px;
background:var(--c-green-lt);color:var(--c-white);
font-family:var(--f-jp-head);font-weight:700;font-size:25px;line-height:1.4;letter-spacing:.01em;
}
.p-banner--ortho .p-banner__tag b{font-weight:700;color:#fff}
.p-banner--ortho .p-banner__title{
position:absolute;left:48px;top:78px;
font-family:var(--f-jp-round);font-weight:700;font-size:50px;line-height:1.06;
letter-spacing:0;color:var(--c-pink);
}
.p-banner--ortho .p-banner__lead{
position:absolute;left:48px;top:148px;
font-family:var(--f-jp-head);font-weight:700;font-size:22px;line-height:1.4;letter-spacing:.01em;
color:var(--c-ink);
}
.p-banner--ortho .p-banner__more{
position:absolute;left:0;bottom:0;width:390px;height:61px;
display:flex;align-items:center;padding-left:110px;gap:18px;
background:var(--c-pink-lt);border-top-right-radius:30px;
color:var(--c-white);font-family:var(--f-jp-head);font-weight:500;font-size:23px;letter-spacing:.06em;
}
.p-banner__more::after{
content:"";width:9px;height:15px;background:currentColor;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
/* 摂食嚥下指導（配置は小児矯正と同じ。フチ・ボタンはグリーン、タグはピンクで色を入れ替える） */
.p-banner--swallow .p-banner__tag{
position:absolute;left:44px;top:34px;
display:inline-block;padding:3px 14px;
background:var(--c-pink-lt);color:var(--c-white);
font-family:var(--f-jp-head);font-weight:700;font-size:22px;line-height:1.4;letter-spacing:.01em;
}
.p-banner--swallow .p-banner__tag b{font-weight:700;color:#fff}
.p-banner--swallow .p-banner__title{
position:absolute;left:48px;top:80px;
font-family:var(--f-jp-round);font-weight:700;font-size:50px;line-height:1.06;
letter-spacing:.02em;color:var(--c-pink);
}
.p-banner--swallow .p-banner__lead{
position:absolute;left:48px;top:148px;
font-family:var(--f-jp-head);font-weight:700;font-size:22px;line-height:1.4;letter-spacing:.01em;
color:var(--c-ink);
}
.p-banner--swallow .p-banner__more{
position:absolute;left:0;bottom:0;width:390px;height:61px;
display:flex;align-items:center;padding-left:110px;gap:18px;
background:#aebd82;border-top-right-radius:30px;
color:var(--c-white);font-family:var(--f-jp-head);font-weight:500;font-size:23px;letter-spacing:.06em;
}
/* --------------------------------------------------
10b. ママとこどものはいしゃさん（提携医院・バナーではない告知カード）
文字サイズ・位置はモックアップの実測値（カード左上を原点とした900×327内の座標）。
テキストブロックの中心は x=284.5 で揃える。
「ママとこどものはいしゃさん」は必ず1行に収める（折り返すと下の見出しと重なる）。
.p-banner とは違いバナーではないため、ホバー演出（浮き上がり・影・画像拡大）は付けない。
-------------------------------------------------- */
.p-mama{padding:100px 0 101px}
.p-mama__card{position:relative;display:block;width:900px;margin-inline:auto;border-radius:24px;overflow:hidden}
.p-mama__card > img{display:block;width:100%}
.p-mama__inner{position:absolute;inset:0}
.p-mama__lead-img{position:absolute;left:109px;top:39px;width:353px}
.p-mama__title{
position:absolute;left:34px;top:107px;width:501px;text-align:center;
font-family:var(--f-jp-round);font-weight:700;font-size:40px;line-height:1.33;letter-spacing:0;
white-space:nowrap;
color:var(--c-pink);
}
.p-mama__title em{font-style:normal;font-size:29px;color:var(--c-ink)}
.p-mama__title strong{
display:block;margin-top:0;font-size:53px;line-height:1.07;color:var(--c-pink);
}
.p-mama__title strong em{font-size:53px;color:var(--c-ink)}
.p-mama__note{
position:absolute;left:34px;top:233px;width:501px;text-align:center;
font-size:18px;font-weight:500;line-height:23.8px;letter-spacing:.01em;color:var(--c-ink);
}
/* --------------------------------------------------
11. Reason（8つの理由）
-------------------------------------------------- */
.p-reason{padding:130px 0 129px;background:var(--c-olive-bg)}
.p-reason .c-head__jp{margin-top:16px;font-size:41px;line-height:1.35}
.p-reason .c-head__jp .is-big{
font-family:var(--f-jp-head);font-weight:700;font-size:84px;line-height:1;
color:var(--c-pink);vertical-align:-6px;padding-right:4px;
}
.p-reason__list{
margin-top:59px;
display:grid;grid-template-columns:repeat(4,1fr);gap:49px 24px;
}
.p-reason__item{}
.p-reason__fig{position:relative;margin:0;border-radius:14px;overflow:hidden}
.p-reason__fig img{display:block;width:100%;aspect-ratio:302/200;object-fit:cover}
.p-reason__num{
position:absolute;left:0;top:0;z-index:2;
min-width:0;width:44px;height:37px;padding:0;
display:flex;align-items:center;justify-content:center;
background:var(--c-pink-lt);border-bottom-right-radius:16px;
font-family:var(--f-en);font-style:italic;font-size:21px;letter-spacing:.04em;color:var(--c-white);
}
.p-reason__title{
margin-top:19px;
font-family:var(--f-jp-head);font-weight:700;font-size:26px;line-height:39px;letter-spacing:.01em;
}
.p-reason__text{margin-top:15px;font-size:17.5px;line-height:26px;letter-spacing:0}
/* --------------------------------------------------
12. Medical（診療案内）
-------------------------------------------------- */
.p-medical{padding:95px 0 128px;background:var(--c-pink-bg)}
.p-medical .c-head__jp{margin-top:14px;font-size:49px}
.p-medical__grid{
margin-top:46px;
display:grid;grid-template-columns:repeat(4,1fr);gap:32px 26px;
}
.p-medical__item{
display:flex;align-items:center;gap:18px;
height:112px;padding:0 22px 0 26px;
background:var(--c-white);border-radius:16px;
font-family:var(--f-jp-head);font-weight:500;font-size:17px;line-height:1.45;letter-spacing:.02em;
color:var(--c-pink);
}
.p-medical__item img{width:46px;height:46px;flex:none}
.p-medical__item span{flex:1}
.p-medical__item::after{
content:"";flex:none;width:8px;height:14px;background:var(--c-pink);
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
.p-medical__more{margin-top:62px;text-align:center}
.p-medical__more .c-btn{min-width:401px;height:85px;font-size:26px}
/* --------------------------------------------------
13. Price（料金案内）
-------------------------------------------------- */
.p-price{
position:relative;overflow:hidden;height:548px;background:#e9e6e0;
}
.p-price__inner{position:relative;z-index:1;height:100%;max-width:var(--w-container);margin-inline:auto;padding:0 20px}
.p-price__card{
position:absolute;right:20px;top:80px;
width:682px;height:338px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
padding:0 30px;
background:rgba(255,255,255,.52);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-radius:32px;text-align:center;
}
.p-price__card p{
font-family:var(--f-jp-head);font-weight:400;font-size:28px;line-height:1.6;letter-spacing:.04em;
color:var(--c-ink);
}
.p-price__card .c-btn{min-width:0;width:320px;height:70px}
/* --------------------------------------------------
14. Greeting（院長挨拶）
-------------------------------------------------- */
.p-greeting{
padding:94px 0 0;
background:linear-gradient(180deg,var(--c-white) 0%,#fff5f8 55%,var(--c-pink-bg) 100%);
}
.p-greeting__inner{
display:grid;grid-template-columns:552px 600px;column-gap:61px;
grid-template-rows:auto 1fr;align-items:start;padding-left:52px;
}
.p-greeting__fig{grid-area:1/1/3/2}
.p-greeting__head{grid-area:1/2/2/3;text-align:left}
.p-greeting__body{grid-area:2/2/3/3}
.p-greeting__fig{position:relative;width:552px;flex:none;margin:45px 0 0}
.p-greeting__fig img{display:block;width:100%} /* アーチ形は素材のアルファ */
.p-greeting__plate{
position:absolute;left:-28px;bottom:150px;
display:flex;align-items:center;gap:14px;
padding:10px 34px 10px 12px;background:var(--c-white);border-radius:8px;
}
.p-greeting__plate b{
padding:5px 13px;background:var(--c-olive);color:var(--c-white);
font-family:var(--f-jp-head);font-weight:500;font-size:24px;letter-spacing:.04em;
}
.p-greeting__plate span{
font-family:var(--f-jp-head);font-weight:700;font-size:52px;letter-spacing:.06em;color:var(--c-ink);
}
.p-greeting__sign{
position:absolute;left:107px;bottom:76px;
transform:rotate(-8deg);transform-origin:left bottom;
font-family:var(--f-sign);font-size:52px;line-height:1;color:var(--c-white);
text-shadow:0 1px 6px rgba(0,0,0,.12);
}
.p-greeting__body{width:600px}
.p-greeting__catch{
margin-top:34px;
font-family:var(--f-jp-head);font-weight:700;font-size:33px;line-height:1.55;letter-spacing:.02em;
color:var(--c-pink);
}
.p-greeting__text{margin-top:30px;font-size:20px;line-height:1.8;letter-spacing:.01em}
.p-greeting__text + .p-greeting__text{margin-top:26px}
.p-greeting__voice{margin-top:26px}
.p-greeting__voice li{
font-family:var(--f-jp-head);font-weight:700;font-size:22px;line-height:1.9;letter-spacing:.02em;
color:var(--c-olive);
}
.p-greeting__body .c-btn{margin-top:38px}
/* ---------- 4コマ漫画（院長挨拶のピンクをそのまま引き継ぐ） ---------- */
.p-manga{padding:96px 0 120px;background:var(--c-pink-bg)}
.p-manga .c-head__jp{font-size:44px}
.p-manga__lead{margin-top:22px;text-align:center;font-size:18px;line-height:1.9;letter-spacing:.02em}
.p-manga__list{
margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px 28px;
counter-reset:none;list-style:none;
}
.p-manga__item{
position:relative;padding:10px;background:var(--c-white);border-radius:18px;
box-shadow:0 10px 30px rgba(190,120,145,.14);
}
.p-manga__item img{display:block;width:100%;height:auto;border-radius:10px}
.p-manga__num{
position:absolute;top:-14px;left:-14px;z-index:1;width:52px;height:52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--c-pink);color:var(--c-white);box-shadow:0 0 0 4px var(--c-white);
font-family:var(--f-en);font-style:italic;font-weight:600;font-size:28px;line-height:1;
}
.p-manga__cta{margin-top:56px;text-align:center}
.p-manga__cta p{font-family:var(--f-jp-head);font-weight:700;font-size:21px;line-height:1.7;letter-spacing:.04em;color:var(--c-ink)}
.p-manga__cta .c-btn{margin-top:26px;min-width:360px}
/* --------------------------------------------------
15. YouTube（紙芝居動画）
-------------------------------------------------- */
.p-youtube{padding:120px 0 158px;background:var(--c-olive-bg)}
/* PC: 左カラム（ロゴ＋本文）＋右カラム（画像）。SPでは order で並べ替える */
.p-youtube__inner{
display:grid;grid-template-columns:600px 500px;column-gap:76px;
grid-template-rows:auto 1fr;align-items:start;
}
.p-youtube__logo{grid-column:1;grid-row:1;width:200px}
.p-youtube__body{grid-column:1;grid-row:2;width:600px}
.p-youtube__figs{grid-column:2;grid-row:1 / span 2}
.p-youtube__title{
margin-top:28px;
font-family:var(--f-jp-head);font-weight:700;font-size:45px;line-height:1.38;letter-spacing:.01em;
color:var(--c-pink);
}
.p-youtube__tag{
display:inline-block;margin-top:26px;padding:5px 14px;
background:var(--c-green-lt);
font-family:var(--f-jp-head);font-weight:700;font-size:26px;letter-spacing:.01em;color:var(--c-ink);
}
.p-youtube__text{margin-top:24px;font-size:20px;line-height:1.75;letter-spacing:.01em}
.p-youtube__body .c-btn{margin-top:34px;min-width:0;width:320px;height:66px}
.p-youtube__figs{display:flex;flex-direction:column;gap:0}
.p-youtube__figs img{display:block;width:500px}
/* --------------------------------------------------
16. Pick up（ピックアップメニュー）
-------------------------------------------------- */
.p-pickup{padding:118px 0 104px}
.p-pickup .c-head__jp{margin-top:14px;font-size:49px}
.p-pickup__list{margin-top:68px;display:flex;flex-direction:column;gap:30px}
.p-pickup__item{
display:flex;align-items:stretch;
background:var(--c-white);border:1px solid #efefef;border-radius:24px;overflow:hidden;
box-shadow:0 2px 14px rgba(67,51,55,.04);
}
.p-pickup__body{flex:1;min-width:0;padding:56px 37px 52px 61px}
.p-pickup__head{display:flex;align-items:center;gap:22px}
.p-pickup__num{width:93px;height:92px;flex:none}
.p-pickup__title{
font-family:var(--f-jp-head);font-weight:500;font-size:30px;line-height:1.4;letter-spacing:.02em;
color:var(--c-green-lt);
}
.p-pickup__text{margin-top:26px;font-size:20px;line-height:1.8;letter-spacing:.01em}
.p-pickup__tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 12px}
.p-pickup__tags li{
padding:4px 16px;border:1px solid var(--c-green-lt);
font-family:var(--f-jp-head);font-weight:500;font-size:19px;letter-spacing:.02em;color:var(--c-ink);
}
.p-pickup__body .c-btn{margin-top:30px;min-width:0;width:320px;height:66px}
.p-pickup__fig{width:540px;flex:none;margin:0}
.p-pickup__fig img{display:block;width:100%;height:100%;object-fit:cover}
/* --------------------------------------------------
17. Case（症例）
-------------------------------------------------- */
.p-case{
padding:124px 0 42px;
background:linear-gradient(180deg,var(--c-olive-bg) 0%,#f5f6ef 34%,var(--c-white) 76%);
border-radius:200px 200px 0 0;
}
.p-case .c-head__en{color:var(--c-pink);font-size:30px}
.p-case .c-head__jp{margin-top:10px;font-size:49px}
.p-case__list{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.p-case__item{}
.p-case__label{
display:block;margin-bottom:14px;text-align:center;
font-family:var(--f-en);font-style:italic;font-size:38px;letter-spacing:.04em;color:var(--c-olive);
}
.p-case__card{
display:block;background:var(--c-white);border:1px solid #ebebeb;border-radius:14px;overflow:hidden;
}
.p-case__card img{display:block;width:100%}
.p-case__card p{padding:28px 21px 30px;font-size:20px;line-height:1.75;letter-spacing:.01em}
/* --------------------------------------------------
18. 設備
-------------------------------------------------- */
.p-equip{padding:56px 0 109px}
.p-equip__title{
text-align:center;
font-family:var(--f-jp-head);font-weight:700;font-size:48px;line-height:1.58;letter-spacing:.02em;
}
.p-equip__list{margin-top:66px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;justify-content:center}
.p-equip__list--2{margin-top:24px;grid-template-columns:repeat(2,410px);justify-content:center}
.p-equip__item{
background:var(--c-white);border:1px solid #ececec;border-radius:14px;overflow:hidden;
}
.p-equip__item img{display:block;width:100%;aspect-ratio:410/300;object-fit:cover}
.p-equip__name{
padding:12px 10px 10px;text-align:center;border-bottom:1px solid var(--c-line);
font-family:var(--f-jp-head);font-weight:700;font-size:26px;letter-spacing:.06em;color:var(--c-pink);
}
.p-equip__item p{padding:12px 24px 16px;font-size:20px;line-height:1.6;letter-spacing:.01em}
/* --------------------------------------------------
19. News / Blog
-------------------------------------------------- */
.p-nb{padding:138px 0 200px;background:var(--c-pink-bg)}
.p-nb__list{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.p-nb__card{background:var(--c-white);border-radius:24px;padding:44px 58px 48px}
.p-nb__card .c-head__jp{margin-top:8px;font-size:46px;letter-spacing:.1em}
.p-nb__posts{margin-top:34px}
.p-nb__post{display:flex;align-items:center;gap:22px;padding:27px 0;border-bottom:1px solid #eeeeee}
.p-nb__post:first-child{padding-top:0}
.p-nb__thumb{width:120px;height:78px;flex:none;border-radius:8px;background:#f2f2f2;overflow:hidden}
.p-nb__thumb img{width:100%;height:100%;object-fit:cover}
.p-nb__date{display:block;font-size:15px;letter-spacing:.06em;color:#9b9b9b}
.p-nb__ttl{margin-top:4px;font-size:17px;line-height:1.65;letter-spacing:.01em}
.p-nb__card .c-btn{margin-top:36px;min-width:0;width:320px;height:66px;margin-inline:auto;display:flex}
.p-nb__more{text-align:center}
/* --------------------------------------------------
20. 講演会バナー
-------------------------------------------------- */
.p-lecture{padding:139px 0 169px}
.p-lecture a{display:block;width:1102px;margin-inline:auto;border-radius:24px;overflow:hidden}
.p-lecture img{display:block;width:100%}
/* --------------------------------------------------
21. Footer
-------------------------------------------------- */
.p-footer{padding:32px 0 14px;background:var(--c-pink-lt);color:var(--c-white)}
.p-footer__inner{display:flex;gap:116px}
.p-footer__nav{display:flex;gap:117px;flex:none}
.p-footer__nav ul{display:flex;flex-direction:column;gap:23px;flex:none;white-space:nowrap}
.p-footer__nav a{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--f-jp-head);font-size:17px;font-weight:500;letter-spacing:.04em;
}
.p-footer__nav a::before{content:"";width:12px;height:1px;background:currentColor;flex:none}
.p-footer__medical{width:838px;flex:none}
.p-footer__medical > span{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--f-jp-head);font-size:17px;font-weight:500;letter-spacing:.04em;
}
.p-footer__medical > span::before{content:"";width:12px;height:1px;background:currentColor;flex:none}
.p-footer__medical ul{
margin-top:26px;display:flex;flex-wrap:wrap;gap:18px 40px;
}
.p-footer__medical a{
display:inline-flex;align-items:center;gap:8px;
font-size:15.5px;letter-spacing:.02em;
}
.p-footer__medical a::before{
content:"";flex:none;width:6px;height:10px;background:currentColor;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
.p-footer__copy{margin-top:20px;text-align:center;font-size:13px;letter-spacing:.04em}
/* 2回目の医院基本情報ブロック（余白のみ差分） */
.p-clinic--tight{padding:56px 0 37px}
/* --------------------------------------------------
23. 下層ページ用の最小スタイル
※下層ページのデザインは未支給。TOP のトークンに揃えた暫定スタイル
-------------------------------------------------- */
.l-main{padding-bottom:0}
.p-pagehead{padding:96px 0 56px;background:var(--c-pink-bg2);text-align:center}
.p-pagehead .c-head__jp{margin-top:10px}
.p-archive{padding:80px 20px 120px}
.p-archive__list{max-width:900px;margin-inline:auto}
.p-archive__list li + li{border-top:1px solid #eee}
.p-archive__empty{text-align:center;padding:80px 0}
.p-pager{margin-top:56px;text-align:center}
.p-pager .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;height:44px;padding:0 12px;margin:0 4px;border-radius:8px;
border:1px solid var(--c-line);font-size:16px;
}
.p-pager .page-numbers.current{background:var(--c-pink);border-color:var(--c-pink);color:var(--c-white)}
.p-single__date{font-size:15px;letter-spacing:.06em;color:#9b9b9b}
.p-single__title{
margin-top:10px;font-family:var(--f-jp-head);font-weight:700;font-size:34px;line-height:1.5;
}
.p-single__body,.p-page{max-width:880px;padding:72px 20px 120px}
.p-single__thumb{margin:0 0 40px}
.p-single__thumb img{width:100%;border-radius:14px}
.p-single__content h2{
margin:56px 0 20px;padding-bottom:12px;border-bottom:2px solid var(--c-pink-lt);
font-family:var(--f-jp-head);font-weight:700;font-size:28px;line-height:1.5;
}
.p-single__content h3{margin:40px 0 16px;font-family:var(--f-jp-head);font-weight:700;font-size:22px}
.p-single__content p{margin-bottom:24px;font-size:17px;line-height:2}
.p-single__content img{border-radius:12px}
.p-single__content ul{margin:0 0 24px;padding-left:1.2em;list-style:disc}
.p-single__content ol{margin:0 0 24px;padding-left:1.4em;list-style:decimal}
.p-single__nav{margin-top:64px;display:flex;justify-content:space-between;gap:24px;font-size:16px}
.p-single__nav a{color:var(--c-pink)}
.p-header.is-scrolled{box-shadow:0 2px 12px rgba(67,51,55,.06)}
/* 症例 Before / After（画像差し込み時に使用） */
.c-ba{position:relative;overflow:hidden}
.c-ba img{display:block;width:100%}
.c-ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.c-ba__handle{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:var(--c-pink-lt);cursor:ew-resize;
display:flex;align-items:center;justify-content:center;color:var(--c-white);
}
/* --------------------------------------------------
24. ハンバーガー／ドロワー（SPのみ表示）
-------------------------------------------------- */
.p-header__toggle{display:none}
.p-drawer{display:none}
/* --------------------------------------------------
25. 768〜1439px / 1440px超
PCレイアウトは1440pxのカンバスに絶対配置で組まれているため、
幅ごとに組み直すのではなく body の zoom でカンバスごと拡大縮小する
（2. Reset / base の --nkm-zoom）。ここでの作り分けは行わない。
-------------------------------------------------- */
/* ==================================================================
26. SP（〜767px）— Figma「354. 中村歯科クリニック / SPtop」再現
基準アートボード: 375px / コンテナ: 351px（padding-inline 12px）
================================================================== */
@media (max-width:1023px){
/* ---------- 基本 ---------- */
:root{--h-header:80px}
body{font-size:14px;line-height:1.8}
.l-container,.l-container--narrow,.l-container--news{max-width:none;padding-inline:12px}
.u-pc{display:none}
.u-sp{display:inline}
/* ---------- 共通パーツ ---------- */
.c-head__en,
.p-cta .c-head__en,
.p-case .c-head__en{font-size:18px}
.c-head__jp{margin-top:11px;font-size:25px;line-height:1.5;letter-spacing:.04em}
.c-btn{min-width:0;width:100%;max-width:310px;height:66px;font-size:22px;gap:12px;margin-inline:auto}
.c-btn::after{width:8px;height:14px}
.c-btn--jp{font-size:18px}
/* ---------- ヘッダー ---------- */
.p-header{height:80px}
.p-header__logo{padding-left:30px;gap:9px}
.p-header__logo img{width:40px;height:40px}
.p-header__logo-name{font-size:20px}
.p-header__logo-sub{margin-top:3px;font-size:8.5px;white-space:nowrap}
.p-header__nav,.p-header__cta{display:none}
.p-header__toggle{
display:flex;align-items:center;justify-content:center;
width:61px;flex:none;margin-left:auto;background:var(--c-pink);
}
.p-header__toggle-bars{display:block;width:35px}
.p-header__toggle-bars i{
display:block;height:2px;background:var(--c-white);border-radius:2px;
transition:transform .25s ease,opacity .2s ease;
}
.p-header__toggle-bars i+i{margin-top:6px}
.p-header__toggle.is-open .p-header__toggle-bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.p-header__toggle.is-open .p-header__toggle-bars i:nth-child(2){opacity:0}
.p-header__toggle.is-open .p-header__toggle-bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* ---------- ヒーロー ---------- */
.p-hero{height:auto;overflow:visible}
/* 背景写真の高さは横幅に比例させる（375px時 234px）。
px固定だと375pxより広い端末で写真の上下が切れるため。
vwではなくaspect-ratio／%を使う（body側のzoomの影響を受けないため）。 */
.p-hero__bg{position:absolute;top:0;left:0;right:0;bottom:auto;height:auto;aspect-ratio:375/234}
.p-hero__bg::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:27.35%;z-index:2;
background:linear-gradient(180deg,rgba(255,255,255,0),var(--c-white));
}
.p-hero__bg-right{width:60%;height:100%}
.p-hero__inner{position:relative;max-width:none;height:auto;padding:54.13% 12px 15px}
.p-hero__copy{position:static}
.p-hero__title{font-size:26px;line-height:35px}
.p-hero__lead{margin-top:26px;font-size:15px;line-height:22px}
.p-hero__badges{position:static;margin:29px 0 0;justify-content:center;gap:0}
.p-hero__badge{width:129px;height:129px;font-size:14px;line-height:19px;background:#e97a9a}
.p-hero__badge+.p-hero__badge{margin-left:-16px}
.p-hero__badge::before{inset:7px;border-width:2px}
.p-hero__badge span{padding:0 8px}
/* ---------- Information ---------- */
.p-info{padding:0}
.p-info__head{
position:relative;z-index:0;width:100%;height:100px;
background:linear-gradient(90deg,#ffe9ef 0%,#fffcfd 100%);
}
.p-info__head-img{display:none}
.p-info__head-text{display:block;padding:18px 0 0 41px}
.p-info__head-en{
display:block;
font-family:var(--f-en);font-style:italic;font-weight:500;font-size:38px;line-height:1;
letter-spacing:.02em;
background:linear-gradient(90deg,#d5c7ad 0%,#c4973f 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.p-info__head-jp{
display:block;margin-top:14px;
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.06em;color:#c3963e;
}
.p-info__photo{display:block;position:relative;top:auto;right:auto;width:100%;height:auto;z-index:0}
.p-info__photo img{height:auto}
.p-info__list{width:auto;margin:1px 21px 0}
.p-info__item{gap:10px;padding:12px 0;font-size:15px;line-height:30px}
.p-info__item img{width:21px;height:21px;margin-top:2px}
.p-info__item em{font-size:22px}
.p-info__note{margin-top:4px;font-size:11px;line-height:16px}
.p-info__sup{font-size:9px}
/* 外観写真の縦書き看板（SP用の位置）
写真そのものに重ねる装飾なので、px固定ではなく写真の幅（cqw）に追従させる。
基準は375px時の実測値。 */
.p-info__sign{display:block}
.p-info__sign-col{font-size:5.333cqw;line-height:7.733cqw;letter-spacing:.46em}
.p-info__sign-col--lead{left:77.87cqw;top:4.8cqw;bottom:auto;width:7.733cqw;padding:0.4cqw 0}
.p-info__sign-col--main{left:67.73cqw;top:0;bottom:auto;width:7.733cqw;padding:0.4cqw 0}
.p-info__sign-col--sub{left:58.4cqw;top:0;bottom:auto;width:7.733cqw;padding:0.4cqw 0}
/* ---------- お悩み ---------- */
.p-concerns{padding:60px 0 91px}
.p-concerns .c-head__jp{margin-top:14px;font-size:25px;line-height:1.55}
.p-concerns__list{margin-top:32px;grid-template-columns:1fr;gap:11px}
.p-concerns__item{height:auto;min-height:52px;padding:12px 16px;gap:11px;font-size:15px;line-height:1.5}
.p-concerns__item::before{width:22px;height:22px;background-size:11px 8px}
/* ---------- 医院基本情報 ---------- */
.p-clinic,.p-clinic--tight{padding:61px 0 87px}
.p-clinic__inner{display:block}
.p-clinic__body{width:auto}
.p-clinic__logo{padding-left:0;justify-content:center;gap:11px}
.p-clinic__logo img{width:51px;height:51px}
.p-clinic__logo-name{font-size:27px}
.p-clinic__logo-sub{margin-top:4px;font-size:9px}
.p-clinic__dl{margin-top:24px}
.p-clinic__row{height:70px;gap:12px}
.p-clinic__row dt{width:74px;font-size:15px}
.p-clinic__row dd{width:auto;flex:1;font-size:15px;white-space:normal;line-height:1.5}
.p-clinic__tel{font-size:34px;letter-spacing:0}
.p-clinic__table{width:100%;margin-top:26px}
.p-clinic__table th,.p-clinic__table td{height:60px;font-size:15px}
.p-clinic__table thead th:first-child,.p-clinic__table tbody th{width:112px;font-size:13px}
.p-clinic__note{margin-top:10px;font-size:14px}
.p-clinic__map{width:auto;margin:28px -12px 0}
.p-clinic__map-wrap{border-radius:0}
.p-clinic__map iframe{height:492px}
.p-clinic__map-label{left:12px;top:12px;padding:6px 14px 6px 7px;gap:8px}
.p-clinic__map-label img{width:26px;height:26px}
.p-clinic__map-label span{font-size:15px}
/* ---------- 予約CTA ---------- */
.p-cta{height:394px}
.p-cta .c-head__jp{margin-top:12px;font-size:25px}
.p-cta__btns{margin-top:38px;flex-direction:column;gap:10px;width:310px}
.p-cta__btn{width:310px;height:90px;padding-left:34px;gap:18px;font-size:21px}
.p-cta__btn i{width:44px;height:44px}
.p-cta__btn i svg{width:22px;height:22px}
/* ---------- バナー ---------- */
.p-banners{padding:59px 0 61px}
.p-banners__list{gap:10px}
.p-banner{width:100%;border-radius:12px}
.p-banner--ortho .p-banner__tag{left:17px;top:12px;padding:1px 6px;font-size:10px}
.p-banner--ortho .p-banner__title{left:19px;top:30px;font-size:19px}
.p-banner--ortho .p-banner__lead{left:19px;top:57px;font-size:8.5px}
.p-banner--ortho .p-banner__more{width:152px;height:24px;padding-left:43px;gap:7px;font-size:9px;border-top-right-radius:12px}
.p-banner__more::after{width:5px;height:8px}
.p-banner--swallow .p-banner__tag{left:17px;top:12px;padding:1px 6px;font-size:9px}
.p-banner--swallow .p-banner__title{left:19px;top:30px;font-size:19px}
.p-banner--swallow .p-banner__lead{left:19px;top:57px;font-size:8.5px}
.p-banner--swallow .p-banner__more{width:152px;height:24px;padding-left:43px;gap:7px;font-size:9px;border-top-right-radius:12px}
/* ---------- Reason ---------- */
.p-reason{padding:54px 0 0}
.p-reason .c-head__jp{margin-top:12px;font-size:19px;line-height:1.45}
.p-reason .c-head__jp .is-big{font-size:38px;vertical-align:-3px}
.p-reason__list{margin-top:37px;grid-template-columns:repeat(2,1fr);gap:38px 10px}
.p-reason__fig{border-radius:8px}
.p-reason__fig img{aspect-ratio:170/113}
.p-reason__num{min-width:0;width:30px;height:24px;font-size:14px;border-bottom-right-radius:10px}
.p-reason__title{margin-top:14px;font-size:19px;line-height:29px}
.p-reason__text{margin-top:12px;font-size:14px;line-height:21px}
/* ---------- Medical ---------- */
.p-medical{padding:54px 0 59px}
.p-medical .c-head__jp{margin-top:11px;font-size:25px}
.p-medical__grid{margin-top:32px;grid-template-columns:repeat(2,1fr);gap:15px 8px}
.p-medical__item{
flex-direction:column;justify-content:center;gap:8px;
height:115px;padding:0 8px;border-radius:12px;
font-size:14px;line-height:1.35;text-align:center;
}
.p-medical__item img{width:40px;height:40px}
.p-medical__item span{flex:none}
.p-medical__item::after{display:none}
.p-medical__more{margin-top:29px}
.p-medical__more .c-btn{min-width:0;width:100%;max-width:310px;height:80px;font-size:24px}
/* ---------- Price ---------- */
.p-price{height:469px;padding:0}
.p-price__inner{max-width:none;padding:0 12px}
.p-price__card{
position:absolute;left:32px;right:33px;top:144px;width:auto;height:264px;
padding:0 18px;gap:18px;border-radius:22px;
}
.p-price__card p{font-size:17px;line-height:1.6}
.p-price__note{display:block;margin-top:10px;font-size:13px;line-height:1.6}
.p-price__card .c-btn{width:220px;height:56px;font-size:19px}
/* ---------- Greeting ---------- */
.p-greeting{padding:56px 0 207px}
.p-greeting__inner{display:flex;flex-direction:column;grid-template-columns:none;padding-left:0}
.p-greeting__head{order:1;grid-area:auto;text-align:center}
.p-greeting__fig{order:2;grid-area:auto}
.p-greeting__body{order:3;grid-area:auto}
.p-greeting__fig{width:310px;margin:22px auto 0}
.p-greeting__plate{left:-6px;bottom:76px;padding:6px 18px 6px 7px;gap:9px;border-radius:5px}
.p-greeting__plate b{padding:3px 7px;font-size:13px}
.p-greeting__plate span{font-size:27px}
.p-greeting__sign{left:58px;bottom:24px;font-size:30px}
.p-greeting__body{width:auto}
.p-greeting__catch{margin-top:34px;font-size:25px;line-height:1.55}
.p-greeting__text{margin-top:22px;font-size:14px;line-height:1.95}
.p-greeting__voice{margin-top:20px}
.p-greeting__voice li{font-size:16px;line-height:1.9}
.p-greeting__body .c-btn{margin-top:30px}
.p-greeting:has(+ .p-manga){padding-bottom:20px}
.p-manga{padding:52px 0 64px}
.p-manga .c-head__jp{font-size:25px}
.p-manga__lead{margin-top:14px;font-size:14px;line-height:1.85;text-align:left}
.p-manga__list{margin-top:30px;grid-template-columns:1fr;gap:24px}
.p-manga__item{padding:6px;border-radius:12px}
.p-manga__item img{border-radius:7px}
.p-manga__num{top:-10px;left:-6px;width:38px;height:38px;font-size:21px;box-shadow:0 0 0 3px var(--c-white)}
.p-manga__cta{margin-top:34px}
.p-manga__cta p{font-size:16px;text-align:left}
.p-manga__cta .c-btn{margin-top:18px;min-width:0}
/* ---------- YouTube ---------- */
.p-youtube{padding:47px 0 46px}
.p-youtube__inner{display:flex;flex-direction:column;gap:0}
.p-youtube__logo{order:1;width:167px;margin-inline:auto}
.p-youtube__figs{order:2;flex-direction:column;margin-top:26px;gap:0}
.p-youtube__figs img{width:100%}
.p-youtube__body{order:3;width:auto;margin-top:31px;text-align:center}
.p-youtube__title{margin-top:0;font-size:22px;line-height:1.42}
.p-youtube__tag{margin-top:18px;max-width:220px;padding:5px 12px;font-size:18px;line-height:1.5}
.p-youtube__text{margin-top:20px;font-size:15px;line-height:1.95;text-align:left}
.p-youtube__body .c-btn{margin-top:26px;width:100%;max-width:310px;height:70px}
/* ---------- Pick up ---------- */
.p-pickup{padding:55px 0 56px;background:linear-gradient(180deg,var(--c-white) 0%,var(--c-pink-bg) 100%)}
.p-pickup .c-head__jp{margin-top:11px;font-size:25px}
.p-pickup__list{margin-top:33px;gap:22px}
.p-pickup__item{flex-direction:column-reverse;border-radius:16px}
.p-pickup__fig{width:100%;height:auto}
.p-pickup__fig img{aspect-ratio:350/200}
.p-pickup__body{padding:38px 20px 42px}
.p-pickup__head{gap:12px}
.p-pickup__num{width:47px;height:46px}
.p-pickup__title{font-size:19px;line-height:1.5}
.p-pickup__text{margin-top:26px;font-size:14px;line-height:2.05}
.p-pickup__tags{margin-top:16px;gap:8px}
.p-pickup__tags li{padding:4px 19px;font-size:14px}
.p-pickup__body .c-btn{margin-top:28px;height:64px}
/* ---------- Case ---------- */
.p-case{padding:54px 0 23px;border-radius:130px 130px 0 0}
.p-case .c-head__jp{margin-top:10px;font-size:25px}
.p-case__list{margin-top:30px;grid-template-columns:1fr;gap:24px}
.p-case__label{margin-bottom:10px;font-size:22px}
.p-case__card{border-radius:10px}
.p-case__card p{padding:18px 16px 20px;font-size:14px;line-height:1.9}
/* ---------- 設備 ---------- */
.p-equip{padding:203px 0 59px}
.p-equip__title{font-size:25px;line-height:1.6}
.p-equip__list{margin-top:26px;grid-template-columns:1fr;gap:20px}
.p-equip__list--2{margin-top:20px;grid-template-columns:1fr}
.p-equip__item{border-radius:12px}
.p-equip__item img{aspect-ratio:350/250}
.p-equip__name{padding:18px 10px 16px;font-size:19px}
.p-equip__item p{padding:18px 16px 22px;font-size:14px;line-height:1.85}
/* ---------- News / Blog ---------- */
.p-nb{padding:59px 0 59px}
.p-nb__list{grid-template-columns:1fr;gap:20px}
.p-nb__card{padding:42px 20px 45px;border-radius:16px}
.p-nb__card .c-head__jp{margin-top:9px;font-size:22px;letter-spacing:.08em}
.p-nb__posts{margin-top:22px}
.p-nb__post{gap:12px;padding:36px 0}
.p-nb__thumb{width:70px;height:47px;border-radius:5px}
.p-nb__date{font-size:12px}
.p-nb__ttl{margin-top:2px;font-size:13px;line-height:1.55}
.p-nb__card .c-btn{margin-top:22px;height:56px;font-size:20px}
/* ---------- 講演会バナー ---------- */
.p-lecture{padding:30px 0}
.p-lecture a{width:322px;max-width:100%;border-radius:16px}
/* ---------- ママとこどものはいしゃさん ---------- */
.p-mama{padding:59px 0 61px}
.p-mama__card{width:100%;border-radius:12px}
.p-mama__lead-img{left:45px;top:12px;width:137px}
.p-mama__title{left:16px;top:33px;width:187px;font-size:17px;line-height:1.3}
.p-mama__title em{font-size:12px}
.p-mama__title strong{margin-top:1px;font-size:21px}
.p-mama__title strong em{font-size:21px}
.p-mama__note{left:8px;top:84px;width:186px;font-size:7px;line-height:1.5}
/* ---------- Footer ---------- */
.p-footer{padding:46px 0 63px}
.p-footer__inner{display:block}
.p-footer__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px;width:auto}
.p-footer__nav ul{gap:0;white-space:normal}
.p-footer__nav a{padding:14px 0;gap:8px;font-size:15px}
.p-footer__medical{width:auto;margin-top:22px}
.p-footer__medical > span{gap:8px;font-size:15px}
.p-footer__medical ul{margin-top:16px;gap:18px 20px}
.p-footer__medical a{gap:8px;font-size:15px}
.p-footer__copy{margin-top:60px;font-size:11px}
}
/* ==================================================================
27. メガメニュー（PCホバー）／ドロワーのアコーディオン／固定CTAバー
Figma「354. 中村歯科クリニック」node-id 48-2258
================================================================== */
/* ---------- PC: 診療案内 ホバーメガメニュー ---------- */
.p-header__nav li{position:static}
.p-mega{
position:absolute;left:0;right:0;top:100%;z-index:90;
opacity:0;visibility:hidden;transform:translateY(-6px);
/* 閉じるときだけ 0.2 秒待つ。斜めにマウスを動かしても閉じないようにするため */
transition:opacity .22s ease .2s,transform .22s ease .2s,visibility .22s .2s;
pointer-events:none;
}
.p-header__nav li.has-mega:hover .p-mega,
.p-header__nav li.has-mega:focus-within .p-mega{
opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition-delay:0s;
}
.p-mega__inner{
width:100%;max-width:1280px;margin-inline:auto;min-height:403px;
display:flex;align-items:center;gap:0;
padding:60px 60px 60px 0;
background:rgba(241,108,146,.78);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
border-radius:0 0 80px 80px;
}
.p-mega__title{
flex:none;width:318px;text-align:center;
border-right:1px solid rgba(255,255,255,.85);align-self:stretch;
display:flex;align-items:center;justify-content:center;
font-family:var(--f-jp-head);font-weight:500;font-size:24px;letter-spacing:.08em;
color:var(--c-white);
}
.p-mega__list{
flex:1;min-width:0;padding-left:44px;
display:flex;flex-wrap:wrap;align-content:center;gap:29px 56px;
}
.p-mega__list a{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.04em;
color:var(--c-white);white-space:nowrap;
}
.p-mega__list a::before{
content:"";flex:none;width:7px;height:12px;background:currentColor;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
.p-mega__list a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* ---------- 画面下部の固定CTAバー（SPのみ表示） ---------- */
.p-fixcta{display:none}
/* ==================================================================
28. SP（〜767px）追加分
================================================================== */
@media (max-width:1023px){
/* メガメニューはSPでは使わない（ドロワーのアコーディオンに集約） */
.p-mega{display:none}
/* ---------- 固定CTAバー ---------- */
body{padding-bottom:50px}
.p-fixcta{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;height:50px;
}
.p-fixcta__btn{
flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:12px;
color:var(--c-white);
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.04em;
}
.p-fixcta__btn svg{width:19px;height:19px;flex:none}
.p-fixcta__btn--tel{background:var(--c-olive)}
.p-fixcta__btn--web{background:var(--c-pink-lt)}
body.is-drawer-open .p-fixcta{display:none}
/* ---------- ドロワー（作り直し） ---------- */
.p-drawer{
display:block;position:fixed;inset:var(--h-header) 0 0;z-index:99;
overflow-y:auto;-webkit-overflow-scrolling:touch;
background:rgba(67,51,55,.28);
opacity:0;transition:opacity .25s ease;
}
/* 閉じている間は hidden 属性を尊重する（display:block が UA の [hidden] に勝ってしまうため）。
これが無いと透明なオーバーレイがページ全体のタップを奪う。 */
.p-drawer[hidden]{display:none}
.p-drawer.is-open{opacity:1}
.p-drawer__inner{
transform:translateY(-10px);transition:transform .25s ease;background:transparent;
height:auto;overflow:visible;padding:0;
}
.p-drawer.is-open .p-drawer__inner{transform:none}
.p-drawer__body{background:#fff6f9;padding:39px 0 41px}
.p-drawer__nav{margin:0 12px}
.p-drawer__row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
height:60px;border-bottom:1px solid var(--c-line);
}
.p-drawer__row > a{
flex:1;min-width:0;padding-left:22px;
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.04em;
color:var(--c-ink);
}
.p-drawer__toggle{
flex:none;width:18px;height:18px;margin-right:11px;border-radius:50%;
background:var(--c-pink);position:relative;
}
.p-drawer__toggle::before,.p-drawer__toggle::after{
content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
background:var(--c-white);border-radius:1px;
}
.p-drawer__toggle::before{width:9px;height:1.6px}
.p-drawer__toggle::after{width:1.6px;height:9px;transition:opacity .2s ease,transform .2s ease}
.p-drawer__toggle[aria-expanded="true"]::after{opacity:0;transform:rotate(90deg)}
.p-drawer__sub{overflow:hidden}
.p-drawer__sub li{border-bottom:1px solid var(--c-line)}
.p-drawer__sub a{
display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 12px 7px 25px;
font-family:var(--f-jp-head);font-weight:500;font-size:17px;line-height:1.45;letter-spacing:.02em;
color:var(--c-pink);word-break:keep-all;
}
.p-drawer__sub a::before{content:"−";flex:none;line-height:1.45}
/* ドロワー下部の予約CTA（.p-cta を流用） */
.p-cta--drawer{position:relative;overflow:hidden;height:394px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:var(--c-pink-bg2);
}
.p-cta--drawer .c-head__jp{margin-top:12px;font-size:25px}
}
/* ==================================================================
29. 診療メニュー下層ページ（/caries/ ほか）
================================================================== */
.l-lower{display:block}
.l-lower__head{margin-bottom:46px}
.l-lower__head .c-head__jp{margin-top:12px;font-size:40px;line-height:1.5}
/* ---------- パンくず ---------- */
.p-breadcrumb{padding:18px 0;background:var(--c-white)}
.p-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em}
.p-breadcrumb li{display:flex;align-items:center;gap:8px;color:#8d8286}
.p-breadcrumb li + li::before{
content:"";width:6px;height:10px;background:currentColor;flex:none;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
.p-breadcrumb a{color:var(--c-pink)}
/* ---------- ページヘッダー ---------- */
.p-lowerhero{position:relative;height:380px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.p-lowerhero__bg{position:absolute;inset:0;display:block}
.p-lowerhero__bg img{width:100%;height:100%;object-fit:cover}
.p-lowerhero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,229,237,.28) 0%,rgba(255,237,247,.60) 100%);
}
.p-lowerhero__inner{
position:relative;z-index:1;text-align:center;
min-width:420px;padding:38px 72px 42px;
background:rgba(255,255,255,.74);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-radius:26px;
}
.p-lowerhero__en{
display:block;
font-family:var(--f-en);font-style:italic;font-weight:500;font-size:32px;line-height:1;
letter-spacing:.06em;color:var(--c-pink);
}
.p-lowerhero__title{
margin-top:14px;
font-family:var(--f-jp-head);font-weight:700;font-size:52px;line-height:1.3;letter-spacing:.08em;
color:var(--c-ink);
}
/* ---------- リード文 ---------- */
.p-lead{padding:74px 0 0}
.p-lead .l-container{max-width:1000px}
.p-lead p{font-size:17px;line-height:2.1;letter-spacing:.01em}
/* ---------- 目次 ---------- */
.p-toc{padding:56px 0 0}
.p-toc .l-container{max-width:1000px}
.p-toc__box{padding:40px 48px 44px;background:#fff6f9;border-radius:24px}
.p-toc__label{
text-align:center;
font-family:var(--f-en);font-style:italic;font-weight:500;font-size:26px;line-height:1;
letter-spacing:.06em;color:var(--c-pink);
}
.p-toc__list{
margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;
}
.p-toc__list a{
display:flex;align-items:center;gap:10px;padding-bottom:12px;
border-bottom:1px dashed #eabfcd;
font-family:var(--f-jp-head);font-weight:500;font-size:17px;letter-spacing:.02em;
}
.p-toc__list a::before{
content:"";flex:none;width:7px;height:12px;background:var(--c-pink);
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
rotate:90deg;
}
/* ---------- セクション共通 ---------- */
.l-lower__sec{padding:96px 0}
.l-lower__sec.is-alt{background:#fdf8fa}
.l-lower__sec--faq{background:var(--c-olive-bg)}
.l-lower__link{margin-top:32px}
.l-lower__link .c-btn{min-width:0;width:auto;padding:0 44px;height:66px;font-size:18px}
.p-prose{max-width:1000px;margin-inline:auto}
.p-prose p{font-size:17px;line-height:2.1;letter-spacing:.01em}
/* ---------- 画像 ---------- */
.p-figure{margin:0 0 48px;border-radius:20px;overflow:hidden}
.p-figure img{display:block;width:100%}
.p-figure--wide img{aspect-ratio:2400/1000;object-fit:cover}
/* ---------- 特徴リスト ---------- */
.p-featurelist{display:flex;flex-direction:column;gap:20px}
.p-featurelist li{
display:flex;align-items:flex-start;gap:28px;
padding:32px 40px;background:var(--c-white);
border:1px solid #f2e3e8;border-radius:18px;
}
.p-featurelist__num{
flex:none;width:58px;height:58px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--c-pink);color:var(--c-white);
font-family:var(--f-en);font-style:italic;font-size:24px;letter-spacing:.04em;
}
.p-featurelist__title{
font-family:var(--f-jp-head);font-weight:700;font-size:24px;line-height:1.5;letter-spacing:.02em;
color:var(--c-pink);
}
.p-featurelist__body{margin-top:12px;font-size:16px;line-height:2;letter-spacing:.01em}
/* ---------- チェックリスト ---------- */
.p-checklist{max-width:1000px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}
.p-checklist li{
position:relative;display:flex;align-items:center;min-height:72px;
padding:16px 24px 16px 66px;background:var(--c-white);
border:1px solid #f2e3e8;border-radius:14px;
font-family:var(--f-jp-head);font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.02em;
}
.p-checklist li::before{
content:"";position:absolute;left:24px;top:50%;width:24px;height:24px;margin-top:-12px;
border:2px solid var(--c-pink);border-radius:6px;
}
.p-checklist li::after{
content:"";position:absolute;left:32px;top:50%;width:7px;height:13px;margin-top:-10px;
border-right:2.5px solid var(--c-pink);border-bottom:2.5px solid var(--c-pink);transform:rotate(45deg);
}
.p-checklist__after{margin-top:40px}
/* ---------- おすすめ製品（効果バッジ＋製品カード＋外部バナー） ---------- */
.p-promo{--mint:#6dbcb0;--mint-dk:#3d7f75;--mint-bg:#eaf7f4;--mint-ln:#cfeae4;max-width:1000px;margin-inline:auto}
.p-promo__catch{
max-width:640px;margin-inline:auto;padding:16px 24px;background:var(--c-white);border-radius:999px;
box-shadow:0 6px 22px rgba(80,150,140,.12);text-align:center;
font-family:var(--f-jp-head);font-weight:700;font-size:21px;letter-spacing:.06em;color:var(--mint-dk);
}
.p-promo__points{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.p-promo__points li{
aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:18px;border-radius:50%;
background:radial-gradient(circle at 32% 26%,#f7fcfb 0,#e3f4f0 58%,#cde9e2 100%);
border:6px solid var(--c-white);box-shadow:0 10px 26px rgba(80,150,140,.16);
text-align:center;font-family:var(--f-jp-head);font-weight:700;font-size:16px;line-height:1.55;letter-spacing:.02em;color:var(--mint-dk);
}
.p-promo__points b{display:block;margin:2px 0;font-size:31px;line-height:1.2;letter-spacing:0;color:var(--c-pink)}
.p-promo__src{margin-top:18px;font-size:13px;line-height:1.8;color:#8a7d81;text-align:center}
.p-promo__card{
position:relative;margin-top:64px;display:grid;grid-template-columns:400px 1fr;gap:44px;align-items:start;
padding:52px 48px 44px;background:var(--c-white);border:2px solid var(--mint-ln);border-radius:24px;
}
.p-promo__ribbon{
position:absolute;top:-19px;left:50%;transform:translateX(-50%);padding:8px 32px;border-radius:999px;
background:var(--mint);color:var(--c-white);white-space:nowrap;
font-family:var(--f-jp-head);font-weight:700;font-size:17px;letter-spacing:.1em;
}
.p-promo__fig{position:relative;margin:0}
.p-promo__fig img{display:block;width:100%;border-radius:16px}
.p-promo__fig figcaption{margin-top:8px;font-size:12px;color:#9b8f93;text-align:right}
.p-promo__badge{
position:absolute;top:-16px;left:-16px;width:92px;height:92px;border-radius:50%;
display:flex;align-items:center;justify-content:center;text-align:center;
background:radial-gradient(circle at 35% 30%,#fff3c8 0,#f5d77a 70%,#e9c35a 100%);
box-shadow:0 0 0 4px var(--c-white),0 6px 16px rgba(170,130,40,.25);
font-family:var(--f-jp-head);font-weight:700;font-size:13px;line-height:1.35;color:#7a5a12;transform:rotate(-8deg);
}
.p-promo__maker{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--mint)}
.p-promo__name{margin-top:4px;font-family:var(--f-jp-head);font-weight:700;font-size:28px;line-height:1.4;letter-spacing:.02em;color:var(--mint-dk)}
.p-promo__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.p-promo__tags li{padding:4px 14px;border-radius:999px;background:var(--mint-bg);font-size:14px;font-weight:500;color:var(--mint-dk)}
.p-promo__body > p:not(.p-promo__maker){margin-top:14px;font-size:16px;line-height:2;letter-spacing:.01em}
.p-promo__banner{
margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 36px;
background:linear-gradient(90deg,#f5fcfa 0,#e2f3ef 100%);border:2px solid #a9d9cf;border-radius:18px;color:var(--c-ink);
transition:transform .3s ease,box-shadow .3s ease;
}
.p-promo__banner:hover{opacity:1;transform:translateY(-3px);box-shadow:0 12px 28px rgba(80,150,140,.18)}
.p-promo__banner-text{font-family:var(--f-jp-head);font-weight:700;font-size:20px;line-height:1.6;letter-spacing:.04em}
.p-promo__banner-text small{display:block;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--mint)}
.p-promo__banner-go{
flex:none;display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;
background:var(--mint);color:var(--c-white);font-family:var(--f-jp-head);font-weight:700;font-size:16px;letter-spacing:.06em;
}
.p-promo__banner-go::after{
content:"";width:7px;height:12px;background:currentColor;
-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat;
}
/* ---------- 本文＋画像 ---------- */
.p-textimage{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:start}
.p-textimage.is-left{grid-template-columns:440px 1fr}
.p-textimage.is-left .p-textimage__body{order:2}
.p-textimage.is-left .p-textimage__fig{order:1}
.p-textimage__body p{font-size:17px;line-height:2.1;letter-spacing:.01em}
.p-textimage__fig{margin:0;border-radius:20px;overflow:hidden}
.p-textimage__fig img{display:block;width:100%}
.p-textimage__fig.is-contain{border-radius:0;background:transparent}
/* ---------- 横長図 ---------- */
.p-widefig{
margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
background:var(--c-white);border:1px solid #f0e6ea;border-radius:16px;
}
.p-widefig img{display:block;width:100%;min-width:900px}
.p-widefig__note{display:none;margin-bottom:34px;font-size:12px;color:#9b8f93;text-align:right}
.l-lower__sec--wide-image .p-prose{margin-top:40px}
/* ---------- 注記カード ---------- */
.p-note{
max-width:1000px;margin-inline:auto;padding:44px 52px;
background:var(--c-white);border:1px solid #f2e3e8;border-radius:20px;
}
.l-lower__sec.is-alt .p-note{background:var(--c-white)}
.p-note p{font-size:17px;line-height:2.1;letter-spacing:.01em}
/* ---------- FAQ ---------- */
.p-faq{max-width:1000px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.p-faq__item{background:var(--c-white);border-radius:16px;overflow:hidden}
.p-faq__q{
display:flex;align-items:center;gap:18px;width:100%;padding:26px 68px 26px 30px;
position:relative;text-align:left;
font-family:var(--f-jp-head);font-weight:700;font-size:19px;line-height:1.6;letter-spacing:.02em;
color:var(--c-ink);
}
.p-faq__q::before{
content:"Q";flex:none;width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--c-pink);color:var(--c-white);
font-family:var(--f-en);font-style:italic;font-size:20px;
}
.p-faq__q::after{
content:"";position:absolute;right:28px;top:50%;translate:0 -50%;
width:14px;height:14px;
background:
linear-gradient(var(--c-pink),var(--c-pink)) center/14px 2px no-repeat,
linear-gradient(var(--c-pink),var(--c-pink)) center/2px 14px no-repeat;
transition:transform .25s ease;
}
.p-faq__q[aria-expanded="true"]::after{transform:rotate(90deg);background-size:14px 2px,0 0}
.p-faq__a{padding:0 30px 30px 86px}
.p-faq__a p{
position:relative;padding:22px 24px;background:#fdf6f8;border-radius:12px;
font-size:16px;line-height:2;letter-spacing:.01em;
}
/* ---------- 関連メニュー ---------- */
.p-related{padding:96px 0 110px;background:var(--c-pink-bg)}
.p-related .c-head__jp{font-size:36px}
.p-related .p-medical__grid{margin-top:0}
/* ==================================================================
30. 下層ページ SP（〜767px）
================================================================== */
@media (max-width:1023px){
.p-textimage,.p-textimage.is-left{grid-template-columns:1fr;gap:32px}
.p-textimage.is-left .p-textimage__body{order:1}
.p-textimage.is-left .p-textimage__fig{order:2}
.p-textimage__fig{max-width:520px;margin-inline:auto}
}
@media (max-width:1023px){
.l-lower__head{margin-bottom:28px}
.l-lower__head .c-head__jp{margin-top:10px;font-size:25px}
.p-breadcrumb{padding:12px 0}
.p-breadcrumb ol{gap:6px;font-size:11px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
.p-breadcrumb li{gap:6px}
.p-lowerhero{height:210px}
.p-lowerhero__inner{min-width:0;padding:20px 28px 22px;border-radius:16px}
.p-lowerhero__en{font-size:20px}
.p-lowerhero__title{margin-top:10px;font-size:30px}
.p-lead{padding:40px 0 0}
.p-lead p{font-size:15px;line-height:1.95}
.p-toc{padding:32px 0 0}
.p-toc__box{padding:26px 20px 28px;border-radius:16px}
.p-toc__label{font-size:20px}
.p-toc__list{margin-top:18px;grid-template-columns:1fr;gap:0}
.p-toc__list a{padding:12px 0;font-size:15px}
.l-lower__sec{padding:52px 0}
.l-lower__link{margin-top:24px}
.l-lower__link .c-btn{width:100%;padding:0 20px;height:62px;font-size:15px;text-align:center}
.p-prose p{font-size:15px;line-height:1.95}
.p-figure{margin-bottom:28px;border-radius:12px}
.p-figure--wide img{aspect-ratio:750/500}
.p-featurelist{gap:14px}
.p-featurelist li{gap:14px;padding:22px 18px;border-radius:14px}
.p-featurelist__num{width:42px;height:42px;font-size:18px}
.p-featurelist__title{font-size:18px}
.p-featurelist__body{margin-top:8px;font-size:14px;line-height:1.95}
.p-checklist{grid-template-columns:1fr;gap:10px}
.p-checklist li{min-height:0;padding:14px 16px 14px 50px;border-radius:12px;font-size:15px}
.p-checklist li::before{left:16px;width:20px;height:20px;margin-top:-10px;border-radius:5px}
.p-checklist li::after{left:23px;width:6px;height:11px;margin-top:-8px}
.p-checklist__after{margin-top:24px}
.p-promo__catch{padding:12px 14px;font-size:14px;letter-spacing:.02em}
.p-promo__points{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.p-promo__points li{padding:10px;border-width:4px;font-size:13px}
.p-promo__points b{font-size:22px}
.p-promo__src{font-size:11px;text-align:left}
.p-promo__card{margin-top:44px;grid-template-columns:1fr;gap:24px;padding:40px 18px 26px;border-radius:16px}
.p-promo__ribbon{top:-16px;padding:6px 22px;font-size:14px}
.p-promo__fig{max-width:300px;margin-inline:auto}
.p-promo__badge{top:-10px;left:-10px;width:70px;height:70px;font-size:11px}
.p-promo__name{font-size:22px}
.p-promo__tags li{font-size:12px}
.p-promo__body > p:not(.p-promo__maker){font-size:14px;line-height:1.95}
.p-promo__banner{margin-top:28px;flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px;text-align:center}
.p-promo__banner-text{font-size:15px;letter-spacing:.02em}
.p-promo__banner-go{justify-content:center}
.p-textimage__body p{font-size:15px;line-height:1.95}
.p-textimage__fig{border-radius:12px}
.p-widefig{border-radius:10px}
.p-widefig img{min-width:760px}
.p-widefig__note{display:block;margin-bottom:22px}
.l-lower__sec--wide-image .p-prose{margin-top:24px}
.p-note{padding:24px 20px;border-radius:14px}
.p-note p{font-size:15px;line-height:1.95}
.p-faq{gap:10px}
.p-faq__q{gap:12px;padding:18px 46px 18px 16px;font-size:16px}
.p-faq__q::before{width:30px;height:30px;font-size:16px}
.p-faq__q::after{right:18px;width:12px;height:12px;background-size:12px 2px,2px 12px}
.p-faq__q[aria-expanded="true"]::after{background-size:12px 2px,0 0}
.p-faq__a{padding:0 16px 20px 58px}
.p-faq__a p{padding:16px 16px;font-size:14px;line-height:1.9}
.p-related{padding:52px 0 60px}
.p-related .c-head__jp{font-size:22px}
}
/* --------------------------------------------------
31. 下層ページの表・診療メニュー一覧
-------------------------------------------------- */
.p-prose--intro{margin-bottom:32px}
/* 定義表（医院概要・料金表など） */
.p-table__wrap{overflow-x:auto}
.p-table{
width:100%;border-collapse:separate;border-spacing:0;
background:var(--c-white);border-radius:16px;overflow:hidden;
box-shadow:0 2px 20px rgba(190,150,165,.10);
font-size:17px;line-height:1.8;
}
.p-table thead th{
padding:16px 24px;text-align:left;
background:var(--c-pink);color:var(--c-white);
font-family:var(--f-jp-head);font-weight:500;font-size:16px;letter-spacing:.04em;
}
.p-table tbody th,
.p-table tbody td{padding:18px 24px;border-top:1px solid var(--c-line);vertical-align:top}
.p-table tbody tr:first-child th,
.p-table tbody tr:first-child td{border-top:0}
.p-table tbody th{
width:34%;text-align:left;background:#fdf6f8;
font-family:var(--f-jp-head);font-weight:500;color:var(--c-ink);
}
.p-table--wide tbody th{width:26%}
.p-table__note{margin-top:14px;font-size:14px;line-height:1.8;color:#7d7176}
/* 診療案内: カテゴリごとのカード一覧 */
.p-menugroup+.p-menugroup{margin-top:56px}
.p-menugroup__title{
padding-left:16px;border-left:5px solid var(--c-pink);
font-family:var(--f-jp-head);font-weight:700;font-size:24px;line-height:1.4;letter-spacing:.02em;
}
.p-menugroup__list{margin-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.p-menucard{
display:grid;grid-template-columns:66px 1fr;grid-template-areas:"icon body" "more more";
gap:0 18px;height:100%;padding:24px 26px 22px;
background:var(--c-white);border-radius:16px;
box-shadow:0 2px 20px rgba(190,150,165,.10);
}
.p-menucard:hover{opacity:1;box-shadow:0 4px 26px rgba(190,150,165,.22)}
.p-menucard__icon{grid-area:icon;display:flex;align-items:flex-start;justify-content:center}
.p-menucard__icon img{width:46px;height:46px}
.p-menucard__body{grid-area:body;display:block}
.p-menucard__title{
display:block;font-family:var(--f-jp-head);font-weight:700;font-size:20px;line-height:1.4;
color:var(--c-pink);
}
.p-menucard__text{display:block;margin-top:10px;font-size:15px;line-height:1.85}
.p-menucard__more{
grid-area:more;justify-self:end;margin-top:16px;padding-right:22px;position:relative;
font-family:var(--f-jp-head);font-weight:500;font-size:15px;color:var(--c-olive);
}
.p-menucard__more::after{
content:"";position:absolute;right:0;top:50%;width:7px;height:11px;margin-top:-5px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;
mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
/* 下層ページに置いた TOP の医院基本情報ブロック
内側の .p-clinic__inner も .l-container なので、直下のものだけを対象にする
（子孫まで効かせると .p-clinic__map のSPの負マージンが画面からはみ出す） */
.l-lower__sec--clinic-info .p-clinic{padding:0}
.l-lower__sec--clinic-info > .l-container{padding-inline:0}
@media (max-width:1023px){
.p-prose--intro{margin-bottom:22px}
.p-table{font-size:14px;line-height:1.75;border-radius:12px}
.p-table thead th{padding:10px 14px;font-size:13px}
.p-table tbody th,
.p-table tbody td{padding:12px 14px}
/* 2列の表はSPで縦積みにする（横スクロールを避けるため） */
.p-table:not(.p-table--wide),
.p-table:not(.p-table--wide) tbody,
.p-table:not(.p-table--wide) tbody tr,
.p-table:not(.p-table--wide) tbody th,
.p-table:not(.p-table--wide) tbody td{display:block;width:auto}
.p-table:not(.p-table--wide) thead{display:none}
.p-table:not(.p-table--wide) tbody th{border-top:1px solid var(--c-line);padding-bottom:6px}
.p-table:not(.p-table--wide) tbody td{border-top:0;padding-top:0}
.p-table:not(.p-table--wide) tbody tr:first-child th{border-top:0}
/* 3列以上は横スクロール */
.p-table--wide{min-width:560px}
.p-table__note{margin-top:10px;font-size:12px}
.p-menugroup+.p-menugroup{margin-top:36px}
.p-menugroup__title{padding-left:11px;border-left-width:4px;font-size:18px}
.p-menugroup__list{margin-top:16px;grid-template-columns:1fr;gap:12px}
.p-menucard{grid-template-columns:44px 1fr;gap:0 12px;padding:16px 16px 14px;border-radius:12px}
.p-menucard__icon img{width:34px;height:34px}
.p-menucard__title{font-size:16px}
.p-menucard__text{margin-top:7px;font-size:13px;line-height:1.75}
.p-menucard__more{margin-top:10px;padding-right:16px;font-size:13px}
}
/* 記事が無いときの一行表示 */
.p-nb__empty{padding:18px 0;font-size:15px;color:#7d7176}
/* --------------------------------------------------
32. お知らせ・ブログ一覧
-------------------------------------------------- */
.l-lower__sec--archive{padding:70px 0 100px}
.p-archive{display:flex;flex-direction:column;gap:22px}
.p-archive__link{
display:grid;grid-template-columns:260px 1fr;gap:0 32px;align-items:start;
padding:24px;background:var(--c-white);border-radius:16px;
box-shadow:0 2px 20px rgba(190,150,165,.10);
}
.p-archive__link:hover{opacity:1;box-shadow:0 4px 26px rgba(190,150,165,.22)}
.p-archive__thumb{display:block;border-radius:10px;overflow:hidden;background:#f6eef1;aspect-ratio:4/3}
.p-archive__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.p-archive__body{display:block}
.p-archive__date{display:block;font-family:var(--f-jp-head);font-size:14px;color:var(--c-olive);letter-spacing:.04em}
.p-archive__title{
display:block;margin-top:8px;
font-family:var(--f-jp-head);font-weight:700;font-size:21px;line-height:1.5;color:var(--c-ink);
}
.p-archive__excerpt{display:block;margin-top:12px;font-size:15px;line-height:1.9;color:#5d5257}
.p-pager{margin-top:48px}
.p-pager ul{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.p-pager a,.p-pager .current{
display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
border-radius:8px;background:var(--c-white);border:1px solid var(--c-line);
font-family:var(--f-jp-head);font-size:15px;
}
.p-pager .current{background:var(--c-pink);border-color:var(--c-pink);color:var(--c-white)}
@media (max-width:1023px){
.l-lower__sec--archive{padding:40px 0 60px}
.p-archive{gap:12px}
.p-archive__link{grid-template-columns:110px 1fr;gap:0 14px;padding:14px;border-radius:12px}
.p-archive__date{font-size:12px}
.p-archive__title{margin-top:5px;font-size:16px;line-height:1.45}
.p-archive__excerpt{margin-top:8px;font-size:13px;line-height:1.75}
.p-pager{margin-top:28px}
.p-pager a,.p-pager .current{min-width:40px;height:40px;font-size:14px}
}
/* フッター最下部の補助リンク（お問い合わせ／プライバシーポリシー） */
.p-footer__sub{margin-top:26px}
.p-footer__sub ul{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px}
.p-footer__sub a{font-size:14px;letter-spacing:.03em;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){
.p-footer__sub{margin-top:20px}
.p-footer__sub ul{gap:8px 18px}
.p-footer__sub a{font-size:13px}
}
/* ==================================================================
33. 動き（スクロール出現・ホバー）
・初期状態を隠すのは .js-anim が付いているときだけ（JSが無効でも読める）
・動かすのは transform と opacity のみ
・「視差効果を減らす」設定では JS 側で .js-anim を付けないため何も動かない
================================================================== */
/* ---------- スクロールで現れる ---------- */
.js-anim [data-reveal]{
opacity:0;
transform:translateY(26px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
transform .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
will-change:opacity,transform;
}
.js-anim [data-reveal].is-in{opacity:1;transform:none;will-change:auto}
/* 写真まわりは少しだけ縮んだ状態から */
.js-anim .p-info__photo[data-reveal],
.js-anim .p-greeting__fig[data-reveal],
.js-anim .p-youtube__figs[data-reveal],
.js-anim .p-clinic__map[data-reveal],
.js-anim .p-price__card[data-reveal],
.js-anim .p-figure[data-reveal],
.js-anim .p-textimage__fig[data-reveal]{transform:translateY(26px) scale(.965)}
.js-anim .p-info__photo[data-reveal].is-in,
.js-anim .p-greeting__fig[data-reveal].is-in,
.js-anim .p-youtube__figs[data-reveal].is-in,
.js-anim .p-clinic__map[data-reveal].is-in,
.js-anim .p-price__card[data-reveal].is-in,
.js-anim .p-figure[data-reveal].is-in,
.js-anim .p-textimage__fig[data-reveal].is-in{transform:none}
/* 見出しは英字スクリプトを先に、日本語を少し後に */
.js-anim .c-head[data-reveal] .c-head__en{
opacity:0;transform:translateY(10px);
transition:opacity .6s ease .05s,transform .6s ease .05s;
}
.js-anim .c-head[data-reveal] .c-head__jp{
opacity:0;transform:translateY(14px);
transition:opacity .6s ease .18s,transform .6s ease .18s;
}
.js-anim .c-head[data-reveal].is-in .c-head__en,
.js-anim .c-head[data-reveal].is-in .c-head__jp{opacity:1;transform:none}
/* ---------- ヒーロー：読み込み直後に順番に出す ---------- */
.js-anim .p-hero__title,
.js-anim .p-hero__lead,
.js-anim .p-hero__badge{
opacity:0;transform:translateY(22px);
transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
.js-anim .p-hero__lead{transition-delay:.18s}
.js-anim .p-hero__badge{transform:translateY(22px) scale(.9)}
.js-anim .p-hero__badge:nth-child(1){transition-delay:.42s}
.js-anim .p-hero__badge:nth-child(2){transition-delay:.54s}
.js-anim .p-hero__badge:nth-child(3){transition-delay:.66s}
.js-anim .p-hero.is-ready .p-hero__title,
.js-anim .p-hero.is-ready .p-hero__lead,
.js-anim .p-hero.is-ready .p-hero__badge{opacity:1;transform:none}
/* 背景写真をゆっくり寄せる（1回だけ） */
.js-anim .p-hero__bg img,
.js-anim .p-hero__bg-right img{
transform:scale(1.045);
transition:transform 9s cubic-bezier(.16,.6,.3,1);
}
.js-anim .p-hero.is-ready .p-hero__bg img,
.js-anim .p-hero.is-ready .p-hero__bg-right img{transform:scale(1)}
/* バッジは出たあとゆっくり上下する */
.js-anim .p-hero.is-ready .p-hero__badge{animation:nkm-float 5.5s ease-in-out 1.6s infinite}
.js-anim .p-hero.is-ready .p-hero__badge:nth-child(2){animation-delay:2.1s}
.js-anim .p-hero.is-ready .p-hero__badge:nth-child(3){animation-delay:2.6s}
@keyframes nkm-float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
/* ---------- ボタン：塗りが左から入る＋矢印が進む ---------- */
.c-btn,.p-medical__more .c-btn,.p-cta__btn{
position:relative;overflow:hidden;isolation:isolate;
transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.c-btn::before,.p-cta__btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:rgba(255,255,255,.3);
transform:scaleX(0);transform-origin:left center;
transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.c-btn:hover::before,.p-cta__btn:hover::before,
.c-btn:focus-visible::before,.p-cta__btn:focus-visible::before{transform:scaleX(1)}
a.c-btn:hover,a.p-cta__btn:hover{opacity:1}
.c-btn:hover,.p-cta__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(150,120,130,.26)}
.c-btn:active,.p-cta__btn:active{transform:translateY(0);transition-duration:.08s}
.c-btn::after{transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.c-btn:hover::after{transform:translateX(4px)}
/* ---------- 診療メニューのカード ---------- */
.p-medical__item{
transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease,background-color .32s ease;
}
.p-medical__item:hover{
opacity:1;transform:translateY(-5px);
box-shadow:0 10px 26px rgba(190,150,165,.28);
}
.p-medical__item img{transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.p-medical__item:hover img{transform:scale(1.12)}
.p-medical__item::after{transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.p-medical__item:hover::after{transform:translateX(4px)}
/* ---------- 写真を含むカードは画像だけ寄る ---------- */
.p-reason__fig,.p-pickup__fig,.p-case__card,.p-equip__item > img,
.p-banner img,.p-nb__thumb,.p-lecture img,.p-menucard,.p-archive__thumb{overflow:hidden}
.p-reason__fig img,.p-pickup__fig img,.p-banner img,
.p-nb__thumb img,.p-lecture img,.p-archive__thumb img,.p-equip__item > img{
transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.p-reason__item:hover .p-reason__fig img,
.p-pickup__item:hover .p-pickup__fig img,
.p-banner:hover img,
.p-nb__post:hover .p-nb__thumb img,
.p-lecture a:hover img,
.p-archive__link:hover .p-archive__thumb img,
.p-equip__item:hover > img{transform:scale(1.06)}
.p-banner{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease}
.p-banner:hover{opacity:1;transform:translateY(-4px);box-shadow:0 14px 34px rgba(150,120,130,.24)}
.p-nb__post{transition:transform .3s ease}
.p-nb__post:hover{opacity:1;transform:translateX(3px)}
.p-nb__post .p-nb__ttl{transition:color .3s ease}
.p-nb__post:hover .p-nb__ttl{color:var(--c-pink)}
/* ---------- お悩みリスト：チェックが弾む ---------- */
.p-concerns__item{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.p-concerns__item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(190,150,165,.20)}
.p-concerns__item::before{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.p-concerns__item:hover::before{transform:scale(1.15)}
/* ---------- ヘッダーのナビ：下線が伸びる ---------- */
.p-header__nav > ul > li > a{position:relative}
.p-header__nav > ul > li > a::after{
content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;
background:var(--c-pink);
transform:scaleX(0);transform-origin:right center;
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.p-header__nav > ul > li:hover > a::after,
.p-header__nav > ul > li:focus-within > a::after{transform:scaleX(1);transform-origin:left center}
.p-header__nav > ul > li > a:hover{opacity:1}
/* メガメニューの項目は順に立ち上がる */
.p-mega__list li{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.p-header__nav li.has-mega:hover .p-mega__list li,
.p-header__nav li.has-mega:focus-within .p-mega__list li{opacity:1;transform:none}
.p-mega__list li:nth-child(n+1){transition-delay:.06s}
.p-mega__list li:nth-child(n+7){transition-delay:.1s}
.p-mega__list li:nth-child(n+13){transition-delay:.14s}
.p-mega__list li:nth-child(n+19){transition-delay:.18s}
.p-mega__list a{transition:opacity .25s ease,transform .25s ease}
.p-mega__list a:hover{opacity:1;transform:translateX(3px)}
/* ---------- フッター・診療案内リンク ---------- */
.p-footer__nav a,.p-footer__medical a,.p-footer__sub a{transition:opacity .25s ease,transform .25s ease}
.p-footer__nav a:hover,.p-footer__medical a:hover{opacity:1;transform:translateX(4px)}
.p-footer__nav a::before,.p-footer__medical a::before{transition:width .25s ease}
.p-footer__nav a:hover::before{width:20px}
/* ---------- 症例・設備・ピックアップのカード ---------- */
.p-pickup__item,.p-case__item,.p-equip__item,.p-menucard,.p-archive__link{
transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease;
}
.p-pickup__item:hover,.p-case__item:hover,.p-equip__item:hover{transform:translateY(-4px)}
/* ---------- 電話・WEB予約（追従／CTA）は押しやすさ重視 ---------- */
.p-fixcta__btn,.p-header__cta a{transition:filter .25s ease,transform .25s ease}
.p-fixcta__btn:hover,.p-header__cta a:hover{opacity:1;filter:brightness(1.07)}
.p-fixcta__btn:active{transform:scale(.98)}
/* ---------- FAQ の開閉をなめらかに ---------- */
.p-faq__q{transition:background-color .25s ease}
.p-faq__q:hover{background:rgba(233,110,149,.06)}
/* ---------- 上へ戻る ---------- */
.c-totop{
position:fixed;right:24px;bottom:28px;z-index:80;
width:52px;height:52px;border-radius:50%;
background:var(--c-white);border:1px solid var(--c-line);
box-shadow:0 6px 20px rgba(150,120,130,.22);
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transform:translateY(12px);
transition:opacity .3s ease,transform .3s ease,visibility .3s,box-shadow .3s ease;
}
.c-totop.is-in{opacity:1;visibility:visible;transform:none}
.c-totop:hover{box-shadow:0 10px 26px rgba(150,120,130,.34);transform:translateY(-3px)}
.c-totop span{
width:11px;height:11px;margin-top:3px;
border-top:2px solid var(--c-pink);border-right:2px solid var(--c-pink);
transform:rotate(-45deg);
transition:transform .3s ease;
}
.c-totop:hover span{transform:rotate(-45deg) translate(2px,-2px)}
/* ---------- キーボード操作時のフォーカス表示 ---------- */
a:focus-visible,button:focus-visible{
outline:3px solid rgba(233,110,149,.65);
outline-offset:3px;border-radius:4px;
}
@media (max-width:1023px){
/* SPは固定CTAバーの上に出す */
.c-totop{right:12px;bottom:62px;width:44px;height:44px}
.c-totop span{width:9px;height:9px}
/* 指では hover が張り付くので、移動量を伴う演出は切る */
.p-medical__item:hover,.p-banner:hover,.p-pickup__item:hover,
.p-case__item:hover,.p-equip__item:hover,.p-concerns__item:hover{transform:none;box-shadow:none}
.js-anim [data-reveal]{transform:translateY(18px);transition-duration:.55s}
}
/* OSで「視差効果を減らす」を選んでいる場合の保険（JS側でも止めている） */
@media (prefers-reduced-motion: reduce){
.js-anim [data-reveal],
.js-anim [data-reveal].is-in{opacity:1;transform:none;transition:none}
.js-anim .p-hero__title,.js-anim .p-hero__lead,.js-anim .p-hero__badge{opacity:1;transform:none;animation:none}
.js-anim .p-hero__bg img,.js-anim .p-hero__bg-right img{transform:none;transition:none}
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
/* 遷移先が未定のカード・ボタン（span で出している）はカーソルを変えない */
.p-case__card[aria-disabled],
.p-banner[aria-disabled],
.p-mama__card[aria-disabled],
.c-btn[aria-disabled]{cursor:default}
.p-case__card[aria-disabled]:hover,
.p-banner[aria-disabled]:hover{transform:none;box-shadow:none}
.c-btn[aria-disabled]:hover{transform:none;box-shadow:none}
.c-btn[aria-disabled]:hover::before{transform:scaleX(0)}
/* アイキャッチが無い記事は本文を全幅で使う */
.p-archive__link.is-noimage{grid-template-columns:1fr}
/* アイキャッチが無い記事のサムネ枠は、灰色のままだと未完成に見えるのでロゴを薄く置く */
.p-nb__thumb:not(:has(img)){
background:var(--c-pink-lt) url("../img/logo-mark.png") center/38px no-repeat;
opacity:.55;
}
@media (max-width:1023px){
.p-nb__thumb:not(:has(img)){background-size:24px}
}
/* --------------------------------------------------
34. タブレット（768〜1023px）
SPレイアウトをそのまま使うが、1カラムが横に伸びきると
間延びするので、本文の幅を抑えて中央に置く。
写真や背景の全幅表示はそのまま。
-------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
.l-container,
.l-container--narrow,
.l-container--news{max-width:660px;margin-inline:auto}
.p-info__list{margin-inline:auto;max-width:636px}
.p-hero__inner{max-width:660px;margin-inline:auto}
.p-footer__inner{max-width:660px;margin-inline:auto}
/* 追従CTAのボタンは横いっぱいだと押しづらいので中央に寄せる */
.p-fixcta{justify-content:center}
.p-fixcta__btn{max-width:330px}
}