@charset "UTF-8";

html{
	font-size:62.5%;
}

.flex{
	display:flex;
}

.reverse{
	flex-direction: row-reverse;
}

p, ul li, .jiko_text a, .sp-center a{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
}

p, .jiko_text{
	font-size:1.4rem;
}

h1, .name h5{
	font-family: 'Abril Fatface', cursive;
	color:#302f36;
}

.credit{
	font-size:1rem!important;
}

.mid-wrapper{
	box-sizing: border-box;
	padding:30px 0;
}

.top-caption{
	width:60%;
	margin:30px auto;
}

.big-wrapper{
	width:100%;
	padding:90px 0;
}

.big-wrapper:nth-of-type(odd){
	background-color:#fff3e9;
}

.big-wrapper:nth-of-type(even){
	background-color:#fff;
}

.container, .mov-container{
	width:60%;
	margin:auto;
}

.container{
	flex-flow:wrap;
	align-items: center;
	gap:40px 0;
}

.mov-container, .container{
	justify-content:space-around;
}

.movie{
	width:45%;
}

.item-caption, .flex-img, .style-comment, .style-img, .mid-slide, .item-credit{
	width:48%;
	box-sizing: border-box;
}

.item-caption, .style-comment, .item-credit{
	padding:0 30px;
}

.mov-container{
	margin:50px auto;
}

.item-caption h1{
	font-size:6rem;
	text-align: justify;
	letter-spacing: 2px;
}

/*文字が横から出る*/
.slide-moji{
	overflow: hidden;
}

.slide-in-moji {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-transform: translate3d(-100.5%,0,0);
  transform: translate3d(-100.5%,0,0);
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.slide-moji.isShow .slide-in-moji {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.slide-in-moji h1:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  -webkit-transition-delay: 3s;
  transition-delay: 3s;
}

.slide-moji.isShow .slide-in-moji:before {
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}

.slide-in-moji h1 {
  width: 100%;
  transition-duration: 6s;
  -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
}

.item-caption p{
	padding:20px 0;
}

.jiko_soto{
	margin:-10px auto 0;
	padding:0;
}

.jiko_text p{
	padding:10px 0;
}

.jiko_nov_img{
	width:70%!important;
	margin:20px 0;
}


/*タブレット用*/
@media screen and (max-width: 820px){

	.container, .mov-container{
		width:85%;
	}
	
	.item-caption, .style-comment, .item-credit{
		padding:0 20px;
	}
	
	.container{
		gap:60px 0;
	}

}

/*スマホ用*/
@media screen and (max-width:640px){

	.container{
		display:block;
	}

	.mov-container{
		display:flex!important;
	}
	
	.big-wrapper{
		padding:60px 0 20px;
	}
	
	.item-caption h1{
		font-size:5rem;
	}
	
	.top-caption, .container{
		width:80%!important;
	}
	
	.mov-container{
		width:90%;
	}
	
	.item-caption, .flex-img, .style-comment, .style-img, .mid-slide, .item-credit{
		width:100%;
		margin-bottom:40px;
	}
	
	.item-caption, .style-comment, .item-credit{
		padding:0 10px;
	}
	
	.style-comment, .item-credit{
		margin-top:60px;
	}

}
/* CSS Document */