/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 30 2025 | 06:20:59 */
/* スライドショー本体 */
.slide-img-box {
  position: relative;
  width: 100%;
  height: 46vw;
  overflow: hidden;
}

/* スライドショー本体修正版 */
.slide-img-box {
  width: 100vw;
	/* 画面の幅いっぱい */
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
	/* コンテンツ幅の中央からはみ出させる */
  position: relative;
  left: 0;
  right: 0;
}

/* 画像スライド */
.slide-img-box .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: fade;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  z-index: 1;
}

/* 画像スライド修正版 */
.slide-img-box .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
	/* 画面の幅いっぱい */
  max-width: 100vw;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: fade;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  z-index: 1;
}

/* オーバーレイ */
.slide-img-box .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 2;
}

/* ロゴ */
.slide-img-box .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
	opacity: 0.5;
}

.slide-img-box .logo img {
  max-width: 300px;
  height: auto;
}

/* アニメーション */
@keyframes fade{
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
        transform:scale(1.1);
    }
    40%{
        opacity: 1;
        transform: scale(1.2);
    }
    50%
    {
        opacity: 0;
        transform: scale(1.3);
    }
    100%{
        opacity: 0;
        z-index: 0;
    }
}


/* ロゴ画像のレスポンシブ制限 */
.slide-img-box .logo img {
  max-width: 90vw;  /* ビューポートの90%まで */
  width: auto;
  height: auto;
}

/* スマホ・タブレット専用の調整（オプション） */
@media (max-width: 768px) {
	.slide-img-box {
  	height: 80vh;
  }

	.slide-img-box .logo img {
  	max-width: 50vw;
  }
}