@charset "UTF-8";
/* CSS Document */

a {
	text-decoration: none;
	color: #000;
}

#ch {
		font-family:"GFS Didot", serif;
		font-size: 12px;
		padding: 0 0 50px;
        overflow: hidden;
	    width: 100%;
	    line-height: 2;
}


#ch p {
	padding: 0;
	margin: 0;
}

img {
		width: 100%;
	}

/* ここからスライダー1の為のCSS */
#ch .main{
	position: relative;
}

#ch .main .content .slider .slick-slide img {
            width: 100%;
            height: auto;
	        filter: brightness(70%);
        }
    
#ch .main .content .mypattern {
            width: 100%;
        }
    
#ch .main .main_ttl{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54%;
}

#ch .slick-track{
            height: 68vh;
        }



@media only screen and (min-width: 768px)  {
	#ch .main .content .slider .slick-slide img {
        width: auto;
		height: auto;
             }
	
	#ch .slick-track{
     height: 75vh;
     }
	#ch .main .main_ttl {
    width: 27%;
	}
}
/* ここまでスライダー1の為のCSS */


#ch .read{
	width: 90%;
	margin: 15% auto 20%;
}

@media only screen and (min-width: 768px)  {
	
	#ch .read{
		width: 450px;
		margin: 10% auto;
		}
}

#ch .guide{
	display: flex;
	width: 100%;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
	margin: 0 auto 10%;
	
}

#ch .guide .link{
	width: 30%;
	text-align: center;

}

@media only screen and (min-width: 768px)  {
	#ch .guide{
	max-width: 900px;
	}
	

}


#ch .guide .link:nth-of-type(1){
	transition: 2.5s all 0.3s ease;
}
#ch .guide .link:nth-of-type(2){
	transition: 2.5s all 0.6s ease;
}
#ch .guide .link:nth-of-type(3){
	transition: 2.5s all 0.9s ease;
}

/*/////タイプライター風エフェクト/////*/
#ch .typing {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20% auto 5%;

}
 
#ch .typing-effect_01 {
  width: 11ch;
  animation: typing .9s steps(11), effect .4s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 1px solid;*/
  font-size: 28px;
}

#ch .typing-effect_01:nth-of-type(2){
  width: 13ch;
  animation: typing 1s steps(13), effect .4s step-end infinite alternate;
}

#ch .typing-effect_01:nth-of-type(3){
  width: 12ch;
  animation: typing 1s steps(12), effect .4s step-end infinite alternate;
}

@media only screen and (min-width: 768px)  {
	 #ch .typing {
	  height: 63px;
	  margin: 12% auto 5%;
	}
	#ch .typing-effect_01 {
		font-size: 46px;
	}

}
 
@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes effect {
  50% {
    border-color: transparent
  }
}

/*/////END////タイプライター風エフェクト/////*/

#ch .style{
	width: 100%;

}

#ch .style .style_1{
	width: 100%;
	margin: 5% auto 5%;

}

#ch .style_box .txt{
	width: 90%;
	margin: 5% auto;
}

@media only screen and (min-width: 768px)  {
	#ch .style{
	width: 1200px;
	margin: 0 auto;
	}
	
	#ch .style .style_1{
		width: 45%;
		margin: 5% 0 0 7%;
		}
	
	#ch section:nth-of-type(even) .style .style_1{
		margin: 5% 7% 0 auto;
		}

	#ch .style .style_1 .txt{
		margin: 5% auto;
		}
}



#ch .style .style_2{
	position: relative;
  	overflow: hidden;
	height: 45vh; /* 画像のサイズに合わせて変更ください */
	margin: 10% 0 10% 0;
}

@media only screen and (min-width: 768px)  {
	#ch .style .style_2 {
    height: 65vh;
    margin: -40% 7% 10% 0;
	}
	#ch section:nth-of-type(2) .style .style_2 {
    margin: -40% 0 10% 7%;
	}
	#ch section:nth-of-type(3) .style .style_2 {
    margin: 5% 7% 10% 0;
	}
}

#ch .style .style_2 img{
  display    : block;
  position   : absolute;/* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 6s ease infinite;
  right: 0;
}


#ch section:nth-of-type(even) .style .style_2 img{
	right: auto;
	left: 0;	
	}


#ch .style .style_2 img:nth-of-type(1) { animation-delay: 0s }
#ch .style .style_2 img:nth-of-type(2) { animation-delay: 3s }


@keyframes slideAnime{
   0% { opacity: 0 }
  25% { opacity: 1 }
  50% { opacity: 1 }
  75% { opacity: 0 }
 100% { opacity: 0 }
}

#ch .style .style_3{
	display: flex;
	width: 100%;
	margin: 10% auto;
	justify-content: space-between;
	align-items: center;
}

#ch section:nth-of-type(even) .style .style_3{
	flex-direction: row-reverse;
}

#ch .style .style_3 .img_4{
	width: 48%;
}

#ch .style .style_3 .credit{
	width: 45%;
	font-size: 11px;
	/*margin-right: 2%;*/
}

@media only screen and (min-width: 768px)  {
	#ch .style .style_3 .img_4{
    margin-left: 7%;
	width: 43%;
	}
	
	#ch .style .style_3 .credit {
    width: 35%;
    margin-right: 7%;
	font-size: 12px;
	}
	
	#ch section:nth-of-type(even) .style .style_3 .credit {
    margin-left: 7%;
	}
	
}

#ch .style .style_3 .credit .item{
	display: flex;
	justify-content: space-between;
	margin: 10% auto 5%;
    align-items: center;
	
}

@media only screen and (min-width: 768px)  {
	#ch .style .style_3 .credit .item{
	margin: 6% auto 5%;
	}
	
}

#ch .style .style_3 .credit .item .buy{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  line-height: 1;
	  text-decoration: none;
	  color: #ffffff;
	  width: 45px;
	  height: 21px;
	  transition: 0.3s;
	  background-color: #000000;
	
	
}

@media only screen and (min-width: 768px)  {
	#ch .style .style_3 .credit .item .buy{
	  width: 57px;
	  height: 25px;
	  }
	
}

#ch .style .style_3 .credit .item .buy:hover {
	opacity: .7;
}

#ch .staff{
	display: flex;
	width: 90%;
	justify-content: center;
    align-items: center;
	padding: 22px 10px;
	border: 1px solid #000;
	margin: 0 auto;
}

#ch .staff .icon{
	width: 23%;
	margin-right: 10%;
}

#ch .staff .icon img{
	
	border-radius: 50%;  /* 円形にする */
}

#ch .staff .name{
	width: 60%;
}

#ch .staff .name .sns{
	display: flex;
	justify-content: flex-start;
    align-items: flex-end;
	margin: 3% auto 0;
}

#ch .staff .name .sns .sb{
	width: 40%;
	margin-right: 10%;
}

#ch .staff .name .sns .ig{
	width: 10%;
}

@media only screen and (min-width: 768px)  {
	#ch .staff{
	width: 500px;
	padding: 30px 10px;
	}
	#ch .staff .name{
	width: 40%;
	}
}

#ch .style .style_last{
	display: flex;
}

@media only screen and (min-width: 768px)  {
	#ch .style .box{
	width: 650px;
	margin-left: 7%;
	}

	
}

	#ch .style .box .txt_2{
	width: 90%;
	margin: 5% auto 0;
	}

/*////pcview////*/
   .spview {
        display: none;
    }    
    .pcview {
        display: block;
    }
@media only screen and (max-width: 768px)  {
   .spview {
        display: block;
    }    
   .pcview {
        display: none;
    }    
}

.anim{
		opacity: 0;
		transition: 1.5s all 0s ease;
}

.anim.ac{
		opacity:1;
}


.slick-list {
	padding: 0 !important;
}
.draggable{
	padding: 0 !important;
}

.slick-slide {
    height: auto !important;
}