/* CSS Document */

.sub_fv_h2::before {
    background: url("../img/title/our-farm.png") no-repeat;
    background-size: cover;
}


.sub-container-box {
    padding: 0 6vw 80px;
    background: none!important;
    width: fit-content;
    box-shadow:none;
}

.sub-container-box::before{
	content: '';
	display: block;
	position: absolute;
	background: rgba(252, 247, 242, 0.9);
	box-shadow: 5px 5px 20px rgba(80, 20, 0, 0.5);
	width: 100%;
	height: calc(100% - 2.5rem);
	bottom: 0;
	left: 0;
	z-index: 0;
}

.sub-title-jp {
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
	position: relative;
	margin-bottom: 20px;
}

.sub-title-jp h3{
	display: inline-block;
	line-height: 1.2;
    font-weight: 300;
    font-family: "Cormorant Garamond", serif;
	font-size: min(3.5vw, 3.5rem);
}


.sub-title-jp h3 span{
	background: #bf9784;
	color: #fff;
	padding: 5px 10px 0;
}

.sub-container .main-text {
    width: 50vw;
    max-width: 700px;
}

.sub-box:nth-child(even) .sub-container-box {
    padding: 0 6vw 80px 80px;
}



@media(max-width:1480px){
	
	.sub-title-jp h3 {
		display: inline-block;
		line-height: 1.2;
		font-weight: 300;
		font-family: "Cormorant Garamond", serif;
		font-size: max(4.5vw, 1.75rem);
	}
	
	.sub-container-box::before {
    	height: calc(100% - 1.5rem);
	}
}



@media(max-width:1360px){

	
	.sub-container-box {
		padding: 0 50px 80px;
	}
	
	.sub-box:nth-child(even) .sub-container-box {
		padding: 0 50px 80px 50px;
	}

}



@media(max-width:1000px){

	
	.sub-container-box {
		width: 100%;
        left: 0;
    }
	
	
	.sub-container .main-text {
		width: 100% !important;
        max-width: 100% !important;
	}
	
	
	.sub-container-box::before {
		box-shadow: none;
	   background: linear-gradient(to bottom, rgba(252, 247, 242, 0.9),rgba(252, 247, 242, 0.9), rgba(255, 255, 255, 0));
        height: calc(100% - 0.5rem);
		
    }
	
}

@media (max-width: 800px) {

	.sub-title-jp h3 {
        font-size: max(5.35vw, 1.75rem);
    }
	 
}

@media (max-width: 600px) {
    .sub-container-box::before {
        height: calc(100% - 1rem);
		background: linear-gradient(to bottom, #fff, #fff, rgba(255, 255, 255, 0));
    }
	
	.sub-container-box {
        padding: 0 20px 140px;
    }
	
	.sub-box:nth-child(even) .sub-container-box {
        padding: 0 20px 140px 20px;
    }
	
	.sub-title-jp h3 span {
		padding: 5px 10px 0;
	}
	
	
}


@media (max-width: 500px) {

	.sub-title-jp h3 {
        font-size: max(6vw, 1.75rem);
    }
	 
}

@media (max-width: 380px) {
    .sub-title-jp h3 span {
        padding: 3px 1px 0;
	}
}
/*　japan */

#japan .sub-container {
    background: url("../img/sub/business/japan.jpg") right no-repeat;
    background-size: cover;
}

#japan .main-text{
	gap:0;
}

    


#japan .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 10px;
}

#japan .illust span {
    display: block;
    background: url("../img/dec/banana-papaya.png") no-repeat;
    background-size: cover;
    width: 25vw;
    max-width: 360px;
    aspect-ratio: 2/1;
}

@media(max-width: 800px){
	
	#japan .illust {
    	bottom: -50px;
		left:0;
	}
	
	#japan .illust span {
    	width: 45vw;
		min-width: 120px;
	}
	
	#japan .sub-container {
		background: url(../img/sub/business/japan.jpg) center no-repeat;
		background-size: cover;
	}
	
}

/*　japan */



/* fruits */

#fruits .sub-container {
    background: url("../img/sub/business/fruits.jpg") right no-repeat;
    background-size: cover;
}

#fruits .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    right: 3vw;
}

#fruits .illust span {
   display: block;
    background:url("../img/dec/brand.png") no-repeat;
    background-size: cover;
    width: 25vw;
    max-width: 300px;
    aspect-ratio: 5/3;
}

@media(max-width: 1000px){
	
	#fruits .sub-container {
		background: url(../img/sub/business/fruits.jpg) center no-repeat;
		background-size: cover;
	}
	
}



@media(max-width: 800px){
	
	#fruits .illust {
    	bottom: -50px;
	}
	
	#fruits .illust span {
    	width: 45vw;
		min-width: 120px;
	}
	
}


/* fruits ///*/



/* passion-fruits */

#passion-fruits .sub-container {
	background: url("../img/sub/business/passion-fruits.jpg") right no-repeat;
    background-size: cover;
}


#passion-fruits .illust {
    z-index: 3;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

#passion-fruits .illust span {
    display: block;
    background: url("../img/dec/passion-fruits.png") no-repeat;
    background-size: cover;
    width: 15vw;
    max-width: 200px;
    aspect-ratio: 25/14;
}


@media(max-width: 800px){
	
	#passion-fruits .illust {
    	bottom: -30px;
	}
	
	#passion-fruits .illust span {
    	width: 35vw;
		min-width: 100px;
	}
	
}


/* passion-fruits ///*/


/* jam-oem */


#jam-oem .sub-container {
	background: url("../img/sub/business/jam-oem.jpg") right no-repeat;
    background-size: cover;
}

#jam-oem .sub-container-box{
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#jam-oem .sub-container-box-main{
	flex-direction: column;
	align-items: flex-end;
}

#jam-oem .common-button{
	position: relative;
	z-index: 1;
	padding:0; 
}

#jam-oem .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    right: 3vw;
	transform: scale(-1,1);
}

#jam-oem .illust span {
   display: block;
    background:url("../img/dec/jam.png") no-repeat;
    background-size: cover;
    width: 22vw;
    max-width: 300px;
    aspect-ratio: 35/20;
}

@media(max-width: 1360px){
	
	
	#jam-oem .illust span{
		width: 20vw;
	}
	
	#jam-oem .common-button {
		width: 100%;
	}

}


@media(max-width: 1000px){
	
	#jam-oem .sub-container {
		background: url(../img/sub/business/jam-oem.jpg) left no-repeat;
		background-size: cover;
	}
}




@media(max-width: 800px){
	
	#jam-oem .illust {
    	bottom: -50px;
	}
	
	#jam-oem .illust span {
    	width: 45vw;
		min-width: 120px;
	}
	
}
/* jam-oem ///*/



/* 商品紹介　*/

#products .main-area{
	max-width: 1100px;
}


#products{
	margin-top: 100px;
	margin-bottom: 100px;
}

.chosen-box{
	position: relative;
}

.chosen {
	position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
	padding: 50px 6vw;
	gap: 50px;
	background: rgba(252, 247, 242, 0.9);
}


.chosen::after {
	content: '';
    display: block;
    position: absolute;
    left: 0;
	top:0;
    background: #fff;
    width: 100%;
    height: 4.5vw;
    z-index: 1;
}


#products h4{
	display: inline-block;
    line-height: 1.2;
    font-size: min(3.5vw, 3.5rem);
    font-weight: 300;
    font-family: "Cormorant Garamond", serif;
	margin-bottom: 30px;
}

#products h4 span{
	background: #bf9784;
    color: #fff;
    padding: 5px 10px 0;
}


.chosen .main-text{
	width: 100%;
}


.chosen-text {
	position: relative;
	z-index: 2;
}

.chosen-img{
	min-width:40vw;
	position: relative;
	z-index: 2;
}



.chosen-text .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: -3vw;
	transform: translateY(100%);
}


.chosen-text .illust span {
    display: block;
    background: url(../img/dec/jam.png) no-repeat;
    background-size: cover;
    width: 22vw;
    max-width: 300px;
    aspect-ratio: 35 / 20;
}


@media(max-width: 1480px){
	
	.chosen {
    	gap: 30px;
	}
	
	.chosen-text .illust span {
    	width: 15vw;
	}
	
}

@media(max-width: 1300px){
	
	.chosen::after {
	    height: 75px;
	}
	
    .chosen {
        gap: 20px;
		align-items: center;
	}
}


@media(max-width: 1200px){
	
	#products h4 {
		font-size: max(4.5vw, 1.75rem);	
	}
}



@media(max-width: 1000px){
	.chosen {
        align-items: center;
		flex-direction: column;
	}
	
	.chosen-text .illust {
		display: none;
	}
	
	.chosen-img {
		min-width: 100%;
	}
	
	#products {
		margin-top: 60px;
		margin-bottom: 60px;
	}
	
	#products .sub-center-title {
		margin-bottom: 0;
	}
}

@media (min-width: 801px) {
	
	.chosen-img-sp{
		display: none;
	}
}

@media (max-width: 800px) {
    #products h4 {
        font-size: max(6vw, 1.75rem);
		margin-bottom: 10px;
	}
	
	.chosen::after {
        height: 60px;
    }

	.chosen-img-pc{
		display: none;
	}
	
	.chosen-img-sp{
		display: block;
	}
}
		

@media (max-width: 600px) {

	.chosen {
		padding: 50px 20px;
	}

}

/* 商品紹介　///*/

/* 商品一覧　*/

#overview .main-area{
	padding-top: 0;
	padding-bottom: 0;
}

#overview h5{
	background: #bf9784;
    color: #fff;
    font-size: 2rem;
    padding: 10px 20px 15px;
    line-height: 1;
    border-radius: 2px;
    margin-bottom: 30px;
}

.products-box{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


@media(max-width: 1480px){
	
	.products-box {
		gap: 10px;
	}
	
}

@media(max-width: 1200px){
	
	.products-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	
	#overview h5 {
    	font-size: 1.5rem;
		padding: 10px 10px 15px;
	}
}


@media(max-width: 600px){
    .products-box {
        grid-template-columns: repeat(1, 1fr);
	}
}

/* 商品一覧　///*/



/*　注文方法　*/

.order-way{
	padding: 100px 6vw;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.order-way::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom:0;
	height: 50%;
	width: 100%;
	z-index: -1;
	background: url("../img/bk/paper-bk-thin.jpg");
}

.order-way-box{
	display: block;
	margin: auto;
	width: 100%;
	max-width: 1000px;
    background: rgba(252, 247, 242, 0.9);
	box-shadow: 5px 5px 20px rgba(80, 20, 0, 0.5);
	padding: 50px;
}

.order-way-box .main-text p span{
	display: inline-block;
}

.link-box{
	display: flex;
	flex-direction: row;
	gap: 30px;
	align-items: center;
	justify-content: center;
}

.link-box .common-button{
	padding-bottom: 0;
	min-width: 250px;
}

@media(max-width: 1200px){
	
	.link-box {
		margin-top: 10px;
        gap: 10px;
        flex-wrap: wrap;
    }
	
	.link-box .common-button {
		padding: 0;
	}
	
	.link-box .common-button,
	.link-box .common-button a {
		width: 260px;
	}
	
}

@media(max-width: 600px){
	
	.order-way-box {
    	padding: 50px 20px;
	}
	
	.order-way {
		padding: 100px 20px;
	}
	
	
	.order-way-box .main-text p {
		text-align: left;
	}
	
	.order-way-box .main-text p span {
		display: inline;
		text-align: left;
	}
}


/*　注文方法　///*/



/* Online-Shop */

#online-shop{
	background: url("../img/bk/paper-bk-thin.jpg");
}


#online-shop .main-area{
	padding-top: 0;
}


/* Online-Shop ///*/


/*　oem　*/

#oem-service{
	padding: 100px 20px;
}

#oem-service .main-text{
	justify-content: center;
	align-items: center;
	text-align: center;
}

#oem-service p span{
	display: block;
}



#low-temp .sub-container {
    background: url("../img/sub/business/low-temp.jpg") right no-repeat;
    background-size: cover;
}

#low-temp .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    right: 3vw;
}

#low-temp .illust span {
    display: block;
    background: url(../img/dec/brand.png) no-repeat;
    background-size: cover;
    width: 25vw;
    max-width: 300px;
    aspect-ratio: 5 / 3;
}

#our-farm .sub-container {
    background: url("../img/sub/business/our-farm.jpg") right bottom no-repeat;
    background-size: cover;
}

#our-farm .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    left: 2vw;
}
	
#our-farm .illust span {
    display: block;
    background: url(../img/dec/jam.png) no-repeat;
    background-size: cover;
    width: 25vw;
    max-width: 300px;
    aspect-ratio: 35 / 20;
}

#materials .sub-container {
    background: url("../img/sub/business/material.jpg") right top no-repeat;
    background-size: cover;
}


#materials .illust {
    z-index: 3;
    position: absolute;
    bottom: 0;
    right: 3vw;
}

#materials .illust span {
	display: block;
    background: url(../img/dec/passion-fruits.png) no-repeat;
    background-size: cover;
    width: 20vw;
    max-width: 200px;
    aspect-ratio: 25 / 14;
}

@media(max-width: 1200px){

	#our-farm .illust {
    	bottom: -20px;
	}
	
	#our-farm .illust span {
		width: 20vw;
		min-width: 150px;
	}

}

@media(max-width: 1000px){
	
	#oem-service {
		padding: 60px 20px 0;
	}
	
	

	#low-temp .illust {
		bottom: -20px;
	}

	#low-temp .illust span {
		width: 45vw;
		min-width: 120px;
	}

}

@media(max-width: 800px){

	#our-farm .illust {
    	bottom: -50px;
	}
	
	#our-farm .illust span {
		width: 45vw;
		min-width: 120px;
	}
	
	


	#materials .illust {
		bottom: -30px;
	}

	#materials .illust span {
		width: 35vw;
		min-width: 100px;
	}
}

@media(max-width: 600px){
	
	#oem-service {
		padding: 100px 20px 0;
	}
	
	#oem-service .main-text{
		text-align: left;
	}
	
	#oem-service .main-text p span{
		display: inline;
	}
	
	#low-temp .sub-container {
		aspect-ratio: 1/1;
		background: url(../img/sub/business/low-temp.jpg) left no-repeat;
		background-size: cover;
	}
	
	
	#low-temp .sub-title-jp h3,
	#our-farm .sub-title-jp h3,
	#materials .sub-title-jp h3 {
        font-size: max(5.5vw, 1.35rem);
    }
	
	
	
	#low-temp .illust {
		bottom: -50px;
	}
}


@media(max-width: 380px){

	#low-temp .sub-title-jp h3,
	#our-farm .sub-title-jp h3,
	#materials .sub-title-jp h3 {
        font-size: max(5.5vw, 1.25rem);
    }
}

/* message */
	
	
	
.message-box{
	display: block;
	position: relative;
	background:url("../img/bk/paper-bk-thin.jpg");
	background-size: contain;
}

.box-01::before{
	position: absolute;
	content: '';
	display: block;
	background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
	width: 100%;
	height: 200px;
	z-index: 0;
	left: 0;
	top:0;
}

.message-box .main-area{
	padding-bottom:0; 
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap:30px;
	flex-direction: row;
}

.box-01 .main-area{
	padding-top: 0;
}

.message-box:nth-child(even) .main-area{
	flex-direction: row-reverse;
}


#message .message-title span{
	display: block;
	width: 100%;
	background: url("../img/sub/business/message.png") no-repeat;
	background-size: cover;
	aspect-ratio: 800/450;
}

.box-text{
	width: 60%;
}

.box-photo{
	width: 40%;
	box-shadow: 5px 5px 20px rgba(80, 20, 0, 0.5);
}

.box-03 .main-area{
	padding-bottom: 150px;
}


@media(max-width: 1480px){
	
	#message .sub-title-jp h3 {
        font-size: max(3.5vw, 1.75rem);
    }
	
}


@media (max-width: 1200px) {
    #message .sub-container-box-main {
        min-width: 500px;
    }
}


@media (max-width: 1000px) {
	
	.box-text {
		width: 100%;
	}
	
	.box-photo {
		width: 100%;
	}
   
	.message-box .main-area {
	    flex-direction: column;
	}
	
	.message-box:nth-child(even) .main-area {
		flex-direction: column;
	}
	
	 #message .sub-container-box-main {
        min-width: 100%;
    }
	
	#message .sub-title-jp h3 {
	   font-size: max(6.5vw, 1.5rem);
    }
	
	.box-03 .main-area {
		padding-bottom: 100px;
	}
	
}

   
/* message ///*/




/*　oem　///*/