@charset "utf-8";
/* test */

@media only screen and (max-width: 1200px){
	/* we-are-container */
   .we-are-container > div{
	    padding: 20px 15px 0;
    }
    /* .tag_container  */
    .tag_container > div{
		padding-left: 150px;
	    padding-right: 15px;
    }
	.tag_container > div > span{
		left: 15px;
	}
    .main-visual-container .main_images figure img{
		margin-top: 40px;
	    width:580px;
    }
	
	/* .column-container  */
	.column-container  h2 .baloon-box img{
	    width: 490px;
    }
    .column-container  h2 .baloon-box img.w-1201{
	    display: none;
    }
    .column-container  h2 .baloon-box img.w-1200{
	    display: inline-block;
    }
.concept-container  h2 .baloon-box img.w-1000{
	display:none;
	width: 438px;
}
}
@media only screen and (max-width: 1100px){
	.concept-container ul li figure{
		width: 300px;
		height: 300px;
	}
	.concept-container ul li h3,
	.concept-container ul li p{
		width: 300px;
	}
	.concept-container  h2 .baloon-box img.w-1000{
		display:block;
	}
	.concept-container  h2 .baloon-box img.w-1200{
		display:none;
	}

}



@media screen and (max-width: 768px){
	/* .main-visual-container */
	.main-visual-container{
		height: auto;
	    background-size: auto 100%;
    }
	.main-visual-container > div{
		padding: 125px 0 0;
		margin: 0;
		width: 100%;
	}
	.main-visual-container > div ul {
		width:100%;
		height:auto;
		margin: 0 auto;
	}
	.main-visual-container > div ul li img{
		width: 100%;
	}
	.main-visual-container > div ul li figure img{
		position: static;

	}
	.main-visual-container div.swiper-top{
		width:auto;
		height:auto;
		overflow:hidden;
		background:#fff;
		margin: 0 auto 40px;
	
	}
	.main-visual-container .swiper-pagination{
		bottom: -28px;
	}
	
	
    .main-visual-container > div ul li div{
        position: static;
	    margin-left: 0;
	    min-width:0;
		max-width:100%;
	    width: 100%;
	    background :transparent;
	    text-align:left;
		line-height:1;
    }
	.main-visual-container > div ul li div span{
		border:none;
		margin:0;
		padding:13px 15px 15px;
		font-size: 1.2rem;
	}
	.main-visual-container > div ul li div p {
		position: relative;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	  
		padding: 15px 15px 0;
		line-height:1.4;
		font-size: 1.6rem;
	}
	.main-visual-container > div ul li div p::before{
		display: none;
	}
	.swiper-button-next,
	.swiper-button-prev{
		display:none !important;
	}



	/* we-are-container */
    .we-are-container{
		padding: 15px  0;
    }
    .we-are-container h2 button{
	    width:30px;
	    min-width: 0;
    	padding: 0;
	    margin: 0;
    	height: 30px;
	    margin-top: -15px;
    }
    .we-are-container h2 button span:before,
    .we-are-container h2 button span:after{
	    right: 10px;
		width: 8px;
    }
    .we-are-container h2 button span:before{
	    margin-top:-6px;
    }
    .we-are-container h2 button span:after{
	    margin-top:-1px;
    }
    .we-are-container h2 img{
	    width: 119px;
    }
    .we-are-container h2 span{
	    margin-top: 5px;
	    font-size:1.2rem;
    }
	.we-are-container h2 span img{
		width: 95px;
	}
	.we-are-container h3{
		padding-top:30px;
		text-align: center;
		font-size:1.6rem;
	}
	.we-are-container p{
		padding:15px 0 30px;
		font-size:1.4rem;
		line-height: 2;
		text-align: left;
	
	}



	
	/* tag_container */
    .tag_container{
		padding: 20px 0;
    }
	.tag_container > div{
		padding-left: 100px;
	}
	.tag_container > div > span{
		left: 0px;
		font-size: 1.4rem;
	}
	.tag_container .tag-swiper{
		height: 20px;
	}
	.tag_container .swiper-slide{
		font-size: 1.3rem;
	}





	/* pick-up-container */
    .pick-up-container{
    	padding: 30px 0 40px;
    }
	.pick-up-container > div{
		width: 100%;
		margin: 0;
		padding: 0;
	}
    .pick-up-container h2{
	    text-align: center;
    }
    .pick-up-container h2 img{
	    width: 140px;
    }
	.pick-up-container h2 .baloon-box img{
		width: 232px;
	}
	.pick-up-container .swiper-wrapper{
		display: flex !important;
		height: 100% !important;
	
	}
	.pick-up-container .switch-btn-container{
		margin-top:  30px;
	}
	.pick-up-container .switch-btn-container button{
		width: 90px;
		min-width: 0;
		height:32px;
		margin: 0 5px;
		line-height: 30px;
		border-radius: 15px;
		font-size:1.6rem;
	}



	/* new-recipe-container */
	.new-recipe-container{
		padding: 30px 0 0;
		background-size: 360px auto;
	}
	.new-recipe-container::after{
		display:none;
	}
	.new-recipe-container *:focus{
		outline: none;
	}
	.new-recipe-container *{
		-webkit-tap-highlight-color: transparent!important;
		tap-highlight-color: transparent !important;
	}
	.new-recipe-container > div{
		padding: 40px 15px 0;
	}
	
	.new-recipe-container h2{
		padding:0;
		text-align: center;
	}
	.new-recipe-container h2 img{
		width: 110px;
	}
	.new-recipe-container h2 .baloon-box img{
	    width: 220px;
    }
	.new-recipe-container .recipe_swiper{
		width: 270px;
		margin: 30px auto 30px;
		padding: 3px
	}
    .concept-container h2 .baloon-box:after,
	.column-container h2 .baloon-box:after,
    .new-recipe-container h2 .baloon-box:after{
	    position:absolute;
	    top: 42px;
	    left: 50%;
		margin-left: -5px;
	    transform: rotate(0);
    	content:"";
    }
	.column-container ul,
	.new-recipe-container ul{
		margin: 20px 20px 30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.new-recipe-container ul{
		margin: 20px 0 30px;
	}
	.column-container ul li,
	.new-recipe-container ul li{
		margin: 0 0 30px;
        display: block;
		width:calc((100% - 30px) / 2);
		height:auto;
	}
	.column-container ul li figure,
	.new-recipe-container ul li figure{
		width:100%;
	}
	.new-recipe-container li figure::after,
	.column-container ul li figure::after{
		display:none;
	}
	.column-container ul li:nth-child(3),
	.new-recipe-container ul li:nth-child(3){
		margin: 0 0 30px;

	}
	.new-recipe-container ul li > div {
		height: auto;
		background: transparent;
	}
    .column-container h2 .baloon-box:after{
	    top: 41px;
    }
	
	.column-container ul li:last-child,
	.new-recipe-container ul li:last-child{
		margin: 0;
	}
    .new-recipe-container h2 .baloon-box:after{
	    top: 43px;
    }
	.new-recipe-container ul li span.text-date{
		display:none;
	}
	.new-recipe-container ul li h3{
		min-height: 0;
		overflow: hidden;
		display: -webkit-box;
		margin-top:5px;
		padding:0;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		color: #987b67 !important;
	}
	.column-container ul li a figcaption{
		display:none;
	}
	.new-recipe-container ul li a{
		color: #987b67;
	}
	.new-recipe-container ul li a div {
		position: static;
		margin-top:5px;
	}
	.column-container ul li a > p{
		overflow: hidden;
		display: -webkit-box;
		margin-top:5px;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	   line-height: 1.4;
		font-size:1.6rem;
	}
	.column-container ul li .txt-exp{
		text-align: left;
	}
	.new-recipe-container .swiper-wrap{
		position: relative;
	}
	.new-recipe-container .swiper-button-next,
	.new-recipe-container .swiper-button-prev{
		display: block !important;
		width: 36px !important;
		height: 36px !important;
		margin-top: -20px;
		background: none !important;
		border-radius: 50%;
		/*border: solid 1px #957a68 !important;*/
		border: none!important;
		-webkit-tap-highlight-color: transparent!important;
		tap-highlight-color: transparent !important;
	}
	.new-recipe-container .swiper-button-next *,
	.new-recipe-container .swiper-button-prev *{
		-webkit-tap-highlight-color: transparent!important;
		tap-highlight-color: transparent !important;
	}
	
	.new-recipe-container .swiper-button-next:hover,
	.new-recipe-container .swiper-button-pre:hover{
		opacity: 0.7;
	}
	
	.new-recipe-container .swiper-button-next:after,
	.new-recipe-container .swiper-button-prev:after{
		display: none !important;
	}
	.new-recipe-container .swiper-button-next{
		right: -20px;
	}
	.new-recipe-container .swiper-button-prev{
		left: -20px;
	}
	.column-container ul li:nth-child(6),
	.column-container ul li:nth-child(4){
		margin-bottom:30px;
	}
	
	.new-recipe-container .swiper-button-next span,
	.new-recipe-container .swiper-button-prev span{
		position: relative;
		display: block;
		height: 40px;
		width: 100%;
	}
	.new-recipe-container .swiper-button-next span:before,
	.new-recipe-container .swiper-button-next span:after,
	.new-recipe-container .swiper-button-prev span:before,
	.new-recipe-container .swiper-button-prev span:after{
		position: absolute;
		top: 50%;
		width:12px;
		height: 1px;
		background-color: #957a68;
		content:"";
	}
	.new-recipe-container .swiper-button-next span:before{
		transform: rotate(-45deg);
		right:10px;
		margin-top: 1px;
	}
	.new-recipe-container .swiper-button-next span:after{
		transform: rotate(45deg);
		right:10px;
		margin-top: -7px;
	}
	.new-recipe-container .swiper-button-prev span:before{
		transform: rotate(45deg);
		left:10px;
		margin-top: 1px;
	}
	.new-recipe-container .swiper-button-prev span:after{
		transform: rotate(-45deg);
		left:10px;
		margin-top: -7px;
	}
	.new-recipe-container .btn-container{
		padding: 15px 0 60px;
	}
	.new-recipe-container .btn-container svg{
		width: 120px;
	}







	/* column-container */
	.column-container{
		padding: 40px 0 30px;
	}
	.column-container > div{
		width: 100%;
		margin: 0;
		padding: 0;
	}
    .column-container h2{
	    text-align: center;
    }
    .column-container h2 img{
	    width: 128px;
    }
	.column-container  h2 .baloon-box img{
		width: 250px;
	}
    .column-container .btn-container{
	    padding-top: 15px;
    }
	.column-container .btn-container svg{
		width: 132px;
	}
	

	/* concept-container */
	.concept-container{
		padding: 30px 0 60px;
		background-position: center -70px;
		background-size: 1280px 1150px !important;
	}
	.concept-container > div{
		width: 100%;
		margin: 0;
	}
	.concept-container h2 img{
		width:109px;
	}
	.concept-container ul{
		padding: 64px 0 0;
		font-size: 0;
	}
	.concept-container h2{
	    text-align: center;
	}
	.concept-container h2 .baloon-box img{
		width: 220px;
	}
	.concept-container .concept_swiper{
        width: 100%;
        height: 100%;
	}
	
	.concept-container ul li h3{
		margin: 0  auto!important;
		max-width: 400px;
		padding: 15px 0;
		line-height: 1.2;
		font-size: 1.4rem;
	}
	.concept-container .btn-container{
		margin-top: 45px;
	}
	.concept-container .btn-container svg{
		width: 104px;
	}
	.concept-container ul li figure{
		width: 260px!important;
		height: 260px!important;
		
		margin: 0 auto !important;
		text-align: center;
	}
	.concept-container ul li h3,
	.concept-container ul li p {
		width: 260px!important;
	}


	/* new-contanier */
    .news-contanier{
	    padding: 30px 0 60px;
    }
    .news-contanier h2 img{
	    width:82px;
    }
	.news-contanier a.btn-small {
		width: 320px;
		text-align: center;
	}
    .news-contanier ul{
		width: 320px;
	    margin:20px auto;
    }
    .news-contanier li a{
	    padding: 0 0 8px;
    }
    .news-contanier li > a span{
	    width:100px;
		font-size:1.3rem;
    }
    .news-contanier li a > p{
	    width: calc(100% - 100px);
		font-size:1.4rem;
    }
	.news-contanier .btn-container{
		padding-top :25px
	}
	.news-contanier .btn-container a{
		margin: 0 auto;
	}
	.news-contanier .btn-small svg{
		margin-top: -5px;
		width: 83px;
	}

}