@charset "utf-8";
/* CSS Document */
.recommend_wrap{
  width: 100%;
  max-width: 1280px;
  gap: clamp(40px, 8vw, 100px);
  margin-right: auto;
  margin-left: auto;
}

.recommend_wrap .recommendbox{

    width: 100%;
}

.recommend_wrap .recommend_title{
  margin-bottom: 20px;
}

.recommend_wrap .recommend_inner{
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 3vw, 40px);
}

.recommend_wrap .recommend_inner .imgbox{
  width: clamp(260px, 32vw, 320px);
  flex: 0 0 clamp(260px, 32vw, 320px);
  border-radius: 10px;
  overflow: hidden;
}

.recommend_wrap .recommend_inner .imgbox img{
  width: 100%;
  height: auto;
  display: block;
}

.recommend_wrap .recommend_inner .txtbox{
  flex: 1;
}

.recommend_wrap .recommend_card{
  margin-top: 60px;
  background: #fff;
  padding: 40px 28px 30px;
  position: relative;
  border-radius: 8px;
  display: block;
}

.recommend_wrap .recommend_tag{
  position: absolute;
  top: -22px;
  left: 28px;
  background: #33CBBB;
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
}

.recommend_wrap .recommend_tag p{
  color: #fff;
}

.recommend_wrap .recommend_card_body{
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
}

.recommend_wrap .recommend_icon_area{
  width: 120px;
  flex: 0 0 120px;
  border-radius: 6px;
  overflow: hidden;
}

.recommend_wrap .recommend_icon_area img{
  width: 100%;
  height: auto;
  display: block;
}

.recommend_wrap .recommend_text_area{
  padding-right: 56px;
}

.recommend_wrap .recommend_text_area h4{
    color: #333;
    font-weight: 600;
}
.recommend_wrap .recommend_menu_desc{
    line-height: 2;
}
.recommend_wrap .recommend_card .recommend_menu_title{
  color: #33CBBB;
  margin-bottom: 10px;
}

.recommend_wrap .recommend_btn{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #33CBBB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: transform 0.3s ease;
}

.recommend_wrap .recommend_btn i{
  color: #fff;
  line-height: 1;
  font-size: 12px;
}

.recommend_wrap .recommend_btn .icon img{
  display: block;
  width: 14px;
  height: 14px;
}

.recommend_wrap .recommend_card:hover .recommend_btn{
  transform: translateX(4px);
}

@media screen and (max-width: 900px){
  .recommend_wrap{
    flex-direction: column;
    gap: 60px;
  }

  .recommend_wrap .recommendbox{
    width: 100%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
    flex: none;
  }

  .recommend_wrap .recommend_title{
    text-align: center;
  }

  .recommend_wrap .recommend_inner{
    flex-direction: column;
    gap: 30px;
  }

  .recommend_wrap .recommend_inner .imgbox{
    width: 100%;
    max-width: 400px;
    flex: none;
    margin: 0 auto;
  }

  .recommend_wrap .recommend_inner .imgbox img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .recommend_wrap .recommend_card{
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px){
  .recommend_wrap{
    gap: 50px;
  }

  .recommend_wrap .recommendbox{
    max-width: 100%;
  }

  .recommend_wrap .recommend_inner .imgbox{
    max-width: 100%;
    height: auto;
  }

  .recommend_wrap .recommend_inner .imgbox img{
    height: auto;
    object-fit: cover;
  }

  .recommend_wrap .recommend_card{
  
    padding: 34px 22px 24px;
  }

  .recommend_wrap .recommend_tag{
    left: 22px;
    top: -18px;
    padding: 7px 16px;
  }

  .recommend_wrap .recommend_card_body{
    gap: 18px;
  }

  .recommend_wrap .recommend_text_area{
    padding-right: 44px;
  }
}

@media screen and (max-width: 576px){
  .recommend_wrap{
    gap: 40px;
  }

  .recommend_wrap .recommend_title{
    margin-bottom: 14px;
    text-align: left;
  }

  .recommend_wrap .recommend_inner{
    gap: 20px;
  }

  .recommend_wrap .recommend_card{

    padding: 30px 16px 20px;
  }

  .recommend_wrap .recommend_tag{
    left: 16px;
    top: -16px;
    padding: 6px 14px;
  }

  .recommend_wrap .recommend_card_body{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .recommend_wrap .recommend_icon_area{
    width: 100%;
    max-width: 120px;
    flex: none;
  }

  .recommend_wrap .recommend_text_area{
    width: 100%;
    padding-right: 36px;
  }

  .recommend_wrap .recommend_btn{
    right: 0;
    bottom: 0;
  }

  .recommend_wrap .recommend_menu_desc{
    line-height: 1.8;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}