@charset "utf-8";

/* ===============================
   リセット
================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Yu Gothic","Meiryo",sans-serif;
  color:#333;
	background:#f3ede4;
}

/* ===============================
   共通レイアウト
================================= */
.container{
  width:900px;
  max-width:95%;
  margin:0 auto;
  text-align:center;
}

/* ===============================
   上部（水玉背景）
================================= */
.hero{
  background:url("../images/bg_top.png") no-repeat center top;
  background-size:100% auto;
  padding:50px 0 30px;
}

.open-month{
  font-size:24px;
  font-weight:bold;
  color:#000;
  margin-bottom:5px;
}

.open-weekend{
  font-size:38px;
  font-weight:bold;
  color:#c73b3b;
  margin-bottom:18px;
}

.clinic-name{
  font-size:36px;
  font-weight:600;
  color:#2c7fb8;
  margin:8px 0 10px;
  letter-spacing:1px;
}

.dept{
  font-size:18px;
  font-weight:bold;
  margin-bottom:40px;
}

/* ===============================
   特徴ボックス
================================= */
.features{
  display:flex;
  justify-content:space-between;
  gap:25px;
}

.feature-box{
  width:32%;
  background:#ffffff;
  padding:22px 18px;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.feature-icon{
  width:95px;
  height:auto;
  margin-bottom:12px;
}

.feature-box h3{
  font-size:17px;
  margin-bottom:8px;
}

.feature-box p{
  font-size:13px;
  line-height:1.6;
}

/* ===============================
   中央コンテンツ
================================= */
.content{
  background:#fff;background:transparent;
  padding:30px 0;
}

.section-title{
  margin:0 0 25px;
  font-size:22px;
  background:#d9e6ee;
  padding:10px 0;
  border-radius:10px;
}




/* ===============================
   診療時間
================================= */
.time-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  border-bottom:1px solid #ccc;
}

.time-table th{
  padding:12px;
  font-weight:normal;
}

.time-table td{
  border-top:1px solid #ccc;
  padding:10px;
}

/* 平日ヘッダー */
.time-table th:nth-child(-n+6){
  background:linear-gradient(to bottom,#a9cbe0,#88b6d3);
  color:#fff;
}

/* 土 */
.time-table th:nth-child(7){
  background:linear-gradient(to bottom,#f3c6a8,#e7a978);
  color:#fff;
}

/* 日 */
.time-table th:nth-child(8){
  background:linear-gradient(to bottom,#f5d3b8,#eab487);
  color:#fff;
}

/* 土日○ */
.time-table td:nth-child(7),
.time-table td:nth-child(8){
  color:#c2742f;
  font-weight:bold;
  font-size:1.2em;
}

.time-txt{
  text-align:left;
  margin:8px 0 12px;
}

/* ===============================
   診療時間＋アクセス 横並び
================================= */
.access-wrap{
  display:flex;
  gap:40px;
	margin-bottom:60px;
}

.access-left,
.access-right{
  flex:1;
}

/* ===============================
   Google Map
================================= */
.map-wrap{
  width:100%;
  height:300px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.map-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}

/* ===============================
   院長紹介
================================= */
.doctor{
  display:flex;
  gap:40px;
  margin:40px auto;
  max-width:900px;
  text-align:left;
}

.doctor-photo img{
  width:400px;
  border-radius:8px;
}

.doctor-info{
  font-size:14px;
  line-height:1.8;
}

.doctor-name{
  font-weight:bold;
  font-size:16px;
  margin-bottom:6px;
}

.doctor-subtitle{
  font-weight:bold;
  margin-bottom:8px;
}

.doctor-career{
  margin:0;
  padding-left:18px;
}

.doctor-career li{
  margin-bottom:4px;
}

/* ===============================
   院長あいさつ
================================= */
.greeting{
  padding:30px;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  margin-bottom:40px;
  font-size:14px;
  line-height:1.9;
  text-align:left;
}

/* ===============================
   フッター
================================= */
.footer-area{
  position:relative;
  text-align:center;
}

.footer-img{
  width:100%;
  display:block;
}

.footer{
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  font-size:13px;
  color:#555;
}

.footer a{
  color:#888;           /* 文字色を落ち着かせる */
  text-decoration:none; /* 下線を消す */
  font-size:12px;       /* 少し小さく */
  opacity:0.8;          /* ほんの少し薄く */
}

.footer a:hover{
  opacity:1;            /* ホバー時だけ少し戻す */
}

/* ===============================
   スマホ対応
================================= */
@media screen and (max-width:768px){

  .container{
    width:100%;
    padding:0 15px;
  }

  .open-month{ font-size:16px; }
  .open-weekend{ font-size:22px; }
  .clinic-name{ font-size:22px; line-height:1.3; }
  .dept{ font-size:14px; }

  .features{
    flex-direction:column;
    gap:18px;
  }

  .feature-box{ width:100%; }
  .feature-icon{ width:75px; }

  .access-wrap{
    flex-direction:column;
    gap:10px;
  }

  .map-wrap{
    height:220px;
  }

  .time-table{
    font-size:13px;
  }

  .time-table th,
  .time-table td{
    padding:8px 4px;
  }

  .doctor{
    flex-direction:column;
  }

  .doctor-photo img{
    width:220px;
    margin-bottom:15px;
  }

  .greeting{
    padding:20px;
    font-size:13px;
  }

  .footer{
    font-size:12px;
    bottom:15px;
  }

  .sp-only{ display:block; }
  .no-break{ white-space:nowrap; }
}
/****************************/
/* 本文エリアだけ白にする */
.access-wrap,
.doctor,
.greeting{
  background:#ffffff;
  border-radius:18px;
  padding:30px;
}
/**時間折り返しなし************************/
.time-table td:first-child{
  white-space: nowrap;
}
.time-txt{
  text-align:left;
  margin:8px 0 10px;
  font-size:14px;      /* 少し小さく */
  line-height:1.6;     /* 間隔少し詰める */
  color:#555;          /* 少し薄く */
}
.doctor-subtitle{
  font-weight:bold;
  font-size:15px;
}
/***********************/
/* 院長紹介レイアウト */
.doctor{
  display:flex;
  align-items:center;
  gap:40px;
}

/* 写真 */
.doctor-photo img{
  width:100%;
  max-width:360px;
  height:auto;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  display:block;
}

/* 右側テキスト */
.doctor-info{
  flex:1;
}

/* 院長名 */
.doctor-name{
  font-size:20px;
  font-weight:600;
  margin-bottom:10px;
}

/* サブタイトル */
.doctor-subtitle{
  font-weight:600;
  margin-bottom:10px;
}

/* 経歴 */
.doctor-career{
  font-size:14px;
  line-height:1.8;
  padding-left:18px;
}
/* 初期状態（PCでは改行しない） */
.sp-only{
  display:none;
}

/* スマホだけ改行を有効にする */
@media screen and (max-width:768px){
  .sp-only{
    display:block;
  }
}

/*********************/
@media screen and (max-width:768px){

  .doctor{
    gap:12px;   /* 20pxや40pxなら小さくする */
  }

  .doctor-photo{
    margin-bottom:0;
  }

  .doctor-name{
    margin-top:0;
  }
.doctor-career{
  letter-spacing:-0.5px;
}	

}
/****上部キャッチ*******************/
.catch-copy{
  margin:18px 0 28px;
  text-align:center;
}

.catch-main{
  font-size:22px;      
  font-weight:700;
  letter-spacing:1px;
  color:#2f6f9f;       
  margin:14px 0 8px;
}
.catch-sub{
  font-size:16px;
  color:#333333;
  margin:4px 0;
  letter-spacing:0.5px;
}

@media screen and (max-width:768px){

  .catch-main{
    font-size:20px;
  }

  .catch-sub{
    font-size:14px;
  }

}
/*********************/
.catch-copy{
  margin:20px 0 30px;
  text-align:center;
}

.catch-main{
  font-size:22px;   /* 少し下げる */
  font-weight:700;
  letter-spacing:1px;
  color:#2f6f9f;
  margin-bottom:12px;
}

.catch-sub{
  font-size:15px;
  color:#444;
  margin:6px 0;
}

/* サブ2行のみに軽いライン */
.catch-sub:first-of-type{
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,0.08);
}

.catch-sub:last-of-type{
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

@media screen and (max-width:768px){

  .catch-main{
    font-size:18px;   /* タイトルより小さく */
  }

  .catch-sub{
    font-size:14px;
  }

}