/* ============================================================
   styles-clinical.css
   診療のご案内 セクション専用スタイル
   ※ styles.css + styles-about.css と組み合わせて使用
   ============================================================ */

/* ── Clinical Nav Inner: border-top を非表示 ── */
.clinical-nav-inner{border-top:none;}

/* ── Clinical Nav Group Head (top page) ── */
.clinical-nav-group-head{
  display:flex;align-items:baseline;gap:20px;
  padding:28px 8px 16px;
}
/* 2つ目グループ：直前のabout-nav-itemのborder-bottomが区切り線になるので追加線は不要 */
.clinical-nav-group-head--second{
  padding-top:48px;
}
.clinical-nav-group-head-title{
  font-family:var(--ff-num);  /* = "Cormorant Garamond","Times New Roman",serif */
  font-style:italic;
  font-weight:400;
  font-size:44px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--c-accent);
}
.clinical-nav-group-head-jp{
  font-family:"Zen Old Mincho",serif;
  font-size:13px;color:var(--c-mute);
  letter-spacing:.1em;
}

@media(max-width:760px){
  .clinical-nav-group-head-title{font-size:32px;}
}

/* ── Stat Banner ── */
.clinical-stat-banner{
  display:flex;align-items:center;gap:40px;
  padding:36px 48px;
  background:var(--c-brass);
  margin:56px 0;
}
.clinical-stat-number{
  font-family:var(--ff-num);font-size:64px;
  font-weight:700;line-height:1;
  letter-spacing:-0.03em;color:#fff;
  white-space:nowrap;
}
.clinical-stat-number sup{
  font-size:.38em;font-weight:400;
  vertical-align:super;
}
.clinical-stat-number em{
  font-size:.45em;font-style:normal;font-weight:500;
}
.clinical-stat-desc{
  font-size:14px;line-height:1.9;
  color:rgba(255,255,255,.9);
}

@media(max-width:760px){
  .clinical-stat-banner{
    flex-direction:column;align-items:flex-start;
    gap:16px;padding:28px 24px;
  }
  .clinical-stat-number{font-size:48px;}
}

/* ── Robot Types (2-card) ── */
.clinical-robot-types{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;margin:32px 0;
}

/* ── Robot brand groups (logo + 2 images each) ── */
.clinical-robot-brands{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 64px;
}
.clinical-robot-brand-group{
  background:#fff;
  padding:20px 16px 16px;
  box-sizing:border-box;
}
.robot-brand-logo{
  height:52px;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--c-line);
  box-sizing:content-box;
}
.robot-brand-logo img{
  max-height:40px;
  max-width:160px;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
}
.robot-brand-logo-text{
  font-family:var(--ff-num);
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-ink);
}
.robot-brand-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.robot-brand-img{
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  overflow:hidden;
}
.robot-brand-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
@media(max-width:760px){
  .clinical-robot-brands{grid-template-columns:1fr;}
}
.clinical-robot-type{
  padding:28px 24px;border:1px solid var(--c-line);
  text-align:center;
}
.clinical-robot-type-img{
  width:100%;height:220px;
  background:#f0f0ee;
  margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-mute);font-size:12px;letter-spacing:.1em;
  overflow:hidden;
  padding:12px;
  box-sizing:border-box;
}
.clinical-robot-type-img img{
  width:100%;height:100%;object-fit:contain;
}
.clinical-robot-type-name{
  font-family:var(--ff-num);font-size:20px;
  font-weight:600;letter-spacing:.05em;
  color:var(--c-ink);margin-bottom:8px;
}
.clinical-robot-type-caption{
  font-size:13px;color:var(--c-mute);line-height:1.6;
}

@media(max-width:760px){
  .clinical-robot-types{grid-template-columns:1fr;}
}

/* ── Clinical Detail Page Intro ── */
.clinical-page-intro{margin:0 0 56px;}
.clinical-page-eyebrow{
  font-family:var(--ff-num);font-size:11px;
  letter-spacing:.35em;text-transform:uppercase;
  color:var(--c-brass);font-weight:500;margin-bottom:18px;
}
.clinical-page-title{
  font-family:"Zen Old Mincho",serif;
  font-size:36px;font-weight:600;
  color:var(--c-ink);letter-spacing:.04em;
  line-height:1.35;margin-bottom:24px;
}
.clinical-page-title-en{
  display:block;
  font-family:var(--ff-num);font-style:italic;
  font-weight:300;font-size:22px;
  color:var(--c-accent);letter-spacing:.06em;
  margin-top:8px;
}
.clinical-page-lead{
  font-size:15px;line-height:1.9;
  color:var(--c-ink-2);letter-spacing:.04em;
}

/* ── Clinical Sub-Section Title ── */
.clinical-section-title{
  font-family:"Zen Old Mincho",serif;
  font-size:26px;font-weight:600;
  color:var(--c-ink);letter-spacing:.06em;
  line-height:1.3;
  border-left:2px solid var(--c-brass);
  padding-left:16px;
}
.clinical-section-title small{
  display:block;
  font-family:var(--ff-num);font-style:italic;
  font-size:12px;letter-spacing:.2em;
  color:var(--c-brass);margin-top:6px;font-weight:400;
}

/* ── Feature Section (replaces principles-detail-section) ── */
.clinical-feature-section{
  background:var(--c-soft);
  padding:48px 40px 56px;
  margin:0 0 80px;
}
.clinical-feature-section .clinical-section-title{
  margin-bottom:40px;
}
/* feature ブロック内の数字サイズを clinical 用に調整 */
.clinical-feature-section .principle-num{font-size:56px;}
.clinical-feature-section .principle-block{padding:40px 0;}
.clinical-feature-section .principle-en{font-size:22px;}
.clinical-feature-section .principle-jp{font-size:18px;margin-bottom:14px;}

@media(max-width:760px){
  .clinical-page-title{font-size:26px;}
  .clinical-page-title-en{font-size:17px;}
  .clinical-section-title{font-size:20px;}
  .clinical-feature-section{padding:36px 20px 44px;}
  .clinical-feature-section .principle-num{font-size:40px;}
}

/* ── Page Hero Image (H2直下) ── */
.clinical-page-hero-img{
  width:100%;aspect-ratio:4/3;
  margin:28px 0 32px;
  overflow:hidden;
  background:var(--c-soft);
  position:relative;
}
.clinical-page-hero-img img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.clinical-page-hero-img[data-empty]::after{
  content:"— 写真（仮置き）—";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-num);font-size:13px;
  letter-spacing:.1em;color:var(--c-mute);
}

/* ── Image Placeholder ── */
.clinical-img-placeholder{
  width:100%;aspect-ratio:16/9;
  background:var(--c-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-mute);font-size:13px;letter-spacing:.1em;
  margin:32px 0;
}

/* ── Sidebar Group Labels ── */
.clinical-sidebar-group{margin-top:20px;}
.clinical-sidebar-group:first-child{margin-top:0;}
.clinical-sidebar-group-label{
  font-family:var(--ff-num);font-size:10px;
  letter-spacing:.3em;color:var(--c-brass);
  text-transform:uppercase;padding:0 4px;
  margin-bottom:4px;font-weight:500;
  display:block;
}

/* ── 3-column flow grid (collapses on mobile) ── */
.clinical-flow-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:16px;margin-top:32px;
}
@media(max-width:760px){
  .clinical-flow-grid{grid-template-columns:1fr;}
}

/* ── Mobile section spacing ── */
@media(max-width:760px){
  .about-main > section:not(:last-child){margin-bottom:48px !important;}
}

/* ── Mobile: インラインgridをSP対応 ── */
@media(max-width:760px){
  /* about-main のpadding縮小 */
  .about-main[style]{
    padding:24px 20px !important;
  }
  /* 3カラム以上 → 2カラムに折りたたむ */
  .about-main [style*="1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  /* 極端な比率のグリッド（1fr 2fr / 3fr 2fr 等）→ 縦積み */
  .about-main [style*="1fr 2fr"],
  .about-main [style*="2fr 1fr"],
  .about-main [style*="3fr 2fr"],
  .about-main [style*="2fr 3fr"]{
    grid-template-columns:1fr !important;
  }
  /* フォントサイズ調整 */
  .about-main h2.clinical-section-title{
    font-size:18px !important;
  }
  /* stat-banner */
  .clinical-stat-banner{
    margin:16px 0 !important;
  }
}

/* ── CTA Bar (blue full-width banner) ── */
.clinical-cta-bar{
  background:var(--c-accent);
  color:#fff;
  font-family:"Zen Old Mincho",serif;
  font-size:15px;font-weight:600;
  line-height:1.6;letter-spacing:.04em;
  padding:16px 24px;
  margin:16px 0 0;
}
@media(max-width:760px){
  .clinical-cta-bar{padding:14px 20px;}
}

/* ── Intro text ── */
.clinical-intro{
  font-size:15px;line-height:1.9;
  color:var(--c-ink-2);margin-bottom:48px;
}

/* ── Feature sub-heading (inside principle-block) ── */
.clinical-feature-note{
  font-size:13px;color:var(--c-mute);
  line-height:1.7;margin-top:8px;
  padding-left:1em;border-left:2px solid var(--c-line);
}

/* ── SP: ヒーロータイトルが長い英語ページで幅あふれ防止 ── */
@media(max-width:760px){
  .page-hero-title{
    font-size:clamp(22px,8vw,54px);
    overflow-wrap:break-word;
    word-break:break-word;
  }
}

/* ── SP: ロゴ2枚横並びの幅あふれ防止 ── */
@media(max-width:760px){
  .robot-brand-logo[style]{
    gap:16px !important;
    height:auto !important;
    flex-wrap:wrap;
  }
  .robot-brand-logo img{
    max-width:42%;
    height:28px !important;
  }
  /* 全ページ横スクロール防止 */
  .about-layout{
    overflow-x:hidden;
  }
  .about-main{
    overflow-x:hidden;
    min-width:0;
  }
}

/* ── SP: clinical index ナビ調整 ── */
@media(max-width:600px){
  /* Expertise. / Disease. ヘッダーを縦積みに */
  .clinical-nav-group-head{
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
  }
  /* タイトルフォント縮小で改行を防ぐ */
  .about-nav-title{
    font-size:16px !important;
  }
  /* eyebrow letter-spacing縮小 */
  .about-nav-eyebrow{
    letter-spacing:.12em !important;
    font-size:9px !important;
    word-break:keep-all;
  }
}