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


		
	@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');

		html,
		body {
			padding: 0;
			margin: 0;
		}
		#by {
			padding: 0;
			margin: 0;
			letter-spacing: 1px;
			line-height: 2;
			width: 100%;
			margin-bottom: 50px;
			font-family: "Noto Sans JP", sans-serif;
			overflow: hidden;
		}
		#by ul,#by li {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		#by a {
			color: #000000;
			text-decoration: none;
		}
		#by img {
			width: 100%;
			border: none;
			line-height: 0;
			vertical-align: bottom;
		}
		/*////pcview////*/
		   .spview {
				display: none;
			}    
			.pcview {
				display: block;
			}
		@media only screen and (max-width: 768px)  {
		   .spview {
				display: block;
			}    
		   .pcview {
				display: none;
			}    
		}

		#by_header{
			max-width: 1200px;
			margin: 0 auto;
		}	
		#by_header .title_main{
			max-width: 530px;
			width: 100%;
			margin: 5% auto;
			opacity: 0;
    		animation: fadeIn 2s forwards;
		}
		#by_header .read{
			text-align: center;
			font-size: 16px;
			animation: fadeIn 3s forwards;
		}
		#by_main{
			max-width: 1200px;
			margin: 5% auto;

		}
		#by_main .inner{
			display: grid;
			width: 60%;
			margin: 0 auto;
			grid-template-columns: 1fr 1fr;
			gap: 15px;
		}
		#by_main .inner li{
			position: relative;
		}
		#by_main .inner .credit1,
		#by_main .inner .credit2,
		#by_main .inner .credit3,
		#by_main .inner .credit4{
			position: relative;
		}
		#by_main .inner .credit1::after{
			content: "DOUBLE CLOTH SHIRT CARDIGAN / ¥14,580";
			position: absolute;
			bottom: 0px;
			right: 10px;
			color: #fff;
			width: 100%;
			height: 100%;
			font-size: 8px;
			transform: translate(0,0);
			text-align: right;
		}
		#by_main .inner .credit4::after{
			content: "DOUBLE CLOTH JOGGER PANTS / ¥13,200";
			position: absolute;
			bottom: 0px;
			right: 10px;
			color: #fff;
			width: 100%;
			height: 100%;
			font-size: 8px;
			text-align: right;
			transform: translate(0,0);
			}
		#by_main .sozai{
    display: block;
    width: 40%;
    margin: 3% auto;

}
		#by_main .item{
    width: 40%;
    margin: 3% auto;
    display: block;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background: #000;
    text-align: center;

}
		
		@media only screen and (max-width: 768px)  {
		#by_header .title_main{
        width: 92%;
        margin: 12% auto;
    
    }
		#by_header .title_sub{
			max-width: 160px;
			transform: translate(0,0);
		}
		#by_header .read{
        font-size: 12px;
    
    }
		#by_main{
        width: 100%;
        margin: 12% auto;
    
    }
		#by_main .inner{
			width: 100%;
			gap:5px;
		}
		#by_main .inner .credit1::after,
		#by_main .inner .credit2::after{
			width: 100%;
			font-size: 6px;
			bottom: -10px;
		}
		#by_main .inner .credit3::after{
			content: "";
			}
		#by_main .inner .credit4::after{
			width: 100%;
			font-size: 6px;
			bottom: -10px;
			content: "DOUBLE CLOTH JOGGER PANTS / ¥13,200";
			}
		#by_main .sozai{
        width: 90%;
        margin: 10% auto;
    
    }
		#by_main .item{
        width: 85%;
    
    }
		}


/*--------------アニメーション--------------*/

#by_main ul li{
	opacity: 0;
    animation: fadeIn 1s forwards;
}
#by_main ul li:nth-child(1) {
    animation-delay: .2s;
}

#by_main ul li:nth-child(2) {
    animation-delay: .5s;
}

#by_main ul li:nth-child(3) {
    animation-delay: .8s;
}

#by_main ul li:nth-child(4) {
    animation-delay: 1.1s;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#by .sozai {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 2s forwards 2s;
}

@keyframes fadeUp {
    to {
        opacity: 1.4;
        transform: translateY(0);
    }
}
#by .item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 2s forwards 2s;
}

@keyframes fadeUp {
    to {
        opacity: 1.4;
        transform: translateY(0);
    }
}