@charset "UTF-8"; /* ========================================================================== 髙野歯科医院　共通スタイル このファイル1枚で、サイト全部の見た目をそろえます。 場所：public_html/css/common.css 各ページの から で読みます。 ここを直すと全ページの見た目が一度に変わります。 ページごとの細かい調整は、そのページのHTMLの中に書かず、 なるべくこのファイルに「〇〇ページ用」として足してください。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 色と書体の設定 色は「ブランドカラー.md」の基本色12色だけを使います。 茶〜ゴールドが基調。緑（--green）は本当に特別なときだけ。 -------------------------------------------------------------------------- */ :root{ --olive:#6a5d21; /* 主となるオリーブ：見出し・ボタン */ --olive-l:#897845; /* ゴールド寄りの茶：罫線・小見出し */ --tan:#d2b48c; /* 明るいゴールド：装飾・ハイライト */ --warm:#998c78; /* 影・淡い装飾 */ --green:#335719; /* 差し色。期間限定の告知など特別なときだけ */ --ivory-hi:#fffffc; --ivory:#fbfaf5; --ivory-mid:#f8f4e6; --ink:#1a1a1a; --ink-mid:#333333; --sub:#4d4d4d; --mute:#666666; /* ゴールドの艶。パレット内の2色だけでつくっています */ --gold-sheen:linear-gradient(135deg,#897845 0%,#d2b48c 50%,#897845 100%); } /* -------------------------------------------------------------------------- 2. 土台 -------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:400;color:var(--ink);background:var(--ivory-hi); line-height:2.0;font-size:15px;padding-bottom:64px; -webkit-font-smoothing:antialiased; } /* height:auto を必ず付ける。 HTMLの img に width="…" height="…" を書いてあるのは、読み込み前に場所を確保して 画面がガタつかないようにするためです。この指定がないと、その数値が そのまま高さになって写真が縦に伸びてしまいます。 */ img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration:none;} .wrap{max-width:1100px;margin:0 auto;padding:0 22px;} .center{text-align:center;} /* 小見出しの上に置く英字ラベル */ .kicker{font-size:11px;letter-spacing:.24em;color:var(--olive-l); text-transform:uppercase;margin-bottom:10px;font-weight:500;} /* 見出しの下の金の短い線 */ .rule{width:56px;height:2px;background:var(--gold-sheen);margin:16px 0;border-radius:2px;} .rule.c{margin:16px auto;} /* セクション（大きな区切り）。alt / mid で背景の濃さを変える */ .sec{padding:76px 0;} .sec.alt{background:var(--ivory);} .sec.mid{background:var(--ivory-mid);} .sec-title{font-size:27px;letter-spacing:.06em;line-height:1.6;color:var(--olive);font-weight:500;} .sec-lead{color:var(--sub);font-size:14px;margin-top:8px;font-weight:300;} /* 医療広告ガイドライン用の注記（費用・期間・リスク） */ .note{font-size:12px;color:var(--mute);line-height:1.9;margin-top:18px; border-top:1px solid var(--tan);padding-top:14px;font-weight:300;} .txt-link{color:var(--olive);border-bottom:1px solid var(--olive-l);} /* -------------------------------------------------------------------------- 3. ボタン btn-gold ＝ いちばん押してほしいところ（予約） btn-olive ＝ ふつうのボタン btn-line ＝ 控えめなボタン -------------------------------------------------------------------------- */ .btn{display:inline-block;padding:14px 30px;border-radius:2px;font-weight:500;font-size:14px; letter-spacing:.08em;transition:.2s;cursor:pointer;border:1px solid transparent;} .btn-olive{background:var(--olive);color:var(--ivory-hi);} .btn-olive:hover{background:#574c1b;} .btn-gold{background:var(--gold-sheen);color:var(--ivory-hi); box-shadow:0 4px 14px rgba(106,93,33,.22);} .btn-gold:hover{filter:brightness(1.06);} .btn-line{border-color:var(--olive-l);color:var(--olive);background:transparent;} .btn-line:hover{background:var(--ivory-mid);} /* 差し色の緑。期間限定の告知など、本当に特別なときだけ */ .accent-green{background:var(--green);color:#fff;} /* -------------------------------------------------------------------------- 4. ヘッダーとメニュー（全ページ共通・各HTMLに直書きする部分） -------------------------------------------------------------------------- */ header{position:sticky;top:0;z-index:50;background:rgba(255,255,252,.94); backdrop-filter:blur(6px);border-bottom:1px solid var(--tan);} .hd{display:flex;align-items:center;justify-content:space-between;height:70px;} .logo{font-size:19px;letter-spacing:.08em;color:var(--olive);font-weight:500;line-height:1.4;} .logo small{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--olive-l);font-weight:300;} .hd-r{display:flex;align-items:center;gap:14px;} .hd-info{font-size:11px;color:var(--sub);text-align:right;line-height:1.6;font-weight:300;} .hd .btn{padding:10px 20px;font-size:12px;} .gnav{border-top:1px solid var(--tan);background:rgba(255,255,252,.96);} .gnav ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:4px; max-width:1100px;margin:0 auto;padding:0 22px;} .gnav a{display:block;padding:13px 14px;font-size:13.5px;color:var(--olive); border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;} .gnav a:hover{color:var(--olive-l);border-bottom-color:var(--tan);} .nav-toggle{display:none;background:none;border:1px solid var(--tan);border-radius:3px; padding:8px 12px;font-size:13px;color:var(--olive);cursor:pointer;font-family:inherit;} @media(max-width:980px){ .hd-info{display:none;} .nav-toggle{display:inline-block;} .gnav{display:none;} .gnav.open{display:block;} .gnav ul{flex-direction:column;gap:0;padding:6px 22px 14px;} .gnav a{padding:12px 4px;border-bottom:1px solid var(--tan);} .gnav a:hover{border-bottom-color:var(--tan);} } /* -------------------------------------------------------------------------- 5. ページ最後の予約うながし（全ページ共通） -------------------------------------------------------------------------- */ .final{background:var(--olive);color:var(--ivory-mid);text-align:center; border-top:2px solid var(--tan);} .final h2{font-size:28px;color:var(--ivory-hi);letter-spacing:.06em;font-weight:500;} .final p{font-size:14px;margin-top:10px;opacity:.92;font-weight:300;} .final .cta-row{justify-content:center;} .cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;} /* -------------------------------------------------------------------------- 6. フッター（全ページ共通） -------------------------------------------------------------------------- */ footer{background:var(--ink);color:#cfc9bb;font-size:12.5px;padding:44px 0 30px;font-weight:300;} .ft{display:grid;grid-template-columns:1.1fr 1.6fr;gap:30px;} .ft-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;} .ft-links a{padding:3px 0;color:#cfc9bb;} .ft-links a:hover{color:var(--tan);} @media(max-width:820px){.ft{grid-template-columns:1fr;}} /* -------------------------------------------------------------------------- 7. スマホの下に出る電話・予約バー（全ページ共通） -------------------------------------------------------------------------- */ .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;} .mbar a{flex:1;text-align:center;padding:16px 0;font-size:14px;font-weight:500;color:var(--ivory-hi);} .mbar .t{background:var(--olive);} .mbar .w{background:var(--olive-l);} @media(max-width:820px){.mbar{display:flex;}} /* -------------------------------------------------------------------------- 8. よくあるご質問（どのページでも使える） -------------------------------------------------------------------------- */ .faq details{border-bottom:1px solid var(--tan);padding:16px 2px;} .faq summary{cursor:pointer;font-size:15px;color:var(--olive);list-style:none; position:relative;padding-right:26px;font-weight:500;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"＋";position:absolute;right:2px;color:var(--olive-l);} .faq details[open] summary::after{content:"−";} .faq p{font-size:13.5px;color:var(--sub);margin-top:10px;font-weight:300;} /* -------------------------------------------------------------------------- 9. アクセス・診療時間（どのページでも使える） -------------------------------------------------------------------------- */ .access{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;} .access .map{display:block;border-radius:3px;overflow:hidden;border:1px solid var(--tan);background:#fff;} .access .map iframe{width:100%;height:300px;border:0;display:block;} .map-fallback{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--tan);} .map-fallback img{width:76px;} .acc-info{background:var(--ivory-hi);border:1px solid var(--tan);padding:22px 24px;} .acc-info img{width:100%;border-radius:3px;margin-bottom:14px;} .acc-info table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;} .acc-info th,.acc-info td{border:1px solid var(--tan);padding:7px 4px;text-align:center;} .acc-info th{background:var(--ivory-mid);color:var(--olive);font-weight:500;} @media(max-width:860px){.access{grid-template-columns:1fr;}} /* -------------------------------------------------------------------------- 10. ビフォーアフターのカード（症例。どのページでも使える） -------------------------------------------------------------------------- */ .cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:30px;} .case{background:var(--ivory-hi);border:1px solid var(--tan);border-radius:3px;overflow:hidden; box-shadow:0 6px 18px rgba(26,26,26,.08);transition:.2s;} .case:hover{box-shadow:0 12px 26px rgba(106,93,33,.18);transform:translateY(-2px);} .case .shot{position:relative;background:#fff;line-height:0;} .case .shot img{width:100%;height:auto;} .case .tag{position:absolute;left:0;top:0;background:rgba(26,26,26,.55);color:var(--ivory-hi); font-size:10px;letter-spacing:.16em;padding:4px 10px;line-height:1.6;font-weight:400;} .case .tag.aft{background:var(--olive);} .case .sep{height:2px;background:var(--gold-sheen);} .case figcaption{padding:13px 14px 15px;} .case figcaption b{display:block;font-size:14px;color:var(--olive);font-weight:500; letter-spacing:.05em;line-height:1.6;} .case figcaption small{display:block;font-size:11.5px;color:var(--mute);font-weight:300; margin-top:4px;line-height:1.7;} .case figcaption .term{display:inline-block;margin-top:9px;font-size:11px;color:var(--olive); border:1px solid var(--olive-l);border-radius:2px;padding:3px 9px;line-height:1.5;} @media(max-width:1000px){.cases{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.cases{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto;}} /* ========================================================================== ここから下は、トップページで使っている部分です。 ========================================================================== */ /* --- 冒頭の大きな写真 --- */ .hero{position:relative;background:url('/images/hero-bg.jpg') center/cover no-repeat;} .hero::after{content:"";position:absolute;inset:0;background:rgba(255,255,252,.58);} .hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:44px; align-items:center;padding:70px 0;} .hero h1{font-size:39px;line-height:1.65;letter-spacing:.06em;color:var(--olive);font-weight:500;} .hero p.lead{color:var(--sub);margin-top:16px;font-size:15px;font-weight:300;} .hero-photo{border-radius:3px;overflow:hidden;box-shadow:0 18px 44px rgba(26,26,26,.18); aspect-ratio:4/5;} /* 写真の顔が右寄りなので、右側を見せる */ .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:85% center;} @media(max-width:820px){ .hero-in{grid-template-columns:1fr;padding:36px 22px;gap:26px;} .hero h1{font-size:28px;} .hero-photo{order:-1;aspect-ratio:4/3;} } /* --- 信頼バー（Gold / PhD / 無料 / 分割） --- */ .trust{background:var(--olive);color:var(--ivory-mid); border-top:2px solid var(--tan);border-bottom:2px solid var(--tan);} .trust .wrap{display:flex;justify-content:space-around;gap:18px;padding:24px 22px; flex-wrap:wrap;text-align:center;} .trust b{display:block;font-size:23px;color:var(--tan);line-height:1.5;font-weight:500;} .trust span{font-size:12px;letter-spacing:.06em;opacity:.9;font-weight:300;} /* --- 目的から選ぶ（写真タイル4枚） --- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-top:34px;} .tile{position:relative;display:block;border-radius:3px;overflow:hidden; box-shadow:0 8px 20px rgba(26,26,26,.10);transition:.2s;background:var(--ivory-mid);} .tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(106,93,33,.20);} .tile img{width:100%;aspect-ratio:4/3;object-fit:cover;} /* 文字は写真に重ねず、下に置く（重ねると読みにくいため 2026年8月22日変更） */ .tile .cap{display:block;padding:15px 10px 16px;background:var(--ivory-hi); border-top:1px solid var(--tan);text-align:center;} .tile .cap b{display:block;font-size:14.5px;letter-spacing:.05em;font-weight:500; color:var(--olive);line-height:1.6;} .tile .cap small{display:block;font-size:9px;letter-spacing:.16em;color:var(--olive-l); font-weight:300;margin-top:5px;} .tile:hover .cap{background:var(--ivory-mid);} @media(max-width:820px){.tiles{grid-template-columns:1fr 1fr;gap:10px;}} /* --- 矯正ブロック --- */ .ortho-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin-top:36px;} .goldshot{border-radius:3px;overflow:hidden;background:#111; box-shadow:0 14px 34px rgba(26,26,26,.20);position:relative;} .goldshot img{width:100%;height:auto;} .goldshot figcaption{position:absolute;left:0;right:0;bottom:0; background:linear-gradient(to top,rgba(17,17,17,.85),rgba(17,17,17,0)); color:var(--tan);font-size:11.5px;letter-spacing:.08em;padding:26px 16px 12px;text-align:center;} .gold-quote{margin-top:18px;border-left:3px solid;border-image:var(--gold-sheen) 1; padding:4px 0 4px 16px;font-size:14px;color:var(--sub);font-weight:300;line-height:2.0;} .points{display:grid;gap:16px;} .point{border-left:3px solid;border-image:var(--gold-sheen) 1;padding:2px 0 2px 16px;} .point b{display:block;font-size:16px;color:var(--olive);font-weight:500;} .point p{font-size:13.5px;color:var(--sub);margin-top:2px;font-weight:300;line-height:1.9;} @media(max-width:860px){.ortho-hero{grid-template-columns:1fr;gap:24px;}} /* --- 料金 --- */ .price-row{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:34px;} .price-box{background:var(--ivory-hi);border:1px solid var(--tan);padding:26px;text-align:center; position:relative;box-shadow:0 6px 18px rgba(106,93,33,.08);} .price-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold-sheen);} .price-box .big{font-size:40px;color:var(--olive);letter-spacing:.02em;line-height:1.4;font-weight:500;} .price-box .mo{font-size:13px;color:var(--sub);font-weight:300;} .price-side{background:var(--ivory-hi);border:1px solid var(--tan);padding:22px 24px; font-size:13.5px;color:var(--sub);font-weight:300;} .price-side p{margin:4px 0;} @media(max-width:820px){.price-row{grid-template-columns:1fr;}} /* --- 白く、清潔に（ホワイトニング・クリーニング） --- */ .clean{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;} .cleancard{background:var(--ivory-hi);border:1px solid var(--tan);border-radius:3px;overflow:hidden; display:flex;flex-direction:column;} .cleancard img{width:100%;aspect-ratio:3/2;object-fit:cover;} .cleancard .tx{padding:22px 24px 18px;} .cleancard h3{font-size:19px;color:var(--olive);letter-spacing:.05em;font-weight:500;} .cleancard p{font-size:13.5px;color:var(--sub);margin-top:8px;font-weight:300;} .cleancard .foot{margin-top:auto;padding:0 24px 24px;} /* 「ただいま予約が取りやすい時期です」のような、その時だけの一言 */ .tagline{display:inline-block;background:var(--ivory-mid);color:var(--olive); border:1px solid var(--olive-l);font-size:11px;font-weight:500; padding:5px 12px;border-radius:2px;letter-spacing:.06em;margin-bottom:10px;} @media(max-width:820px){.clean{grid-template-columns:1fr;}} /* --- セラミック・審美の3枚カード --- */ .bmenu{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;} .bcard{background:var(--ivory-hi);border:1px solid var(--tan);border-radius:3px;overflow:hidden; display:flex;flex-direction:column;} .bcard .ph{aspect-ratio:4/3;overflow:hidden;background:#fff;} .bcard .ph img{width:100%;height:100%;object-fit:cover;} /* 縦長の症例写真をそのまま見せるとき */ .bcard .ph.free{aspect-ratio:auto;padding:10px 14px;} .bcard .ph.free img{height:auto;object-fit:contain;} /* before / after を上下に並べるとき */ .bcard .ph.split{aspect-ratio:auto;} .bcard .ph.split .shot{position:relative;line-height:0;background:#fff;} .bcard .ph.split .shot img{width:100%;height:auto;} .bcard .tag{position:absolute;left:0;top:0;background:rgba(26,26,26,.55);color:var(--ivory-hi); font-size:10px;letter-spacing:.16em;padding:4px 10px;line-height:1.6;} .bcard .tag.aft{background:var(--olive);} .bcard .sep{height:2px;background:var(--gold-sheen);} .bcard .tx{padding:18px 20px 22px;} .bcard h3{font-size:16.5px;color:var(--olive);font-weight:500;} .bcard p{font-size:13px;color:var(--sub);margin-top:6px;font-weight:300;} .mini-note{display:inline-block;margin-top:10px;font-size:10.5px;color:var(--mute);font-weight:300;} @media(max-width:860px){.bmenu{grid-template-columns:1fr;}} /* --- 院長 --- */ .doctor{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;} .doctor .ph{border-radius:3px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 14px 34px rgba(26,26,26,.16);} .doctor .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%;} .doctor .word{color:var(--sub);font-size:14px;font-weight:300;} .doctor .about{color:var(--sub);font-size:13.5px;margin-top:14px;font-weight:300;} .career{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;} .career span{border:1px solid var(--olive-l);color:var(--olive);font-size:11.5px; padding:6px 12px;border-radius:2px;font-weight:400;} @media(max-width:820px){ .doctor{grid-template-columns:1fr;gap:24px;} .doctor .ph{max-width:320px;margin:0 auto;aspect-ratio:4/3;} } /* ========================================================================== ここから下は「下層ページの共通部品」です。クラス名は pg- で始めています。 （pg ＝ page。冒頭・数字の並び・手順・料金・箇条書き・注意書きなど、 どの治療ページでも同じ形で使えるものをここにまとめています） 2026年8月21日、咬筋ボトックスのページ用に bt- という名前で作りました。 2026年8月22日、他のページでもそのまま使えると分かったので pg- に改名しました。 使っているページ：/botox/ /cleaning/ 新しい治療ページを作るときは、まずここの部品でできないか見てください。 ページ固有のものだけを、このファイルの下に足していきます。 ========================================================================== */ /* --- パンくず --- */ .crumb{font-size:11.5px;color:var(--mute);font-weight:300;padding:14px 0 0;letter-spacing:.04em;} .crumb a{color:var(--olive-l);} .crumb a:hover{border-bottom:1px solid var(--tan);} /* --- 冒頭 --- */ .pg-hero{background:var(--ivory-mid);border-bottom:1px solid var(--tan);} .pg-hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center;padding:56px 0 62px;} .pg-hero h1{font-size:33px;line-height:1.68;letter-spacing:.05em;color:var(--olive);font-weight:500;} .pg-hero h1 small{display:block;font-size:12px;letter-spacing:.2em;color:var(--olive-l); margin-bottom:12px;font-weight:400;} .pg-hero .lead{color:var(--sub);margin-top:18px;font-size:14.5px;font-weight:300;line-height:2.05;} .pg-hero-photo{border-radius:3px;overflow:hidden;aspect-ratio:4/3; box-shadow:0 16px 40px rgba(26,26,26,.16);} .pg-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%;} @media(max-width:860px){ .pg-hero-in{grid-template-columns:1fr;padding:30px 0 38px;gap:26px;} .pg-hero h1{font-size:25px;} .pg-hero-photo{order:-1;} } /* --- 小見出しと本文（セクションの中で使う） --- */ .pg-h3{font-size:18px;color:var(--olive);font-weight:500;letter-spacing:.04em;line-height:1.75;} .pg-p{font-size:13.5px;color:var(--sub);font-weight:300;line-height:2.05;margin-top:12px;} .pg-p b,.pg-list b,.pg-def dd b{color:var(--olive);font-weight:500;} /* --- 2段組み（写真と文章） --- */ .pg-split{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;margin-top:34px;} .pg-split.rev{grid-template-columns:1fr 300px;} @media(max-width:860px){ .pg-split,.pg-split.rev{grid-template-columns:1fr;gap:26px;} .pg-split .pg-fig{max-width:360px;margin:0 auto;} } /* --- 2列の並び（症状・注意事項など） --- */ .pg-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:26px;} @media(max-width:820px){.pg-2col{grid-template-columns:1fr;}} /* --- 箇条書き --- */ .pg-list{list-style:none;display:grid;gap:11px;margin-top:16px;} .pg-list li{position:relative;padding-left:24px;font-size:13.5px;color:var(--sub); font-weight:300;line-height:1.95;} .pg-list li::before{content:"";position:absolute;left:6px;top:12px;width:5px;height:5px; border-radius:50%;background:var(--olive-l);} .pg-list.x li::before{content:"×";left:3px;top:0;width:auto;height:auto;border-radius:0; background:none;color:var(--olive);font-size:13px;} /* --- 写真・図の枠 --- */ .pg-fig{background:var(--ivory-hi);border:1px solid var(--tan);border-radius:3px;overflow:hidden;} .pg-fig img{width:100%;} .pg-fig figcaption{padding:11px 15px;font-size:11.5px;color:var(--mute);font-weight:300; line-height:1.85;border-top:1px solid var(--tan);background:var(--ivory-mid);} /* --- 数字を3つ並べる（効き始め・持続など） --- */ .pg-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:32px; background:var(--tan);border:1px solid var(--tan);} .pg-facts div{background:var(--ivory-hi);padding:26px 16px;text-align:center;} .pg-facts small{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--olive-l); font-weight:400;text-transform:uppercase;} .pg-facts b{display:block;font-size:25px;color:var(--olive);font-weight:500;line-height:1.6;margin-top:8px;} .pg-facts em{display:block;font-style:normal;font-size:12px;color:var(--mute); margin-top:6px;font-weight:300;line-height:1.8;} @media(max-width:640px){.pg-facts{grid-template-columns:1fr;}} /* --- 使用製剤と施術者（製品写真＋認定証） --- */ .pg-media{display:grid;grid-template-columns:250px 1fr;gap:24px;margin-top:30px;align-items:start;} @media(max-width:760px){.pg-media{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}} /* --- 大事なお知らせの枠（適応外使用について） --- */ .pg-notice{background:var(--ivory-hi);border:1px solid var(--olive-l);padding:32px 34px; margin-top:34px;position:relative;} .pg-notice::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-sheen);} .pg-notice>b{display:block;font-size:16px;color:var(--olive);font-weight:500;letter-spacing:.04em;} @media(max-width:640px){.pg-notice{padding:24px 20px;}} .pg-def{display:grid;gap:0;margin-top:18px;} .pg-def>div{display:grid;grid-template-columns:210px 1fr;gap:20px; border-top:1px solid var(--tan);padding:15px 0;} .pg-def>div:last-child{border-bottom:1px solid var(--tan);} .pg-def dt{font-size:13px;color:var(--olive);font-weight:500;line-height:1.85;} .pg-def dd{font-size:13px;color:var(--sub);font-weight:300;line-height:2.0;} @media(max-width:760px){.pg-def>div{grid-template-columns:1fr;gap:4px;}} /* --- 治療の流れ --- */ .pg-flow{margin-top:34px;border-top:1px solid var(--tan);} .pg-step{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:26px 2px; border-bottom:1px solid var(--tan);align-items:start;} .pg-step .no{font-size:10.5px;letter-spacing:.2em;color:var(--olive-l);font-weight:400; text-transform:uppercase;line-height:1.8;} .pg-step .no b{display:block;font-size:27px;color:var(--olive);font-weight:500;line-height:1.3;} .pg-step h3{font-size:16px;color:var(--olive);font-weight:500;letter-spacing:.04em;line-height:1.7;} .pg-step p{font-size:13.5px;color:var(--sub);font-weight:300;line-height:2.0;margin-top:7px;} .pg-step .when{display:inline-block;margin-top:11px;font-size:11px;color:var(--olive); border:1px solid var(--olive-l);border-radius:2px;padding:4px 11px;line-height:1.5;font-weight:400;} @media(max-width:640px){ .pg-step{grid-template-columns:1fr;gap:10px;padding:22px 2px;} .pg-step .no b{font-size:22px;display:inline;margin-right:8px;} } /* --- 料金の表 --- */ .pg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px;} .pg-price{width:100%;min-width:460px;border-collapse:collapse;background:var(--ivory-hi);font-size:13.5px;} .pg-price caption{caption-side:bottom;text-align:left;font-size:11.5px;color:var(--mute); font-weight:300;line-height:1.9;padding-top:12px;} .pg-price th,.pg-price td{border:1px solid var(--tan);padding:17px 18px;vertical-align:middle;} .pg-price thead th{background:var(--olive);color:var(--ivory-mid);font-weight:500; font-size:12px;letter-spacing:.12em;text-align:left;} .pg-price tbody th{text-align:left;color:var(--olive);font-weight:500;background:var(--ivory-mid); line-height:1.8;} .pg-price tbody th small{display:block;font-size:11.5px;color:var(--mute);font-weight:300;margin-top:3px;} .pg-price td{text-align:right;color:var(--sub);font-weight:300;white-space:nowrap;} .pg-price .yen{font-size:21px;color:var(--olive);font-weight:500;letter-spacing:.02em;} .pg-price .free{font-size:16px;color:var(--olive);font-weight:500;} /* --- 表の下に置く一言 --- */ .pg-under{margin-top:20px;background:var(--ivory-hi);border:1px solid var(--tan); border-left:3px solid var(--olive-l);padding:18px 22px; font-size:13px;color:var(--sub);font-weight:300;line-height:2.0;} .pg-under b{color:var(--olive);font-weight:500;} /* スマホでは料金表を横スクロールさせず、そのまま収める */ @media(max-width:520px){ .pg-price{min-width:0;} .pg-price th,.pg-price td{padding:13px 12px;} .pg-price tbody th small{font-size:11px;} .pg-price .yen{font-size:18px;} .pg-price .free{font-size:15px;} } /* ========================================================================== ご予約・アクセスのページで使っている部分（クラス名は ac- で始まります） 2026年8月22日 ／ /access/index.html 専用 ========================================================================== */ .sec-lead.center{max-width:680px;margin-left:auto;margin-right:auto;} /* --- 冒頭（写真と文章の2段組み） --- */ .ac-hero{background:var(--ivory-mid);border-bottom:1px solid var(--tan);} .ac-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:56px 0 62px;} .ac-hero h1{font-size:33px;line-height:1.6;letter-spacing:.05em;color:var(--olive);font-weight:500;} .ac-hero h1 small{display:block;font-size:12px;letter-spacing:.2em;color:var(--olive-l); margin-bottom:12px;font-weight:400;} .ac-hero .lead{color:var(--sub);margin-top:18px;font-size:14.5px;font-weight:300;line-height:2.05;} .ac-hero-photo{border-radius:3px;overflow:hidden;aspect-ratio:4/3; box-shadow:0 16px 40px rgba(26,26,26,.16);} .ac-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 34%;} .ac-quick{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} /* --- ご予約の3つの入口（罫線1本でつなぐ） --- */ .ac-book{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:36px; background:var(--tan);border:1px solid var(--tan);} .ac-card{background:var(--ivory-hi);padding:34px 30px 32px;display:flex;flex-direction:column; transition:background .2s;} .ac-card:hover{background:var(--ivory);} .ac-card-no{font-size:11px;letter-spacing:.26em;color:var(--olive-l);font-weight:400;} .ac-card h3{font-size:18px;color:var(--olive);font-weight:500;letter-spacing:.05em; margin-top:12px;padding-bottom:15px;border-bottom:1px solid var(--tan);} .ac-card p{font-size:13px;color:var(--sub);font-weight:300;line-height:2.0;margin-top:15px;flex:1;} .ac-card .btn{margin-top:22px;text-align:center;} /* --- 診療時間 --- */ .ac-hours{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start;margin-top:36px;} .ac-hours table{width:100%;border-collapse:collapse;background:var(--ivory-hi);} .ac-hours th,.ac-hours td{border:1px solid var(--tan);padding:14px 4px;text-align:center;} .ac-hours th{background:var(--ivory-mid);color:var(--olive);font-weight:500; font-size:12.5px;letter-spacing:.08em;} .ac-hours td{color:var(--olive);font-size:17px;line-height:1;} .ac-hours td.x{color:var(--warm);font-size:15px;} .ac-hours-note{list-style:none;} .ac-hours-note li{font-size:13.5px;color:var(--sub);font-weight:300;line-height:1.9; padding:10px 0 10px 16px;border-left:3px solid;border-image:var(--gold-sheen) 1;margin-bottom:10px;} .ac-hours-note b{display:block;color:var(--olive);font-weight:500;font-size:12.5px; letter-spacing:.08em;margin-bottom:2px;} /* --- 小見出し（道案内の上など） --- */ .ac-sub{font-size:17px;color:var(--olive);font-weight:500;letter-spacing:.05em;margin-top:44px;} /* --- お車での道案内（3つ横並び） --- */ .ac-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:18px; background:var(--tan);border:1px solid var(--tan);} .ac-step{background:var(--ivory-hi);padding:28px 26px 30px;} .ac-step .no{font-size:11px;letter-spacing:.24em;color:var(--olive-l);font-weight:400;} .ac-step .no b{display:block;font-size:30px;color:var(--olive);font-weight:500;line-height:1.25;} .ac-step h4{font-size:15px;color:var(--olive);font-weight:500;letter-spacing:.05em; margin-top:12px;padding-bottom:13px;border-bottom:1px solid var(--tan);} .ac-step p{font-size:13px;color:var(--sub);font-weight:300;line-height:2.0;margin-top:14px;} .ac-step p b{color:var(--olive);font-weight:500;} /* --- 印刷用PDFの案内 --- */ .ac-pdf{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap; background:var(--ivory-hi);border:1px solid var(--tan);border-left:3px solid; border-image:var(--gold-sheen) 1;padding:28px 30px;margin-top:34px;} .ac-pdf b{display:block;font-size:16px;color:var(--olive);font-weight:500;letter-spacing:.04em;} .ac-pdf p{font-size:13px;color:var(--sub);font-weight:300;line-height:1.9;margin-top:7px;max-width:520px;} @media(max-width:860px){ .ac-hero-in{grid-template-columns:1fr;padding:30px 0 38px;gap:26px;} .ac-hero h1{font-size:25px;} .ac-hero-photo{order:-1;} .ac-book{grid-template-columns:1fr;} .ac-hours{grid-template-columns:1fr;} .ac-steps{grid-template-columns:1fr;} .ac-pdf{flex-direction:column;align-items:flex-start;} } /* --- ご予約の目安の表（/access/ の #wait） 2026年8月22日追加 --- */ .ac-wait{width:100%;border-collapse:collapse;margin-top:30px; background:var(--ivory-hi);border:1px solid var(--tan);} .ac-wait th,.ac-wait td{border:1px solid var(--tan);padding:14px 18px;text-align:left;font-size:14px;} .ac-wait th{background:var(--ivory-mid);color:var(--olive);font-weight:500; font-size:12.5px;letter-spacing:.08em;} .ac-wait td{color:var(--sub);font-weight:300;line-height:1.7;} .ac-wait td small{display:block;font-size:11.5px;color:var(--mute);font-weight:300;margin-top:3px;} .ac-wait td:last-child{text-align:right;white-space:nowrap;} .ac-wait b{font-weight:500;font-size:15px;color:var(--olive);} .ac-wait b.ok{color:var(--green);} @media(max-width:620px){ .ac-wait th,.ac-wait td{padding:11px 12px;font-size:13px;} .ac-wait b{font-size:13.5px;} } /* --- タップして開く枠（/access/ のご予約の目安） 2026年8月22日追加 --- */ .ac-fold{margin-top:30px;border:1px solid var(--tan);background:var(--ivory-hi);} .ac-fold summary{cursor:pointer;padding:17px 22px;font-size:14.5px;color:var(--olive); font-weight:500;letter-spacing:.03em;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:12px;} .ac-fold summary::-webkit-details-marker{display:none;} .ac-fold summary::after{content:'＋';color:var(--olive-l);font-size:15px;line-height:1;} .ac-fold[open] summary::after{content:'−';} .ac-fold summary:hover{background:var(--ivory-mid);} .ac-fold .in{padding:0 22px 20px;} .ac-fold .ac-wait{margin-top:4px;} .ac-fold .note{margin-top:12px;} /* --- 「症例をもっと見る」の開閉ボタン 2026年8月22日追加 --- */ .more{margin-top:24px;text-align:center;} .more summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none; border:1px solid var(--olive-l);color:var(--olive);background:transparent; padding:13px 30px;border-radius:2px;font-size:14px;font-weight:500;letter-spacing:.04em; transition:border-color .2s, background .2s;} .more summary::-webkit-details-marker{display:none;} .more summary::after{content:'＋';color:var(--olive-l);font-size:15px;line-height:1;} .more[open] summary::after{content:'−';} .more summary:hover{border-color:var(--olive);background:var(--ivory-mid);} .more .cases{text-align:left;} /* --- 長さ対策（2026年8月22日）--- */ /* トップのアクセス区画は要約だけ。地図は /access/ にある */ .access.one{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;} /* スマホでは区画の余白を詰める。9区画あるので効きが大きい（76px→44px） */ @media(max-width:820px){ .sec{padding:44px 0;} .sec-title{font-size:23px;} .case figcaption{padding:10px 12px 12px;} .cases{gap:12px;margin-top:22px;} .tiles{margin-top:22px;} } /* ========================================================================== スマホ表示の整え（2026年8月22日） ・ヘッダーの文字が折り返して崩れていたのを、詰めて1行に収める ・信頼バーの4項目が 3＋1 に割れていたのを、2×2に揃える ========================================================================== */ @media(max-width:520px){ .hd{height:62px;} .logo{font-size:16.5px;white-space:nowrap;letter-spacing:.06em;} .logo small{font-size:8px;letter-spacing:.1em;white-space:nowrap;} .hd-r{gap:8px;} .hd .btn{padding:9px 15px;font-size:12px;white-space:nowrap;} .nav-toggle{padding:9px 11px;font-size:12px;white-space:nowrap;} /* 4項目を2列2行にそろえる */ .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding:22px;} .trust b{font-size:20px;} .trust span{font-size:11.5px;} } /* -------------------------------------------------------------------------- 個人情報の取り扱いのページで使っている部分（クラス名は pv- で始めています） 置き場所：public_html/privacy/index.html -------------------------------------------------------------------------- */ .pv{max-width:820px;margin:44px auto 0;} .pv h2{font-size:19px;color:var(--olive);font-weight:500;letter-spacing:.05em;line-height:1.7; margin:46px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--tan);} .pv h3{font-size:15px;color:var(--olive-l);font-weight:500;letter-spacing:.04em;margin:24px 0 0;} .pv p{font-size:14.5px;color:var(--sub);font-weight:300;margin-top:12px;} .pv p b{color:var(--olive);font-weight:500;} .pv ul{margin-top:10px;} .pv li{font-size:14.5px;color:var(--sub);font-weight:300;line-height:1.95; list-style:none;position:relative;padding-left:17px;margin-top:4px;} .pv li::before{content:'・';position:absolute;left:0;color:var(--olive-l);} .pv li .mini-note{display:block;margin-top:2px;} /* 冒頭のひとことと、連絡先の囲み */ .pv-box{background:var(--ivory-mid);border:1px solid var(--tan);border-radius:3px; padding:24px 26px;margin-top:18px;} .pv-box p:first-child{margin-top:0;} /* 医院の情報（名称・所在地・電話・管理責任者） */ .pv-dl{margin-top:14px;display:grid;grid-template-columns:120px 1fr;gap:10px 18px;} .pv-dl dt{font-size:13.5px;color:var(--olive);font-weight:500;letter-spacing:.04em;} .pv-dl dd{font-size:14.5px;color:var(--sub);font-weight:300;} .pv-date{font-size:12px;color:var(--mute);font-weight:300;text-align:right; margin-top:48px;border-top:1px solid var(--tan);padding-top:16px;} @media(max-width:600px){ .pv{margin-top:32px;} .pv h2{font-size:17px;margin-top:38px;} .pv-dl{grid-template-columns:1fr;gap:0;} .pv-dl dt{margin-top:12px;} .pv-box{padding:20px;} } /* -------------------------------------------------------------------------- 比べる表（料金以外の表）。pg-price と同じ見た目で、中身を左寄せにしたものです。 インビザラインとワイヤー矯正の比較など、文章が入る表に使います。 2026年8月22日 追加 -------------------------------------------------------------------------- */ .pg-table{width:100%;min-width:460px;border-collapse:collapse;background:var(--ivory-hi);font-size:13.5px;} .pg-table caption{caption-side:bottom;text-align:left;font-size:11.5px;color:var(--mute); font-weight:300;line-height:1.9;padding-top:12px;} .pg-table th,.pg-table td{border:1px solid var(--tan);padding:15px 16px;vertical-align:top;} .pg-table thead th{background:var(--olive);color:var(--ivory-mid);font-weight:500; font-size:12px;letter-spacing:.1em;text-align:left;} .pg-table tbody th{text-align:left;color:var(--olive);font-weight:500;background:var(--ivory-mid); line-height:1.8;white-space:nowrap;} .pg-table td{color:var(--sub);font-weight:300;line-height:1.85;} .pg-table .ok{color:var(--olive);font-weight:500;} @media(max-width:520px){ .pg-table{min-width:420px;} .pg-table th,.pg-table td{padding:12px 11px;font-size:12.5px;} } /* -------------------------------------------------------------------------- ご説明ページ（/guide/）の入口で使う、リンクになる箱 2026年8月22日 追加 -------------------------------------------------------------------------- */ .gd-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:34px;} .gd-card{display:block;background:var(--ivory-hi);border:1px solid var(--tan);border-radius:3px; padding:26px 28px;transition:.2s;position:relative;} .gd-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-sheen);} .gd-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(106,93,33,.16);} .gd-card small{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--olive-l); text-transform:uppercase;font-weight:400;} .gd-card b{display:block;font-size:18px;color:var(--olive);font-weight:500;margin-top:8px;letter-spacing:.04em;} .gd-card p{font-size:13px;color:var(--sub);font-weight:300;margin-top:8px;line-height:1.95;} .gd-card span.go{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--olive-l);}