@charset "utf-8";


@media only screen and (max-width: 1200px) {
	header {
	    margin-bottom: -30vh;
	}
}
@media only screen and (max-width: 1100px) {
	header {
	    margin-bottom: -20vh;
	}
}
@media only screen and (max-width: 1000px) {
	header {
	    margin-bottom: -15vh;
	}
}
@media only screen and (max-width: 900px) {
	header {
	    margin-bottom: -6vh;
	}
}
@media only screen and (max-width: 800px) {
	header {
	    margin-bottom: -4vh;
	}
}
@media only screen and (max-width: 1200px) {

	.back-image {
	}

	.slick-slider img{
	}
	.header-text_contents{
	}
	
	.header-text_contents p{
		font-size: 24px;
		padding: 15px;
	}
	section {
	    top: 0vw;
	}
	section + svg {
	    margin-top: 0;
	}
	.main-items{
		width: 27vw;
		top:12vh;
		left: 5vw;
	}
	.desc_contents_box .desc_content{
		display: block;
		overflow: hidden;
	}
	.desc_contents_box .desc_content figure.pc{
		display: none!important;
	}
	.desc_contents_box .desc_content figure.sp{
		display: block!important;
	}
	.desc_contents_box .desc_content img{
		max-width: 100%;
	}
	.desc_point-contents img {
		max-width: 100%;
	}
	#convenient-situaition .situation-box .maincontents-area::before,
	#convenient-situaition .situation-box .maincontents-area,
	#convenient-situaition .situation-box .maincontents-area::after{
		background-size: 70% 100%;
		width: 100%;
		min-height: 200px;
	}
	#convenient-situaition .situation-box .maincontents-area::after{
		min-height: 120px;
	}
	#lineup .main-contents{
		width: 100vw;
	}
	#lineup .lineup-titlearea {
		height: 50vw;
	}
	.products-box .product-desc {
		min-height: 7.5rem;
	}
	.products-box .button-area {
		justify-content: space-around;
		gap: 0;
	}


	.product-desc-title h2{
		font-size: 27px;
	}

        #Recommend .main-contents{
            width: 90vw;
        }







}