/* ============================================================ * KT CLINIC — Phase 3-B 医師紹介ページ CSS * archive-doctor.php / single-doctor.php 共通スタイル * Phase 3-B / 2026-05-25 * ============================================================ */ .kt-doctor { --c-text: #1A1F2E; --c-sub: #2A3142; --c-meta: #5A6373; --c-light: #888; --c-border: #E8EAED; --c-border-soft: #F0F1F3; --c-bg-soft: #F7F8FA; --c-bg-softer: #FAFAFA; --c-gyn: #E08AA0; --c-gyn-deep: #C16A82; --c-gyn-soft: #FBECF0; --c-derm: #7DC9A8; --c-derm-deep: #56AC85; --c-derm-soft: #E8F6EE; --c-cos: #C9A96E; --c-cos-deep: #9C7E47; --c-cos-soft: #F7F1E3; --font-sans: 'Noto Sans JP', sans-serif; --font-serif: 'Noto Serif JP', serif; --font-en: 'Inter', sans-serif; color: var(--c-text); font-family: var(--font-sans); font-weight: 400; line-height: 1.8; } .kt-doctor *, .kt-doctor *::before, .kt-doctor *::after { box-sizing: border-box; } .kt-doctor a { color: inherit; text-decoration: none; } .kt-doctor img { display: block; max-width: 100%; height: auto; } .kt-doctor ul, .kt-doctor ol, .kt-doctor dl { padding: 0; margin: 0; } .kt-doctor li { list-style: none; } /* ============================================================ * 共通：科目タグ * ============================================================ */ .kt-doctor-target { display: inline-block; font-family: var(--font-en); font-size: 10px; padding: 4px 10px; letter-spacing: 0.15em; text-transform: uppercase; } /* 科目チップの色は inc/specialties.php が に出す変数を使う。（2026-08-01） 出どころはカレンダーの配色（inc/calendar.php の kt_get_specialties()）1箇所。 ★ ここに色の値を書かないこと。トップページと食い違う原因になる。 形成外科（pla）と美容外科（cos）は別の色。以前は同じ色にまとめていた。 */ .kt-doctor-target--gyn { background: var(--kt-gyn-bg); color: var(--kt-gyn-tx); } .kt-doctor-target--derm { background: var(--kt-derm-bg); color: var(--kt-derm-tx); } .kt-doctor-target--pla { background: var(--kt-pla-bg); color: var(--kt-pla-tx); } .kt-doctor-target--cos { background: var(--kt-cos-bg); color: var(--kt-cos-tx); } /* ============================================================ * Archive: HERO * ============================================================ */ .kt-doctor-archive-hero { padding-bottom: 56px; /* 上と左右は page-head.css が持つ */ text-align: center; /* 2026-07-31 白ベースに統一。 もとは linear-gradient(180deg, #FAFAFA 0%, #fff 100%) が入っており、 医師紹介と医療コラムだけ見出し周りが灰色がかっていた。 キャンペーン・お知らせ・よくあるご質問（page-archives.css の .kt-faq-hero / .kt-news-hero / .kt-campaign-hero）は #fff なので、そちらに揃える。 */ background: #fff; } /* 英字と見出しの体裁は assets/css/page-head.css が持つ。ここでは指定しない。（2026-07-31） */ .kt-doctor-archive-subtitle { font-size: 14px; color: var(--c-sub); line-height: 1.9; margin: 0; } /* ============================================================ * Archive: DOCTOR GRID * ============================================================ */ .kt-doctor-list-section { padding: 80px 64px 120px; /* 2026-07-31 白ベースに統一。もとは #FAFAFA の薄いグレーだった。 カードは 0.5px の枠線を持っているので、白地でも輪郭は残る。 */ background: #fff; } .kt-doctor-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .kt-doctor-card { background: #fff; border: 0.5px solid var(--c-border); display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; } .kt-doctor-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(26, 31, 46, 0.08); } .kt-doctor-card-img { aspect-ratio: 3/4; background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-cos-soft) 100%); overflow: hidden; display: block; } .kt-doctor-card-img img { width: 100%; height: 100%; object-fit: cover; } .kt-doctor-card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .kt-doctor-card-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .kt-doctor-card-name { font-size: 20px; font-weight: 500; color: var(--c-text); margin: 0 0 6px; letter-spacing: 0.05em; } .kt-doctor-card-name a { color: inherit; } .kt-doctor-card-position { font-size: 12px; color: var(--c-meta); letter-spacing: 0.1em; margin: 0 0 16px; } .kt-doctor-card-quals { margin: 0 0 16px; padding-top: 16px; border-top: 0.5px solid var(--c-border-soft); } .kt-doctor-card-quals li { font-size: 12px; color: var(--c-sub); line-height: 1.7; padding: 2px 0; } .kt-doctor-card-quals li::before { content: '・'; color: var(--c-cos-deep); margin-right: 2px; } .kt-doctor-card-cta { font-size: 12px; color: var(--c-cos-deep); letter-spacing: 0.1em; font-family: var(--font-en); margin-top: auto; } .kt-doctor-empty { text-align: center; color: var(--c-sub); padding: 80px 0; } /* ============================================================ * Single: HEADER * ============================================================ */ .kt-doctor-single-header { padding: 96px 64px 64px; /* 2026-08-01 白ベースに統一。もとは #FAFAFA から白へのグラデーション。 医師紹介の一覧ページと揃えた。 */ background: #fff; } .kt-doctor-single-header-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; } .kt-doctor-single-photo { aspect-ratio: 3/4; background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-cos-soft) 100%); overflow: hidden; } .kt-doctor-single-photo img { width: 100%; height: 100%; object-fit: cover; } .kt-doctor-single-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .kt-doctor-single-position { font-size: 13px; color: var(--c-cos-deep); letter-spacing: 0.15em; font-family: var(--font-en); text-transform: uppercase; margin: 0 0 12px; } .kt-doctor-single-name { font-size: 36px; font-weight: 500; color: var(--c-text); margin: 0; letter-spacing: 0.05em; line-height: 1.4; } .kt-doctor-single-furigana { display: block; font-family: var(--font-en); font-size: 14px; color: var(--c-meta); letter-spacing: 0.2em; font-weight: 400; margin-top: 8px; text-transform: uppercase; } /* ============================================================ * Single: SECTIONS * ============================================================ */ .kt-doctor-single-section { padding: 64px 64px; background: #fff; } .kt-doctor-single-section--alt { /* 2026-08-01 白ベースに統一。もとは #FAFAFA。 セクションの区切りは .kt-doctor-single-h2 の見出しが担う。 */ background: #fff; } .kt-doctor-single-inner { max-width: 800px; margin: 0 auto; } .kt-doctor-single-h2 { text-align: center; font-size: 24px; font-weight: 500; color: var(--c-text); letter-spacing: 0.1em; margin: 0 0 40px; } .kt-doctor-single-h2-en { display: block; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; color: var(--c-cos-deep); text-transform: uppercase; font-weight: 400; margin-bottom: 8px; } /* メッセージ */ .kt-doctor-single-message { font-size: 15px; line-height: 2; color: var(--c-sub); } .kt-doctor-single-message p { margin: 0 0 20px; } /* 経歴 */ .kt-doctor-single-career { display: flex; flex-direction: column; gap: 0; } .kt-doctor-single-career-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 18px 0; border-bottom: 0.5px solid var(--c-border); } .kt-doctor-single-career-item:last-child { border-bottom: none; } .kt-doctor-single-career-item dt { font-family: var(--font-en); font-size: 13px; color: var(--c-cos-deep); letter-spacing: 0.1em; font-weight: 500; } .kt-doctor-single-career-item dd { font-size: 14px; color: var(--c-sub); line-height: 1.8; margin: 0; } /* 追加のご紹介（経歴の下） 2026-08-05 新規。セクションのタイトルは出さないので、見出しの左に ゴールドの短い縦線を置いて本文と区別する。 この縦線は料金一覧の施術名（.prc-trt-h3）と同じ扱い。 */ .kt-doctor-single-extra + .kt-doctor-single-extra { margin-top: 40px; } .kt-doctor-single-extra-t { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.7; color: var(--c-text); margin: 0 0 12px; padding-left: 14px; position: relative; } .kt-doctor-single-extra-t::before { content: ''; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; background: var(--c-cos); } .kt-doctor-single-extra-b { font-size: 14px; color: var(--c-sub); line-height: 2; padding-left: 14px; } .kt-doctor-single-extra-b p { margin: 0 0 16px; } .kt-doctor-single-extra-b p:last-child { margin-bottom: 0; } .kt-doctor-single-extra-b ul { margin: 0 0 16px; padding-left: 1.2em; } .kt-doctor-single-extra-b li { margin-bottom: 6px; } /* 資格 */ .kt-doctor-single-quals li { font-size: 14px; color: var(--c-sub); padding: 10px 0; border-bottom: 0.5px solid var(--c-border-soft); line-height: 1.7; } .kt-doctor-single-quals li::before { content: '◆'; color: var(--c-cos); margin-right: 12px; font-size: 10px; vertical-align: middle; } .kt-doctor-single-quals li:last-child { border-bottom: none; } /* ============================================================ * Single: BACK * ============================================================ */ .kt-doctor-single-back { text-align: center; padding: 32px 32px 80px; margin: 0; background: #fff; } .kt-doctor-back-link { display: inline-block; padding: 14px 32px; border: 0.5px solid var(--c-text); color: var(--c-text); font-size: 13px; letter-spacing: 0.1em; border-radius: 2px; transition: all 0.2s; } .kt-doctor-back-link:hover { background: var(--c-text); color: #fff; } /* ============================================================ * CTA（無料カウンセリング訴求なし） * ============================================================ */ /* ============================================================ * Responsive * ============================================================ */ @media (max-width: 1024px) { .kt-doctor-archive-hero { padding: 64px 40px 40px; } .kt-doctor-list-section { padding: 56px 40px 80px; } .kt-doctor-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .kt-doctor-single-header { padding: 64px 40px 48px; } .kt-doctor-single-header-inner { grid-template-columns: 280px 1fr; gap: 48px; } .kt-doctor-single-name { font-size: 28px; } .kt-doctor-single-section { padding: 48px 40px; } } @media (max-width: 768px) { .kt-doctor-archive-hero { padding: 48px 20px 32px; } .kt-doctor-list-section { padding: 40px 20px 64px; } .kt-doctor-grid { grid-template-columns: 1fr; gap: 20px; } .kt-doctor-single-header { padding: 48px 20px 32px; } .kt-doctor-single-header-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; } .kt-doctor-single-photo { max-width: 280px; margin: 0 auto; } .kt-doctor-single-targets { justify-content: center; } .kt-doctor-single-name { font-size: 24px; } .kt-doctor-single-section { padding: 40px 20px; } .kt-doctor-single-h2 { font-size: 20px; } .kt-doctor-single-extra + .kt-doctor-single-extra { margin-top: 32px; } .kt-doctor-single-extra-t { font-size: 16px; } .kt-doctor-single-career-item { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .kt-doctor-single-back { padding: 24px 20px 56px; } }