/*-----------------------------------------------------------------------------
  トップページ用
-----------------------------------------------------------------------------*/
/*---------------------------------------
  スライダー
---------------------------------------*/
section.mv{
  margin: 0;
  padding: 0;
}

section.mv ul.slider{
  margin: 0;
  padding: 0;
}

section.mv ul.slider li{
  margin-left: 10px;
  margin-right: 10px;
  width: 600px;
  height: 380px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  position: relative;
  overflow: hidden;
}

section.mv ul.slider li .slid_box{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
}

section.mv ul.slider li .slid_box a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

section.mv ul.slider li .slid_box a{
}

section.mv ul.slider li .slid_box p{
  display: block;
  width: 100%;
  position: absolute;
  top:auto;
  left: 0;
  right:auto;
  bottom:0;
  z-index: 5;
  padding: 15px;
}

section.mv ul.slider li .slid_box p span{
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: #fff;
}

section.mv ul.slider li.color_bk .slid_box p span{
  color: #333;
}

section.mv ul.slider li .slid_box .slidebg{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
  background: linear-gradient(rgba(255,255,255,0) 60%, rgba(0,0,0,0.5) 100%);
}

section.mv ul.slider li.color_bk .slid_box .slidebg{
  background: linear-gradient(rgba(255,255,255,0) 60%, rgba(255,255,255,0.5) 100%);
}

section.mv .slide-arrow{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
  cursor:pointer;
}

section.mv .slide-arrow i{
  font-size: 20px;
}

section.mv .prev-arrow{
  left: -620px;
  z-index: 100;
}

section.mv .next-arrow{
  right:-620px;
  z-index: 100;
}

@media screen and (min-width: 919px){
	section.mv ul.slider li .slid_box a:hover{
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
    opacity: 0.5;
	}
  section.mv .slide-arrow:hover{
    -webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
    opacity: 0.5;
  }
}

@media screen and (max-width: 750px){
  section.mv ul.slider li{
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    height: 380px;
  }
  section.mv .prev-arrow{
    left:5px;
    right:auto;
  }
  section.mv .next-arrow{
    left:auto;
    right:5px;
  }
}
@media screen and (max-width: 640px){
  section.mv ul.slider li{
    height: 360px;
  }
}
@media screen and (max-width: 500px){
  section.mv ul.slider li{
    height: 330px;
  }
  section.mv ul.slider li .slid_box p span{
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}
@media screen and (max-width: 450px){
  section.mv ul.slider li{
    height: 300px;
  }
}
@media screen and (max-width: 400px){
  section.mv ul.slider li{
    height: 270px;
  }
}
@media screen and (max-width: 350px){
  section.mv ul.slider li{
    height: 240px;
  }
}

/*---------------------------------------
  検索コンテンツ
---------------------------------------*/
.top_search_box{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  overflow: hidden;
}

.top_search_box .in_box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: rgba(255,255,255,0.2);
}

.top_search_box .in_box .in_blocks{
}

.top_search_box .in_box h2{
  text-align: center;
  font-size: 30px;
  color: #333;
}

.top_search_box .in_box h2 span{
  display: inline-block;
  text-align: left;
}

.top_search_box .in_box .read{
  text-align: center;
  margin-top: 5px;
  color: #333;
}

.top_search_box .in_box .read span{
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}

.top_search_box .in_box .searchBox{
	display: block;
	width: 550px;
	height: 45px;
	position: relative;
	background-color: #fff;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
  margin-top: 15px;
}

.top_search_box .in_box .searchBox form.search{
}

.top_search_box .in_box .searchBox form.search input{
	font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	border-radius: 0;
	background-color: transparent;
	background-color: initial;
	z-index: 2;
	padding-left: 50px;
	padding-right: 8px;
	border: none;
	outline: none;
  font-size: 16px;
}

.top_search_box .in_box .searchBox form.search input::placeholder{
	font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	color: #aaa;
  letter-spacing: 0.2em;
  text-align: center;
}

.top_search_box .in_box .searchBox form.search input::-ms-input-placeholder{
	font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	letter-spacing: 0.2em;
	color: #aaa;
  text-align: center;
}

.top_search_box .in_box .searchBox form.search button{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 24px;
	height: 24px;
	-webkit-appearance: none;
	border-radius: 0;
	background-color: transparent;
	background-color: initial;
	border: none;
	font-size: 20px;
	color: #999;
	position: absolute;
	top:0;
	left: 20px;
	right:auto;
	bottom:0;
	margin: auto;
}

@media screen and (max-width: 640px){
  .top_search_box .in_box{
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .top_search_box .in_box h2{
    font-size: 22px;
    letter-spacing: 0.1em;
  }
  .top_search_box .in_box .read span{
    font-size: 14px;
    letter-spacing: 0.1em;
  }
  .top_search_box .in_box .searchBox{
    width: 100%;
    height: 40px;
  }
  .top_search_box .in_box .searchBox form.search input{
    font-size: 14px;
    letter-spacing: 0.1em;
  }
  .top_search_box .in_box .searchBox form.search input::placeholder{
    letter-spacing: 0.1em;
  }
  .top_search_box .in_box .searchBox form.search input::-ms-input-placeholder{
  	letter-spacing: 0.1em;
  }
}








/*---------------------------------------
  注目・人気コンテンツ
---------------------------------------*/
section.top_conts{
  margin-top: 50px;
}

@media screen and (max-width: 920px){
  section.top_conts{
    margin-top: 30px;
  }
}


/*---------------------------------------
  新着レシピのデフォボタン
---------------------------------------*/
section.top_conts .btnArea.btn_df{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 50px;
}

section.top_conts .btnArea.btn_df a{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 30px;
  font-weight: bold;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  min-width: 200px;
  overflow: hidden;
  text-decoration: none;
  font-size: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #2196f3;
  color: #fff;
}

@media screen and (max-width: 640px){
  section.top_conts .btnArea.btn_df{
    margin-top: 30px;
  }
}



/*---------------------------------------
  特集コンテンツ
---------------------------------------*/
section.top_SpecialList{
  margin-top: 50px;
}

section.top_SpecialList .in_conts{
  position: relative;
}

section.top_SpecialList ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-top: solid 1px #ddd;
}

section.top_SpecialList ul li{
  width: 50%;
  border-left: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}

section.top_SpecialList ul li:nth-child(2n+2){
  border-right: solid 1px #ddd;
}

section.top_SpecialList ul li a{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.15em;
  padding: 20px;
}

section.top_SpecialList ul li .imgArea{
  width: 32%;
  margin-right: 20px;
}

section.top_SpecialList ul li .imgArea img{
  display: block;
  width: 100%;
  line-height: 1em;
}

section.top_SpecialList ul li .textArea{
  flex: 1;
  line-height: 1.5em;
}

section.top_SpecialList .btnArea{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top:12px;
  left: auto;
  right: 0;
  bottom:auto;
  margin: auto;
}

section.top_SpecialList .btnArea a{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 15px;
  color: #2196f3;
  font-weight: bold;
}

section.top_SpecialList .btnArea a i{
  display: inline-block;
  margin-top: 2px;
  margin-left: 5px;
}


@media screen and (min-width: 919px){
	section.top_SpecialList ul li a:hover{
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
    opacity: 0.5;
	}
  section.top_SpecialList .btnArea a:hover{
    -webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
    opacity: 0.5;
  }
}

@media screen and (max-width: 1220px){
  section.top_SpecialList .btnArea{
    right: 10px;
  }
}
@media screen and (max-width: 850px){
  section.top_SpecialList ul li a{
    padding: 10px;
  }
  section.top_SpecialList ul li .textArea{
    line-height: 1.5em;
  }
}
@media screen and (max-width: 640px){
  section.top_SpecialList ul li{
    width: 100%;
    border-right: solid 1px #ddd;
  }
  section.top_SpecialList ul li a{
    font-size: 14px;
  }
  section.top_SpecialList ul li .imgArea{
    width: 150px;
    margin-right: 10px;
  }
  section.top_SpecialList .btnArea{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 30px;
    position: static;
  }
  section.top_SpecialList .btnArea a{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 30px;
    font-weight: bold;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    min-width: 200px;
    overflow: hidden;
    text-decoration: none;
    font-size: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #2196f3;
    color: #fff;
  }
  section.top_SpecialList .btnArea a i{
    display: none;
  }
}
@media screen and (max-width: 500px){
  section.top_SpecialList ul li .imgArea{
    width: 120px;
  }
}
@media screen and (max-width: 400px){
  section.top_SpecialList ul li .imgArea{
    width: 100px;
  }
}


/*---------------------------------------
  季節のおすすめレシピ
---------------------------------------*/
.seasonArea{
}

.seasonArea ul.seasonSlide{
  position: relative;
  width: 1220px;
  margin-left: auto;
  margin-right: auto;
}

.seasonArea ul.seasonSlide li{
}

.seasonArea ul.seasonSlide li .li_in{
  padding: 0px 10px;
}

.seasonArea ul.seasonSlide li .li_in .imgArea{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
}

.seasonArea ul.seasonSlide li .li_in .imgArea a{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.seasonArea ul.seasonSlide li .li_in .imgArea a img{
  display: block;
  width: 100%;
  object-fit: cover;
}


.seasonArea ul.seasonSlide li .li_in .textArea{
  margin-top: 5px;
}

.seasonArea ul.seasonSlide li .li_in .textArea a{
  display: block;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.15em;
}

.seasonArea ul.seasonSlide li .li_in .textArea a p{
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


.seasonArea ul.seasonSlide li .li_in .textArea .new_icon{
  display: inline-block;
  background-color: #ff0000;
  color: #fff;
  font-weight: bold;
  padding: 1px 5px;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-right: 5px;
}


.seasonArea ul.seasonSlide .slide-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.seasonArea ul.seasonSlide .prev-arrow{
  left: 20px;
  right:auto;
  z-index: 100;
}

.seasonArea ul.seasonSlide .next-arrow{
  left: auto;
  right:20px;
  z-index: 100;
}

@media screen and (max-width: 1220px){
  .seasonArea ul.seasonSlide{
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
  }
  .seasonArea ul.seasonSlide li .li_in{
    padding: 0px 5px;
  }
  .seasonArea ul.seasonSlide .prev-arrow{
    left: 15px;
  }
  .seasonArea ul.seasonSlide .next-arrow{
    right:15px;
  }
}
@media screen and (max-width: 750px){
  .seasonArea ul.seasonSlide .slide-arrow {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}


/*---------------------------------------
---------------------------------------*/