@charset "utf-8";
/* ===================== *
 * doctor.css
 * PCレイアウトは維持／SPで最適化
 * ===================== */

div.animation_box {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(65% - 400px);
  padding: 200px;
  margin: 0;
  font-family: "Noto Serif JP", serif;
}

h1 {
  font-size: 2.2em;
  font-weight: 400;
  padding: 0 0 35px 0;
  margin: 0;
  line-height: 160%;
}

.comment {
  font-size: 1.2em;
  line-height: 160%;
  font-weight: 200;
  padding: 0;
  margin: 0;
  text-indent: 1em;
  width: 60%;
}

.bottom30 { padding: 0 0 30px 0 !important; }

.animationpack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

/* 医師ブロック */
.doctor { padding: 130px 0 0 0; margin: 0; }
.doctor .photo { float: left; padding: 0 50px 20px 0; width: 300px; height: 400px; }
.doctor .photosize { object-fit: cover; width: 300px; height: 400px; }

.doctor .katagaki { font-size: 0.8em; padding: 50px 0 3px 0; margin: 0; }
.doctor h2 { font-size: 1.8em; font-weight: 100; padding: 0 0 30px 0; margin: 0; }

.doctor .comment,
.doctor .comment_under30 {
  font-size: 1.1em;
  line-height: 170%;
  margin: 0;
  width: 100%;
}
.doctor .comment_under30 { padding: 0 0 30px 0; }

.doctor .dl {
  clear: both;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: #0e3460;
  border: dashed 1px #0e3460;
}

.doctor .shikakudl {
  display: inline-block;
  padding: 20px;
  margin: 0;
  vertical-align: top;
  width: calc(50% - 50px);
}
.doctor .shikakudl dt { padding: 0 0 3px 0; margin: 0; font-weight: bold; }
.doctor .shikakudl dd { padding: 0; margin: 0; }

/* ============= 右側スライダー（PC固定） ============= */
.container {
  position: fixed;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
}
.slider-area {
  position: relative; width: 100%; height: 100%; padding: 0; margin: 0;
}
.slider-item {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  animation: slideShow 30s linear infinite 0s;
}
.slider-item:nth-child(2) { animation-delay: 10s; }
.slider-item:nth-child(3) { animation-delay: 20s; }
.slider-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

@keyframes slideShow {
  0% { opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; animation-timing-function: ease-out; }
  20% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

/* =========================
   スマホ最適化（～768px）
   ========================= */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* ヘッダー下に余白（ロゴと被らない） */
  .all { padding-top: 145px;  }

  /* メインコピー周辺 */
  div.animation_box {
    position: relative;
    width: 100%;
    left: auto; top: auto;
    padding: 0 16px 24px 16px;
  }
  h1 {
    font-size: 1.6em;
    line-height: 1.6;
    padding: 0 0 16px 0;
  }
  .comment {
    width: 100%;
    font-size: 1em;
    text-indent: 0;
  }

  /* 医師ブロック：縦積み＆画像可変 */
  .doctor { padding: 48px 0 0 0; }
  .doctor .photo {
    float: none;
    width: 100%;
    height: auto;
    padding: 0 0 12px 0;
  }
  .doctor .photosize {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .doctor h2 { font-size: 1.4em; padding-bottom: 16px; }
  .doctor .katagaki { padding-top: 8px; }

  .doctor .dl { margin-top: 30px; padding-right: 20px;}
  .doctor .shikakudl { width: 100%; display: block; padding: 16px; }

  /* スライダーを下段フル幅へ（固定解除） */
  .container {
    position: static;
    width: 100%;
    height: 42vh;
    margin-top: 16px;
  }
  .slider-area { height: 100%; }
  .slider-item img { opacity: 1; }

  /* 右端見切れ防止の安全余白 */
  .animation_box,
.doctor {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.doctor .comment {
  font-size: 1em;
}

/* スライダー（画像3枚）は左右余白なしで全幅表示 */
.container {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
}
/* PCのみ固定スライダー */
@media (min-width: 769px) {
  .container { position: fixed; top: 0; right: 0; width: 35%; height: 100%; }
}

/* スマホでは通常フローへ */
@media (max-width: 768px) {
  .container { position: static; width: 100%; height: 42vh; margin-top: 16px; }
}
/* ===== Scroll fix for subpages (doctor) ===== */

/* スマホ最適化 */
@media (max-width: 768px) {

  /* 画像の左右余白ゼロ（ご要望の“端まで”） */
  .slider-area,
  .slider-area img { width: 100%; height: 100%; }
}