@charset "UTF-8";

/* top_visual */
#top_visual {
	background: #e9e8e5;
}

@media print, screen and (min-width: 769px){
  #top_visual {
    position: relative;
  }

  #top_visual #main_visual {
		max-width: 1400px;
		margin: 0 auto;
    z-index: 0;
	}

}
@media screen and (max-width: 768px){
  #top_visual {
    position: relative;
  }
}


/* top_lead */
@media print, screen and (min-width: 769px){
	#top_lead .top_lead_notes {
		padding: 45px 0 25px;
		font-size: 20px;
		text-align: center;
		line-height: 2;
		letter-spacing: 2px;
	}

}
@media screen and (max-width: 768px){
	#top_lead .top_lead_notes {
		padding: 23px 0 20px;
		font-size: 16px;
		text-align: center;
		line-height: 1.7;
	}

}

/* cart_btn */
@media screen and (min-width: 1400px) {
  /*カート画像サイズ*/
  #top_visual .cart_btn img {
    width: 110px;
    height: 110px;
  }
  /*カートボタン位置*/
  #top_visual .cart_btn {
    position: absolute;
    transform: none;
    right: calc(50% - 670px);
    top: 460px !important;
    z-index: 99;
  }
  /*PC版　ロールオーバー*/
  #top_visual .cart_btn:hover {
    transition: opacity 0.2s;
    opacity: .85;
  }
}
@media print, screen and (max-width: 1399px) {
  /*カート画像サイズ*/
  #top_visual .cart_btn img {
    width: 8vw;
    height: 8vw;
  }
  /*カートボタン位置*/
  #top_visual .cart_btn {
    position: absolute;
    transform: none;
    right: 20px;
    top: calc(76% - 0px);
    z-index: 2;
  }
  /*PC版　ロールオーバー*/
  #top_visual .cart_btn:hover {
    transition: opacity 0.2s;
    opacity: .85;
  }
}
@media screen and (max-width: 768px) {
  #top_visual .cart_btn img {
    width: 21vw;
    height: 21vw;
  }
  /*カートボタン位置*/
  #top_visual .cart_btn {
    /* transform: translateX(50%); */
    right: 3.6vw;
    top: calc(100% - 24.2vw) !important;
    z-index: 2;
  }
}


/* top_pickup */
@media print, screen and (min-width: 769px){
  #top_pickup {
    padding: 0 0 46px;
  }

  #top_pickup a {
    display: block;
    width: 728px;
    margin: 0 auto;
    transition: opacity .2s;
  }

  #top_pickup a:hover {
    opacity: .7;
  }

  #top_pickup img {
    width: 728px;
    line-height: 0;
  }

}
@media screen and (max-width: 768px){
  #top_pickup {
    padding: 0 0 26px;
  }

  #top_pickup a {
    display: block;
  }

  #top_pickup img {
    width: 100%;
    height: auto;
    line-height: 0;
  }

}


/* top_toast */
@media print, screen and (min-width: 769px){
	#top_toast {
		min-width: 980px;
		height: 550px;
		position: relative;
		background: url("../images/top/bg_toast.jpg") no-repeat center;
		background-size: cover;
	}

	#top_toast .toast_inner {
		width: 490px;
		position: absolute;
		top: 145px;
		left: 60px;
		transition: .2s;
	}

	#top_toast .toast_heading {
		margin-bottom: 22px;
		font-size: 32px;
		line-height: 1.4375;
	}

	#top_toast .toast_notes {
		margin-bottom: 47.5px;
	}

}
@media screen and (max-width: 768px){
	#top_toast {
		position: relative;
		background: url("../images/top/bg_toast_sp.jpg") no-repeat center ;
		background-size: cover;
	}

	#top_toast .toast_inner {
		max-width: 500px;
		padding: 30px 15px 276px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	#top_toast .toast_heading {
		margin-bottom: 8.5px;
		font-size: 20px;
		line-height: 1.5;
	}

	#top_toast .toast_notes {
		margin-bottom: 21px;
		line-height: 1.75;
	}

}


/* top_heating */
@media print, screen and (min-width: 769px){
	#top_heating {
		min-width: 980px;
		height: 550px;
		position: relative;
		background: url("../images/top/bg_heating.png") no-repeat center;
		background-size: cover;
	}

	#top_heating .heating_inner {
		width: 480px;
		color: #fff;
		position: absolute;
		top: 74.5px;
		left: 50%;
		margin-left: 70px;
		transition: .2s;
	}

	#top_heating:before {
		content: "";
		display: block;
		width: 480px;
		height: 480px;
		background: url("../images/top/bg_heating_item.png") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -557px;
	}

	#top_heating .heating_heading {
		margin-bottom: 22px;
		font-size: 32px;
		line-height: 1.4375;
	}

	#top_heating .heating_heading span {
		display: block;
		font-size: 24px;
	}

	#top_heating .heating_notes {
		margin-bottom: 21px;
	}

	#top_heating .heating_supplement {
		padding-top: 3px;
		margin-bottom: 34px;
		font-size: 12px;
		text-align: right;
	}

}
@media screen and (min-width: 769px) and (max-width:1260px) {
	#top_heating .heating_inner {
		margin-left: -20px;
	}
}
@media screen and (max-width: 768px){
	#top_heating {
		color: #fff;
		position: relative;
		background: url("../images/top/bg_heating_sp.png") no-repeat;
		background-size: cover;
	}

	#top_heating .heating_inner {
		max-width: 500px;
		padding: 33px 15px 233px;
		margin: 0 auto;
	}

	#top_heating:before {
		content: "";
		display: block;
		width: 252.5px;
		height: 206.5px;
		background: url("../images/top/bg_heating_item_sp.png") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}

	#top_heating .heating_heading {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 1.4;
	}

	#top_heating .heating_heading span {
		display: block;
		font-size: 16px;
	}

	#top_heating .heating_notes {
		margin-bottom: 21px;
		line-height: 1.5;
	}

	#top_heating .heating_image {
		text-align: center;
	}

	#top_heating .heating_supplement {
		padding-top: 3px;
		margin-bottom: 21px;
		font-size: 10px;
		text-align: right;
	}
}


/* top_tasty */
#top_tasty {
	background: #eee6e0;
}

@media print, screen and (min-width: 769px){
	#top_tasty .content_inner {
		padding: 50px 0 20px;
	}

	#top_tasty .content_inner .tasty_list > li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	#top_tasty .content_inner .tasty_list > li .thumb_area {
		order: 2;
		width: 470px;
	}

	#top_tasty .content_inner .tasty_list > li .text_area {
		order: 1;
		width: 450px;
	}

	#top_tasty .content_inner .tasty_list > li .text_area .heading_tasty {
		margin-bottom: 17px;
		font-size: 32px;
		letter-spacing: 1px;
	}

	#top_tasty .content_inner .tasty_list > li:nth-child(2) .text_area .heading_tasty {
		margin-bottom: 29px;
	}

	#top_tasty .content_inner .tasty_list > li .text_area .tasty_notes {
		margin-bottom: 29px;
	}

}
@media screen and (max-width: 768px){
	#top_tasty .content_inner {
		width: 100%;
		padding: 40px 15px 5px;
		box-sizing: border-box;
	}

	#top_tasty .content_inner .tasty_list > li {
		margin-bottom: 30px;
	}

	#top_tasty .content_inner .tasty_list > li .thumb_area {
		margin-bottom: 15px;
	}

	#top_tasty .content_inner .tasty_list > li .text_area {
	}

	#top_tasty .content_inner .tasty_list > li .text_area .heading_tasty {
		margin-bottom: 11px;
		font-size: 20px;
	}

	#top_tasty .content_inner .tasty_list > li .text_area .tasty_notes {
		margin-bottom: 15px;
	}

}


/* top_tasty_making */
@media print, screen and (min-width: 769px){
	#top_tasty_making .content_inner {
		padding: 78px 0 70px;
	}

	#top_tasty_making .heading_making {
		margin-bottom: 47px;
		font-size: 32px;
		text-align: center;
		letter-spacing: 2px;
	}

	#top_tasty_making .making_list {
		display: flex;
		justify-content: space-between;
		margin-bottom: 37.5px;
	}

	#top_tasty_making .making_list .thumb_area {
		margin-bottom: 4px;
	}

	#top_tasty_making .making_list .title_area {
		font-size: 24px;
	}

	#top_tasty_making .btn_wrap {
		text-align: center;
	}

}
@media screen and (max-width: 768px){
	#top_tasty_making .content_inner {
		padding: 30px 15px 40px;
		box-sizing: border-box;
	}

	#top_tasty_making .heading_making {
		margin-bottom: 20px;
		font-size: 20px;
		text-align: center;
		line-height: 1.4;
	}

	#top_tasty_making .making_list > li {
		margin-bottom: 20px;
	}

	#top_tasty_making .making_list .thumb_area {
		margin-bottom: 8px;
	}

	#top_tasty_making .making_list .title_area {
		font-size: 16px;
	}

	#top_tasty_making .btn_wrap {
		text-align: center;
	}

}


/* top_function */
@media print, screen and (min-width: 769px){
	#top_function {
		color: #fff;
		background: url("../images/top/bg_function.jpg") no-repeat center;
		background-size: cover;
	}

	#top_function .content_inner {
		padding: 77.5px 0 72px;
	}

	#top_function .heading_function {
		margin-bottom: 24px;
		font-size: 32px;
		text-align: center;
		line-height: 1.375;
		letter-spacing: 2px;
	}

	#top_function .heading_function span {
		display: block;
		font-size: 24px;
	}

	#top_function .funtion_notes {
		margin-bottom: 21px;
		font-size: 18px;
	}

	#top_function .function_list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;
		margin-left: -30px;
	}

	#top_function .function_list > li {
		width: calc(50% - 30px);
		margin-bottom: 20px;
		margin-left: 30px;
		border: 1px solid #d1d1d1;
		text-align: center;
		line-height: 78px;
		box-sizing: border-box;
	}

}
@media screen and (max-width: 768px){
	#top_function {
		color: #fff;
		background: url("../images/top/bg_function.jpg") no-repeat;
		background-size: cover;
	}

	#top_function .content_inner {
		padding: 37px 15px 35px;
	}

	#top_function .heading_function {
		margin-bottom: 23px;
		font-size: 20px;
		text-align: center;
		line-height: 1.375;
	}

	#top_function .heading_function span {
		display: block;
		font-size: 16px;
	}

	#top_function .funtion_notes {
		margin-bottom: 20px;
		line-height: 1.5;
	}

	#top_function .function_list {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		margin-left: -15px;
		margin-bottom: 10px;
	}

	#top_function .function_list > li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 15px);
		padding: 13px 5px;
		margin-bottom: 15px;
		margin-left: 15px;
		border: 1px solid #d1d1d1;
		text-align: center;
		box-sizing: border-box;
	}

}


/* top_interview */
@media print, screen and (min-width: 769px){
	#top_interview {
		height: 550px;
		background: url("../images/top/bg_interview.jpg") no-repeat center;
		background-size: cover;
		position: relative;
	}

	#top_interview .interview_inner {
		width: 465px;
		position: absolute;
		top: 133.5px;
		left: 50%;
		margin-left: 15px;
	}

	#top_interview .interview_heading {
		margin-bottom: 22px;
		font-size: 32px;
		line-height: 1.4375;
		letter-spacing: 2px;
	}

	#top_interview .interview_notes {
		margin-bottom: 37.5px;
	}

}
@media screen and (max-width: 768px){
	#top_interview {
		background: url("../images/top/bg_interview_sp.jpg") no-repeat right center;
		background-size: cover;
		position: relative;
	}

	#top_interview .interview_inner {
		max-width: 500px;
		padding: 50px 15px 106px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	#top_interview .interview_heading {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 1.5;
	}

	#top_interview .interview_notes {
		margin-bottom: 15px;
		line-height: 1.75;
	}

	#top_interview .btn_detail {
		background: rgba(255, 255, 255, .2);
	}

}

/* top_voice */
/*
#top_voice .voice_list .slick-slide {
	background: rgba(255, 255, 255, .9);
}

@media print, screen and (min-width: 769px){
	#top_voice {
		padding: 78px 0 71px;
		background: url("../images/top/bg_voice.jpg") no-repeat center;
		background-size:  cover;
	}

	#top_voice .voice_inner {
		width: 960px;
		margin: 0 auto;
	}

	#top_voice .voice_heading {
		margin-bottom: 40px;
		font-size: 32px;
		text-align: center;
		letter-spacing: 2px;
	}

	#top_voice .voice_list {
		margin: 0 -15px;
	}

	#container #top_voice .slick-arrow {
		position: absolute;
		display: block;
		box-sizing: border-box;
		content: '';
		width: 90px;
		height: 90px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		border: none;
		background: none;
		text-indent: -9999px;
		cursor: pointer;
		z-index: 2;
		transition: opacity 0.5s;
		transform: translateY(0);
	}

	#container #top_voice .slick-arrow:hover {
		opacity: .8;
	}

	#container #top_voice .slick-prev {
		left: -95px;
	}

	#container #top_voice .slick-next {
		right: -95px;
	}

	#top_voice .voice_list .slick-slide {
		height: 100%;
		padding: 42px 30px 58px;
		margin: 0 15px;
		box-sizing: border-box;
	}

	#top_voice .voice_list .voice_name {
		margin-bottom: 17px;
	}

	#top_voice .voice_list .voice_name strong {
		font-size: 20px;
		font-weight: inherit !important;
		line-height: 1;
	}

	#top_voice .voice_list .voice_text {
		line-height: 1.5;
	}
}
@media screen and (max-width: 768px){
	#top_voice {
		padding: 39px 0 55px;
		background: url("../images/top/bg_voice.jpg") no-repeat center;
		background-size:  cover;
	}

	#top_voice .voice_inner {
		max-width: 500px;
		margin: 0 auto;
	}

	#top_voice .voice_heading {
		margin-bottom: 20px;
		font-size: 20px;
		text-align: center;
		letter-spacing: 2px;
	}

	#top_voice .voice_inner .voice_list {
		padding: 0 50px;
	}

	#container #top_voice .slick-arrow {
		position: absolute;
		display: block;
		box-sizing: border-box;
		content: '';
		width: 45px;
		height: 45px;
		margin: auto 0;
		border: none;
		background: none;
		text-indent: -9999px;
		cursor: pointer;
		z-index: 2;
	}

	#container #top_voice .slick-prev {
		left: 0;
	}

	#container #top_voice .slick-next {
		right: 0;
	}

	#top_voice .voice_list .slick-slide {
		height: 100%;
		padding: 25px 15px 29px;
		margin: 0;
		box-sizing: border-box;
	}

	#top_voice .voice_list .voice_name {
		margin-bottom: 17px;
	}

	#top_voice .voice_list .voice_name strong {
		font-size: 20px;
		font-weight: inherit !important;
		line-height: 1;
	}

	#top_voice .voice_list .voice_text {
		line-height: 1.5;
	}
}

#container #top_voice .slick-prev {
	background-image: url(../images/top/icon_prev.png);
	background-size: contain;
}

#container #top_voice .slick-next {
	background-image: url(../images/top/icon_next.png);
	background-size: contain;
}
*/

/* foot_top */
.foot_top #product_outline {
	border-bottom: 1px solid #dcdcdc;
}

@media print, screen and (min-width: 769px){
}
@media screen and (max-width: 768px){
}



/* float */
#float_bnr {
  opacity: 1;
  transition: opacity .2s ease-in;
  z-index: 1;
}

#float_bnr.is-hidden,
#float_bnr.is-unnecessary {
  opacity: 0;
  pointer-events: none;
}

#float_bnr a {
  display: block;
}

#float_bnr a img {
  width: 100%;
  height: auto;
}

@media print, screen and (min-width: 769px){

  #float_bnr {
    width: 178px;
    position: absolute;
    z-index: 10;
    top: 82px;
    left: 50%;
  }


  #float_bnr a {
    transition: transform .2s ease-in;
  }

  #float_bnr a:hover {
    transform: translateY(-5px);
  }

  #float_bnr .floar_close {
    display: none;
  }

}
@media print, screen and (min-width: 769px) and (max-width: 960px){
  #float_bnr {
    width: 178px;
    top: 82px;
    margin-left: 199px;
  }
}

@media print, screen and (min-width: 960px) and (max-width: 1400px){
  #float_bnr {
    width: 18.57vw;
    top: 8.57vw;
    margin-left: 20.71vw;
    z-index: 1;
  }
}

@media print, screen and (min-width: 1400px){
  #float_bnr {
    width: 260px;
    top: 120px;
    margin-left: 290px;
    z-index: 1;
  }
}

@media screen and (max-width: 768px){
  #float_bnr {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
  }

  #float_bnr .float_close {
    width: 8vw;
    height: 8vw;
    background: url("../images/top/float_interview_close.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: -2.67vw;
    right: 2.67vw;
  }

}
