@charset "UTF-8";

/*-------------------------------

　PC用トップ画像（Swiper使用）
　変更時、js.jsも確認
  参考サイト：https://b-risk.jp/blog/2022/04/swiper/

-------------------------------*/  
:root {
  --easing: cubic-bezier(0.61, 1, 0.88, 1);
  --color-theme: #f5695f;
}
.swiper {
  /*画像の横幅を調整*/
  width: 100%;
}
/* 画像を中央寄せ */
  .slide-media{
    /* 画像の縦幅を調整 */
    height: 440px; 
    position: relative;
    overflow: hidden;
  }
  .slide-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  /* 画像のズーム機能 */
    transition: 7s 0.5s ease-out;
  }
  .swiper-slide[class*=-active] .slide-media img {
    transform: scale(1.05);
  }
  /* スライドショー　文字 */
  .slide-title {
    font-family: 'Vidaloka', serif;
    font-size: 3rem;
    font-weight: normal;
    line-height: 1.6;
    position: absolute;
    right: 8rem;
    bottom: 6%;
    margin-left: 16rem;
    text-align: right;
    color: #ffffff;  
    text-shadow: 3px 3px 1px #383838;
  }
  /* 文字の表示設定 */
  .swiper-slide[class*=-active] .slide-title {
    animation: fadeIn 2s 1s var(--easing) both;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      filter: blur(300px);
    }
    100% {
      opacity: 1;
      filter: blur(0);
    }
  }
  /* モバイル時の表示設定 */
  @media only screen and (max-width:767px) {
    .slide-title {
      font-size: 1.8rem;
      right: 3rem;
      margin-left: 7rem;
    }
  }
  
/*-------------------------------

　お知らせ（自動再生）

-------------------------------*/
.news_wrapper{
	position:relative;
	margin:20px 0px;
}
.news_box {
	height:30px;
	line-height:30px;
	overflow:hidden;
}
#controls {
  position: absolute;
  bottom: 5px;
  right: 0;
  display: flex;
  gap: 7px;
}
#next {
  border-top: 10px solid transparent;
  border-left: 10px solid #4682b4;
  border-bottom: 10px solid transparent;
	width:1em;
}
#prev {
  border-top: 10px solid transparent;
  border-right: 10px solid #4682b4;
  border-bottom: 10px solid transparent;
	width:1em;
}
#prev:hover,#next:hover {
	cursor:pointer;
}
/* モバイル時、日付とコメントを分割 */
@media only screen and (max-width:767px) {
.news_box{
	height:60px;
}

}
/*-------------------------------

　株式会社ネットスカイとは
下線、画像アニメーション
-------------------------------*/
.line-span {
  position: relative;
  z-index: -1;
}
.line-span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -250px;
  width: 0%;
  height: 350px;
  background: #002557;
  z-index: -2;
  transition: all 0.8s;
}
/* フェードイン時に入るクラス */
.line-span.isActive:after {
  width: 100%;
}
.fadein {
    /* 最初は非表示 */
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
/* bootstrapのカード編集部分 */
.card-text{
  height: 70px;
}
.card-body{
  background-color: #e7e6e6c0;
}
.card{
  --bs-card-inner-border-radius: none;
  --bs-card-border-radius: none;
  --bs-card-border-width: none;
}

@media only screen and (max-width:767px) {
/* モバイル時、画像高さを縮小 */
  .card-img{
      height: 30vh;    
  }
}

