/* 基本のスタイル */

body {
    font-family: "Noto Sans JP", sans-serif; /* 全体のフォントを"Noto Sans JP"またはサンセリフ体に設定 */
    line-height: 1.6; /* 行間の高さを設定 */
    margin: 0; /* 余白をゼロにする */
    padding: 0; /* パディングをゼロにする */
}

/* コンテナのスタイルを追加 */
.container {
    max-width: 1000px; /* 最大幅を1000pxに設定（お好みで変更） */
    margin: 0 auto; /* 左右のマージンを自動にして中央揃え */
    padding: 20px; /* 内側の余白を設定 */
}

header {
    background-color: #f0f8ff; /* ヘッダー部分の背景色を淡いブルーに設定 */
    padding: 20px; /* ヘッダー部分の上下左右に余白を追加 */
    text-align: center; /* ヘッダーのテキストを中央揃えにする */
}

h1 {
    font-size: 2em; /* メインタイトルの文字サイズを通常の2倍に設定 */
    color: #333; /* 文字色をダークグレーに設定 */
}

p {
    color: #666; /* テキストの文字色をグレーに設定 */
    margin: 0; /* 上下のマージンを0に設定 */
}


.clinic-info {
    color: #666; /* テキストの文字色をグレーに設定 */
    margin: 0; /* 上下のマージンを0に設定 */
  display: grid;
  grid-template-columns: auto auto; /* ラベルと値の2列 */
  column-gap: 1em;                 /* ラベルと値の間隔 */
  justify-content: center;         /* 全体を中央に寄せる */
}

.clinic-info dt {
    white-space: nowrap;         /* 文字を折り返さない */
  font-weight: bold; 
  text-align: right;               /* コロンを右に寄せる */
    margin: 0; /* 上下のマージンを0に設定 */
}

.clinic-info dd {
  margin: 0;                       /* デフォルト余白を消す */
  text-align: left;               /* 説明を左に寄せる */
}

/* 病院の外観画像のスタイル */
.hospital-image {
    width: 600px; /* 画像の幅を600pxに設定 */
    max-width: 100%; /* 画面幅が狭い場合は幅を100%にする */
    height: auto; /* 画像の縦横比を保ちながら高さを自動調整 */
    margin: 15px; /* 画像周囲に15pxの余白を追加 */
    display: block;   /* 行の下の余白を消したいときに有効 */
}


/* 地図画像のスタイル */
.map-image {
  max-width: 100%; /* 画面幅が狭い場合は幅を100%にする */
  width: 350px;      /* 画像の幅を350pxに指定 */
  height: auto;     /* アスペクト比を保つ */
  display: block;   /* 行の下の余白を消したいときに有効 */
  margin: 15px; /* 画像周囲に15pxの余白を追加 */
}

/* 拡大画像リンクのスタイル */
a[data-lightbox] {
  display: inline-block;   /* リンク領域を画像の大きさにぴったり */
}

/* 各セクションのスタイル */
section {
    padding: 20px; /* 各セクションの内側に20pxの余白を追加 */
    border-bottom: 1px solid #ddd; /* セクション下部に薄いボーダーラインを追加 */
}

h2 {
    color: #005b96; /* セクションタイトルの文字色をブルーに設定 */
    background: linear-gradient(transparent 70%, #dcdcdc 70%); /* セクションタイトルの下に薄いグレーの太線を追加 */
    margin-top: 0;       /* 上余白を消す */
}


/* お知らせのスタイル */
.notice {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3; /* 二重線の枠 */
}
.notice p {
    margin: 0; 
    padding: 0;
    font-weight: bold; /* 太字に設定 */
}

/* 診療スケジュール表のスタイル */

/* 表全体の設定 */
.schedule-table {
    width: 100%; /* テーブルの幅を100%に設定 */
    border-collapse: collapse; /* セルの境界線を重ねる */
    table-layout: auto; /* 自動で列の幅を調整 */
    color: #666; /* 表内の文字をグレーに設定 */
}

/* ヘッダーとセルのスタイル */
.schedule-table th,
.schedule-table td {
    border: 1px solid #666; /* セルの境界線をグレーに設定 */
    padding: 10px; /* セル内の余白 */
    text-align: center; /* セル内のテキストを中央寄せ */
    color: #666; /* セルの文字もグレーに設定 */
    white-space: nowrap; /* 改行禁止 */
}

.schedule-table th {
    background-color: #f0f8ff; /* thの背景色を淡いブルーに設定 */
}

.schedule-table td {
    width: 12.5%; /* 列の幅を均等に設定 */
}

/* ○を強調するためのスタイル */
.schedule-table .open {
    font-size: 1.2em; /* フォントサイズを1.2倍に設定 */
    font-weight: bold; /* 太字に設定 */
    text-align: center; /* セル内で中央揃えに設定 */
}

/* 米印を右上に絶対配置 */

.cell-with-asterisk {
  position: relative; /* このセルを基準にする */
}

.asterisk {
    color: red;           /* 赤文字 */
    font-size: 0.7em;     /* 小さく */
    position: absolute;    /* 絶対配置 */
    top: 2px;             /* 上から少し下げる */
    right: 2px;           /* 右から少し下げる */
}

/* 注意書きを表の下に赤字で入れる */
.note-text {
    color: red;        /* 赤文字 */
    font-size: 0.9em;  /* 少し小さめ */
    text-align: left;    /* 左寄せ */
    font-weight: bold; /* 太字に設定 */
}

/* お問い合わせセクションのリンクスタイル */
a {
    text-decoration: none; /* 下線を消す */
    font-weight: bold; /* 太字に */
}

a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}


/* 別窓リンクアイコン用 */
a[target="_blank"]::after {
   font-family: "Material Icons"; /* フォントファミリーを指定 */
   content: "\e89e"; /* 新しいタブのアイコンを指定 */
}

/* フッター */
footer {
    text-align: center; /* フッター内の文字を中央揃えにする */
    padding: 1em; /* フッター内の上下左右に「1em」分の余白をとる（文字が端にくっつかないようにする） */
    background: #ddd; /* 背景色を薄いグレー（#ddd）に設定する。 */
    font-size: 0.9em; /* フッター内の文字サイズを通常より少し小さめ（90%）にする */
    margin-top: 2em; /* フッターの上に2em分の余白を入れて、本文と区切りをつける */
    max-width: 1000px; /* 最大幅を1000pxに設定（お好みで変更） */
    margin: 0 auto; /* 上下0、左右自動で中央寄せ */
}

/* スマホ用のレスポンシブデザイン */



@media (max-width: 600px) { /* 画面幅が600px以下のとき */
    .schedule-table th, .schedule-table td {
        font-size: 0.8em; /* フォントサイズを小さくする */
        padding: 5px; /* 余白を少し小さく */
    }
    
    .schedule-table {
        display: block; /* テーブルをブロック表示にする */
        overflow-x: auto; /* 横スクロールを可能にする */
    }
    
    .schedule-table .open { /* ○を強調するためのスタイル */
    font-size: 1em; /* フォントサイズを1倍に設定 */
    font-weight: bold; /* 太字に設定 */
    text-align: center; /* セル内で中央揃えに設定 */
}

    .clinic-info {
    grid-template-columns: 1fr; /* 1列に変更 */
    justify-content: start;     /* 左寄せ */
  }

  .clinic-info dt {
    text-align: left;           /* dtも左寄せに */
    margin-top: 0.5em;          /* 行間少し確保 */
  }

  .clinic-info dd {
    margin-left: 0;             /* 左余白リセット */
    margin-bottom: 0.5em;       /* 下に少しスペース */
  }

  h1 {
  font-size: 1.5em; /* メインタイトルの文字サイズを通常の1.5倍に設定 */
  }

  /* 米印調整 */
  .asterisk {
    top: 0.1em;
    right: 0.1em;
    font-size: 0.6em;
  }
}


/* スクリーンリーダー用非表示（captionなどに使う） */
.visually-hidden {
  position: absolute;   /* 画面上に表示されないように */
  width: 1px;           /* 幅1pxにしてほぼ見えなく */
  height: 1px;          /* 高さ1pxに */
  padding: 0;           
  margin: -1px;         /* マイナスマージンで外に出す */
  overflow: hidden;     /* 中身がはみ出さないように */
  clip: rect(0 0 0 0);  /* 古いブラウザ対応 */
  clip-path: inset(50%);/* モダンブラウザ用 */
  border: 0;            
  white-space: nowrap;  /* 改行防止 */
}