@charset "utf-8";
/* =========================================================
   deco.css  —  PC/SP切替・余白調整・スマホ診療時間カード
   ========================================================= */

/* ---------------------------------------------------------
   共通（デモ用など）
--------------------------------------------------------- */
.example > div {
  background: #fff;
  padding: 0.2em;
  margin: 0.2em;
}

/* ---------------------------------------------------------
   PC / SP 切り替え
   - 768px以上: PC表示
   - 767.98px以下: SP表示
--------------------------------------------------------- */
@media (min-width: 768px) {
  .pc { display: block !important; }
  .sp { display: none !important; }
}
@media (max-width: 767.98px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}

/* ---------------------------------------------------------
   PC / SP 改行
--------------------------------------------------------- */
.sp_br {
  display: none; /* 768px以上では改行タグを無効に。 */
}
@media screen and (max-width: 768px) {
  .sp_br {
    display: block;  /*768px未満で改行タグを有効に。*/
  }
}







/* ---------------------------------------------------------
   レイアウト調整
   - .aida の左右マージン
--------------------------------------------------------- */
.aida {
  margin: 0 2.5em 1em 2.5em;
}
@media (max-width: 767.98px) {
  .aida {
    margin: 0 1rem 1rem 1rem; /* スマホ時は控えめに */
  }
}

/* ---------------------------------------------------------
   診療時間（SP表示時のカードUI）
--------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sp .schedule-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .sp .schedule-cards .day {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    text-align: center;
  }
  .sp .green { color: #006400; font-weight: bold; }
  .sp .red   { color: #cc0000; font-weight: bold; }
  .sp .muted { color: #666; }
}

/* 幅が極端に狭い端末（例: 360px以下）は1列表示 */
@media (max-width: 360px) {
  .sp .schedule-cards {
    grid-template-columns: 1fr;
  }
}

.sp .time-note {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 1em;
  color: #333;

/* 水色マーカーを各行に個別適用 */
  display: inline; /* ← inline-blockをやめる */
  padding: 0 .3em;
 background-image: linear-gradient(transparent 60%, #a7e5f9 0);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Android/Chrome対策 */
  line-height: 1.8; /* 少し行間をとると綺麗 */
}
/* 装飾用 */
.grayback
{background-color: gray;
text-align: center;
}


.mojisize{
	text-align: center;
	font-size:1.8em;
	}
@media (max-width: 767.98px) {
.mojisize{
font-size:1.8em;
text-align: left;
}
}