.about-page { color:#371a11; background:#fff; }
.about-page .header nav .is-current { color:#37afe5; }
.about-hero { position:relative; display:grid; height:349px; min-height:349px; margin:0 30px; overflow:hidden; place-items:center; background:#eef3f4; color:#fff; text-align:center; }
.about-hero > img { position:absolute; inset:0; display:block; width:100%; height:349px; object-fit:cover; filter:brightness(1.13) contrast(.94); }
.about-hero-title { position:relative; z-index:1; }
.about-hero-title p { margin:0 0 6px; color:#fff; font-size:16px; font-weight:400; line-height:1.4; }
.about-hero-title h1 { margin:7px 0 0; color:#fff; font:600 34px/1.45 "Noto Serif JP",serif; letter-spacing:.08em; }
.about-breadcrumb { max-width:1140px; margin:50px auto 0; padding:0 20px; color:#85888c; font-size:11px; font-weight:400; }
.about-breadcrumb a { color:#50bce8; font-weight:400; }
.about-breadcrumb span { margin:0 10px; }
.about-breadcrumb-current { margin:0!important; font-size:11px; font-weight:400; }
.about-message { padding:92px 20px 80px; text-align:center; }
.about-message h2 { margin:0 0 30px; color:#6fa8e8; font:500 24px/1.55 "Noto Serif JP",serif; letter-spacing:.04em; }
.about-message p { margin:0; font-family:"Noto Serif JP",serif; font-size:14px; font-weight:600; line-height:2.1; }
.about-section { max-width:1140px; margin:0 auto; padding:0 20px; }
.about-section-title { margin-bottom:62px; text-align:center; }
.about-section-title span { color:#50bce8; font-size:12px; }
.about-section-title h2 { margin:10px 0 0; font:600 31px/1.2 "Noto Serif JP",serif; letter-spacing:.05em; }
.about-doctor-grid { display:grid; max-width:950px; grid-template-columns:1fr 1fr; gap:0; margin:0 auto; }
.about-doctor { min-width:0; padding:0 50px 20px; }
.about-doctor + .about-doctor { border-left:1px solid #ddd; }
.about-doctor-head { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.about-doctor-head img { display:block; width:180px; max-width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.about-role { font-size:14px; font-weight:700; }
.about-doctor h3 { margin:10px 0 3px; font:700 24px/1.2 "Noto Serif JP",serif; }
.about-doctor-head small { color:#b4a39c; font-size:11px; }
.about-history { margin-top:22px; font-size:13px; line-height:1.5; }
.about-history b { display:inline-block; margin-bottom:7px; padding:5px 13px; border-radius:4px; background:#f8f6f5; }
.about-history p { margin:5px 0; }
.about-clinic-section { padding-top:95px; padding-bottom:170px; }
.about-clinic-section .about-section-title { margin-bottom:68px; }
.about-clinic-group { margin-bottom:42px; }
.about-group-title { display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.about-group-title h3 { margin:0; font:500 23px/1.2 "Noto Serif JP",serif; letter-spacing:.12em; white-space:nowrap; }
.about-group-title span { color:#b49a88; font:13px/1 Arial,sans-serif; letter-spacing:.04em; white-space:nowrap; }
.about-group-title i { width:100%; height:1px; background:#d9c7bb; }
.about-card-grid { display:grid; gap:26px; }
.about-cards-2 { grid-template-columns:repeat(2,1fr); }
.about-cards-3 { grid-template-columns:repeat(3,1fr); }
.about-card { padding:16px 16px 0; border:1px solid #ddd; border-radius:10px; background:#fff; box-shadow:0 2px 7px rgba(55,26,17,.08); }
.about-card img { display:block; width:100%; max-width:100%; aspect-ratio:2.08; object-fit:cover; border-radius:8px; }
.about-cards-3 .about-card img { aspect-ratio:1.48; }
.about-card > div { padding:20px 18px 30px; }
.about-card h4 { margin:0 0 14px; color:#6fa8e8; font-size:20px; font-weight:500; line-height:1.4; }
.about-card p { margin:0; font-size:16px; font-weight:400; line-height:1.7; }

@media (max-width:1024px) {
  .about-hero { min-height:280px; }
  .about-message { padding-top:75px; }
  .about-doctor { padding-right:30px; padding-left:30px; }
}

@media (max-width:767px), (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
  .about-hero { width:100%; height:auto; min-height:0; margin:0; aspect-ratio:375/156; }
  .about-hero > img { width:100%; height:100%; min-height:0; object-fit:cover; }
  .about-hero-title p { margin-bottom:3px; font-size:10px; line-height:1.4; }
  .about-hero-title h1 { margin-top:4px; font-size:21px; line-height:1.45; }
  .about-breadcrumb { margin-top:24px; padding-right:18px; padding-left:18px; }
  .about-message { padding:54px 18px 60px; }
  .about-message h2 { font-size:18px; line-height:1.7; }
  .about-message p { font-size:12px; line-height:1.9; }
  .about-section { padding-right:18px; padding-left:18px; }
  .about-section-title { margin-bottom:38px; }
  .about-section-title h2 { font-size:25px; }
  .about-doctor-grid { grid-template-columns:1fr; gap:38px; }
  .about-doctor { width:100%; max-width:620px; margin:0 auto; padding:0; }
  .about-doctor + .about-doctor { padding-top:38px; border-top:1px solid #ddd; border-left:0; }
  .about-doctor-head { display:grid; grid-template-columns:minmax(0,1fr) min(43%,180px); align-items:center; gap:clamp(28px,8vw,72px); }
  .about-doctor-head img { width:100%; }
  .about-doctor h3 { font-size:21px; }
  .about-history { font-size:12px; }
  .about-clinic-section { padding-top:80px; padding-bottom:90px; }
  .about-clinic-section .about-section-title { margin-bottom:48px; }
  .about-clinic-group { margin-bottom:50px; }
  .about-group-title { flex-wrap:wrap; gap:8px 12px; }
  .about-group-title h3 { font-size:19px; }
  .about-group-title i { flex-basis:100%; }
  .about-card-grid,.about-cards-2,.about-cards-3 { grid-template-columns:1fr; gap:18px; }
  .about-cards-3 .about-card img,.about-card img { aspect-ratio:2.08; }
  .about-card { padding:12px 12px 0; }
  .about-card > div { padding:18px 12px 24px; }
}

@media (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
  .about-hero,.about-hero > img { height:280px; min-height:280px; }
}