@charset "utf-8";



.recommend_icon_area{
  width: 120px;
  flex: 0 0 120px;   /* flexレイアウトでも固定 */
}

.recommend_icon_area img{
  width: 100%;
  height: auto;
  display: block;
}
.recommend_card .recommend_menu_title{
  color: #2f3437;
    margin-bottom: 6px;
}
.recommend_wrap{
  width: 100%;
    max-width: 1280px;
gap: clamp(40px, 8vw, 100px);
}
.recommend_title{
    margin-bottom: 20px;
}

.recommend_inner{
  display: flex;
  align-items: flex-start;
gap: clamp(24px, 6vw, 80px);
}

.recommend_inner .imgbox{
  width: clamp(260px, 32vw, 420px);
  flex: 0 0 clamp(260px, 32vw, 420px);
}
.recommend_inner .imgbox img{
  width: 100%;
  height: auto;
  display: block;
}

/* right area */
.recommend_inner .txtbox{
  flex: 1;
}

/* card */
.recommend_card{
  margin-top: 60px;
  background: #fff;
  padding: 40px 28px 30px;
  position: relative;
}

.recommend_tag{
  position: absolute;
  top: -22px;
  left: 28px;
  background: #333;
  color: #fff;
  padding: 8px 18px;
}
.recommend_tag p{
    color: #fff;}
.recommend_card_body{
  display: flex;
  align-items: center;
  gap: 22px;
}

.recommend_icon_circle{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: #5b5f73;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recommend_icon_circle img{
  width: 46px;
  height: 46px;
  display: block;
}

.recommend_card_body{
  position: relative; /* これがないと右下基準にならない */
}

.recommend_btn{
  position: absolute;
  right: 0px;
  bottom: 0;

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recommend_text_area{
  padding-right: 56px; /* ボタン分の逃げ（40 + 余白） */
}

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

/* responsive */
@media (max-width: 1080px){
  .recommend_inner{
    flex-direction: column;
  }
  .recommend_inner .imgbox{
    width: 100%;
      max-width: 400px;
  margin: auto;
  }
}


/* ---------- 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){
      .recommend_card_body{
     flex-direction: column;
    }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}