/******************************************************
 *
 * スライドショー
 *
 ******************************************************/

.img-frame1,
.img-frame2,
.img-frame3,
.img-frame4,
.img-frame5,
.img-frame6 {
	position:	relative;
	width:		100%;
	height:		500px;
	overflow:	hidden;
	margin:		0 auto;
}

/* 角丸落とし */
.img-frame2,
.img-frame4,
.img-frame6 {
   clip-path: inset(0 round 50px 50px 50px 50px);
} 



/* スマホ用微調整 */
@media screen and (max-width:768px){
	.img-frame1,
	.img-frame2,
	.img-frame3,
	.img-frame4,
	.img-frame5,
	.img-frame6 {
		height:	300px;
	}
}
/* **************************************************************************************************** */


/* とりあえず８画像を用意した */
.img-11, .img-12, .img-13, .img-14, .img-15, .img-16, .img-17, .img-18, 
.img-21, .img-22, .img-23, .img-24, .img-25, .img-26, .img-27, .img-28,
.img-31, .img-32, .img-33, .img-34, .img-35, .img-36, .img-37, .img-38,
.img-41, .img-42, .img-43, .img-44, .img-45, .img-46, .img-47, .img-48,
.img-51, .img-52, .img-53, .img-54, .img-55, .img-56, .img-57, .img-58,
.img-61, .img-62, .img-63, .img-64, .img-65, .img-66, .img-67, .img-68 {
	position:	absolute;
	top:		0;
	left:		0;
	width:		100%;
	height:		100%;
	background-size:	cover;
	background-repeat:	no-repeat;
}

.img-11,	.img-21,	.img-31,	.img-41,	.img-51,	.img-61	{	background-image: url('./../img/background/toppage-effect/1.jpg');	}
.img-12,	.img-22,	.img-32,	.img-42,	.img-52,	.img-62	{	background-image: url('./../img/background/toppage-effect/2.jpg');	}
.img-13,	.img-23,	.img-33,	.img-43,	.img-53,	.img-63	{	background-image: url('./../img/background/toppage-effect/3.jpg');	}
.img-14,	.img-24,	.img-34,	.img-44,	.img-54,	.img-64	{	background-image: url('./../img/background/toppage-effect/4.jpg');	}
.img-15,	.img-25,	.img-35,	.img-45,	.img-55,	.img-65	{	background-image: url('./../img/background/toppage-effect/5.jpg');	}
.img-16,	.img-26,	.img-36,	.img-46,	.img-56,	.img-66	{	background-image: url('./../img/background/toppage-effect/6.jpg');	}
.img-17,	.img-27,	.img-37,	.img-47,	.img-57,	.img-67	{	background-image: url('./../img/background/toppage-effect/7.jpg');	}
.img-18,	.img-28,	.img-38,	.img-48,	.img-58,	.img-68	{	background-image: url('./../img/background/toppage-effect/8.jpg');	}


/******************************************************
	エフェクトパターン　１と２（共通）
		２は、角丸落としを加えただけ
 ******************************************************/
.img-11, .img-21	{	animation: slide-animation-11 30s infinite;	}
.img-12, .img-22	{	animation: slide-animation-12 30s infinite;	}
.img-13, .img-23	{	animation: slide-animation-13 30s infinite;	}
.img-14, .img-24	{	animation: slide-animation-14 30s infinite;	}
.img-15, .img-25	{	animation: slide-animation-15 30s infinite;	}
.img-16, .img-26	{	animation: slide-animation-16 30s infinite;	}
.img-17, .img-27	{	animation: slide-animation-17 30s infinite;	}
.img-18, .img-28	{	animation: slide-animation-18 30s infinite;	}

@keyframes slide-animation-11 {
  0% {opacity: 0;}
 10% {opacity: 1;}
 20% {opacity: 1;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-12 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 1;}
 30% {opacity: 1;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-13 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 1;}
 40% {opacity: 1;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-14 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 1;}
 50% {opacity: 1;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-15 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 1;}
 60% {opacity: 1;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-16 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 1;}
 70% {opacity: 1;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-17 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 1;}
 80% {opacity: 1;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-18 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 1;}
 90% {opacity: 1;}
100% {opacity: 0;}
}

/* **************************************************************************************************** */


/******************************************************
	エフェクトパターン　３と４（共通）
		４は、角丸落としを加えただけ
 ******************************************************/


.img-31,	.img-41,	.img-51,	.img-61	{	animation: slide-animation-31 30s infinite;	}
.img-32,	.img-42,	.img-52,	.img-62	{	animation: slide-animation-32 30s infinite;	}
.img-33,	.img-43,	.img-53,	.img-63	{	animation: slide-animation-33 30s infinite;	}
.img-34,	.img-44,	.img-54,	.img-64	{	animation: slide-animation-34 30s infinite;	}
.img-35,	.img-45,	.img-55,	.img-65	{	animation: slide-animation-35 30s infinite;	}
.img-36,	.img-46,	.img-56,	.img-66	{	animation: slide-animation-36 30s infinite;	}
.img-37,	.img-47,	.img-57,	.img-67	{	animation: slide-animation-37 30s infinite;	}
.img-38,	.img-48,	.img-58,	.img-68	{	animation: slide-animation-38 30s infinite;	}

@keyframes slide-animation-31 {
  0% {opacity: 0; transform: scale(1.0)}
 10% {opacity: 1;}
 20% {opacity: 1; transform: scale(2.0)}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-32 {
  0% {opacity: 0;}
 10% {opacity: 0; transform: scale(1.1)}
 20% {opacity: 1;}
 30% {opacity: 1; transform: scale(1.0)}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-33 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0; transform: scale(1.0)}
 30% {opacity: 1;}
 40% {opacity: 1; transform: scale(1.1)}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-34 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0; transform: scale(1.1)}
 40% {opacity: 1;}
 50% {opacity: 1; transform: scale(1.0)}
 60% {opacity: 0;}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-35 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0; transform: scale(1.0)}
 50% {opacity: 1;}
 60% {opacity: 1; transform: scale(1.1)}
 70% {opacity: 0;}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-36 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0; transform: scale(1.0)}
 60% {opacity: 1;}
 70% {opacity: 1; transform: scale(1.1)}
 80% {opacity: 0;}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-37 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0; transform: scale(1.0)}
 70% {opacity: 1;}
 80% {opacity: 1; transform: scale(1.1)}
 90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-38 {
  0% {opacity: 0;}
 10% {opacity: 0;}
 20% {opacity: 0;}
 30% {opacity: 0;}
 40% {opacity: 0;}
 50% {opacity: 0;}
 60% {opacity: 0;}
 70% {opacity: 0; transform: scale(1.2)}
 80% {opacity: 1; transform: scale(1.0)}
 90% {opacity: 1; transform: scale(2.0)}
100% {opacity: 0;}
}


/* **************************************************************************************************** */

/******************************************************
 *
 * 真ん中に表示するメッセージ
 *
 ******************************************************/


.msg{
   font-size: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01,
.msg-02,
.msg-03,
.msg-04,
.msg-05,
.msg-06,
.msg-07,
.msg-08{
    text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}

/* **************************************************************************************************** */


/******************************************************
 *
 * スライドショー（横自動スライド方式）
 *
 ******************************************************/
.slide-container {
    width: 100%;
    margin: 0px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}

/* **************************************************************************************************** */

/* エフェクトパターン オリジナル
@keyframes slide-animation-01 {
  0% {opacity: 1; transform: scale(1.0);}
 30% {opacity: 1;}
 40% {opacity: 0; transform: scale(1.15);}
 90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
  0% {opacity: 0;}
 30% {opacity: 0; transform: scale(1.1);}
 40% {opacity: 1;}
 60% {opacity: 1;}
 70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
  0% {opacity: 0;}
 60% {opacity: 0;  transform: scale(1.0);}
 70% {opacity: 1;}
 90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
*/