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

#ch {
		font-family: 'YuMincho', "Times New Roman";
		font-size: 12px;
		line-height: 2.0em;
		padding-bottom: 60px;
		/*padding-top: 1%;*/
		width: 100%;
		margin: 0 auto;
		background: #f4f4f4;
		overflow: hidden;
		}

@media only screen and (max-width: 768px){
	
#ch {
	width: 100%;
	overflow: hidden;
	font-size: 12px;

	}
	
	
}

img {
		width: 100%;
}

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

ul{
	padding: 0;
}

li{
	list-style: none;
}


#ch .main_visual{
	position: relative;
	width: 100%;
    margin: 0 auto 10%;
}

#ch .main_visual .main{
	margin: 0 auto;
	filter: brightness(0.9);
}

#ch .main_visual .logo{
	width: 63%;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#ch .read{
	margin: 0 auto 20%;
	width: 93%;
	text-align: center;
}

@media only screen and (min-width: 768px){

	#ch .main_visual .logo {
    width: 28%;
    top: 40%;
    left: 14%;
    transform: none;
	}
	#ch .read{
	width: 500px;
	margin: 0 auto 15%
	
	}
}

#ch section{
	width: 100%;
	margin: 20% auto;
}

#ch section .look1{
	width: 64%;
    margin: 0 10% 15% auto;
}

#ch section .look2{
	width: 100%;
    margin: 0 auto 15%;
}


#ch section .credit{
	margin: 8% auto;
	
}

#ch section .credit .item{
	display: flex;
    width: 95%;
    justify-content: space-between;
    margin: 3% auto 2%;
	align-items: center;
}

#ch section .credit .item .name{
	width: 65%;
}

#ch section .credit .item .name span{
	margin-left: 7%;
}

#ch section .credit .item .name .marker{
	background: linear-gradient(transparent 50%, #FCFC9D 50%);
}

#ch section .item .buy {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 11px;
  border-radius: 0px;
  width: 62px;
  height: 25px;
  transition: 0.3s;
  background-color: #000000;
}

.buy:hover {
  opacity: .7;
}

#ch section .credit .item .shop{
	margin-right: 1%;
}

#ch section .look3{
	width: 70%;
	margin: 0 auto 15% 0;
}

@media only screen and (min-width: 768px){
	#ch section{
		width: 1200px;
		position: relative;
		margin: 15% auto 30%;
	}
	
	#ch section:nth-of-type(even){
		margin: 10% auto 30%;
	}
	
	#ch section .look1 {
        width: 32%;
        position: absolute;
        left: 5%;
        top: 5%;
    }
	
	#ch section:nth-of-type(even) .look1 {
       left: 63%;

    }
	
	#ch section .look2 {
    width: 47%;
    margin: 0 5% 15% auto;
	}
	
	#ch section:nth-of-type(even) .look2 {
    width: 47%;
    margin: 0 auto 15% 5%;
	}
	
	
	#ch section .look3{
		width: 27%;
        position: absolute;
        left: 15%;
        top: 78%;
	}
	
	#ch section:nth-of-type(even) .look3{
		left: auto;
        right: 15%;
	}
	
	#ch section .credit .item{
	width: 100%;
    }
}

#ch .container{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	height: 50px;

}

#ch .container .wrapper{
	display: flex;
	animation: loop-text 30s linear infinite;
}

#ch .container .double-content{
	display: inline-block;
	font-size: 21px;
	white-space: nowrap;
}

@media only screen and (min-width: 768px){
	#ch .container{
	height: 60px;
	}
	#ch .container .double-content{
	font-size: 26px;}
	
}

@keyframes loop-text {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media only screen and (min-width: 768px){
	
}





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


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

.anim.ac{
		opacity:1;
}