@charset 'utf-8';

/* FOOD
------------------------------------------------ */
	#food{  }
	#food .pagination{ margin-top: 73px; }
	.food{ max-width: 1230px; margin: 0 auto; padding: 0 15px; }

	/* FOOD TOP BANNER
	------------------------------------------------ */
		#qa{ width: 100%; height: 100%; }
		.ffood__banner:before{ background: url(../../img/food/food_banner.jpg)no-repeat center center; background-size: cover;  }
		.ffood__banner__opa:after{ height: 15%; }
		.ffood__banner--title{ width: 100%; top: 35%; left: 0; text-align: left;color:white; text-shadow: 2px 2px 2px black; }
		.ffood__banner--title-jp{ width: fit-content; margin: 0 auto; font-size: 4rem;  }
		.small--title{ display: block; padding: 30px 0 0 70px; font-size: 1.6rem; }
	
	/* FOOD DESC CONTENT
	------------------------------------------------ */
		.food__desc{ max-width: 900px; margin: 30px auto 40px; }
		/* VIEWMORE */
			.viewmore{ width: 455px; height: 50px; margin: 10px auto 0; }
			.viewmore span{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px; border-radius: 25px; font-size: 1.6rem; box-shadow: 0 0 20px -11px rgb(0 0 0 / 55%); cursor: pointer; }

	/* FOOD INTERVIEW
	------------------------------------------------ */
		.food--title{width: 100%; text-align: center; padding-bottom: 22px; }
		.food--title-jp{ font-size: 2.6rem; }
		.food--title-en{ color: #EF804E; font-size: 1.4rem; }

@media screen and (max-width: 768px){
/* FOOD
------------------------------------------------ */
	.food{ padding-top: 15.5%; }
	/* FOOD TOP BANNER
	------------------------------------------------ */
		.ffood__banner { top: 0px; }
		.ffood__banner__opa:after { top: 0; }
		.ffood__banner--title { position: relative; top: auto; left: auto; text-align: center; transform: none; }
		.ffood__banner--title-jp { font-size: 2.7rem; line-height: 1.52; width: auto; padding: 95px 0 32px; }
		.ffood__banner__opa{ padding-bottom: 0; height: auto; top: 0; }
		.ffood__banner__opa:before{ height: 17.5%; bottom: -60px;  }
		.small--title{ display: block; margin-top: 30px; padding: 0; font-size: 1.5rem; line-height: 1.9; }

	/*  FOOD DESC CONTENT
	------------------------------------------------ */
		.food__desc--note.sp{ position: relative; width: 100%; padding: 0 15px; bottom: auto; text-align: center; }
		.food__desc--note.sp .food__desc--note-t{ font-size: 1.9rem; color: #EF734E; margin-bottom: 7px; text-shadow: 1px 1px 1px wheat;}
		.food__desc--note-sp { font-size: 14px; font-size: 1.4rem; line-height: 1.8; padding: 0 10px; position: relative; overflow: hidden; }
		.food__desc--note-sp a { display: inline-block; color: #1E7FE7; }
		.food__desc--note-sp.extend { margin-bottom: 50px; }
		/* VIEWMORE */
		.viewmore{ max-width: 560px; width: 100%; height: 38px; margin-top: 0; }
		.viewmore span{ border-radius: 19px; background: linear-gradient(to right,#ef804e,#ef9e4e ); color: #fff; font-size: 1.4rem; box-shadow: none;  }
		.viewmore.on span { background: #fff; color: #434343; border: 2px solid #434343; }
		.viewmore.on span:before { content: ''; display: inline-block; width: 13px; height: 8px; margin-right: 10px; margin-top: -1px; transform: rotate(180deg); background: url(../../img/share/arrow-down.png) no-repeat; background-size: 100%; }
}

@media screen and (min-width: 769px){
/* FOOD
------------------------------------------------ */
	.food{  }
	.food__desc{  }
	/* BLOCK */
		.food__desc__block{ position: relative; display: flex; flex-wrap: wrap; }
		/* BLOCK NOTE */
			.food__desc--note{ width: calc(100% - 260px); padding-right: 30px; }
			.food__desc--note-t{ margin-bottom: 25px; color: #EF804E; font-size: 3rem; font-weight: 500; }
			.food__desc--note-p{ position: relative; max-height: 85px; font-size: 1.6rem; line-height: 2; overflow: hidden; transition: 1s linear; }
			.food__desc--note-p:after{ position: absolute; content: ''; width: 100%; height: 60px; background:linear-gradient(to bottom, rgba(255,255,255, 0.5) 0,rgba(255,255,255,1) 70%); bottom: 0; left: 0; transition: 0.6s ease; }
			.food__desc--note-p a { display: inline-block; color: #1E7FE7; }
			.extend{ max-height: 100%; }
			.extend:after{ background: transparent; opacity: 0; visibility: hidden; }
		/* BLOCK IMG */
			.food__desc--img{ width: fit-content; }
			.food__desc--img img{ width: 260px; object-fit: contain; }

}