@charset "UTF-8";
/* info_custom */
/* text ........... $base-textcolor */
/* background ..... #eeeeee        */
/* button ......... $base-btncolor */
/* button ......... rgba(32,171,203  */
/* maincolor ...... #888888        */
/* error .......... #E86A6D        */


	
/*picup*/
.pickup .swiper-container{
	width: 90%;
    border-radius: 20px;
    margin-bottom: 2rem;
}
.pickup .swiper-wrapper .swiper-slide {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 0;
  padding-top: calc(1000 / 1000 * 100%);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
display: block;
}
.pickup .swiper-button-next, .swiper-button-prev{
	width: 50px;
    height: 50px;
	background-size: 50px;
}
.pickup .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
/*    background-image: url("../image/site/pickup_arr.svg");
	transform: rotateZ(180deg);	*/
	display: none;
}
.pickup .swiper-button-next, .swiper-container-rtl .swiper-button-prev{	right: 5px;}
.pickup .swiper-button-prev.swiper-button-white,.pickup .swiper-container-rtl .swiper-button-next.swiper-button-white {
  /*  background-image: url("../image/site/pickup_arr.svg");*/
		display: none;
}
.pickup .swiper-button-prev, .pickup .swiper-container-rtl .swiper-button-next{	left: 5px;}
.pickup .swiper-pagination-bullet {
	width: 12px; /* 幅 */
	height: 12px; /* 高さ */
	background: #fff; /* 色：緑 */
	opacity: 0.8; /* 半透明（デフォルトでは0.2） */
}
/* 現在のスライドのスタイル */
.pickup .swiper-pagination-bullet-active {
	width: 12px; /* 幅 */
	height: 12px; /* 高さ */
	background: #f6ac1a; /* 色：黄色 */
	opacity: 1; /* 不透明 */
}

@keyframes svg-anime {
  0% {
    stroke-dashoffset: 1000;
    fill: rgba(255, 255, 255, 0);
  }
  50% {
    stroke-dashoffset: 750;
    fill: rgba(255, 255, 255, 0.2);
  }
  70% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0.4);
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
  }
}

@-webkit-keyframes svg-anime {
  0% {
    stroke-dashoffset: 1000;
    fill: rgba(255, 255, 255, 0);
  }
  50% {
    stroke-dashoffset: 750;
    fill: rgba(255, 255, 255, 0.2);
  }
  70% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0.4);
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
  }
}

.top_otameshi {
  position: relative;
  display: block;
  padding: 10px;
  min-width: 120px;
  max-width: 100%;
  background: #cd3f23;
  border-radius: .5rem;
  color: #ffffff;
  width: 90%;
  margin: 2rem auto 1rem auto;
  text-align: center;
  font-size: 1.8rem;
}


.top_otameshi h5 {
  margin-bottom: .5rem;
}

.top_otameshi h6 {
  font-size: 74%;
}

.top_otameshi:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #cd3f23;
}

.jump {
  -webkit-animation: 0.5s jump infinite alternate linear;
          animation: 0.5s jump infinite alternate linear;
}

@-webkit-keyframes jump {
  to {
    -webkit-transform: transtateY(0);
            transform: transtateY(0);
  }
  from {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}

@keyframes jump {
  to {
    -webkit-transform: transtateY(0);
            transform: transtateY(0);
  }
  from {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}

.pickup {
    background-image: url(../image/site/bg_img_02.jpg);
    background-repeat: repeat;
    background-size: 230px;
    padding-top: 7rem;
    padding-bottom: 5rem;
}

.pickup .pickup-wrapper {
  position: relative;
  margin-bottom: 3rem;
  z-index: 3;
}

.pickup .swiper-slide__wrapper p {
  text-align: center;
}

.pickup .swiper-slide__wrapper p img {
  width: 90%;
  border-radius: 2rem;
}



@media screen and (min-width: 767px) {
  .pickup {
    padding-bottom: 5rem;
  }
}

.top h2 {
  margin-bottom: 1.5rem;
text-align: center;
}

.top h2 img {
  width: 90%;
	max-width: 500px;
}

/* swiper 設定 */
.swiper-button-prev-pick, .swiper-button-next-pick {
  background-image: none;
  top: 55%;
  z-index: 3;
}

.swiper-button-next-pick {
  right: 1%;
  width: auto;
}

.swiper-button-prev-pick {
  left: 1%;
  width: auto;
}

.swiper-button-prev-pick:before, .swiper-button-next-pick:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2rem;
  color: #cd3f23;
}

.swiper-button-prev-pick:before {
  content: "\f0d9";
}

.swiper-button-next-pick:before {
  content: "\f0da";
}

.swiper-pagination-pick {
  width: 100%;
  padding: .5rem 0;
}

.swiper-pagination-pick span {
  margin: 0 .3rem;
  opacity: 1;
  background: #ffffff;
  width: 10px;
  height: 10px;
}

.swiper-pagination-pick .swiper-pagination-bullet-active {
  background: #f6ac1a;
}
.top-catch{
	margin-bottom: 30px;
}
.top-catch p {
     max-width: 600px;
	width: 90%;
    margin: 0 auto;
}
.top-catch img {
  width: 100%;
}

.top-btnwrapper {
  width: 90%;
  margin: 0 auto;
}
.top-btnwrapper .btnwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.top-btnwrapper .btnwrapper--btn {
  width: 49%;
}
.top-btnwrapper .btnwrapper--btn a{
	font-weight: bold;
	display: block;
	padding: 10px 0px 10px;
	text-align: center;
	border-radius: 100px;
	border: 3px solid;
}
.top-btnwrapper .signup--btn a{
    background: #fff;
    color: #262626;
    border-color: #f6ac1a;
}
.top-btnwrapper .login--btn a{
    background: #f6ac1a;
    color: #fff;
    border-color: #f6ac1a;
}
.top-recipe {		
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
	background:#cd3f23;
	background-image: url(../image/site/bg_img_01.jpg);
	background-repeat: repeat;
	background-size: 230px;
}
.top-recipe-inner{
	    width: 90%;
    margin: 0 auto;
}

.top-recipe .recipe-wrapper {
  margin-bottom: .5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.top-recipe .recipe-wrapper--item {
  width: 48%;
}

.top-recipe .recipe-wrapper--item img {
  width: 100%;
  border-radius: 2rem;
}

.top-recipe .recipe-wrapper--item a {
  color: #1a1a1a;
}

.top-recipe .recipe-wrapper--item dl {
  margin-bottom: 1.5rem;
}

.top-recipe .recipe-wrapper--item dl dt {
  width: 100%;
  margin-bottom: .5rem;
  position: relative;
}
.top-recipe .recipe-wrapper--item dl dd{
	color: #fff;
	font-size: 1.3rem;
}
.top-recipe .recipe-wrapper--item dl dt .recipeimg__myrecipe--on,.top-recipe .recipe-wrapper--item dl dt .recipeimg__myrecipe--off{
    position: absolute;
    z-index: 3;
    width: 32%;
    height: 31%;
    bottom: 4%;
    right: 6%;
    background-repeat: no-repeat;
    background-size: contain;
  -webkit-transition: .4s;
  transition: .4s;
}
.top-recipe .recipe-wrapper--item dl dt .recipeimg__myrecipe--on {
 background-image: url(../image/site/common__fav_on.png);
}
 .top-recipe .recipe-wrapper--item dl dt .recipeimg__myrecipe--off{
background-image: url(../image/site/common__fav_off.png);
}

.top-recipe h2 {
  position: relative;
	text-align: center;
}



.top-recipe .recipe-allbtn {
  width: 80%;
  margin: 0 auto 2rem auto;
}

.top-recipe .recipe-allbtn a {
    background-color: #f6ac1a;
    border-radius: 100px;
    padding: 1.4rem 0;
    display: block;
    color: #ffffff;
    text-align: center;
    font-size: 1.6rem;
}

.top-recipe .recipe-allbtn a:after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 1rem;
    font-size: 1.6rem;
    line-height: 20px;
    letter-spacing: -2px;
    color: #f6ac1a;
    background: #fdf8f4;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 100px;
    display: inline-block;
}

.top-category{
    background-image: url(../image/site/bg_img_02.jpg);
    background-repeat: repeat;
    background-size: 230px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.top-category .top-category-inner{
	width: 90%;
	margin: 0 auto;
	position: relative;
}
.top-category-inner::before{
	content: "";
	 width: 135px;
    height: 96px;
	background-image: url("../image/site/kusa.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: -20px;
	right: 0;
}
.top-category-inner::after{
	content: "";
    width: 90px;
    height: 105px;
	background-image: url("../image/site/kusa3.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -40px;
	right: 0;
}
@media screen and (min-width: 767px) {
	.top-recipe .recipe-allbtn a:after{
	width: 44px;
    height: 44px;
	line-height: 44px;
	}
}
.category__item{
	width: 52%;
	display: block;
}
.category__item:nth-of-type(odd){
	margin: -15% auto 0 0;
}
.category__item:nth-of-type(even){
	margin: -15% 0 0 auto;
}
.category__item:first-of-type{margin-top: 0px;}
.category__item:last-of-type{margin-bottom: 90px;}
.top-category .category__image {
}
.top-category .category__detail {
	    margin-top: -90px;
    position: relative;
	text-align: center;
}

.top-category .category__title {
    color: #fff;
    background: #c1140c;
    font-weight: bold;
    font-size: 28px;
    line-height: 56px;
    display: inline-block;
    text-align: center;
    padding: 0px 28px;
    position: relative;
}
.top-category .category__title::before,.top-category .category__title::after{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	width: 10px;
	height: 56px;
	background-image: url(../image/site/category__title.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.top-category .category__title::before{left: -10px;}
.top-category .category__title::after{right: -10px; transform: rotateZ(180deg);}

@media screen and (min-width: 767px) {
	.top-category-inner::before {
    width: 230px;
    height: 162px;
}
	.top-category-inner::after{
		    width: 170px;
    height: 198px;
	}
.ranktop__no {
    width: 26%;
    margin: -35px auto 10px;
}
	
}
@media screen and (max-width: 767px) {

.category__item:nth-of-type(odd){
	margin: -12% auto 0 0;
}
.category__item:nth-of-type(even){
	margin: -12% 0 0 auto;
}
.category__item:first-of-type{margin-top: 0px;}
.category__item:last-of-type{margin-bottom: 50px;}
.top-category .category__detail {margin-top: -50px;}
.top-category .category__title {
    font-size: 16px;
    line-height: 36px;
    padding: 0px 16px;
}
.top-category .category__title::before,.top-category .category__title::after{
	width: 7px;
	height: 36px;
}
.top-category .category__title::before{left: -6px;}
.top-category .category__title::after{right: -6px; }
	
}

.top-feature {
	background:#cd3f23;
	background-image: url(../image/site/bg_img_01.jpg);
	background-repeat: repeat;
	background-size: 230px;
}

.top-feature .feature {
  width: 90%;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.top-feature .feature img {
  width: 100%;
}

.top-feature .feature__item {
  margin-bottom: 1.5rem;
	border-radius: 20px;
	overflow: hidden;
}
.home-ranking{
	background-image: url(../image/site/bg_img_02.jpg);
	background-repeat: repeat;
	background-size: 230px;
	padding-top: 5rem;
    padding-bottom: 5rem;
}

.home-ranking .home-ranking-inner{
  width: 90%;
	margin: 0 auto;
}

.ranktop {
  margin-bottom:1rem;
}

.ranktop img {
  width: 100%;
}

.ranktop .ranktop__item {
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: top;
    -ms-flex-align: top;
    align-items: top;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    background: #fff;
    padding: 4%;
    border-radius: 20px;
}

.ranktop__img {
  width: 35%;
}
.ranktop__img > p > img{
	border-radius: 10px;
}

.ranktop__text {
  width: 60%;
	text-align: center;
}

.ranktop__no {
    width: 26%;
    margin: -20px auto 10px;
}

.ranktop__name {
  margin-bottom: 10px;
}

.ranktop__check {
    text-align: center;
    background-color: #f6ac1a;
    color: #fff;
    border-radius: 100px;
    padding: 0.5rem 0px;
    width: 60%;
    letter-spacing: 1px;
    margin: 0 auto;
    font-size: 1.3rem;
}

.rankibottom-wrap{
	background: #fff;
	border-radius: 20px;
	 padding: 4%;
}
.rankibottom-wrap h2{
	    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #cd3f23;
}

.rankibottom {
  width: 94%;
  margin: 0 auto;
  position: relative;
}

.rankibottom .swiper-ranking {
  overflow: hidden;
}

.rankibottom .swpier-slide {
  position: relative;
  padding: .5rem;
}

.rankibottom .rank-deco {
  width: 95%;
  position: absolute;
  z-index: 4;
  top: 0px;
  left: 0px;
}

.rankibottom .rank-deco img {
  width: 100%;
}

.rankibottom .rank-swipeimg {
    border-radius: .5rem;
    z-index: 3;
}


.swiper-button-prev-rank, .swiper-button-next-rank {
  background-image: none;
  top: 68%;
  z-index: 3;
  height: auto;
}

.swiper-button-next-rank {
  right: -8%;
  width: auto;
}

.swiper-button-prev-rank {
  left: -8%;
  width: auto;
}

.swiper-button-prev-rank:before, .swiper-button-next-rank:before {
	content: "";
	background-image: url("../image/site/ranking_arr.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 14px;
	height: 15px;
	position: absolute;
}

.swiper-button-prev-rank:before {
	transform: rotateZ(180deg);
}

.swiper-button-next-rank:before {
}

.swiper-pagination-rank {
  width: 100%;
  padding: .5rem 0;
}

.swiper-pagination-bullet-rank {
  margin: 0 .3rem;
  opacity: 1;
  background: #ffffff;
  width: 10px;
  height: 10px;
}

.swiper-pagination-bullet-rank-active {
  background: #cd3f23;
}
/*# sourceMappingURL=home_and_top.css.map */