* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: sans-serif; }

    .slideshow {
      position: relative;
      width: 100%;
      height: 550px;
      overflow: hidden;
    }

    .background-fade {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('../img/kyoto_bk.jpg') center/cover no-repeat;
      z-index: 0;
      opacity: 0;
      animation: bgFadeIn 1.5s ease-out forwards;
    }

    @keyframes bgFadeIn {
      to { opacity: 1; }
    }

    .text-overlay {
      position: absolute;
      z-index: 9999;
      left: 0%;
      top: 40%;
      /*transform: translate(-50%, -50%);*/
		text-align:center;
      font-size: 20px;
		letter-spacing:3px;
		font-weight:600;
      color: #002d6b;
      opacity: 0;
      animation: textFadeIn 1s ease-out 0.5s forwards;
		background-color:rgba(255,255,255,0.75);
		width:100%;
		padding-top:35px;
		padding-bottom:35px;
    }
.text-overlay span{
	width:300px;
	display:block;
	margin:auto;
	padding-top:10px;
}

    @keyframes textFadeIn {
      to { opacity: 1; }
    }

    .slice {
      position: absolute;
      top: 0;
      width: 100%;
      height:550px;
      overflow: hidden;
    }

   .left {
  clip-path: polygon(0 0, 33.3333% 0, 30% 100%, 0% 100%);
}
.center {
  clip-path: polygon(33.3333% 0, 66.6666% 0, 63.3333% 100%, 30% 100%);
}
.right {
  clip-path: polygon(66.6666% 0, 100% 0, 100% 100%, 63.3333% 100%);
}


    .inner-image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      transform: translateX(-20%);
      opacity: 0;
      animation: fadeSlideIn 1.2s forwards;
    }

    @keyframes fadeSlideIn {
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

.background-fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../img/kyoto_bk.jpg') center/cover no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.background-fade.show {
  opacity: 1;
}
.slice {
  transition: opacity 1.5s ease-out;
}



@media screen and (max-width: 640px) {
  .slideshow {
    height: 200px;
  }

  .slice {
    height: 300px;
  }

  .text-overlay {
    font-size: 1.2rem;
	  background-color:rgba(255,255,255,0.80);
  }

  /* ← ココ！スマホ専用のclip-path角度変更 */
 .left {
  clip-path: polygon(0 0, 33.3333% 0, 20% 100%, 0% 100%);
}

.center {
  clip-path: polygon(33.3333% 0, 66.6666% 0, 53.3333% 100%, 20% 100%);
}

.right {
  clip-path: polygon(66.6666% 0, 100% 0, 100% 100%, 53.3333% 100%);
}
.text-overlay{
		 /*position: absolute;
      z-index: 9999;
      left: 0%;
      top: 33%;*/
      /*transform: translate(-50%, -50%);*/
		/*text-align:center;
      font-size: 15px;
		letter-spacing:2px;
		font-weight:600;
      color: #002d6b;
      opacity: 0;
      animation: textFadeIn 1s ease-out 0.5s forwards;
		background-color:rgba(255,255,255,0.75);
		width:100%;
		padding-top:10px;
		padding-bottom:10px;*/
	display:none;
	}
.text-overlay span{
	width:180px;
	display:block;
	margin:auto;
	padding-top:5px;
}

}