/* =============================
   ページナビ（基本：1000px以上で表示）
============================= */

.page-nav {
  display: none; /* デフォルト非表示 */
}

@media (min-width: 1000px) {

  .page-nav {
    display: block; /* 1000px以上で表示 */
  }

  .page-nav ul {
    border: 2px solid #e7e7e7;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 60px;
    padding: 0;
    margin: 20px auto;
    overflow: hidden;
    gap: 1px;
  }

  .page-nav ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    height: 100%;
    font-weight: 600;
  }

  .page-nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: #e7e7e7;

    background-image: url(../../img/02kanyu/list_pink.png);
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 12px;

    color: #000;
    padding: 0 0 0 45px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .page-nav ul li a br {
    display: inline;
  }

  .page-nav ul li a:hover {
    background-color: #dcdcdc;
  }

}

.hoken_aside {
 display: block;
 width: 100%;
 @important;
}

@media(min-width: 1000px) {
.hoken_aside {
display:none;
}
}


/* ============================================================ */
/* 保険料 - table */
/* ============================================================ */

/* 全体 */
.hokenryo-table {
 position: relative;
}

/* スクロール領域 */
.table-scroll {
 overflow-x: auto;
 overscroll-behavior-x: contain;
 scrollbar-width: thin;
 scroll-behavior: auto;
 scroll-padding-left: 16px;
 -webkit-overflow-scrolling: touch;
}

/* スクロール処理補助 */
.scroll-btn {
 background-color: rgba(0, 0, 0, 0.75);
 cursor: pointer;
 color: #fff;
 opacity: 1;
 position: absolute;
 top: 50%;
 transform: translate(0, -50%);
 transition: opacity 0.25s ease, visibility 0.25s ease;
 visibility: visible;
 height: 25px;
 width: 25px;
 z-index: 4;
}
.prev {
 clip-path: polygon(
  40% 0%,
  40% 20%,
  100% 20%,
  100% 80%,
  40% 80%,
  40% 100%,
  0% 50%
 );
 left: 4px;
}
.hokenryo-table.is-left .prev {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
.next {
 clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
 );
 right: 4px;
}
.hokenryo-table.is-right .next {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

/* フェード（常時ヒント） */
.hokenryo-table::after {
 background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
 content: "";
 top: 0;
 right: 0;
 position: absolute;
 pointer-events: none;
 height: 100%;
 width: 32px;
 z-index: 2;
}

/* 初回ヒント */
.scroll-hint {
 background-color: rgba(0, 0, 0, 0.75);
 border-radius: 5px;
 backdrop-filter: blur(2px);
 color: #fff;
 display: grid;
 inset: 0;
 opacity: 1;
 transition: opacity 0.4s ease;
 place-items: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
 padding: 15px;
 height: 75px;
 width: 225px;
 z-index: 3;
}
.hokenryo-table.is-right::after {
 opacity: 0;
}
.hokenryo-table.scrolled .scroll-hint {
 opacity: 0;
}

/* テーブル */
.table-scroll table th,
.table-scroll table td {
 font-size: 14px;
 scroll-snap-align: start;
 white-space: nowrap;
}
.table-scroll table th {
 background-color: #cbe7b1;
 font-weight: 400;
 text-align: center;
 padding: 20px 10px;
}
.table-scroll table td {
 background-color: #e6e6e6;
 padding: 15px 10px;
}
.table-scroll table td.small,
.table-scroll table td .small {
 font-size: 12px;
}
.table-scroll table td.center {
 text-align: center;
}
.table-scroll table td.vr {
 margin: auto;
 text-orientation: upright;
 letter-spacing: 2px;
 vertical-align: middle;
 padding: 10px 5px;
 writing-mode: vertical-rl;
}
.table-scroll table td.vr span.count {
 text-combine-upright: all;
}
.table-scroll table td.bg-bl {
 background-color: #cce1ec;
}
.table-scroll table td.bg-ye {
 background-color: #ebecc0;
}
.table-scroll table td.bg-pi {
 background-color: #f4d1dc;
}

@media (min-width: 769px) {
 /* テーブル */
 .table-scroll table {
  max-width: 100%;
  width: 100%;
 }
 .table-scroll table th,
 .table-scroll table td {
  font-size: 16px;
 }
 .table-scroll table td.small,
 .table-scroll table td .small {
  font-size: 14px;
 }

 /* 初回ヒント */
 .scroll-hint {
  display: none;
 }

 /* 全体 */
 article {
  float: none;
  width: 100%;
 }
}