@charset "UTF-8";

body {
	background:#eef8d0;			/*#EBF8C4*/
  padding: 130px 0px 70px 0px;
	font:'Noto Sans JP';
    font-size: 18px;
  }
 
.container {
  margin: 0 auto;
  width: 330px;		/*330*/		/*ookiku-suruto-hensin-suru*/
  height: 264px;		/*264*/	
  position: relative;
	padding:0px 0px 0px 1%;
  perspective:860px;		/**1000px*/
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
	display: flex;
	justify-content: center;
	align-items: center;
}

p{
}

.crsln {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
	display: flex;			/*Daiji*/
	justify-content: center;
	align-items: center;
	animation-name:kaiten;
	animation-duration:18s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes kaiten {
	    0% {transform:rotateY(0deg);}
    10% {transform:otateY(60deg);}
    16.7% {transform:rotateY(60deg);}
    26.7% {transform:rotateY(120deg);}
    33.3% {transform:rotateY(120deg);}
    43.3% {transform:rotateY(180deg);}
    50% {transform:rotateY(180deg);}
    60% {transform:rotateY(240deg);}
    66.7% {transform:rotateY(240deg);}
    76.7% {transform:rotateY(300deg);}
    83.4% {transform:rotateY(300deg);}
    93.4% {transform:rotateY(360deg);}
    100% {transform:rotateY(360deg);}
}

.item {
  display: block;
  position: absolute;
	top:20%;
  width: 260px;
  height: 208px;
  line-height: 200px;
  /*font-size:14px;*/		/*5em*/
  /*text-align:center;*/
  color: #FFF;
  opacity:1;		/*0.95*/
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
    background: #5E523A;
}

.b {
  transform: rotateY(60deg) translateZ(250px);
      background:#5E523A;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
      background:#afcc33;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
      background:#5d5d63;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
      background:#e09540;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background:#004720;
}

img{
	width:auto;
	 height:auto;
	  max-width:100%;
	  max-height:100%;
  border-radius: 10px;
	object-fit:cover;
	/*object-fit:cotain;*/
}

@keyframes zoom{
	0% {transform:scale(1);}
	7% {transform: scale(2);}
	15% {transform:scale(1);}
	100% {transform:scale(1);}
}

.hov1{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function:ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:-1s;
		/*animation: kurun 1.3s forwards;*/
}

.hov2{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function: ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:13.8s;			/*14.1*/
}

.hov3{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function:ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:10.8s;			/*11*/
}

.hov4{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function:ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:7.8s;			/*7.9*/
}

.hov5{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function:ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:4.8s;
}

.hov6{
  /*transform-style: preserve-3d;*/
	animation-name:zoom;
	animation-duration:18s;
	animation-timing-function:ease-out;
	animation-iteration-count:100;
	animation-direction: nomal;
	animation-delay:1.9s;			/*2.3*/
}

.overlay1 {
    position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
    line-height: 30px;
    /*inset: 0;*/
    /*display: flex;*/
    /*flex-direction:column;*/
    /*justify-content: center;*/
    /*align-items: flex-start;*/
    color: #fff;
    font-size: 1.5rem;
    text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
	animation-delay:-1s;
}
.overlay2 {
      position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
  line-height: 30px;
    color: #fff;
    font-size: 1.5rem;
    text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
	animation-delay:13.8s;
}
.overlay3 {
  position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
    line-height: 30px;
    color: #fff;
    font-size: 1.5rem;
	text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
		animation-delay:10.8s;
}
.overlay4 {
  position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
    line-height: 30px;
    color: #fff;
    font-size: 1.5rem;
	text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
		animation-delay:7.8s;
}
.overlay5 {
  position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
    line-height: 30px;
    color: #fff;
    font-size: 1.5rem;
    text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
		animation-delay:4.8s;
}

/*.overlay6::before {*/
	/*content:"Welcome Friend";*/
	/*color:yellow;*/
/*}*/

.overlay6 {
  position: absolute;
	top:160px;
  width: 260px;
  height: 100vh;
    line-height: 30px;
    color: #fff;
    font-size: 1.5rem;
    text-align:center;
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.1) rotate(1deg);
	transform: translate(30px, -300px) scale(2);			/*x,y*/
	animation: kurun 1.3s forwards;
		animation-delay:1.9s;
}

@keyframes kurun {
	60% {
		transform: translate(0, 20px) rotate(-180deg) scale(.5);
		    background: rgba(114,225,252,0.3);
	}
	100% {
		transform: translate(0) rotate(0deg) scale(1);
		opacity: 1;
	}
}


.next, .prev {
  color: #444;
  font-weight:bold;
  position: absolute;
  /*top: 100px;*/
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}

.next:hover, .prev:hover {
	color: #000;
}

.next:active, .prev:active {
  /*top: 104px;*/
  box-shadow: 0 1px 0 #999;
}

/*.next {*/
	/*right: 5em;*/
/*}*/

/*.prev {*/
	/*left: 5em;*/
/*}*/


.space{
	padding:0px 0px 0px 1%;
	margin:150px 0px 0px 0px;
}

.btn {
  display: inline-block;
    width:120px;
	height:50px;
	/*font-size:3em;*/
	font-size:50px;
  padding: 10px 0px 0px px;
  border: none;
  	border-radius:15px;
  line-height:1em;				/*tate-no-chousei*/
  text-align:center;
  text-decoration: none;
  color:#000000;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
  					background:#cae8e2;			/*#06dbcc-#C9F8CD*/
}

.btn:hover {
	color:#ff1fdc;
}

/***********************************************************/
@media only screen and (max-width: 768px) {
  .mbl{				
	width:100%;
	padding:0px 0px 0px 16.5%;		/*Daiji*/
  	}
  .mbl > div.carousel{
	width:58%;
	transform-origin:center center 0;
  	}
  .mbl > div.crsln{				/*javascript*/
	width:58%;
	transform-origin:center center 0;
  	}
	.mbl > div.carousel > div.item{
	width:58%;
	}
	.mbl > div.crsln > div.item{
	width:58%;
	}	
	.mbl > div.crsln > div.item > div.overlay1{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
	.mbl > div.crsln > div.item > div.overlay2{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
	.mbl > div.crsln > div.item > div.overlay3{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
	.mbl > div.crsln > div.item > div.overlay4{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
	.mbl > div.crsln > div.item > div.overlay5{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
	.mbl > div.crsln > div.item > div.overlay6{
	width:100%;
	top:73%;
    font-size: 1.3rem;
	line-height: 24px;
	}
}