@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	35% {opacity: 1;}
	45% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	65% {opacity: 1;}
	75% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	65% {opacity: 1;}
	75% {opacity: 1;}
	100% {opacity: 1;}
}

/*mainimg
---------------------------------------------------------------------------*/
#mainimg {
	clear: left;
	width: 100%;
	height: 40vw;
	position: relative;
	overflow: hidden; /* はみ出しを防ぐ */
  background: rgba(0, 0, 0, 0.1); /* 透明度10%の黒 */
}
.slide1,.slide2,.slide3 {
	animation-duration: 15s;	/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height: 100%;
	object-fit: cover; /* アスペクト比を保って親要素に収める */
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}

.slide1 {
	position: relative;width: 100%;height: 100%;z-index: -1;
	animation-name: slide1;
}
.slide2 {
  z-index: -1;
	animation-name: slide2;
}
.slide3 {
  z-index: -1;
	animation-name: slide3;
}

/* 画面幅500px以下で高さを500pxにする */
@media screen and (max-width: 500px) {
  #mainimg {
    height: 70vw;
  }
    .mainimg-text {
    font-size: 6vw !important;
  }

  .mainimg-subtext {
    font-size: 3.2vw !important;
  }
}

/*スライドショーの常時表示テキスト
----------------------------------------------------------------------------------*/
.mainimg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: 5vw;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  text-shadow: 5px 5px 8px #000, -5px -5px 8px #000;
  /* アニメーション */
  opacity: 0;
  animation: fadeInLeft 1.5s ease-out 1 forwards;
}

.mainimg-subtext {
  display: block;
  margin-top: 0.5em;
  font-size: 2vw;
  font-weight: bold;
  color: #eee;
  opacity: 0.9;
  white-space: nowrap;
  text-align: center;
  text-shadow: 4px 4px 8px #000, -4px -4px 8px #000;
  /* アニメーション */
  opacity: 0;
  animation: fadeInRight 1.5s ease-out 1 forwards;
}

@media screen and (max-width: 900px) {
  .mainimg-text {
    text-shadow: 2px 2px 5px #000, -2px -2px 5px #000;
  }
  .mainimg-subtext {
    text-shadow: 2px 2px 2px #000, -2px -2px 2px #000;
  }
}

.br-sp br {
  display: none;
}

@media screen and (max-width: 500px) {
  .br-sp br {
    display: inline;
  }
}

/* 左からフェードインするアニメーション */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate(-70%, -50%); /* 左から登場 */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%); /* 中央で止まる */
  }
}

/* 右からフェードインするアニメーション */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate(30%); /* 右から登場 */
  }
  100% {
    opacity: 1;
    transform: translate(0); /* 中央で止まる */
  }
}

/*トップスライドショーに緑の装飾を追加
----------------------------------------------------------------------------------*/
/* 緑の装飾 */
.svg-decoration {
  position: absolute;
  width: 50vw;
  height: 45vw;
  z-index: 5;
  pointer-events: none;
  opacity: 0.9;
}

.top-left {
  top: 0;
  left: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

.svg-decoration svg {
  width: 100%;
  height: 100%;
  display: block;
}