/* ============================================================ 1. デザイントークン ============================================================ */ :root{ /* FV雲形マスク。webkit版と標準版で同じ画像を2回書かないよう変数化 */ --cloud-mask:url("data:image/png;base64,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"); --blue:#2378cf; /* メインブルー */ --blue-d:#155a9e; /* 濃いめ */ --sky:#5aabe8; /* 明るいスカイ */ --pale:#eaf4fc; /* 淡い水色 */ --pale-2:#f6fafd; /* さらに淡く */ --ink:#26333d; /* 本文 */ --ink-2:#47586a; /* サブ本文 */ --hair:#dbe8f2; /* 罫線 */ --orange:#1a96a5; /* 差し色（青になじむ落ち着いたアクア） */ --line-g:#1a96a5; /* LINEボタン（アクアに統一） */ --aqua:#1A96A5; --aqua-d:#15818e; --aqua-pale:#e7f5f7; --r:20px; --sh-1:0 4px 14px rgba(35,120,207,.08); --sh-2:0 16px 40px rgba(35,120,207,.14); --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",sans-serif; --kaku:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; --en:"Jost","Zen Kaku Gothic New",sans-serif; --maxw:1320px; /* ========================================================= ★POINT写真の背景ズレの大きさを変えるのはココ ========================================================= */ --shift-x:8px; --shift-y:8px; /* ========================================================= ★POINT写真の背景色を変えるのはココ 奇数（01・03・05）＝ --pt-a ／ 偶数（02・04・06）＝ --pt-b ========================================================= */ --pt-a:linear-gradient(135deg,#8ec6ef 0%,#5aabe8 60%,#4a9adc 100%); --pt-b:linear-gradient(135deg,#7fd0d8 0%,#37a9b5 60%,#1a96a5 100%); /* ========================================================= ★POINT写真の背面の四角の濃さはココ 数値を小さくするほど薄く（0.3=かなり薄い／0.42=今／0.7=濃いめ） ========================================================= */ --pt-alpha:.42; /* ========================================================= ★写真の上の数字（01〜06）の色を調整するのはココ ========================================================= */ --num-blue-1:#93c5ec; --num-blue-2:#4b98d9; /* 01・03・05（青） */ --num-aqua-1:#95d6dc; --num-aqua-2:#48b2bd; /* 02・04・06（アクア） */ /* ※写真はCSSで加工しない方針。色・明るさはLightroom側で仕上げる（2026-08-20） */ /* ========================================================= ★スマホのFV見出しの文字サイズを変えるのはココ --fv-h1-sp = スマホ（画面幅600px以下） --fv-h1-sp-s = 小さめスマホ（400px以下） ========================================================= */ --fv-h1-sp:28px; --fv-h1-sp-s:25px; } /* ============================================================ 2. ベース・共通部品 ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--kaku);color:var(--ink);background:#fff; font-size:17px;line-height:2;letter-spacing:.03em;font-feature-settings:"palt"} a{color:var(--blue-d);text-decoration:none} img{max-width:100%;height:auto;display:block} h1,h2,h3,h4,.ph-ttl{margin:0;line-height:1.6;font-family:var(--maru);font-weight:700} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .en-l{font-family:var(--en);letter-spacing:.22em;text-transform:uppercase} /* ---- ボタン ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700; font-family:var(--maru);border-radius:999px;padding:15px 34px;font-size:15px;letter-spacing:.06em; transition:.25s;border:none;cursor:pointer;white-space:nowrap} .btn-lg{padding:18px 44px} .btn-line{background:var(--line-g);color:#fff;box-shadow:0 8px 20px rgba(26,150,165,.26)} .btn-line:hover{filter:brightness(1.05);transform:translateY(-2px)} .btn-tel{background:#fff;color:var(--blue-d);border:1.5px solid var(--blue);gap:9px; font-family:var(--en);font-size:17.5px;font-weight:600;letter-spacing:.03em} .btn-tel:hover{background:var(--pale);transform:translateY(-2px)} .btn-tel svg{width:18px;height:18px;stroke:var(--blue-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} /* ---- セクション共通 ---- */ section{padding:80px 0 60px} .sec-head{text-align:center;margin-bottom:44px} .sec-head .en{display:block;font-family:var(--en);font-size:12px;letter-spacing:.3em;color:var(--sky); font-weight:600;margin-bottom:10px;text-transform:uppercase} .sec-head h2{font-size:clamp(27px,3.4vw,39px);letter-spacing:.06em} .sec-head h2 .b{color:var(--blue)} .sec-head .dots{display:flex;gap:6px;justify-content:center;margin-top:16px} .sec-head .dots i{width:8px;height:8px;border-radius:50%;background:var(--sky);opacity:.9} .sec-head .dots i:nth-child(2){background:var(--aqua)} .sec-head .dots i:nth-child(3){background:var(--blue)} .sec-head p.lead{color:var(--ink-2);font-size:16px;max-width:780px;margin:18px auto 0} /* ---- スクロールリビール ---- */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)} .rv.in{opacity:1;transform:none} html.nojs .rv{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* ---- 写真プレースホルダ ---- */ .ph{position:relative;overflow:hidden;border-radius:var(--r);background: radial-gradient(130% 130% at 25% 15%,#c3e0f7 0%,#a3cdf0 50%,#84bbe8 100%); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; color:#fff;min-height:200px} .ph svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9} .ph .cap{font-size:12px;letter-spacing:.1em;opacity:.95;text-align:center;padding:0 14px;text-shadow:0 1px 4px rgba(21,90,158,.3)} .ph.pht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} .ph.pht img.obj-top{object-position:50% 0} .ph.pht svg,.ph.pht .cap{display:none} /* ============================================================ 3. ヘッダー／モバイルメニュー ============================================================ */ header.site{position:fixed;inset:0 0 auto 0;z-index:80;background:rgba(255,255,255,.95); backdrop-filter:blur(10px);border-bottom:1px solid rgba(219,232,242,.7)} header.site .bar{display:flex;align-items:center;gap:22px;height:78px} .brand{display:flex;align-items:center;gap:12px;line-height:1.25} .brand .mark{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .brand .mark img{width:auto;height:46px;display:block} .brand .t{display:flex;flex-direction:column;gap:2px} .brand .jp{font-family:var(--maru);font-size:19px;font-weight:700;color:var(--blue);letter-spacing:.06em} .brand .en{font-family:var(--en);font-size:8.5px;letter-spacing:.28em;color:var(--sky);font-weight:600} .gnav{margin-left:auto;display:flex;gap:22px;align-items:center} .gnav a{color:var(--ink);font-size:13.5px;font-weight:700;font-family:var(--maru);letter-spacing:.04em;padding:6px 2px;position:relative} .gnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:3px;border-radius:3px;background:var(--orange);transition:.25s} .gnav a:hover::after{left:0;right:0} .h-tel{display:flex;flex-direction:row;align-items:center;gap:9px;line-height:1.25} .h-tel svg{width:21px;height:21px;stroke:var(--blue-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .h-tel .num{font-family:var(--en);font-size:20px;font-weight:600;color:var(--blue-d);letter-spacing:.04em} .h-book{background:var(--orange);color:#fff;padding:12px 24px;font-size:13.5px;font-weight:700;font-family:var(--maru); letter-spacing:.06em;border-radius:999px;box-shadow:0 6px 16px rgba(26,150,165,.28);transition:.25s} .h-book:hover{filter:brightness(1.06);transform:translateY(-1px)} /* ---- ハンバーガーメニュー（スマホ） ---- */ .menu-btn{display:none;width:46px;height:46px;border:none;background:var(--pale);border-radius:12px;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;padding:0} .menu-btn span{display:block;width:20px;height:2.4px;border-radius:2px;background:var(--blue-d);transition:.25s} .m-nav{position:fixed;top:78px;left:0;right:0;z-index:79;background:#fff;border-bottom:1px solid var(--hair); box-shadow:0 16px 30px rgba(35,120,207,.12);padding:8px 22px 16px;transform:translateY(-130%);transition:transform .3s ease;visibility:hidden} html.menu-open .m-nav{transform:none;visibility:visible} html.menu-open .menu-btn span:nth-child(1){transform:translateY(7.4px) rotate(45deg)} html.menu-open .menu-btn span:nth-child(2){opacity:0} html.menu-open .menu-btn span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)} .m-nav a{display:block;padding:13px 6px;border-bottom:1px dashed var(--hair);font-family:var(--maru);font-weight:700;font-size:15px;color:var(--ink)} .m-nav a:last-child{border-bottom:none} .m-nav .m-tel{display:flex;align-items:center;gap:9px;color:var(--blue-d)} .m-nav .m-tel svg{width:18px;height:18px;stroke:var(--blue-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ============================================================ 4. ヒーロー（FV雲デザイン Kumo1） - 背景: 青空 / 右側: 雲マスク(下端ふんわり消え)のスライドショー - スライドショー: ゆっくりズームイン＋クロスフェード（28秒周期） - 下端: もくもく雲を重ねる / 鳥3羽 ============================================================ */ .hero{position:relative;padding:0;overflow:hidden; background:url("../img/sky-bg.webp") center/cover no-repeat} .hero .inner{position:relative;z-index:auto;display:grid;grid-template-columns:1.02fr .98fr;gap:44px; align-items:center;padding:176px 24px 118px} .hero .inner>div:first-child{position:relative;z-index:4} .hero h1{font-size:clamp(24px,3.3vw,42px);letter-spacing:.04em;line-height:1.7; display:inline-block;padding:13px 18px 15px;margin:2px 0 12px -18px} .hero h1 .b{color:var(--blue)} .hero h1 .nb{display:inline-block;white-space:nowrap} .hero .sub{color:var(--ink-2);font-size:16.5px;margin:20px 0 26px;max-width:520px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} .hero .cta-note{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700; font-family:var(--maru);color:var(--ink-2);margin:16px 0 0} .hero .cta-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-g);flex:none} /* ---- 雲マスクのスライドショー ---- */ .hero .visual{position:relative;z-index:2;display:flex;justify-content:center; filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 0 10px rgba(255,255,255,.85))} /* ※display:flex は雲写真の幅計算（シュリンク）に効いているので外さないこと */ .cloud-photo{position:relative;width:126%;max-width:none;margin-left:-10%;margin-right:-2%;margin-top:-10px;aspect-ratio:1.376;overflow:hidden; -webkit-mask-image:var(--cloud-mask); -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center; mask-image:var(--cloud-mask); mask-size:contain;mask-repeat:no-repeat;mask-position:center} .cloud-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity} .cloud-photo img.fv-pos-1{object-position:10% 80%} .cloud-photo img.fv-pos-2{object-position:30% 60%} .cloud-photo img.fv-pos-3{object-position:50% 90%} /* ※FVスライドショーは「積み上げ式フェード」。次の写真を前の写真の“上に”不透明で重ねるため、 クロスフェード中に下地（1枚目）が透ける現象が起きない。2枚目を消すのは3枚目が覆い切った後なので不自然さゼロ。 21秒サイクル＝3枚×7秒。写真を増やすときは fade-s4 を足して %を割り直すこと */ /* ※kb は「往復ズーム」。0%と100%が同じ scale(1) なのでループの継ぎ目が連続し、 拡大率が瞬間リセットされてガクつく現象が起きない。ここを片道＋リセット型に戻さないこと */ /* ※transform-origin は上端固定。中心基準だとズーム時に被写体の頭が雲マスクの上へはみ出して見切れる */ .cloud-photo img{transform-origin:50% 0%} /* ※delay -2s は必須。1枚目の可視区間は19.0s〜8.4sで、位相を合わせないと 復帰直後にズーム“アウト”してから折り返す動きになり不自然になる */ .cloud-photo img.base{animation:kb 21s linear infinite;animation-delay:-2s} .cloud-photo img.slide{opacity:0} .cloud-photo img.s2{animation:fade-s2 21s linear infinite, kb 21s linear infinite;animation-delay:0s,7s} .cloud-photo img.s3{animation:fade-s3 21s linear infinite, kb 21s linear infinite;animation-delay:0s,14s} /* 2枚目: 7.0s でフェードイン → 3枚目が覆い切った 16.8s で瞬時に消す（見えていないので違和感なし） */ @keyframes fade-s2{ 0%,33.33%{opacity:0;animation-timing-function:cubic-bezier(.3,0,.3,1)} 40%,80%{opacity:1} 80.01%,100%{opacity:0}} /* 3枚目: 14.0s でフェードイン → 19.0〜21.0s の2秒かけて“すっと”抜け、下の1枚目へ戻る */ @keyframes fade-s3{ 0%,66.67%{opacity:0;animation-timing-function:cubic-bezier(.3,0,.3,1)} 73.33%{opacity:1;animation-timing-function:linear} 90.48%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.3,1)} 100%{opacity:0}} @keyframes kb{0%{transform:scale(1)}50%{transform:scale(1.09)}100%{transform:scale(1)}} /* ---- 丸チップ（お待たせしない診療 など） ---- */ .hero .floating-chips{position:absolute;right:30px;bottom:120px;z-index:30;display:flex;justify-content:flex-end;gap:0;margin:0;pointer-events:none} .hero .floating-chips .chip{margin-left:-8px;width:110px;height:110px;border-radius:50%;padding:10px 9px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.28; font-size:14px;font-weight:700;font-family:var(--maru);color:var(--ink); background:rgba(255,255,255,.92);box-shadow:0 12px 28px rgba(35,120,207,.16);backdrop-filter:blur(8px);pointer-events:auto;white-space:normal} .hero .floating-chips .chip svg{width:18px;height:18px;flex:none;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .hero .floating-chips .chip-text{display:block} /* ============================================================ 上レイヤーの雲位置をずらす調整 ============================================================ */ .hero .clouds-btm{position:absolute;left:-3%;right:auto;bottom:-15px;width:120%;height:62%;object-fit:cover;object-position:bottom;pointer-events:none;z-index:3;transform:translateX(80px) scale(1.8); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);z-index:3;pointer-events:none} /* ============================================================ PCの鳥の位置 ============================================================ */ .hero .bird{position:absolute;pointer-events:none;z-index:3} .hero .bird.b1{width:160px;right:8%;top:120px} .hero .bird.b2{width:200px;left:45%;top:150px} .hero .bird.b3{width:150px;right:8%;bottom:24%;z-index:5} .hero .bird.b4{width:96px;right:2%;bottom:12%;z-index:5;transform:scaleX(-1)} /* ---- ヒーロー レスポンシブ ---- */ @media(max-width:1100px){ .hero h1{font-size:clamp(22px,3.0vw,34px)} } @media(max-width:980px){ .hero .inner{grid-template-columns:1fr;gap:34px;padding:132px 24px 120px} .hero .cta{width:100%;display:grid;grid-template-columns:1fr;gap:12px} .hero .cta .btn{width:100%;min-width:0;flex:none} .hero h1{margin-left:0;padding:10px 0 12px} .hero{background-size:auto 106%;background-position:center bottom} .hero .clouds-btm{height:42%;width:230%;max-width:none;left:-65%;right:auto;bottom:0px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 52%);mask-image:linear-gradient(to bottom,transparent 0,#000 52%)} .cloud-photo{width:100%;margin-left:3%;margin-right:3%;margin-top:0} .hero .floating-chips{right:24px;top:880px;bottom:auto;gap:0;width:calc(100% - 48px);justify-content:center} .hero .floating-chips .chip{margin-left:-12px;width:calc((100% - 16px) / 3);max-width:104px;height:auto;aspect-ratio:1;border-radius:50%;font-size:12px;padding:8px 5px;line-height:1.22} .hero .floating-chips .chip svg{width:16px;height:16px} .hero .bird.b1{width:82px;right:3%;top:110px} .hero .bird.b2{display:none} .hero .bird.b4{display:none} .hero .bird.b3{width:90px;bottom:32%} } @media(min-width:601px) and (max-width:980px){ .hero .inner{padding-bottom:170px} .hero .floating-chips{top:1040px} } @media(max-width:860px){ .hero h1{font-size:26px} } @media(max-width:600px){ .hero h1{font-size:var(--fv-h1-sp)} .btn-tel{width:100%} } @media(max-width:400px){ .hero h1{font-size:var(--fv-h1-sp-s)} } @media(max-width:350px){ .hero h1{font-size:22px} } /* ============================================================ 5. お知らせ ============================================================ */ .news{padding:0 0 58px;position:relative;z-index:3;margin-top:-76px} .news .box{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start; background:#fff;border-radius:var(--r);box-shadow:var(--sh-2);padding:30px 36px} .news h2{font-size:19px;display:flex;align-items:center;gap:12px; padding-right:26px;border-right:1px solid var(--hair)} .news h2 .en{font-family:var(--en);font-size:10px;letter-spacing:.26em;color:var(--sky);font-weight:600} .news ul{list-style:none;margin:0;padding:0} .news li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:10px 0;border-bottom:1px dashed var(--hair);font-size:14.5px} .news li:last-child{border-bottom:none} .news time{font-family:var(--en);color:var(--aqua-d);font-weight:600;letter-spacing:.06em;font-size:13.5px} .news a{color:var(--ink);font-weight:400} .news a:hover{color:var(--blue)} .news-more{grid-column:2;margin:8px 0 0;text-align:right;font-size:13px;font-family:var(--maru);font-weight:700} .news-more a{color:var(--blue)} /* ============================================================ 6. アクセス・診療時間 ============================================================ */ .access{background:#fff;padding-top:58px} .access .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:stretch} .access .grid > .rv:first-child{display:flex;flex-direction:column} .map-embed{flex:1;display:flex;border-radius:20px;overflow:hidden;box-shadow:var(--sh-1);background:#fff} .map-embed iframe{flex:1;width:100%;height:auto;min-height:420px;border:0;display:block} /* ---- 医院情報表 ---- */ .itable{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:#fff; border:1.5px solid #cfe0ef;border-radius:14px;overflow:hidden;box-shadow:var(--sh-1);margin-top:18px} .itable th,.itable td{text-align:left;padding:14px 16px;border-bottom:1px solid #e0ebf4;vertical-align:top} .itable tr:last-child th,.itable tr:last-child td{border-bottom:none} .itable th{width:104px;color:var(--blue-d);font-weight:700;white-space:nowrap;font-size:14px;font-family:var(--maru);background:var(--pale-2)} /* ---- 診療時間表 ---- */ .hours-scroll{margin-top:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;box-shadow:var(--sh-1)} .hours{width:100%;min-width:430px;border-collapse:collapse;font-size:14.5px} .hours th,.hours td{border:1px solid var(--hair);padding:12px 4px;text-align:center;background:#fff} .hours thead th{background:var(--blue);color:#fff;font-weight:700;border-color:var(--blue);font-family:var(--maru);font-size:14px} .hours .tm{background:var(--pale);color:var(--blue-d);font-weight:700;white-space:nowrap;font-family:var(--maru);font-size:16px;width:136px} .hours tbody td{font-family:var(--en);font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;letter-spacing:.02em} .hours tbody td.mk{font-family:var(--maru);font-size:16px;font-weight:700;color:var(--blue)} .hours tbody td.mk.tri{color:var(--orange)} .hours tbody td.mk.non{color:#c3ccd4;font-weight:600} /* ---- 診療時間の注記バッジ ---- */ .hours-notes{display:flex;gap:10px;flex-wrap:nowrap;align-items:stretch;margin-top:16px} .hours-notes p{flex:1;justify-content:center;text-align:center;margin:0;font-size:15px;font-weight:700;color:var(--ink); border-radius:12px;padding:11px 10px;display:flex;align-items:center;font-family:var(--maru)} .hours-notes .tri-note{background:var(--aqua-pale)} .hours-notes .tri-note .tri{color:var(--aqua);font-weight:800;font-size:17px;margin-right:8px} .hours-notes .closed{background:var(--pale)} .hours-notes .closed .lb{background:var(--blue);color:#fff;border-radius:999px;font-size:12.5px;padding:3px 13px;margin-right:12px;white-space:nowrap} /* ---- 受付注記（白カード） ---- */ .note-rows{margin-top:16px;display:grid;gap:0;background:#fff;border:1px solid var(--hair);border-radius:14px; padding:4px 22px;box-shadow:var(--sh-1)} .nr{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--hair)} .nr:last-child{border-bottom:none} .nr-l{flex:none;background:var(--pale);color:var(--blue-d);font-family:var(--maru);font-weight:700; font-size:12.5px;border-radius:999px;margin-top:3px;white-space:nowrap; width:88px;box-sizing:border-box;padding:4px 8px;text-align:center} .nr p{margin:0;font-size:15px;color:var(--ink-2);line-height:2} .nr p b{color:var(--blue-d);font-size:15.5px} /* 注記カード内のご予約行 */ .nr-y > div{flex:1} .nr-y p{margin:0 0 12px} /* ▼ご予約ボタンの色・サイズ */ .nr-y .btn{padding:11px 30px;font-size:14px;background:#2378CF;color:#fff;box-shadow:0 8px 20px rgba(35,120,207,.28)} .nr-y .btn:hover{background:var(--blue-d)} /* ---- 診療時間の再診受付併記 ---- */ .access.v-a .hours .tm{width:172px;line-height:1.45;padding:12px 8px;font-size:18px} .access.v-a .hours .tm .sub{display:block;font-family:var(--kaku);font-size:15px;font-weight:600; color:var(--ink-2);letter-spacing:0;margin-top:2px} .access.v-a .tri-sub{display:block;margin-top:2px;font-size:14px;font-weight:700} .access.v-a .tri-note{gap:8px} .access.v-a .tri-note .tri{margin-right:0} .access.v-a .tri-text{display:flex;flex-direction:column;align-items:center;line-height:1.55} .access.v-a .tri-main, .access.v-a .tri-sub{white-space:nowrap} @media(min-width:901px){ .access.v-a .grid > div:first-child{display:flex;flex-direction:column} .access.v-a .map-embed{flex:1} } @media(max-width:600px){ .access.v-a .hours .tm{width:120px;font-size:14px} .access.v-a .hours .tm .sub{font-size:12px} .access.v-a .tri-main{font-size:13px} .access.v-a .tri-sub{font-size:12px} .access.v-a .closed{font-size:13px;gap:10px} .access.v-a .closed .lb{font-size:12px} } /* ============================================================ 7. 当院の特徴（POINT 01〜06） ============================================================ */ .features{background:linear-gradient(180deg,#f4faff 0%,#eaf4fc 100%);position:relative;overflow:hidden} .features .wrap{position:relative;z-index:1} .features .intro{max-width:720px;margin:0 auto 26px;text-align:center} .features .intro .q{display:inline-block;font-family:var(--maru);font-weight:700; font-size:clamp(17px,2.2vw,21px);line-height:2;color:var(--ink);position:relative;padding:0 6px} .features .intro .q .b{color:var(--blue)} .features .intro p{margin:14px 0 0;color:var(--ink-2);font-size:16px;line-height:2.2} .features .intro p b{color:var(--blue-d)} .feat-list{margin-top:26px} .feat-l{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;padding:48px 0;position:relative} .feat-l.rev{direction:rtl} .feat-l.rev>*{direction:ltr} /* ---- 写真＋背面の青四角＋大型数字 ---- */ .feat-l .photo{position:relative;padding:0} .feat-l .photo::before{content:"";display:block;position:absolute;left:auto;top:auto; right:calc(var(--shift-x) * -1);bottom:calc(var(--shift-y) * -1);width:100%;height:100%; border-radius:30px;transform:none;z-index:0;opacity:var(--pt-alpha)} .feat-l:not(.rev) .photo::before{background:var(--pt-a)} .feat-l.rev .photo::before{right:auto;left:calc(var(--shift-x) * -1);background:var(--pt-b)} .feat-l .photo .ph{position:relative;z-index:1;border-radius:30px;min-height:330px} .feat-l .photo .num-ol{position:absolute;top:-32px;left:0;z-index:3;font-family:var(--maru);font-weight:700; font-size:80px;line-height:1;color:transparent;letter-spacing:.01em; background:linear-gradient(180deg,var(--num-blue-1) 0%,var(--num-blue-2) 100%); -webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 2px 6px rgba(35,120,207,.18));pointer-events:none;user-select:none} /* POINT 02・04・06 の写真番号は右上・アクア */ .feat-l.rev .photo .num-ol{left:auto;right:0; background:linear-gradient(180deg,var(--num-aqua-1) 0%,var(--num-aqua-2) 100%); -webkit-background-clip:text;background-clip:text} /* ---- テキスト側 ---- */ .feat-l .txt{position:relative;z-index:1} .feat-l .pt-head{position:relative;display:flex;align-items:center;gap:18px;margin-bottom:14px} .feat-l .pt-badge{display:inline-flex;flex-direction:row;align-items:center;gap:12px; background:transparent;border:none;border-radius:0;padding:0;box-shadow:none} .feat-l .pt-badge::before{content:"";width:30px;height:2px;background:var(--sky);border-radius:2px} .feat-l .pt-badge .p{font-family:var(--en);color:var(--sky);font-size:14px;letter-spacing:.34em;font-weight:600} .feat-l .pt-badge .n{font-family:var(--en);color:var(--sky);font-size:14px;letter-spacing:.14em;font-weight:600; display:flex;align-items:center;justify-content:center;line-height:1;background:transparent} .feat-l.rev .pt-badge::before{background:#37a9b5} .feat-l.rev .pt-badge .p,.feat-l.rev .pt-badge .n{color:#1a96a5} .feat-l h3{position:relative;font-size:clamp(23px,2.8vw,30px);letter-spacing:.05em;line-height:1.72;margin-bottom:16px} .feat-l h3 .b{color:var(--blue)} .feat-l.rev h3 .b{color:#1a96a5} .feat-l h3::after{content:"";display:block;width:100%;height:8px;border-radius:0;margin-top:14px;opacity:1; background: radial-gradient(circle 3.4px at calc(100% - 4px) 50%, var(--blue) 3.3px, transparent 3.6px) no-repeat, linear-gradient(90deg, var(--sky), rgba(90,171,232,.1)) 0 50%/100% 2px no-repeat} .feat-l.rev h3::after{background: radial-gradient(circle 3.4px at calc(100% - 4px) 50%, #1a96a5 3.3px, transparent 3.6px) no-repeat, linear-gradient(90deg,#37a9b5,rgba(55,169,181,.1)) 0 50%/100% 2px no-repeat} .feat-l .txt p{position:relative;margin:0 0 14px;font-size:16px;color:var(--ink-2);line-height:2.2} .feat-l .txt p:last-child{margin-bottom:0} .feat-l .txt p b{color:var(--blue-d)} .feat-l.rev .txt p b{color:#15818e} /* ============================================================ 8. 院長メッセージ ============================================================ */ .message{background:#fff;position:relative;overflow:hidden} .message .grid{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start} .message .ph.main{min-height:400px} /* ★院長プロフィール写真の位置（PC）。元はHTMLのインラインstyleにあった値をここへ移設 */ .message .ph.main img{object-position:88% 44%} .badge-cred{margin-top:16px;display:grid;gap:10px} .cred-pill{display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px; padding:12px 20px;box-shadow:var(--sh-1);font-size:14px;font-weight:700;font-family:var(--maru)} .cred-pill .md{width:30px;height:30px;flex:none;border-radius:50%;background:var(--pale); display:flex;align-items:center;justify-content:center} .cred-pill .md svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .message .lt{background:#fff;border-radius:calc(var(--r) + 6px);box-shadow:var(--sh-2);padding:52px 52px 44px;position:relative;border:1.5px solid #dbe9f5} .message .lt::before{content:"“";position:absolute;top:14px;left:30px;font-size:100px;line-height:1; color:var(--pale);font-family:Georgia,serif;pointer-events:none} .message .lt h3{font-size:clamp(20px,2.5vw,26px);line-height:1.95;letter-spacing:.05em;margin-bottom:24px;position:relative} .message .lt h3 .b{color:var(--blue)} .message .lt p{margin:0 0 18px;font-size:15.5px;color:var(--ink-2);line-height:2.2} .message .lt p b{color:var(--blue-d)} .message .lt .msg-close{margin-top:22px;padding-top:18px;border-top:1px dashed var(--hair); font-family:var(--maru);font-weight:700;color:var(--ink);font-size:15.5px;line-height:2.1} .message .lt .sign{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:6px 14px;margin-top:28px} .message .lt .sign .t{font-size:14px;color:var(--ink-2);letter-spacing:.04em;text-align:right} .message .lt .sign .nw{white-space:nowrap} .message .lt .sign .n{font-family:var(--maru);font-size:18px;font-weight:700;letter-spacing:.12em} /* ============================================================ 9. 診療案内（4科並列） ============================================================ */ .depts{background:linear-gradient(180deg,#f4faff 0%,#eaf4fc 100%)} .depts .concept{max-width:760px;margin:0 auto 48px;text-align:center;background:#fff; border-radius:var(--r);padding:28px 36px;position:relative;box-shadow:var(--sh-1)} .depts .concept::before,.depts .concept::after{content:"";position:absolute;width:22px;height:22px; border:3px solid var(--sky);opacity:.45} .depts .concept::before{left:14px;top:14px;border-right:none;border-bottom:none;border-radius:6px 0 0 0} .depts .concept::after{right:14px;bottom:14px;border-left:none;border-top:none;border-radius:0 0 6px 0} .depts .concept p{margin:0;font-size:15.5px;font-weight:700;font-family:var(--maru);line-height:2.2} .depts .concept p .b{color:var(--blue)} .depts .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dept{background:#fff;border:none;border-radius:var(--r);padding:26px 24px 24px; transition:.3s;position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:center;align-items:center} .dept:hover{box-shadow:var(--sh-2);transform:translateY(-4px)} .dept .num{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--sky);font-weight:600;margin-bottom:12px;display:block} .dept .illust{width:76px;height:76px;margin-bottom:14px} .dept h3{font-size:20px;letter-spacing:.05em;margin-bottom:8px} .dept p{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.95;text-align:left} /* ============================================================ 10. 症状から探す ============================================================ */ .symptoms{background:#fff} .symptoms .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .sym{display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:.28s} .symptoms .grid .sym{background:#fff;box-shadow:var(--sh-1);border-radius:16px; padding:0 0 24px;overflow:hidden;border:1.5px solid #dbe9f5} .symptoms .grid .sym:hover{box-shadow:var(--sh-2);transform:translateY(-3px)} .symptoms .grid .sym:nth-child(even):hover{box-shadow:0 18px 40px rgba(26,150,165,.16)} /* カード上端のアクセントバー（青／アクアを交互に） */ .symptoms .grid .sym::before{content:"";display:block;height:5px;width:100%} .symptoms .grid .sym:nth-child(odd)::before{background:linear-gradient(90deg,var(--blue),#7cc0f0)} .symptoms .grid .sym:nth-child(even)::before{background:linear-gradient(90deg,var(--aqua),#7fd4dc)} .symptoms .grid .sym .ic{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%; margin:22px 26px 0;width:52px;height:52px;background:#f4f8fb} .symptoms .grid .sym:nth-child(even) .ic{background:#eff8f9} .symptoms .grid .sym .ic img{width:34px;height:34px;object-fit:contain;display:block} .symptoms .grid .sym h3{margin:12px 26px 8px;font-size:17.5px} .symptoms .grid .sym p{margin:0 26px 14px;font-size:13.5px;color:var(--ink-2);line-height:1.95} .sym .tags{display:flex;flex-wrap:wrap;gap:6px} .symptoms .grid .sym .tags{margin:0 26px} .symptoms .grid .sym .tags span{background:#fff;font-weight:600;font-size:12.5px;border-radius:999px;padding:4px 13px;line-height:1.5} .symptoms .grid .sym:nth-child(odd) .tags span{border:1px solid #b9d8f0;color:var(--blue-d)} .symptoms .grid .sym:nth-child(even) .tags span{border:1px solid #a8dde3;color:var(--aqua-d)} /* ============================================================ 11. リハビリ帯 ============================================================ */ .band{background:linear-gradient(180deg,#f4faff 0%,#eaf4fc 100%)} .band .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .band .ph{min-height:380px} .band .sec-head{text-align:left;margin-bottom:0} .band .sec-head .dots{justify-content:flex-start} .band .body{margin-top:22px} .band .body p{margin:0 0 14px;font-size:16px;color:var(--ink-2);line-height:2.2} .band .body p:last-child{margin-bottom:0} .band .body p b{color:var(--blue-d);font-weight:700} /* ============================================================ 12. 受診の流れ ============================================================ */ .flow{background:#fff} .flow .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative} .step{background:#fff;border-radius:var(--r);padding:32px 26px 28px;border:1.5px solid #dbe9f5; box-shadow:0 8px 22px rgba(35,120,207,.08);text-align:center;position:relative} .step .sn{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--aqua);color:#fff; font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.1em;border-radius:999px;padding:4px 18px;box-shadow:var(--sh-1)} .step .ic{width:64px;height:64px;border-radius:50%;background:var(--pale);margin:10px auto 14px; display:flex;align-items:center;justify-content:center} .step .ic svg{width:32px;height:32px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .step h3{font-size:17.5px;margin-bottom:6px} .step p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.9;text-align:left} /* ============================================================ 13. 院内紹介 ============================================================ */ .gallery{background:linear-gradient(180deg,#f4faff 0%,#eaf4fc 100%)} .gallery .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-auto-rows:196px;gap:16px} .gallery .ph:first-child{grid-row:span 2} .gallery .ph.pht .cap{display:inline-block;position:absolute;left:12px;bottom:12px;z-index:2; background:rgba(21,90,158,.78);padding:5px 15px;border-radius:999px;font-size:12px;letter-spacing:.06em} /* ============================================================ 14. FAQ ============================================================ */ .faq{background:#fff} .faq .list{max-width:780px;margin:0 auto} .faq details{background:#fff;border:1.5px solid var(--hair);border-radius:18px;margin-bottom:14px;overflow:hidden;transition:.25s;box-shadow:var(--sh-1)} .faq details[open]{border-color:var(--sky)} .faq summary{cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;font-family:var(--maru);font-size:16.5px;list-style:none;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"Q";color:#fff;background:var(--blue);width:27px;height:27px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;font-family:var(--en);font-size:14px;margin-right:14px} .faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%); font-size:24px;font-weight:400;color:var(--orange);transition:.3s;font-family:var(--en)} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq .a{padding:0 26px 22px 66px;color:var(--ink-2);font-size:15px;line-height:2.1} /* ============================================================ 15. 予約CTA ============================================================ */ .book{background:linear-gradient(180deg,#f2f9ff 0%,#e4f1fb 100%);color:var(--ink);text-align:center; position:relative;overflow:hidden} .book .wrap{position:relative;z-index:1;max-width:760px} .book h2{font-size:clamp(25px,3.2vw,35px);margin-bottom:12px;letter-spacing:.08em;color:var(--ink)} .book p{color:var(--ink-2);font-size:14.5px;margin:0 0 32px} .book .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .book .btn-wh{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(35,120,207,.26)} .book .btn-wh:hover{background:var(--blue-d)} .book .telrow .lbl{font-size:12.5px;letter-spacing:.14em;color:var(--ink-2)} .book .telrow .num{font-family:var(--en);font-size:clamp(30px,4vw,40px);font-weight:600;letter-spacing:.05em;color:var(--blue-d);display:block;margin-top:2px} .book .telrow .telrow-note{font-size:12.5px;margin:14px 0 0;color:var(--ink-2)} /* ============================================================ 16. フッター／スマホ固定バー ============================================================ */ footer.site{background:#14425f;color:#a9c6dc;padding:64px 0 128px;font-size:13.5px} footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px} footer .brand .jp{color:#fff;font-size:20px} footer .f-addr{margin-top:16px;line-height:2.2} footer a{color:#a9c6dc;transition:.2s} footer a:hover{color:#fff} footer h4{color:#fff;font-family:var(--en);font-size:11px;letter-spacing:.28em;margin:0 0 16px;font-weight:600} footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:9px} /* ---- スマホ固定バー ---- */ .mbar{position:fixed;left:0;right:0;bottom:calc(0px - env(safe-area-inset-bottom, 0px));z-index:90;display:none;background:rgba(255,255,255,.97); border-top:1px solid var(--hair);padding:0;gap:0;box-shadow:0 -8px 24px rgba(35,120,207,.14)} .mbar a{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px; padding:15px 6px calc(15px + env(safe-area-inset-bottom, 0px));font-weight:700;font-family:var(--maru);font-size:15.5px;border-radius:0} .mbar a svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .mbar .tel{background:var(--blue);color:#fff} .mbar .line{background:var(--line-g);color:#fff} /* ============================================================ 17. 各セクション上部のフェード区切り 調整箇所: - フェードの高さ: .section-fade-divider::before の height - フェードの濃さ: rgba(...) の透明度 - 本文の開始位置: .section-fade-divider の padding-top ============================================================ */ .section-fade-divider{position:relative;z-index:2;overflow:hidden;padding-top:150px;margin-top:-1px} .section-fade-divider::before{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:80px;border-radius:0;opacity:1;transform:none;z-index:1;pointer-events:none} .section-fade-divider.fade-from-white::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.94) 24%,rgba(255,255,255,.62) 58%,rgba(255,255,255,0) 100%)} .section-fade-divider.fade-from-sky::before{background:linear-gradient(180deg,#eaf4fc 0%,rgba(234,244,252,.92) 24%,rgba(234,244,252,.58) 58%,rgba(234,244,252,0) 100%)} .section-fade-divider > .wrap{position:relative;z-index:2} .band.section-fade-divider{padding-top:160px} /* ============================================================ レスポンシブ（タブレット: 〜980px） ============================================================ */ @media(max-width:980px){ section{padding:68px 0 50px} .gnav,.h-tel,.h-book{display:none} .menu-btn{display:flex;margin-left:auto} .news{margin-top:40px} .news .box{grid-template-columns:1fr;gap:10px;padding:26px 28px} .news h2{padding-right:0;border-right:none;padding-bottom:12px;border-bottom:1px solid var(--hair)} .news-more{grid-column:1;text-align:left} .depts .grid{grid-template-columns:1fr 1fr} .symptoms .grid{grid-template-columns:1fr 1fr} .message .grid{grid-template-columns:1fr;gap:34px} .message .lt{padding:38px 28px 34px} .band .grid{grid-template-columns:1fr;gap:30px} .band .ph{min-height:250px} .flow .steps{grid-template-columns:1fr 1fr;gap:22px 16px} .gallery .grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px} .gallery .ph:first-child{grid-row:auto} .access .grid{grid-template-columns:1fr;gap:34px} .map-embed iframe{min-height:300px} footer .cols{grid-template-columns:1fr;gap:28px} .feat-l{grid-template-columns:1fr;gap:34px} .feat-l .photo .ph{min-height:250px} .section-fade-divider{padding-top:100px} .section-fade-divider::before{height:30px} .band.section-fade-divider{padding-top:116px} } /* ============================================================ レスポンシブ（スマホ: 〜600px） ============================================================ */ @media(max-width:600px){ body{font-size:16px} .brand .mark{width:38px;height:38px} .brand .mark img{height:38px} .brand .en{font-size:7.5px;letter-spacing:.18em} .brand .jp{font-size:16px;white-space:nowrap} .hours{min-width:0} .hours th,.hours td{padding:9px 1px} .hours .tm{width:106px;font-size:13px} .hours tbody td{font-size:11.5px} .hours-notes{gap:7px} .hours-notes p{font-size:11.5px;padding:9px 6px;line-height:1.6;flex-direction:column;gap:3px} .hours-notes .tri-note .tri{margin-right:0} .hours-notes .closed .lb{margin-right:0;font-size:10.5px;padding:2px 10px} .news .box{padding:22px 20px} .news li{grid-template-columns:92px 1fr;gap:10px} .symptoms .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px;-webkit-overflow-scrolling:touch} .sym{flex:0 0 74%;scroll-snap-align:start} .symptoms .grid .sym{padding-bottom:20px} .symptoms .grid .sym .ic{margin:18px 20px 0} .symptoms .grid .sym h3{margin:10px 20px 8px} .symptoms .grid .sym p{margin:0 20px 12px} .symptoms .grid .sym .tags{margin:0 20px} .depts .grid{grid-template-columns:1fr} .flow .steps{grid-template-columns:1fr;gap:24px} .mbar{display:flex} footer.site{padding-bottom:110px} .features .feat-l:last-child{padding-bottom:0} .feat-l h3{font-size:21.5px} .feat-l .txt p{font-size:15px} .message .lt::before{top:4px;left:18px;font-size:82px} .message .lt h3{padding-top:5px} /* SPギャラリー: 横スワイプ */ .gallery .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px; padding-bottom:10px;-webkit-overflow-scrolling:touch} .gallery .grid .ph{flex:0 0 76%;height:210px;scroll-snap-align:start;grid-row:auto} } /* ============================================================ スマホ表示の調整（2026-08-20） ★ここより下は「スマホ（600px以下）だけ」に効きます。PCには影響しません ============================================================ */ /* スマホだけで改行する
*/ .sp-br{display:none} /* 横スクロールできることを伝えるヒント（スマホのみ表示） */ .scroll-hint{display:none} /* よくある質問の中のリンク */ .faq .a a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* 本文中に追加した予約・アクセスリンク */ .itable a, .nr-y p a, .feat-l .txt p a{color:var(--blue-d);font-weight:700;text-decoration:underline;text-underline-offset:3px} @media(max-width:600px){ .sp-br{display:inline} /* ★FV見出しが右にはみ出すため字間を詰める（0.04em→0.01em） */ .hero h1{letter-spacing:.01em} /* ★スマホの文字サイズ。 */ body{font-size:16px} .hero .sub{font-size:16px} .feat-l h3{font-size:22.5px} .feat-l .txt p{font-size:16px} .message .lt p{font-size:16px} .depts .concept p{font-size:16px} .dept p{font-size:16px} .symptoms .grid .sym h3{font-size:18.5px} .symptoms .grid .sym p{font-size:16px} .symptoms .grid .sym .tags span{font-size:14px} .faq summary{font-size:16px} .faq .a{font-size:16px} .news li{font-size:16px} footer.site{font-size:15px} /* ★スマホの補足文サイズ。各所の見え方に合わせて細かく調整 */ .hero .cta-note{font-size:15px;line-height:1.9} .features .intro p{font-size:16px;line-height:2} .message .lt .msg-close, .step p, .book p{font-size:16px;line-height:2} .features .intro .q{font-size:19px;line-height:1.9} .book .telrow .lbl, .book .telrow .telrow-note{display:block;font-size:15px;line-height:1.85;letter-spacing:.02em} .news-more{text-align:right} /* ★院長プロフィール写真（スマホ） 1つ目の数字＝写真の「どこを見せるか」。大きくするほど写真の“右側”が表示され、院長は左へ動きます。 30%→院長が右に寄りすぎ ／ 50%→やや右 ／ 85%→ほぼ中央（推奨） ／ 100%→やや左 ※スマホでは縦は切れないため、2つ目の数字を変えても見た目は変わりません */ .message .ph.main img{object-position:85% 50%} /* 横スクロールのヒント表示 */ .scroll-hint{display:flex;align-items:center;justify-content:flex-end;gap:7px; margin:0 2px 10px;font-size:13.5px;font-weight:700;color:var(--sky); font-family:var(--maru);letter-spacing:.02em} .scroll-hint::after{content:"❯❯";font-size:12px;letter-spacing:-1px; animation:scroll-hint-move 1.6s ease-in-out infinite} } @keyframes scroll-hint-move{ 0%,100%{transform:translateX(0);opacity:.45} 50%{transform:translateX(6px);opacity:1} } /* ============================================================ 18. 下層ページ共通（2026-08-21 追加） - .page-hero: ページ上部のタイトル帯（背景はFVと同じ青空） - .pg: 本文エリア（読みやすさ優先で最大幅900px） - ヘッダー・フッター・予約CTA帯はトップページの共通部品を再利用 ============================================================ */ .page-hero{position:relative;overflow:hidden;text-align:center;padding:150px 0 64px; background:url("../img/sky-bg.webp") center top/cover no-repeat} .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none} .page-hero .en{display:block;font-family:var(--en);font-size:12px;letter-spacing:.3em; color:var(--blue-d);opacity:.7;font-weight:600;margin-bottom:10px;text-transform:uppercase} .page-hero h1, .page-hero .ph-ttl{font-size:clamp(26px,3.4vw,38px);letter-spacing:.06em;line-height:1.6} .page-hero h1 .b, .page-hero .ph-ttl .b{color:var(--blue)} .page-hero .dots{display:flex;gap:6px;justify-content:center;margin-top:16px} .page-hero .dots i{width:8px;height:8px;border-radius:50%;background:var(--sky);opacity:.9} .page-hero .dots i:nth-child(2){background:var(--aqua)} .page-hero .dots i:nth-child(3){background:var(--blue)} .page-hero .lead{color:var(--ink-2);font-size:15.5px;max-width:720px;margin:18px auto 0;position:relative;z-index:1} /* ---- パンくず ---- */ .crumb{position:relative;z-index:1;margin-top:20px;font-size:12.5px;color:var(--ink-2)} .crumb ol{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0} .crumb li+li::before{content:"›";margin-right:6px;color:#8fb0c9} .crumb a{color:var(--blue-d);font-weight:600} /* ---- 本文エリア ---- */ .pg{background:#fff;padding:34px 0 76px} .pg .wrap{max-width:900px} .pg h2{font-size:clamp(21px,2.6vw,26px);letter-spacing:.05em;line-height:1.75;margin:56px 0 18px} .pg .wrap > h2:first-child{margin-top:0} .pg h2 .b{color:var(--blue)} .pg h2 .sm{font-size:.62em} .pg h2::after{content:"";display:block;width:100%;height:8px;margin-top:12px; background: radial-gradient(circle 3.4px at calc(100% - 4px) 50%, var(--blue) 3.3px, transparent 3.6px) no-repeat, linear-gradient(90deg, var(--sky), rgba(90,171,232,.1)) 0 50%/100% 2px no-repeat} .pg h3{font-size:18.5px;color:var(--blue-d);letter-spacing:.04em;margin:34px 0 10px} .pg p{margin:0 0 16px;color:var(--ink-2);line-height:2.15;font-size:16px} .pg p b{color:var(--blue-d)} .pg a:not(.btn){color:var(--blue-d);font-weight:700;text-decoration:underline;text-underline-offset:3px} .pg ul.disc{margin:0 0 18px;padding-left:1.3em;color:var(--ink-2);line-height:2.05;font-size:15.5px} .pg ul.disc li{margin-bottom:6px} .pg ul.disc li::marker{color:var(--sky)} /* ---- チェック付きリスト（こんな方はご相談ください 等） ---- */ .pg ul.check{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px} .pg ul.check li{position:relative;padding-left:34px;color:var(--ink-2);font-size:15.5px;line-height:1.95} .pg ul.check li::before{content:"";position:absolute;left:0;top:5px;width:22px;height:22px;border-radius:50%; background:var(--aqua) url('data:image/svg+xml;utf8,') center/13px no-repeat} /* ---- 白カード（補足・注意ボックス） ---- */ .pg .card{background:var(--pale-2);border:1.5px solid #dbe9f5;border-radius:16px;padding:24px 30px;margin:0 0 20px} .pg .card h3{margin-top:0} .pg .card :last-child{margin-bottom:0} /* ---- 写真 ---- */ .pg .pg-photo{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);margin:26px 0} .pg .pg-photo img{width:100%;height:auto;display:block} .pg .pg-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:26px 0} .pg .pg-cols.top{align-items:start} .pg .pg-cols .ph{min-height:300px;height:100%} /* ★院長写真（医師紹介ページ）の見せる位置。1つ目=横（大きいほど右側を表示） */ .pg .ph.doctor img{object-position:88% 44%} /* ---- 症状タグ ---- */ .pg .tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px} .pg .tags span{background:#fff;border:1px solid #b9d8f0;color:var(--blue-d);font-weight:600;font-size:13px;border-radius:999px;padding:5px 14px;line-height:1.5} /* ---- 同一ページ内で英語→日本語など wrap を2つ並べるときの区切り余白 ---- */ .pg .wrap + .wrap{margin-top:64px} /* ---- STEPカード（.step はトップページ共通部品を再利用） ---- */ .pg .steps{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;margin:30px 0 10px} .pg .steps.cols3{grid-template-columns:1fr 1fr 1fr} .pg .step h3{margin:0 0 6px;color:var(--ink);font-size:17.5px} .pg .step p{margin:0;font-size:14.5px;line-height:1.9} .pg .nr p{margin:0;font-size:15px} /* ---- お知らせ一覧 ---- */ .pg .news-list{list-style:none;margin:0 0 20px;padding:8px 30px;background:#fff; border:1.5px solid #dbe9f5;border-radius:16px;box-shadow:var(--sh-1)} .pg .news-list li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:15px 0;border-bottom:1px dashed var(--hair);font-size:15px} .pg .news-list li:last-child{border-bottom:none} .pg .news-list time{font-family:var(--en);color:var(--aqua-d);font-weight:600;letter-spacing:.06em;font-size:13.5px;margin-top:3px} .pg .news-list a{color:var(--ink);font-weight:400;text-decoration:none} .pg .news-list a:hover{color:var(--blue)} /* ---- 右寄せ署名（プライバシーポリシー等） ---- */ .pg .pg-sign{text-align:right;color:var(--ink-2);font-size:15px;margin-top:34px;line-height:2} /* ---- アクセスページで診療時間セクションを再利用するときの余白調整 ---- */ .access.pg-access{padding:20px 0 30px} /* ============================================================ 20. 下層ページへの誘導リンク（トップページ本文内） - .more-btn : セクション末尾の「詳しくはこちら」ボタン - .more-link: 症状カードなどの中に置く小さめリンク ============================================================ */ .more-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px; background:#fff;border:1.5px solid var(--blue);color:var(--blue-d); font-family:var(--maru);font-weight:700;font-size:14.5px;letter-spacing:.04em; border-radius:999px;padding:12px 26px;transition:.25s;box-shadow:var(--sh-1)} .more-btn::after{content:"";width:7px;height:7px;border-top:2px solid currentColor; border-right:2px solid currentColor;transform:rotate(45deg);transition:.25s} .more-btn:hover{background:var(--blue);color:#fff;transform:translateY(-2px); box-shadow:0 10px 24px rgba(35,120,207,.24)} .more-btn.aqua{border-color:var(--aqua);color:var(--aqua-d)} .more-btn.aqua:hover{background:var(--aqua);color:#fff;box-shadow:0 10px 24px rgba(26,150,165,.24)} .more-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px; font-family:var(--maru);font-weight:700;font-size:13.5px;color:var(--blue-d);letter-spacing:.03em} .more-link::after{content:"";width:6px;height:6px;border-top:2px solid currentColor; border-right:2px solid currentColor;transform:rotate(45deg);transition:.25s} .more-link:hover{color:var(--blue)} .more-link:hover::after{transform:rotate(45deg) translate(2px,-2px)} .symptoms .grid .sym .more-link{margin:12px 26px 0} /* セクション末尾の中央寄せボタン */ .sec-more{text-align:center;margin:38px 0 0} .message .lt .msg-more{margin:16px 0 0;text-align:right} .symptoms .grid .sym:nth-child(even) .more-link{color:var(--aqua-d)} /* 特徴（POINT）の本文内リンク */ .feat-l .txt .more-link{margin-top:6px} @media(max-width:600px){ .more-btn{font-size:15px;padding:13px 24px} .more-link{font-size:15px} .symptoms .grid .sym .more-link{margin:12px 20px 0} } /* ---- 写真ギャラリー（下層ページ用・キャプション付き） ---- */ .pg .photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 22px} .pg .photo-grid.c3{grid-template-columns:repeat(3,1fr)} .pg .photo-grid figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--sh-1);background:var(--pale)} /* ★height:100% だと figure の高さを写真が占め切ってしまい、 下の figcaption が高さ0に潰れてキャプションが消える。 aspect-ratio があるので height:auto で正しい高さになる。 */ .pg .photo-grid img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:1.5} .pg .photo-grid figcaption{background:#fff;padding:11px 16px;font-size:14px;color:var(--ink-2); font-family:var(--maru);font-weight:700;line-height:1.6} /* ---- 設備・機器カード ---- */ .pg .equip{display:grid;gap:20px;margin:26px 0 22px} .pg .equip .item{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center; background:#fff;border:1.5px solid #dbe9f5;border-radius:18px;padding:22px;box-shadow:var(--sh-1)} .pg .equip .item .shotbox{margin:0;border-radius:12px;overflow:hidden;background:var(--pale);aspect-ratio:1.42} .pg .equip .item .shotbox img{width:100%;height:100%;object-fit:cover;display:block} .pg .equip .item.portrait .shotbox{aspect-ratio:1.05} .pg .equip .item h3{margin:0 0 8px;color:var(--ink);font-size:19px} .pg .equip .item p{margin:0;font-size:15.5px;line-height:2} .pg .equip .item p + p{margin-top:8px} .pg .equip .tag{display:inline-block;background:var(--aqua-pale);color:var(--aqua-d);border-radius:999px; padding:4px 14px;font-size:12.5px;font-weight:700;font-family:var(--maru);margin-bottom:9px;letter-spacing:.04em} @media(max-width:600px){ .pg .photo-grid,.pg .photo-grid.c3{grid-template-columns:1fr;gap:14px} .pg .equip .item{grid-template-columns:1fr;gap:16px;padding:16px} .pg .equip .item .shotbox,.pg .equip .item.portrait .shotbox{aspect-ratio:1.5} .pg .equip .item h3{font-size:18px} .pg .equip .item p{font-size:16px} .pg .photo-grid figcaption{font-size:14.5px} } /* ---- 経歴（年表）／所属学会／論文リスト（医師紹介ページ） ---- */ .pg .career{list-style:none;margin:0 0 18px;padding:0} .pg .career li{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:start; padding:13px 0;border-bottom:1px dashed var(--hair)} .pg .career li:last-child{border-bottom:none} .pg .career .y{font-family:var(--maru);font-weight:700;color:var(--blue-d);font-size:15px; background:var(--pale);border-radius:999px;text-align:center;padding:3px 0;margin-top:2px} .pg .career .y.none{background:transparent;color:transparent} .pg .career .c{color:var(--ink-2);font-size:15.5px;line-height:1.95} .pg .society{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px} .pg .society li{background:#fff;border:1.5px solid #dbe9f5;border-radius:999px;padding:9px 20px; font-family:var(--maru);font-weight:700;font-size:14.5px;color:var(--blue-d);box-shadow:var(--sh-1)} .pg .papers{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px} .pg .papers li{background:var(--pale-2);border:1.5px solid #dbe9f5;border-radius:14px;padding:18px 22px} .pg .papers .ttl{display:block;font-family:var(--maru);font-weight:700;color:var(--ink); font-size:15.5px;line-height:1.85;margin-bottom:6px} /* 論文タイトルはJ-GLOBALの該当ページへの外部リンク */ .pg .papers .ttl a{color:var(--blue-d);text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1.5px;text-decoration-color:rgba(35,120,207,.4);transition:.2s} .pg .papers .ttl a:hover{color:var(--blue);text-decoration-color:var(--blue)} .pg .papers .ttl a::after{content:"↗";display:inline-block;margin-left:6px;font-size:.82em; color:var(--sky);text-decoration:none;vertical-align:1px} .pg .papers .src{display:block;color:var(--ink-2);font-size:14px;line-height:1.85} .pg .papers .au{display:block;color:var(--ink-2);font-size:14px;line-height:1.85;margin-top:2px} .pg .papers .ext{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700} @media(max-width:600px){ .pg .career li{grid-template-columns:76px 1fr;gap:12px} .pg .career .y{font-size:13.5px} .pg .career .c{font-size:15.5px} .pg .papers li{padding:16px 18px} } /* ============================================================ 19. 道順ガイド（アクセスページ） 写真1枚＋説明で1ステップ。左に番号バッジ、写真の下に解説。 ★1ステップの写真の高さを変えるのは .route-step .shot の aspect-ratio ============================================================ */ .route{background:linear-gradient(180deg,#f4faff 0%,#eaf4fc 100%)} #route{scroll-margin-top:90px} .route .wrap{max-width:980px} .route .route-intro{max-width:760px;margin:0 auto 40px;text-align:center;color:var(--ink-2);font-size:16px;line-height:2.15} .route-list{display:grid;gap:22px;counter-reset:route} .route-step{background:#fff;border:1.5px solid #dbe9f5;border-radius:var(--r);box-shadow:var(--sh-1); overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .route-step:nth-child(even){direction:rtl} .route-step:nth-child(even) > *{direction:ltr} .route-step .shot{position:relative;margin:0;background:var(--pale);aspect-ratio:1.5} .route-step .shot img{width:100%;height:100%;object-fit:cover;display:block} .route-step .txt{padding:30px 34px;display:flex;flex-direction:column;justify-content:center} .route-step .rn{display:inline-flex;align-items:center;gap:10px;font-family:var(--en);font-size:12px; letter-spacing:.22em;color:var(--sky);font-weight:600;margin-bottom:10px} .route-step .rn::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--sky)} .route-step:nth-child(even) .rn{color:var(--aqua-d)} .route-step:nth-child(even) .rn::before{background:var(--aqua)} .route-step h3{font-size:19.5px;letter-spacing:.04em;line-height:1.7;margin-bottom:10px;color:var(--ink)} .route-step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:2.05} .route-step p + p{margin-top:10px} .route-step .hint{margin-top:12px;background:var(--aqua-pale);color:var(--aqua-d);border-radius:12px; padding:10px 16px;font-size:14px;font-weight:700;font-family:var(--maru);line-height:1.75} /* 縦長写真（エレベーター・受付）は縦横比を変える ★写真が縦に間延びするときは aspect-ratio を大きく（1.1→1.3）すると高さが縮みます */ .route-step.tall .shot{aspect-ratio:1.12} .route-step.tall .shot img{object-position:50% 42%} @media(max-width:980px){ .route .wrap{max-width:var(--maxw)} .route-step,.route-step:nth-child(even){grid-template-columns:1fr;direction:ltr} .route-step .shot{aspect-ratio:1.62} .route-step.tall .shot{aspect-ratio:1.2} .route-step .txt{padding:24px 26px 28px} } @media(max-width:600px){ .route-step .shot,.route-step.tall .shot{aspect-ratio:1.4} .route-step .txt{padding:22px 20px 24px} .route-step h3{font-size:18.5px} .route-step p{font-size:16px} .route .route-intro{font-size:16px;text-align:left} } /* ---- 下層ページ レスポンシブ ---- */ @media(max-width:980px){ .page-hero{padding:126px 0 52px} } @media(max-width:600px){ .page-hero{padding:112px 0 44px} .page-hero h1, .page-hero .ph-ttl{font-size:24px} .pg{padding:26px 0 60px} .pg h2{font-size:20px;margin:44px 0 14px} .pg h3{font-size:17.5px} .pg p{font-size:16px;line-height:2.05} .pg .pg-cols{grid-template-columns:1fr;gap:18px} .pg .pg-cols .ph{min-height:220px} .pg .steps,.pg .steps.cols3{grid-template-columns:1fr;gap:26px} .pg .news-list{padding:4px 20px} .pg .news-list li{grid-template-columns:92px 1fr;gap:10px;font-size:14.5px} .pg .card{padding:20px 22px} } /* ============================================================ 21. 2026-08-27 追加・調整 ------------------------------------------------------------ (A) スマホ文字サイズの統一（トップページの 16px を基準にそろえる） (B) 予約CTAの本文をスマホで左揃えに (C) 所属学会をスマホで2列に (D) 診療案内ページ用コンポーネント（科目カード／症状カード） (E) お知らせ記事ページ（WordPress投稿用） (F) 準備中ページ・404ページ共通 ============================================================ */ /* ---- (B) 予約CTA：スマホでは本文だけ左揃え ---- */ @media(max-width:600px){ .book > .wrap > p{text-align:left} .book h2 + p{margin-top:10px} .book .telrow p{text-align:center} } /* ---- (C) 所属学会：スマホで2列に並べる ---- */ @media(max-width:600px){ .pg .society{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pg .society li{font-size:12.5px;padding:9px 8px;text-align:center;line-height:1.5;letter-spacing:0} } /* ---- (A) スマホ文字サイズの統一 ---- */ @media(max-width:600px){ .pg ul.disc{font-size:16px;line-height:2.05} .pg ul.check li{font-size:16px} .pg .step p{font-size:16px;line-height:2} .pg .news-list li{font-size:16px} .pg .news-list time{font-size:14px} .pg .career .c{font-size:16px} .pg .papers .ttl{font-size:16px} .pg .papers .src,.pg .papers .au{font-size:14.5px} .pg .tags span{font-size:14px} .pg .pg-sign{font-size:15px} .route-step .hint{font-size:15px;line-height:1.85} } /* ============================================================ (D) 診療案内ページ用コンポーネント ------------------------------------------------------------ .dept-cards : 診療科目（整形外科・内科・皮膚科・アレルギー科） .sym-cards : 症状カード（アイコン＋症状名＋説明） .lead-box : ページ冒頭のリード文ボックス ============================================================ */ /* リード文ボックス（ページ冒頭の導入） */ .pg .lead-box{background:linear-gradient(135deg,var(--pale-2) 0%,var(--pale) 100%); border-radius:var(--r);padding:28px 32px;margin:0 0 34px;border:1.5px solid #dbe9f5} .pg .lead-box p{margin:0 0 12px;font-size:16.5px;color:var(--ink-2)} .pg .lead-box p:last-child{margin-bottom:0} .pg .lead-box .big{font-size:19px;font-weight:700;color:var(--ink);line-height:1.9;font-family:var(--maru)} /* 診療科目カード */ .pg .dept-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 22px} .pg .dept-cards .dc{background:#fff;border:1.5px solid #dbe9f5;border-radius:18px; padding:22px 24px;box-shadow:var(--sh-1);display:flex;gap:16px;align-items:flex-start} .pg .dept-cards .dc .ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--pale); display:flex;align-items:center;justify-content:center} .pg .dept-cards .dc .ic svg{width:28px;height:28px;fill:none;stroke:var(--blue); stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pg .dept-cards .dc:nth-child(even) .ic{background:var(--aqua-pale)} .pg .dept-cards .dc:nth-child(even) .ic svg{stroke:var(--aqua-d)} .pg .dept-cards .dc h3{margin:0 0 6px;font-size:17.5px;color:var(--ink)} .pg .dept-cards .dc p{margin:0;font-size:15px;line-height:1.9} /* 症状カード（アイコン付き） */ .pg .sym-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 22px} .pg .sym-cards .sc{background:#fff;border:1.5px solid #dbe9f5;border-radius:18px; padding:24px 26px 22px;box-shadow:var(--sh-1)} .pg .sym-cards .sc .hd{display:flex;gap:14px;align-items:center;margin-bottom:12px} .pg .sym-cards .sc .hd .ic{flex:none;width:60px;height:60px;border-radius:50%; background:var(--pale);display:flex;align-items:center;justify-content:center;overflow:hidden} .pg .sym-cards .sc .hd .ic img{width:46px;height:46px;object-fit:contain} .pg .sym-cards .sc .hd .ic svg{width:34px;height:34px;fill:none;stroke:#2378cf; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pg .sym-cards .sc .hd h3{margin:0;font-size:18px;color:var(--ink);line-height:1.5} .pg .sym-cards .sc p{margin:0 0 10px;font-size:15.5px;line-height:2} .pg .sym-cards .sc p:last-child{margin-bottom:0} .pg .sym-cards .sc .tags{margin:10px 0 0} .pg .sym-cards .sc .more-link{margin-top:12px} .pg .sym-cards .sc.wide{grid-column:1/-1} /* 院内でできること（アイコン付き横並びリスト） */ .pg .can-list{display:grid;gap:12px;margin:26px 0 22px} .pg .can-list .ci{display:flex;gap:16px;align-items:flex-start;background:var(--pale-2); border:1.5px solid #dbe9f5;border-radius:14px;padding:18px 22px} .pg .can-list .ci .no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--aqua); color:#fff;font-family:var(--maru);font-weight:700;font-size:15px; display:flex;align-items:center;justify-content:center} .pg .can-list .ci h3{margin:0 0 4px;font-size:16.5px;color:var(--blue-d)} .pg .can-list .ci p{margin:0;font-size:15.5px;line-height:1.95} @media(max-width:600px){ .pg .lead-box{padding:22px 20px;border-radius:16px} .pg .lead-box p{font-size:16px} .pg .lead-box .big{font-size:17.5px} .pg .dept-cards,.pg .sym-cards{grid-template-columns:1fr;gap:14px} .pg .dept-cards .dc{padding:18px 18px} .pg .dept-cards .dc p{font-size:16px} .pg .sym-cards .sc{padding:20px 18px} .pg .sym-cards .sc p{font-size:16px} .pg .sym-cards .sc .hd .ic{width:52px;height:52px} .pg .sym-cards .sc .hd .ic img{width:40px;height:40px} .pg .sym-cards .sc .hd h3{font-size:17.5px} .pg .can-list .ci{padding:16px 16px;gap:12px} .pg .can-list .ci p{font-size:16px} } /* ============================================================ (E) お知らせ記事ページ（WordPress投稿のベース） ------------------------------------------------------------ .post-head : タイトル・日付・カテゴリ .post-body : 本文（WordPressのエディタで書いた内容がそのまま入る想定） .post-nav : 前後の記事・一覧へ戻る ============================================================ */ .pg .post-head{border-bottom:2px solid var(--hair);padding-bottom:22px;margin-bottom:30px} .pg .post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .pg .post-meta time{font-family:var(--en);font-size:14px;font-weight:600; color:var(--aqua-d);letter-spacing:.06em} .pg .post-cat{display:inline-block;background:var(--pale);color:var(--blue-d); font-family:var(--maru);font-weight:700;font-size:12.5px;border-radius:999px;padding:4px 14px;letter-spacing:.04em} .pg .post-head h1{font-size:clamp(22px,3vw,29px);line-height:1.65;letter-spacing:.04em;color:var(--ink)} /* 記事本文：WordPressのブロックがそのまま入っても崩れないように */ .pg .post-body > :first-child{margin-top:0} .pg .post-body h2{font-size:clamp(19px,2.3vw,23px);margin:44px 0 16px} .pg .post-body h3{font-size:17.5px;margin:30px 0 10px} .pg .post-body p{font-size:16px;line-height:2.15} .pg .post-body img{max-width:100%;height:auto;border-radius:14px;display:block;margin:22px 0} .pg .post-body ul,.pg .post-body ol{margin:0 0 18px;padding-left:1.4em; color:var(--ink-2);line-height:2.05;font-size:16px} .pg .post-body li{margin-bottom:6px} .pg .post-body li::marker{color:var(--sky)} .pg .post-body blockquote{margin:22px 0;padding:18px 24px;background:var(--pale-2); border-left:4px solid var(--sky);border-radius:0 12px 12px 0;color:var(--ink-2)} .pg .post-body blockquote p:last-child{margin-bottom:0} .pg .post-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px} .pg .post-body th,.pg .post-body td{border:1px solid var(--hair);padding:12px 14px;text-align:left} .pg .post-body th{background:var(--pale-2);color:var(--blue-d);font-weight:700;font-family:var(--maru)} .pg .post-body hr{border:none;border-top:1px dashed var(--hair);margin:34px 0} /* 記事内の目立たせたいお知らせ（臨時休診など） */ .pg .post-notice{background:var(--aqua-pale);border:1.5px solid #b9e2e8;border-radius:16px; padding:22px 26px;margin:24px 0} .pg .post-notice h3{margin:0 0 8px;color:var(--aqua-d);font-size:17px} .pg .post-notice p:last-child{margin-bottom:0} /* 記事下のナビゲーション */ .pg .post-nav{display:flex;justify-content:center;margin-top:46px;padding-top:30px;border-top:2px solid var(--hair)} @media(max-width:600px){ .pg .post-head{padding-bottom:18px;margin-bottom:24px} .pg .post-head h1{font-size:21px} .pg .post-body h2{font-size:19px;margin:36px 0 14px} .pg .post-body h3{font-size:17px} .pg .post-body table{font-size:15px} .pg .post-body th,.pg .post-body td{padding:10px 12px} .pg .post-notice{padding:18px 18px} } /* ============================================================ (F) 準備中ページ／404ページ 共通 ============================================================ */ .pg .cs-card{max-width:720px;margin:0 auto;text-align:center;background:var(--pale-2); border:1px solid var(--hair);border-radius:var(--r);padding:48px 28px 44px;box-shadow:var(--sh-1)} .pg .cs-icon{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--pale); display:flex;align-items:center;justify-content:center} .pg .cs-icon svg{width:44px;height:44px;stroke:var(--blue);fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pg .cs-card h2{font-size:clamp(20px,2.4vw,24px);color:var(--blue-d);letter-spacing:.06em;margin:0 0 14px} .pg .cs-card h2::after{content:none} .pg .cs-card p{color:var(--ink-2);line-height:2;font-size:16px;margin:0} .pg .cs-card p + p{margin-top:12px} .pg .cs-card .dots{display:flex;gap:6px;justify-content:center;margin:18px 0 0} .pg .cs-card .dots i{width:8px;height:8px;border-radius:50%;background:var(--sky)} .pg .cs-card .dots i:nth-child(2){background:var(--aqua)} .pg .cs-card .dots i:nth-child(3){background:var(--blue)} .pg .cs-guide{max-width:820px;margin:48px auto 0;text-align:center} .pg .cs-guide h3{font-size:17px;color:var(--ink);letter-spacing:.08em;margin:0 0 20px} .pg .cs-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .pg .cs-links a:not(.btn){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; min-height:76px;padding:14px 10px;background:#fff;border:1px solid var(--hair);border-radius:14px; color:var(--blue-d);font-size:14.5px;font-weight:700;text-decoration:none; box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s} .pg .cs-links a .en-s{font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--sky);font-weight:400} .pg .cs-links a:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} /* 404の大きな数字 */ .pg .cs-card .err-code{font-family:var(--en);font-size:clamp(64px,12vw,104px);font-weight:600; line-height:1;letter-spacing:.06em;color:var(--sky);margin-bottom:6px;opacity:.85} @media(max-width:600px){ .pg .cs-links{grid-template-columns:1fr 1fr} .pg .cs-card{padding:36px 18px 34px} .pg .cs-guide{margin-top:38px} } /* ---- 医院情報テーブル内の補足リンク（例: 渋谷駅からの道順を写真で見る） ---- */ .itable .td-note{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-2);line-height:1.7} .itable .td-note a{color:var(--blue-d);font-weight:700;text-decoration:underline;text-underline-offset:3px} @media(max-width:600px){ .itable .td-note{font-size:14px} } /* ---- 医師紹介：スマホで院長あいさつ冒頭に余白を足す（写真と詰まって見えるため） ---- */ @media(max-width:600px){ .pg .pg-cols.top .doc-open{margin-top:10px} } /* ---- 本文中に地図を置くとき（外国人向け案内ページ等） ---- */ .pg .map-embed{margin:22px 0 26px} .pg .map-embed iframe{min-height:380px} @media(max-width:600px){ .pg .map-embed iframe{min-height:300px} } /* ============================================================ 18. ページ末尾の上書き（旧HTML版の