:root {
  --color-primary: #c0392b;
  --color-secondary: #E8F4FD;
  --color-background: #efe6d2;
  --color-menu-background: #ecd4a0;
  --color-textPrimary: #c0392b;
  --color-textOnPrimary: white;

  --color-accent: #2a5fff;
  --color-accent-dark: #1a3fbf;
  --text: #1a1a2e;
  --muted: #6b7280;
  --bg: #f8f7f4;
  --card: #ffffff;
  --btn-size: 48px;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;color:#333;background:var(--color-background);}

header{background:var(--color-primary); color:var(--color-textOnPrimary);box-shadow:0 3px 12px rgba(0,0,0,.15);}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;flex-wrap:wrap;gap:12px;}
.clinic-name-wrap{display:flex;align-items:center;gap:14px;}
.clinic-icon{width:52px;height:52px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;}
.clinic-name{font-size:1.6rem;font-weight:bold;letter-spacing:.05em;}
.clinic-sub{font-size:.85rem;opacity:.9;margin-top:3px;}
.header-tel{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5);border-radius:10px;padding:10px 20px;text-align:center;}
.header-tel .tel-label{font-size:.75rem;opacity:.9;margin-bottom:2px;}
.header-tel a{color:var(--color-textOnPrimary);text-decoration:none;font-size:1.5rem;font-weight:bold;}
nav{background:rgba(0,0,0,.15);display:flex;flex-wrap:wrap;align-items:center;}
nav a{color:var(--color-textOnPrimary);text-decoration:none;padding:11px 22px;font-size:.9rem;transition:background .2s;cursor:pointer;}
nav a:hover{background:rgba(255,255,255,.15);}
/* ハンバーガー */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  padding:11px 18px;flex-direction:column;gap:5px;margin-left:auto;
}
.hamburger span{
  display:block;width:24px;height:2px;background:white;border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* モバイル時のドロワー */
@media(max-width:640px){
  .hamburger{display:flex;}
  .nav-links{
    display:none;flex-direction:column;width:100%;
    background:rgba(0,0,0,.25);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 24px;border-top:1px solid srgba(255,255,255,.1);}
  #news-panel {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    padding: 0 0 40px;
    transform: translateY(100%);
  }
  #news-panel.open {
    transform: translateY(0);
  }
  .panel-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: #d0dce8;
    border-radius: 2px;
    margin: 12px auto 0;
  }
}
@media (min-width: 641px) {
  #news-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    border-radius: 12px 0 0 12px;
    padding: 0 0 60px;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    transform: translateX(100%);
  }
  #news-panel.open {
    transform: translateX(0);
  }
  .panel-handle { display: none; }
}

/* ===== CAROUSEL ===== */
.hero{position:relative;border-bottom:3px solid var(--color-primary);overflow:hidden;height:420px;}
.carousel-track{display:flex;height:100%;transition:transform .7s cubic-bezier(.4,0,.2,1);}
.carousel-slide{
  min-width:100%;height:100%;position:relative;flex-shrink:0;
  background-size:cover;background-position:center;
}
.carousel-slide::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,0.40) 0%,rgba(255,255,255,0.60) 100%);
}
.hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px;text-align:center;
}
.hero h2{font-size:2rem;color:var(--color-textPrimary);font-weight:bold;margin-bottom:14px;text-shadow:0 2px 8px rgba(0,0,0,.35);line-height:1.4;}
.hero p{color:var(--color-textPrimary);line-height:1.9;max-width:560px;margin:0 auto;text-shadow:0 1px 4px rgba(0,0,0,.25);font-size:1rem;}
/* arrows */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.6);
  color:white;font-size:1.4rem;width:44px;height:44px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;backdrop-filter:blur(4px);
}
.carousel-btn:hover{background:rgba(255,255,255,.45);}
.carousel-btn.prev{left:16px;}
.carousel-btn.next{right:16px;}
/* dots */
.carousel-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;gap:8px;
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.5);border:none;cursor:pointer;
  transition:background .3s,transform .3s;padding:0;
}
.dot.active{background:white;transform:scale(1.3);}
@media(max-width:600px){
  .hero{height:300px;}
  .hero h2{font-size:1.4rem;}
  .carousel-btn{width:36px;height:36px;font-size:1.1rem;}
}
/* 非表示にするためのCSSクラスを用意 */
.is-hidden {
  display: none; /* 要素を画面から完全に消す */
}

main{max-width:960px;margin:0 auto;padding:32px 20px;}
section{margin-bottom:40px;}
.section-title{font-size:1.2rem;font-weight:bold;color: var(--color-textPrimary);border-left:5px solid var(--color-primary);padding-left:14px;margin-bottom:18px;display:flex;align-items:center;gap:8px;}

/* ===== 新着情報セクション ===== */
.news-section {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
}
.news-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1a5276;
  border-left: 4px solid #1a8cbe;
  padding-left: 10px;
  margin-bottom: 16px;
}
/* ===== ニュース一覧 ===== */
.news-list{
  background:white;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  overflow:hidden;
  max-height: 11.8em;
  overflow-y: auto;
  line-height: 1.5em;
}
.news-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid #f0e8e4;
}
.news-item:last-child{border-bottom:none;}
.news-date{font-size:.82rem;color:#999;white-space:nowrap;padding-top:3px;min-width:90px;}
.news-badge{font-size:.72rem;background:#e8825a;color:white;border-radius:4px;padding:2px 7px;white-space:nowrap;align-self:flex-start;margin-top:2px;}
.news-badge.info{background:#3498db;}
.news-badge.important{background:#c0392b;}
.news-text{font-size:.92rem;line-height:1.6;color:#444;flex:1;}
.news-empty{padding:28px;text-align:center;color:#aaa;font-size:.9rem;}
.news-arrow {
      margin-left: auto;
      font-size: 12px;
      color: #adc0ce;
      flex-shrink: 0;
    }
.news-item:hover { background: var(--color-background); }
/* ===== オーバーレイ（背景暗幕） ===== */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#overlay.visible {
  display: block;
}
#overlay.active {
  opacity: 1;
}
/* ===== スライドインパネル共通 ===== */
#news-panel {
  position: fixed;
  z-index: 1000;
  background: #fff;
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ===== パネルヘッダー ===== */
.panel-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e8eff5;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.panel-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a5276;
}
.btn-close {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid #c5d8e8;
  border-radius: 6px;
  background: #fff;
  color: #4a7896;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-close:hover { background: #f0f6fb; }

/* ===== パネル本文 ===== */
    .panel-body {
      padding: 24px 20px;
    }
    .panel-article-date {
      font-size: 12px;
      color: #7f8c9a;
      margin-bottom: 8px;
    }
    .panel-article-title {
      font-size: 17px;
      font-weight: 600;
      color: #1a3a52;
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .panel-article-body {
      font-size: 14px;
      color: #3c4a56;
      line-height: 1.85;
      white-space: pre-wrap;
    }

.hours-wrap{background:white;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden;}
.hours-table{width:100%;border-collapse:collapse;}
.hours-table th{background:var(--color-primary);color:var(--color-textOnPrimary);padding:10px 6px;font-size:.88rem;text-align:center;}
.hours-table td{text-align:center;padding:11px 6px;font-size:.88rem;border-bottom:1px solid #f5ece9;border-right:1px solid #f5ece9;}
.hours-table tr:last-child td{border-bottom:none;}
.hours-table .row-label{background:var(--color-menu-background);font-weight:bold;color:var(--color-textPrimary);}
.circle{color:#c0392b;font-size:1.1rem;font-weight:bold;}
.dash{color:#bbb;}
.hours-note{padding:12px 18px;font-size:.82rem;color:#888;background:var(--color-menu-background);border-top:1px solid #f5ece9;}

.map-wrap{background:white;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden;}
.map-wrap iframe{display:block;width:100%;height:380px;border:none;}
.map-info{padding:14px 18px;font-size:.88rem;color:#555;line-height:1.8;background:var(--color-menu-background);border-top:2px solid var(--color-primary);}
.map-info strong{color:var(--color-textPrimary)}

.contact-box{background:white;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07);padding:28px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;}
.tel-block .label{font-size:.85rem;color:#888;margin-bottom:4px;}
.tel-block a{font-size:2rem;font-weight:bold;color:var(--color-textPrimary);text-decoration:none;display:flex;align-items:center;gap:8px;}
.contact-note{font-size:.8rem;color:#aaa;margin-top:4px;}
.contact-detail{flex:1;min-width:200px;font-size:.9rem;color:#555;line-height:2;}
.contact-detail strong{color:#333;}

.clinic-icon{
  width: 75px;
  height: 75px;
  background-size: contain;
  background-repeat: no-repeat;
}

footer{background:var(--color-primary);color:var(--color-textOnPrimary);text-align:center;padding:24px 16px;font-size:.82rem;line-height:2;}
footer a{color:var(--color-textPrimary);text-decoration:none;}
#copyright {
  color:var(--color-textOnPrimary);
  margin-top:8px;
}

/* ===== ▲ BACK TO TOP BUTTON ===== */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;

  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;

  background: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;

  font-size: 1rem;
  line-height: 1;

  /* 非表示の初期状態 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);

  /* スムーズなフェードイン/アウト */
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease,
    background 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#back-to-top:hover {
  background: var(--color-accent-dark);
  transform: translateY(-3px) scale(1.06);
}

#back-to-top:active {
  transform: translateY(0) scale(0.96);
}

/* ▲ マーク */
#back-to-top::before {
  content: '▲';
  font-size: 0.85rem;
  display: block;
  /* 上に少し調整してビジュアル中央に合わせる */
  margin-top: -2px;
}