/* =========================================================
   とある内科医の1日 詳細ページ用 CSS 
   ========================================================= */

main.doctor-day-single{
  --tl-line: #f2c230;
  --tl-accent: #f7c62f;
  --tl-card: #ffffff;
  --tl-text: #17345f;
  --tl-body: #24364d;
  --tl-sub: #8d8d8d;

  --tl-shadow: 0 8px 20px rgba(0,0,0,.08);
  --tl-shadow-light: 0 4px 14px rgba(0,0,0,.07);

  --tl-radius: 20px;
  --tl-radius-sm: 14px;

  --tl-timeSize: 84px;
  --tl-lineW: 3px;

  --tl-row-gap: 18px;
  --tl-main-side-gap: 34px;
  --tl-sidebar-w: 250px;

  background-color:#f7f6f1;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:24px 24px;
}

/* ===============================
   全体コンテナ
=============================== */
main.doctor-day-single .doctor-day-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
main.doctor-day-single .doctor-day-page-title{
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--tl-text);
  margin: 0 0 24px;
	text-align:center;
	padding:0 0 24px;
}

@media (max-width: 768px){
  main.doctor-day-single .doctor-day-page-title{
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 18px;
  }
}
/* ===============================
   ヘッダー
=============================== */
main.doctor-day-single .doctor-day-header{
	  max-width: 900px;
  margin: 36px auto 24px;
  margin-bottom: 48px;
}

main.doctor-day-single .doctor-day-header h1{
  line-height: 1.3;
  margin: 0 0 24px;
  color: var(--tl-text);
}

main.doctor-day-single .doctor-day-specialty-heading{
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tl-text);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

/* ===============================
   プロフィール下ボックス
=============================== */
main.doctor-day-single .doctor-day-profile-boxes{
  margin: 48px 0 56px;
}

main.doctor-day-single .doctor-day-profile-boxes-inner{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

main.doctor-day-single .doctor-day-profile-box{
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--tl-shadow);
}

/* ===============================
   セクション見出し
=============================== */
main.doctor-day-single .doctor-day-timeline-section h2{
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #f5c242, #f7de84);
  padding: 16px 24px;
  font-size: 22px;
  font-weight: 700;
  color: var(--tl-text);
  text-align: center;
  border-radius: 12px;
  margin: 0 0 40px;
}

/* ===============================
   メイン + 右カラム
=============================== */
main.doctor-day-single .doctor-day-timeline-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-sidebar-w);
  gap: var(--tl-main-side-gap);
  align-items: start;
}

/* ===============================
   タイムライン本体
=============================== */
main.doctor-day-single .doctor-day-timeline-main{
  position: relative;
}

main.doctor-day-single .timeline-time{
    font-size: 20px;
  }

main.doctor-day-single .timeline-time strong{
    font-size: 20px;
  }

main.doctor-day-single .doctor-day-timeline-main::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--tl-timeSize) / 2) - (var(--tl-lineW) / 2));
  width: var(--tl-lineW);
  background: var(--tl-line);
  z-index: 0;
}

/* 各行は「時間 + 本文カード」の2カラム */
main.doctor-day-single .timeline-row{
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-timeSize) minmax(0, 1fr) !important;
  gap: var(--tl-row-gap) !important;
  align-items: start;
  margin-bottom: 48px;
  z-index: 1;
}

main.doctor-day-single .timeline-row.is-last{
  margin-bottom: 0;
}

/* 時間列 */
main.doctor-day-single .timeline-rail{
  grid-column: 1;
  position: relative;
  width: var(--tl-timeSize);
  min-width: var(--tl-timeSize);
  min-height: var(--tl-timeSize);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
}

main.doctor-day-single p.timeline-time{
  width: var(--tl-timeSize);
  height: var(--tl-timeSize);
  min-width: var(--tl-timeSize);
  min-height: var(--tl-timeSize);
  margin: 0;
  border-radius: 50%;
  background: var(--tl-accent);
  color: #111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;
}

/* 本文カード */
main.doctor-day-single .timeline-card{
  grid-column: 2;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  background: var(--tl-card);
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  padding: 32px 38px;
  min-width: 0;
  margin-left: 0;
}

/* 吹き出しは使わない */
main.doctor-day-single .timeline-card::before{
  content: none !important;
  display: none !important;
}

/* =========================
   タイムラインカード内レイアウト
========================= */
main.doctor-day-single .timeline-card-inner{
  display: grid;
  gap: 20px;
  width: 100%;
  min-width: 0;
  align-items: start;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* イラストあり → 2カラム */
main.doctor-day-single .timeline-row.has-illustration .timeline-card-inner{
  grid-template-columns: minmax(0, 1fr) 160px !important;
}

/* イラストなし → 1カラム */
main.doctor-day-single .timeline-row.no-illustration .timeline-card-inner{
  grid-template-columns: 1fr !important;
}

/* =========================
   テキストエリア（完全リセット）
========================= */
main.doctor-day-single .doctor-day-timeline-text{
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 吹き出しや疑似要素を完全除去 */
main.doctor-day-single .doctor-day-timeline-text::before,
main.doctor-day-single .doctor-day-timeline-text::after{
  content: none !important;
  display: none !important;
}

/* =========================
   テキストスタイル
========================= */
main.doctor-day-single .timeline-title{
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--tl-text);
  margin: 0 0 12px;
}

main.doctor-day-single .timeline-comment{
  font-size: 15px;
  line-height: 1.9;
  color: var(--tl-body);
  margin: 0 0 8px;
}

main.doctor-day-single .timeline-sub-comment{
  font-size: 14px;
  line-height: 1.8;
  color: var(--tl-sub);
  margin: 0;
}

/* 念のため段落の装飾を完全除去 */
main.doctor-day-single .doctor-day-timeline-text p{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

/* =========================
   イラスト（カラム中央）
========================= */
main.doctor-day-single .doctor-day-timeline-image{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

main.doctor-day-single .doctor-day-timeline-image img{
  width: 100%;
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* ===============================
   右コメント欄
=============================== */
main.doctor-day-single .doctor-day-sidebar{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}

main.doctor-day-single .doctor-day-sidebar-box{
  background: #fff;
  border-radius: var(--tl-radius-sm);
  padding: 16px 18px;
  box-shadow: var(--tl-shadow-light);
}

main.doctor-day-single .doctor-day-sidebar-box p{
  margin-top: 0;
  margin-bottom: 0;
}

main.doctor-day-single .comment-card__head{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--tl-text);
  margin: 0 0 10px;
}

main.doctor-day-single .comment-card__head img,
main.doctor-day-single .comment-card__head svg{
  width: 18px;
  height: 18px;
  flex: 0 0 16px;
  margin-top: 2px;
}

main.doctor-day-single .comment-card__body{
  font-size: 14px;
  line-height: 1.75;
  color: var(--tl-body);
  margin: 0;
}

/* ON / OFF */
main.doctor-day-single .onoff-card{
  padding-top: 14px;
  padding-bottom: 14px;
}

main.doctor-day-single .onoff-row{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

main.doctor-day-single .onoff-row + .onoff-row{
  margin-top: 10px;
}

main.doctor-day-single .onoff-label{
  font-size: 16px;
  font-weight: 700;
  color: var(--tl-text);
  line-height: 1.6;
}

main.doctor-day-single .onoff-text{
  font-size: 14px;
  line-height: 1.7;
  color: var(--tl-body);
}

/* 最後の長文カードだけ少し締める */
main.doctor-day-single .doctor-day-sidebar-box:last-child .comment-card__body{
  line-height: 1.7;
}

/* ページャー */
main.doctor-day-single .doctor-day-pager{
  margin-top: 40px;
  padding: 0;
}

main.doctor-day-single .doctor-day-pager__inner{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 8px;
  max-width: 100%;
  border-radius: 24px;
  padding: 16px 18px;
  align-items: center;
}

main.doctor-day-single .doctor-day-pager__item{
  width: auto !important;
}

main.doctor-day-single .doctor-day-pager__item--prev{
  text-align: left;
  justify-self: start;
}

main.doctor-day-single .doctor-day-pager__item--center{
  text-align: center;
  justify-self: center;
}

main.doctor-day-single .doctor-day-pager__item--next{
  text-align: right;
  justify-self: end;
}

main.doctor-day-single .doctor-day-pager__item--prev .doctor-day-pager__link,
main.doctor-day-single .doctor-day-pager__item--next .doctor-day-pager__link{
  font-size: 16px;
	  padding: 6px 10px;
	  font-weight: 600;
  opacity: 0.85;
}

main.doctor-day-single .doctor-day-pager__item--center .doctor-day-pager__link{
  font-size: 15px;
  white-space: nowrap;
}
.doctor-day-pager__link:hover{
  opacity: 0.7;
}
/* =====================================
   タイムライン色設定（最終整理版）
   勤務日 = 緑
   休日   = 赤
===================================== */

/* タイムラインバーの基本 */
main.doctor-day-single .doctor-day-timeline-section h2{
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  margin: 0 0 28px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* 時間丸の基本 */
main.doctor-day-single p.timeline-time{
  color: #111 !important;
}

/* ===== 勤務日（緑） ===== */
main.doctor-day-single .doctor-day-timeline-section.is-workday{
  --tl-accent: #6fcf97;
  --tl-line: #6fcf97;
}

main.doctor-day-single .doctor-day-timeline-section.is-workday h2{
  background: linear-gradient(90deg, #6fcf97 0%, #a8e0bc 100%);
  color: #17345f;
}

main.doctor-day-single .doctor-day-timeline-section.is-workday .timeline-time{
  background: #6fcf97 !important;
  color: #111 !important;
}

main.doctor-day-single .doctor-day-timeline-section.is-workday .doctor-day-timeline-main::before{
  background: #6fcf97 !important;
}

/* ===== 休日（赤） ===== */
main.doctor-day-single .doctor-day-timeline-section.is-holiday{
  --tl-accent: #f2a3a3;
  --tl-line: #f2a3a3;
}

main.doctor-day-single .doctor-day-timeline-section.is-holiday h2{
  background: linear-gradient(90deg, #f2a3a3 0%, #f7c6c6 100%);
  color: #17345f;
}

main.doctor-day-single .doctor-day-timeline-section.is-holiday .timeline-time{
  background: #f2a3a3 !important;
  color: #111 !important;
}

main.doctor-day-single .doctor-day-timeline-section.is-holiday .doctor-day-timeline-main::before{
  background: #f2a3a3 !important;
}



/* =================================
   doctor-day pager
   中央寄せ + 白い角丸バー
================================= */

.doctor-day-pager{
  margin: 56px auto 0;
  max-width: 920px;
  padding: 0 16px;
}

.doctor-day-pager__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  padding: 22px 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.doctor-day-pager__item--prev{
  text-align: left;
}

.doctor-day-pager__item--center{
  text-align: center;
}

.doctor-day-pager__item--next{
  text-align: right;
}

.doctor-day-pager__link{
  display: inline-flex;
  align-items: center;
  color: #17345f;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  transition: opacity .2s ease, transform .2s ease;
}

.doctor-day-pager__link:hover{
  opacity: .75;
  transform: translateY(-1px);
}

.doctor-day-pager__link--center{
  font-weight: 600;
}

/* 左右リンクを少し大きめに */
.doctor-day-pager__item--prev .doctor-day-pager__link,
.doctor-day-pager__item--next .doctor-day-pager__link{
  font-size: 28px;
  letter-spacing: 0.02em;
}

/* 中央の一覧リンク */
.doctor-day-pager__item--center .doctor-day-pager__link{
  font-size: 18px;
}

/* タブレット */
@media (max-width: 1024px){
  .doctor-day-pager{
    max-width: 760px;
  }

  .doctor-day-pager__inner{
    padding: 18px 22px;
  }

  .doctor-day-pager__item--prev .doctor-day-pager__link,
  .doctor-day-pager__item--next .doctor-day-pager__link{
    font-size: 24px;
  }

  .doctor-day-pager__item--center .doctor-day-pager__link{
    font-size: 17px;
  }
}
/* =========================
   スマホ対応
========================= */
@media (max-width: 768px){
	
	/* プロフィール右カラムに少し余白を持たせる */
main.doctor-day-single .doctor-day-profile > div:last-child,
main.doctor-day-single .doctor-day-meta{
  padding-right: 14px;
  min-width: 0;
  box-sizing: border-box;
}
  main.doctor-day-single .doctor-day-profile-box p{
    font-size: 13px;
    line-height: 1.7;
  }
	
  /* サイドバー見出し統一 */
  main.doctor-day-single .comment-card__head{
    font-size: 16px;
    font-weight: 700;
  }	
  main.doctor-day-single .onoff-text{
    font-size: 14px;
    line-height: 1.75;
  }
	
	
  main.doctor-day-single{
    --tl-timeSize: 56px;
    --tl-lineW: 3px;
    padding: 0 12px;
  }

  main.doctor-day-single .doctor-day-container{
    padding: 24px 12px 48px;
  }

  main.doctor-day-single .doctor-day-page-title{
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 18px;
    padding: 0 0 12px;
  }

  main.doctor-day-single .doctor-day-header{
    max-width: 100%;
    margin: 0 0 28px;
  }

  main.doctor-day-single .doctor-day-profile{
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 0;
    margin: 0;
  }

  main.doctor-day-single .doctor-day-photo img{
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  main.doctor-day-single .doctor-day-specialty-heading{
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 8px;
    padding-bottom: 6px;
  }

  main.doctor-day-single .doctor-day-meta p[style*="font-size: 28px"]{
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
  }

  main.doctor-day-single .doctor-day-meta p[style*="font-size: 28px"] span{
    font-size: 14px !important;
    margin-left: 10px !important;
  }

  main.doctor-day-single .doctor-day-affiliation{
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
  }

  main.doctor-day-single .doctor-day-profile-boxes{
    margin-top: 16px !important;
    margin-bottom: 28px !important;
  }

  main.doctor-day-single .doctor-day-profile-boxes-inner{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  main.doctor-day-single .doctor-day-profile-box{
    padding: 18px !important;
    border-radius: 14px !important;
  }

  main.doctor-day-single .doctor-day-timeline-section{
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }

  main.doctor-day-single .doctor-day-timeline-section h2{
    padding: 12px 16px;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 22px;
    border-radius: 10px;
  }

  main.doctor-day-single .doctor-day-timeline-layout{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  main.doctor-day-single .doctor-day-timeline-main{
    position: relative;
  }

  main.doctor-day-single .doctor-day-timeline-main::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--tl-timeSize) / 2) - (var(--tl-lineW) / 2));
    width: var(--tl-lineW);
    background: var(--tl-line);
    z-index: 0;
  }

  main.doctor-day-single .timeline-rail::before,
  main.doctor-day-single .timeline-rail::after,
  main.doctor-day-single .timeline-row::before,
  main.doctor-day-single .timeline-row::after{
    content: none !important;
    display: none !important;
  }

  main.doctor-day-single .timeline-row{
    display: grid !important;
    grid-template-columns: var(--tl-timeSize) 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    margin-bottom: 14px !important;
  }

  main.doctor-day-single .timeline-rail{
    width: var(--tl-timeSize);
    min-width: var(--tl-timeSize);
    min-height: var(--tl-timeSize);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  main.doctor-day-single p.timeline-time,
  main.doctor-day-single .timeline-time{
    width: var(--tl-timeSize) !important;
    height: var(--tl-timeSize) !important;
    min-width: var(--tl-timeSize) !important;
    min-height: var(--tl-timeSize) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    color: #111 !important;
  }

  main.doctor-day-single .timeline-time strong{
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  main.doctor-day-single .timeline-card{
    padding: 14px !important;
    border-radius: 14px !important;
  }

  main.doctor-day-single .timeline-card-inner,
  main.doctor-day-single .timeline-row.has-illustration .timeline-card-inner,
  main.doctor-day-single .timeline-row.no-illustration .timeline-card-inner{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  main.doctor-day-single .timeline-title{
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px;
  }

  main.doctor-day-single .timeline-comment{
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
  }

  main.doctor-day-single .timeline-sub-comment{
    font-size: 12px;
    line-height: 1.7;
  }

  main.doctor-day-single .doctor-day-timeline-image{
    display: none !important;
  }

  main.doctor-day-single .doctor-day-sidebar{
    gap: 12px;
  }

  main.doctor-day-single .doctor-day-sidebar-box{
    padding: 14px;
    border-radius: 14px;
  }

  main.doctor-day-single .comment-card__head{
    font-size: 16px;
    margin-bottom: 8px;
  }

  main.doctor-day-single .comment-card__body,
  main.doctor-day-single .onoff-text{
    font-size: 13px;
    line-height: 1.75;
  }

  main.doctor-day-single .onoff-row{
    grid-template-columns: 40px 1fr;
    gap: 10px;
  }

	  /* 上部2ボックス本文：ひと回り小さく */
  main.doctor-day-single .doctor-day-profile-box .comment-card__body,
  main.doctor-day-single .doctor-day-profile-box p{
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* サイドバー見出しを統一（おひる / ON-OFF / みなさんへ） */
  main.doctor-day-single .doctor-day-sidebar .comment-card__head{
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* ON-OFF本文だけ少し大きく */
  main.doctor-day-single .doctor-day-sidebar .onoff-text{
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* 他のサイドバー本文は少し控えめ */
  main.doctor-day-single .doctor-day-sidebar .comment-card__body{
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

/* ページャー */
  .doctor-day-pager{
    margin-top: 40px;
    padding: 0 12px;
  }

  .doctor-day-pager__inner{
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    max-width: 100%;
    border-radius: 24px;
    padding: 16px 18px;
  }

  .doctor-day-pager__item--prev{
    text-align: left;
  }

  .doctor-day-pager__item--center{
    text-align: center;
  }

  .doctor-day-pager__item--next{
    text-align: right;
  }

  .doctor-day-pager__item--prev .doctor-day-pager__link,
  .doctor-day-pager__item--next .doctor-day-pager__link{
    font-size: 16px;
  }

  .doctor-day-pager__item--center .doctor-day-pager__link{
    font-size: 15px;
    white-space: nowrap;
  }
}