/* カルーセルのドットを真ん丸に */
.c-carousel__dots button,
.c-carousel__dots span,
.c-carousel__dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}
.c-carousel__dots button.active,
.c-carousel__dots span.active,
.c-carousel__dots .dot.active {
  background: #333;
  border-color: #333;
}
section.p-top {
    padding-bottom:90px;
}

/* お知らせアイコンとリンクを横並びに */
.p-top .p-section__description {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    margin: 5px 0 20px;
    padding: 5px;
}
.p-top .p-section__description .p-sidemenu__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.p-top .p-section__description a {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.6;
}
:root{
  --carousel-gap: 12px;
  --carousel-radius: 10px;
  --carousel-nav-bg: rgba(0,0,0,.5);
  --carousel-nav-color: #fff;
  --carousel-dot: #cbd5e1;
  --carousel-dot-active: #0D3B91;
}

/* 外枠 */
.c-carousel{ 
    position: relative; 
    width: 100%; 
    max-width: 830px; 
    max-height:300px;
    margin: 0 auto;
}

/* ビューポート */
.c-carousel__viewport{
  overflow: hidden;
  background: #fff;
}

/* 横並びのトラック */
.c-carousel__list{
  display: flex;
  transition: transform .35s ease;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* スライド要素（幅はJSで計算してインラインstyle付与） */
.c-carousel__slide{
    flex: 0 0 auto;
    width: 100%; /* JSで830px固定を設定するが、モバイルでは100% */
}

/* 中身（画像など） */
.c-carousel__item{
  display: block;
  width: 100%;
  overflow: hidden; 
  /*aspect-ratio: 16 / 10;*/ /* 画像比率がバラつく場合の安定化 */
  height: 300px;        /* PC用の高さ */
}
.c-carousel__item img{
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

/* ナビボタン */
.c-carousel__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 9999px; border: none;
  background: var(--carousel-nav-bg); color: var(--carousel-nav-color);
  display: grid; place-items: center; cursor: pointer;
}
.c-carousel__nav--prev{ left: 8px; }
.c-carousel__nav--next{ right: 8px; }
.c-carousel__nav:hover{ filter: brightness(1.1); }
.c-carousel__nav:disabled{ opacity: .4; cursor: default; }

/* ドット */
.c-carousel__dots{
  display: flex; gap: 6px; justify-content: center; align-items: center;
  margin-top: 10px;
}
.c-carousel__dots button{
  width: 8px; height: 8px; border-radius: 9999px; border: none; cursor: pointer;
  background: var(--carousel-dot);
}
.c-carousel__dots button[aria-current="true"]{ background: var(--carousel-dot-active); }

/* スマホ対応 */
@media (max-width: 640px) {
  .c-carousel__item {
    width: 100%;
    height: auto;     /* 高さは画像比率に従う */
    aspect-ratio: 830 / 300; /* 縦横比を維持して自動調整 */
  }
}