@charset "UTF-8";


.pc { display: block; }
.sp { display: none; }


.splide__slide img {
  width: 100%;       /* 親の幅に合わせる */
  height: auto;      /* 縦横比を維持 */
  display: block;    /* 下の隙間を消す */
  object-fit: cover; /* 必要に応じて切り抜きでフル表示 */
}


#main {
    top: 50px;
    height: auto;
    background: #fff;
}

#main-slider .splide__list {
  max-width: 100%;
  margin: 0 auto !important;
}


#main .ttl {
    top: 0%;
}
#sec_service::after, #sec_about::after, #sec_news::after, #sec_technology::after {
    content:none;
}


@media (max-width: 804px) {
  .pc { display: none; }
  .sp { display: block; }


#main {
  overflow: visible; /* hidden → visible に変更 */
  position: relative; /* ドットの絶対配置用に相対指定 */
height: auto !important;
        padding-bottom: 50px;
}


  .splide__slide {
    height: auto !important;
  }

  .splide__slide img {
    width: 100%;
    height: auto;
    object-fit: contain; /* cover ではなく contain で全表示 */
  }

  .splide__pagination {
  position: relative!important;  /* absolute から relative に変更 */
  bottom: auto!important;
  margin-top: 10px!important;    /* スライダー下に余白を追加 */
  text-align: center;
  }

  .splide__pagination li button {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    margin: 0 4px;
  }
  .splide__pagination li.is-active button {
    background: #08b1ea;
  }
.splide__pagination li button {
    background: #08b1ea;
}
.splide__pagination__page.is-active {
    background: #315996!important;
}


}

  /* スマホではサムネイル非表示 */
  @media (max-width: 804px) {
    #thumbnail-slider { display: none; }
  }

  /* 矢印ボタンデザイン調整 */
  .splide__arrow {
        background: rgb(255 255 255 / 50%);
    color: #fff;
    border: none;
    width: 2.0rem;
    height: 3.5rem;
    border-radius: 0%;
    font-size: 1.2rem;
    transition: background 0.3s;
  }
  .splide__arrow:hover {
    background: rgb(255 255 255 / 100%);
  }
  .splide__arrow--prev { left: 0rem; }
  .splide__arrow--next { right: 0rem; }

.splide__arrow svg {
    fill: #325a97;
    height: 1.0em !important;
    width: 1.0em !important;
}


/* サムネイルの画像＋テキストを縦方向に整える */
.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* サムネイル画像 */
.thumb-item img {
  width: 100%;
  height: auto;
  border-radius: 0px;
  display: block;
}

/* キャプション文字 */
.thumb-caption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

/* アクティブ時に強調表示 */
#thumbnail-slider .is-active .thumb-caption {
  color: #08b1ea;
  font-weight: 600;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border:none!important;
}

#thumbnail-slider{
    width: 800px;
    margin: 20px auto 50px;
}
#thumbnail-slider .splide__arrow svg{
    fill: #000;
}
#thumbnail-slider .splide__arrow{
    background: none;
}
#thumbnail-slider .splide__arrow--prev { left: -3rem; top: 34%;}
#thumbnail-slider .splide__arrow--next { right: -3rem; top: 34%;}

  @media (min-width: 803px) {

#main-slider .splide__slide a {
  position: relative;
  display: block;
  overflow: hidden; /* はみ出し防止 */
}

/* 常時見えるベース枠線 */
#main-slider .splide__slide a::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #cccccc; /* ← 通常時の枠色（グレーなど） */
  border-radius: 0px;
  box-sizing: border-box;
  opacity: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none; /* リンククリックを妨げない */
}

/* マウスオン時に枠色変更＆発光 */
#main-slider .splide__slide a:hover::after {
  border: 5px solid #08b1ea;
  box-shadow: 0 0 12px rgba(8, 177, 234, 0.5);
  transition: border-color 0.3s ease, border-width 0.1s ease, box-shadow 0.3s ease;
}
  }



/* すべてのサムネイルの初期状態 */
#thumbnail-slider .thumb-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid transparent; /* 通常は枠なし */
  border-radius: 0px;
  transition: border-color 0.3s ease;
}

/* 選択中（クリックされた）サムネイルだけ枠を表示 */
#thumbnail-slider .splide__slide.is-active .thumb-item img {
  border-color: #08b1ea; /* ← ブランドカラーなどに変更可能 */
}

/* キャプション */
#thumbnail-slider .thumb-caption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #333;
}

/* 選択中のサムネイルを拡大表示（PCのみ） */
@media (min-width: 803px) {
  #thumbnail-slider .splide__slide.is-active .thumb-item {
    transform: scale(1.08);
    transition: transform 0.3s ease, border-color 0.3s ease;
  }

  /* 拡大してもズレないように */
  #thumbnail-slider .splide__slide {
    transition: transform 0.3s ease;
  }

#thumbnail-slider .is-active{
padding-top: 5px;
}
}