@charset "utf-8";
/* ============================================================
   トップページ固有のスタイル
   ============================================================ */

/* 地図は画面の高さに追従させる（下層ページは固定380px） */
.map-wrap iframe {
 height: 50vh;
}

/* 診療内容アイコンはトップだけ大きめ */
.treat-icon img {
 width: 64px;
 height: 64px;
 margin: 0;
}

/* ── お知らせ：新着3件だけ表示し、4件目以降は「もっと見る」で開く ── */
.news-list .news-item:nth-child(n + 4) {
 display: none;
}
.news-list.is-open .news-item:nth-child(n + 4) {
 display: flex;
}
/* 閉じているときは3件目を最後扱いにして、余計な区切り線を消す */
.news-list:not(.is-open) .news-item:nth-child(3) {
 border-bottom: none;
}

/* 「もっと見る」ボタン（見た目は今までのリンクのまま） */
button.more-link {
 width: 100%;
 background: none;
 border: none;
 font-family: inherit;
 cursor: pointer;
 /* スマホで押しやすいよう、タップ領域を44px確保する
    （上の余白は padding のぶん margin を減らして見た目を維持） */
 margin-top: 20px;
 padding: 12px 8px;
}
button.more-link[hidden] {
 display: none;
}

/* ============================================================
   お知らせポップアップ（夏季休診）
   ページを開くと同時に表示。×・背景クリック・Escで閉じる
   ============================================================ */
.notice-modal {
 position: fixed;
 inset: 0;
 z-index: 10000; /* TOPに戻るボタン(9999)より上に出す */
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
}
.notice-modal[hidden] {
 display: none;
}
.notice-modal-overlay {
 position: absolute;
 inset: 0;
 background: rgba(11, 60, 85, 0.55);
 animation: noticeFade 0.3s ease both;
}
.notice-modal-body {
 position: relative;
 width: min(420px, 100%);
 animation: noticePop 0.35s ease both;
}
.notice-modal-body img {
 width: 100%;
 height: auto;
 display: block;
 border-radius: var(--radius);
 box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}
.notice-modal-close {
 position: absolute;
 top: -16px;
 right: -16px;
 width: 44px; /* スマホでも押しやすいサイズ */
 height: 44px;
 border: none;
 border-radius: 50%;
 background: var(--white);
 color: var(--primary-dark);
 font-size: 24px;
 line-height: 1;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
 transition: background 0.2s, transform 0.2s;
}
.notice-modal-close:hover {
 background: var(--primary-light);
 transform: scale(1.06);
}
@keyframes noticeFade {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes noticePop {
 from { opacity: 0; transform: translateY(18px) scale(0.97); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
 .notice-modal {
  padding: 28px 20px;
 }
 .notice-modal-close {
  top: -14px;
  right: -8px;
 }
}