body{margin:0;font-family:Helvetica,'Yu Gothic',sans-serif;background:#fff;}
.container{max-width:1100px;margin:40px auto;padding:0 20px 20px;}

.page-title{
  font-size:28px;font-weight:700;color:#2d6ca2;
  margin-bottom:18px;padding-left:18px;position:relative;
}
.page-title::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;
  width:6px;background:#2d6ca2;border-radius:3px;
}

/* リストのスタイルを更新 */
.page-description{margin:20px 0 26px;}
.page-description ul{
  margin:0 0 0 1.3em;
  padding-left:0;
  list-style:disc;
}
.page-description li{
  margin-bottom:4px;
  line-height:1.6;
  font-size:14px;
  list-style:disc;
}
.page-description2 ul {
  margin: 0 0 0 1.3em;
  padding-left: 0;
  list-style: none;  /* デフォルトの黒丸を消す */
}

.page-description2 li {
  position: relative;
  padding-left: 1.2em; /* 文字位置 */
  margin-bottom: 4px;
  line-height: 1.6;
  font-size: 14px;
}

.page-description2 li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.card{padding:20px;margin-bottom:25px;position:relative;border-radius:6px;}
.table-wrapper{overflow:auto;max-height:600px;}
.td-center{text-align: center;}

.scroll-hint{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    background:rgba(255,255,255,0.96);padding:12px 26px;border-radius:26px;
    font-size:20px;color:#2d6ca2;font-weight:bold;display:flex;
    align-items:center;gap:8px;z-index:100;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    transition:opacity .4s;
}
.scroll-hint.hidden{opacity:0;pointer-events:none;}

table{border-collapse:separate;border-spacing:0;min-width:850px;width:100%;}
th,td{white-space:nowrap;font-size:12px;padding:6px 8px;border:1px solid #ccc;background:#fff;border-right-width:0;border-bottom-width:0;}
th:last-child,td:last-child{border-right-width:1px;}
tbody tr:last-child td{border-bottom-width:1px;}

thead th{
 position:sticky;top:0;z-index:30;background:#2d6ca2 !important;color:#fff;
 border-color:#2d6ca2 !important;
}

.header-wrap{display:flex;flex-direction:column;}
.row1,.row2{padding:4px 6px;color:#fff;}

thead th::after{
 content:"";position:absolute;top:0;right:0;width:1px;height:100%;
 background:#fff;z-index:1;
}

tbody tr td{position:relative;z-index:1;}
tbody tr:nth-child(even) td{background:#f7fbff;}

.top-grid-row, .top-grid-row2{
 display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px;
}
.top-grid-row2 > *:nth-child(n+3){display:none;}

.top-button{
 background:#fff;border-radius:12px;padding:18px;text-align:center;
 font-size:18px;color:#2d6ca2;text-decoration:none;border:2px solid #2d6ca2;
 min-height:60px;display:flex;align-items:center;justify-content:center;
}

/* 左端ヘッダー(1列目)を固定 */
.fix-left-header {
    position: sticky;
    left: 0;
    z-index: 60; /* ヘッダーなので高め */
    background: #2d6ca2 !important; /* ヘッダー背景と揃える */
}

/* 左端のデータセル(薬局名)を固定 */
.fix-left {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff; /* 偶数行もあるので白基調 */
}

/* 縦線を維持する */
.fix-left-header::after,
.fix-left::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #888; /* or #fff (ヘッダーの場合) */
}

/* スマホ時（画面幅600px以下）はボタンを1列にする */
@media screen and (max-width: 600px) {
  .top-grid-row,
  .top-grid-row2 {
    grid-template-columns: 1fr !important; /* 1列レイアウト */
  }

  /* 下段のボタンを2つとも表示 */
  .top-grid-row2 > * {
    display: block !important;
  }
}

/* スマホ時（画面幅600px以下）は1列＋中央揃え */
@media screen and (max-width: 600px) {

  .top-grid-row,
  .top-grid-row2 {
    grid-template-columns: 1fr !important;
  }

  .top-grid-row2 > * {
    display: block !important;
  }

  /* 縦中央揃えの修正 */
  .top-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
  }
}

/* スマホ時：表の左右余白を狭くする */
@media screen and (max-width: 600px) {

  /* 左右余白を減らす */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 表を包む枠の余白も調整 */
  .table-wrapper {
    margin-left: -5px;
    margin-right: -5px;
  }

}

/* スマホ時：表セル内の左右余白を詰める */
@media screen and (max-width: 600px) {

  /* 全セルの余白を削る */
  table th,
  table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  /* 薬局名セル（左列）はさらに詰める */
  .fix-left {
    padding-right: 2px !important;
  }

  /* ヘッダー左列 */
  .fix-left-header .row1,
  .fix-left-header .row2 {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}