/* 基本 */
body {
  font-family:'Noto Sans JP',sans-serif;
  margin:0;
  line-height:1.8;
  color:#333;
  background:#f5f7fa;
}

/* ヘッダー */
header {
  background:#004080;
  color:#fff;
  padding:12px 24px;
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
  height:100px;
}
.header-left { display:flex; align-items:center; gap:12px; }
.header-left h1 { font-size:1.9rem; margin:0; font-weight:700; }
.header-logo { width:90px; height:auto; }
nav a { color:#fff; margin-left:16px; text-decoration:none; font-weight:600; font-size:1rem; }
nav a:hover { text-decoration:underline; }

/* ヒーロー */
.hero {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin:0; /* 上下余白なし */
}
.hero img {
  height: 100%;
  width: auto;
  display: block;
}
.hero-text {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  text-align: center;
}
.hero-text h2 { font-size: 2.2rem; margin:0 0 10px 0; }
.hero-text p { font-size:1.1rem; margin:0 0 12px 0; }
.hero-buttons { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.hero-buttons .btn { font-size:1.2rem; }

/* 院長写真 */
.doctor {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin:0; /* 上下余白なし */
}
.doctor img {
  height: 100%;
  width: 200px;
  display: block;
}

/* 経歴年月と内容を揃える */
.career-item {
  display: flex;
  gap: 12px; /* 年月と内容の間のスペース */
  margin-bottom: 6px; /* 行間 */
}

.career-year {
  width: 120px; /* 年月欄の幅固定で縦揃え */
  font-weight: 600;
}

.career-desc {
  flex: 1; /* 残り幅を占有 */
}

/* 経歴カード全体 */
.card.career-card {
  text-align: left;
  align-items: flex-start; 
  font-size: 1.1rem;       /* 本文すべて同じ大きさ */
  line-height: 1.6;      /* 行間も揃える */
}

/* 経歴・所属学会・資格などの見出し */
.card.career-card h3 {
  font-size: 1.3rem;     /* 見出しだけ少し大きく */
  margin-bottom: 0.5em;
  font-weight: bold;
}

/* 本文（箇条書きやリストなど） */
.card.career-card p,
.card.career-card li,
.card.career-card div {
  font-size: 1.1rem;       /* 全部統一 */
  line-height: 1.6;
}

/* 年月と本文を揃える場合 */
.card.career-card .career-item {
  display: flex;
  margin-bottom: 0.4em;
}

.card.career-card .career-year {
  width: 7em;            /* 年月の幅を固定して揃える */
}

.card.career-card .career-text {
  flex: 1;
}

/* グリッド配置：横3列、狭い画面では自動で折り返し */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; /* カード間隔 */
}

/* カード内画像 */
.img-card {
  width: 100%;
  height: 250px;       /* 高さを250pxに固定 */
  object-fit: cover;   /* 縦横比を保ちつつ枠に収める */
  border-radius: 8px;
  margin-bottom: 8px;
}


/* コンテナ */
.container { padding:0 16px; max-width:1100px; margin:auto; }
section { scroll-margin-top:140px; margin-bottom:40px; } /* セクション間隔縮小 */
h2 { font-size:1.8rem; border-left:5px solid #004080; padding-left:14px; margin-bottom:16px; }
h3 { font-size:1.3rem; margin-bottom:8px; }
p { font-size:1rem; margin-top:4px; margin-bottom:8px; }
.grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { border-radius:12px; padding:20px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.08); transition:transform 0.3s,box-shadow 0.3s; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; color:#333; }
.card:hover { transform:translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.img-card-placeholder { width:100%; height:180px; background:#ddd; display:flex; justify-content:center; align-items:center; color:#666; border-radius:8px; font-weight:500; margin-bottom:12px; }

li {
  font-size: 1.1rem; /* 1rem = htmlのフォントサイズ（通常16px） */
}

/* ボタン */
.btn { display:inline-block; padding:16px 28px; background:#004080; color:#fff; border:none; border-radius:8px; cursor:pointer; margin:8px; font-weight:600; text-decoration:none; font-size:1.2rem; transition:background 0.2s; }
.btn:hover { background:#003060; }

/* テーブル */
table { width:100%; border-collapse:collapse; margin-bottom:16px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,0.06); }
th, td { padding:6px 4px; text-align:center; border:1px solid #ccc; font-size:1rem; vertical-align:middle; }
th { background:#e6f0ff; }

/* お知らせ・FAQ */
.notice { background:#fff4e5; border-left:4px solid #ffa500; padding:14px 16px; margin-bottom:8px; border-radius:8px; }
details { border:1px solid #ddd; border-radius:8px; padding:14px 16px; margin-bottom:8px; background:#fff; font-size:1rem; }
details[open] { border-color:#004080; }

/* フォーム */
form input, form textarea { width:100%; padding:12px; margin-bottom:8px; border-radius:8px; border:1px solid #ccc; font-size:1rem; }
form button { width:auto; }

/* フッター */
footer { background:#f0f0f0; text-align:center; padding:36px; font-size:1.2rem; margin-top:40px; }

/* レスポンシブ */
@media(max-width:768px){ 
  .hero-text h2 { font-size:1.7rem; } 
  .hero-text p { font-size:1rem; } 
  .hero-text { top: 5%; } 
  section { scroll-margin-top:0px; }
}

.character-wrapper {
  display: flex;
  align-items: stretch; /* 高さを揃える */
  gap: 20px;
}

.character img {
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  display: block;
}

.character-info {
  flex: 1;
  display: flex;
}

.card {
  flex: 1; /* 高さをキャラに合わせる */
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);

  display: flex;              /* ← flex化 */
  align-items: center;        /* ← 縦方向中央揃え */
  justify-content: center;    /* ← 横方向中央揃え（必要なら） */
  text-align: left;           /* ← 中央寄せしたくなければleftに */
}

/* スマホ用レスポンシブ */
@media (max-width: 768px) {
  .character-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .character img {
    max-width: 150px; /* スマホは少し小さめ */
  }

  .character-info {
    width: 100%;
  }
}


/* 診療時間表用 */
.tables-container { display:flex; gap:40px; flex-wrap:wrap; }
.table-wrapper { flex:1; min-width:300px; }
h2,h3 { margin-bottom:8px; }
p { margin-top:4px; font-size:1.1rem; }

/* 連絡先 */
.contact-info { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.contact-row { display:flex; align-items:center; }
.contact-row .label { width:60px; font-weight:600; }
.contact-row .value { flex:1; }

#contact {
  font-size: 1.1rem; /* 連絡先全体のフォントサイズ */
}

#contact .contact-row .value {
  font-size: inherit; /* 親のサイズを継承 */
}


/* 採用情報の表スタイル */
#recruit table th,
#recruit table td {
  height: 70px;           /* セルの高さを揃える */
  vertical-align: middle; /* 縦方向中央揃え */
  padding: 6px 4px;      /* 上下余白で見やすく */
  text-align: center;     /* 水平中央揃え */
  font-size: 1.1rem;      /* 文字を少し大きく */
}
#recruit table th {
  background: #e6f0ff;    /* ヘッダー背景色 */
}
#recruit table td {
  background: #fff;        /* 本文セル背景色 */
}

/* スマホ用ヘッダー調整：ロゴ+タイトル横並び、メニュー横並びで縦積み */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* 全体は縦並び */
    position: static;
    align-items: flex-start;
    padding: 8px 12px;
    height: auto;
  }

  /* ロゴと院名を横並び */
  .header-left {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .header-logo {
    width: 60px; /* ロゴを小さく */
    height: auto;
  }

  .header-left h1 {
    font-size: 1.3rem;
    margin: 0;
    white-space: nowrap; /* 折り返さない */
  }

  /* ナビゲーションは横並びを維持しつつ下に配置 */
  nav {
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭い場合は折り返す */
    gap: 12px;
    justify-content: flex-start;
  }

  nav a {
    font-size: 0.95rem;
    margin-left: 0;
    white-space: nowrap; /* 折り返さずにリンク表示 */
  }
}

  /* 上マージンなし大文字 */
.big-bold {
  font-size: 1.3em;   /* 好きな大きさに調整 */
  font-weight: bold;  /* 太字 */
  margin: 0 0 15px 0;  /* 上 右 下 左（下だけ10px余白） */
}

.back-to-top {
  text-align: right;   /* 右端に寄せる */
  margin-top: 4px;     /* 見出しとの間に少し余白 */
}

.back-to-top a {
  font-size: 1.4rem;   /* 矢印を大きめに */
  text-decoration: none;
  color: #0077cc;
}

.back-to-top a:hover {
  color: #005fa3;
}

/* PCでは br.sp-only を無効化 */
br.sp-only {
  display: none;
}

/* スマホだけ br.sp-only を有効化 */
@media screen and (max-width: 768px) {
  br.sp-only {
    display: inline;
  }
}

/* Hero用タイトルは左線なし */
.hero-title {
  border-left: none;  /* 既存の線を消す */
  padding-left: 0;    /* 必要に応じて余白もリセット */
}

/* スマホ用（768px以下） */
@media screen and (max-width: 768px) {
  .hero h2 {
    font-size: 24px;
  }
}




/* ---- 追加：4コマ漫画（元は各ページ内に重複記述されていたものを共通化） ---- */
.manga-section { width:100%; text-align:center; margin:32px 0; }
.manga-image { max-width:720px; width:100%; height:auto; display:block; margin:0 auto; }

/* ---- 追加：サブページ（ヒーロー無し）の上部余白 ---- */
.subpage .container { padding-top: 24px; }


/* ---- 追加：同じページに飛ぶナビ項目のグループ表示 ---- */
/* 同じページ内の項目を、うっすらした枠でひとまとめにして「同じページ」と分かるようにする */
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 16px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  transition: border-color 0.2s, background 0.2s;
}
.nav-group:hover {
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.18);
}
/* グループ内リンクは既定の左マージンを打ち消し、gapで間隔をとる */
.nav-group a { margin-left: 0; }

/* スマホ：折り返し時に枠が浮かないよう調整 */
@media (max-width: 768px) {
  nav { align-items: center; }
  .nav-group {
    margin-left: 0;
    gap: 12px;
    padding: 4px 10px;
  }
}