@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Hind+Madurai:wght@300;400;500;600;700&family=Noto+Sans+Tamil:wght@100..900&family=Oooh+Baby&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

#by_wrap{
	padding: 0;
	margin: 0;
	letter-spacing: 1px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
*:focus {
outline: none;
}
#by_wrap img {
	width: 100%;
	vertical-align: bottom;
	line-height: 0;
}
#by_wrap ul,#by_wrap li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#by_wrap .spview {
	display: none;
}
#by_wrap .pcview {
	display: block;
}

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

#by_wrap{
	width: 100%;
	margin: 3% auto 5%;
}
#by_wrap ul{
	display: block;
	width: 100%;
}
#main_contents .title{
	width: 70%;
	max-width: 230px;
	margin: 0 auto -4%;
	padding: 0;
}
#by_wrap .by_contents{
	width: 95%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#by_wrap .by_contents::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background: #000;
	bottom: 18%;
	left: 0;
	z-index: -10;
}
#by_wrap .look {
	 display: flex;
	 overflow: hidden;
	 align-items: center;
	 height: auto;
	 position: relative;
}
    .slider{
        width: 100%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }

#by_wrap .by_contents .content{
	width: 80%;
}
#by_wrap .by_contents .content .credit{
	display: block;
	width: 90%;
	margin: 8% auto;
}
#by_wrap .by_contents .content .credit .day{
	width: 80%;
	margin: 0 auto 6%;
}

@media only screen and (max-width: 768px)  {
				#by_wrap{
					max-width: 768px;
				}
				#main_contents .title {
					width: 45%;
					max-width: 150px;
					margin: 5% auto -10%;
					padding: 0;
				}
				#by_wrap .content {
					width: 150px;
				}
				#by_wrap .by_contents::after{
					bottom: 20%;	
				}
				#by_wrap .by_contents .content .credit .day{
					width: 90%;
					margin: 0 auto 6%;
				}
				}

.lo{
    opacity: 0;
}
.lo.sr{
    -webkit-animation: fadein 1.6s forwards 1.0s ease;
    animation: fadein 1.6s forwards 1.0s ease;
}
@keyframes fadein {
    0% {
        opacity: 0;     
    }
    100% {
        opacity: 1;       
    }
}
.lo1{
	opacity: 0;	
	transition: 1.6s all 0.1s ease;
}
.lo1.sr{
	opacity: 1;	
}
.lo2{
	opacity: 0;	
	transition: 1.6s all 0.6s ease;
}
.lo2.sr{
	opacity: 1;	
}