/* ここからパーツごとのCSS */
.parts__recCard {
  font-weight: bold;
  max-width: 210px;
  min-width: 120px;
  --parts__recCard-catchPhrase-fs: clamp(11px, 3.5vw, 17px);
  --parts__recCard-text-fs: clamp(9px, 2.9vw, 13px);
  --parts__recCard-atmosphere-fs: clamp(7.5px, 2.4vw, 11px);
  --parts__recCard-favoriteBtn-sz: clamp(38px, 12.5vw, 60px);
  --parts__recCard-favoriteIcon-sz: clamp(20px, 6.66vw, 30px);

  --recColor: var(--systemColor--pink);
}

@media (min-width: 768px) {
  .parts__recCard {
    max-width: 230px;

    --parts__recCard-catchPhrase-fs: clamp(13px, 2vw, 18px);
    --parts__recCard-text-fs: clamp(9px, 1.4vw, 13px);
    --parts__recCard-atmosphere-fs: clamp(7.5px, 1.25vw, 11px);
    --parts__recCard-favoriteBtn-sz: clamp(44px, 6.5vw, 60px);
    --parts__recCard-favoriteIcon-sz: clamp(20px, 3.5vw, 30px);
  }
}


.parts__recCard a {
  text-decoration: none;
}

.parts__recCard svg {
  color: var(--recColor);
}

.recCard__photoContent {
  border-radius: 15%;
  overflow: hidden;
  position: relative;
}

.recCard__photo {
  aspect-ratio: 34 / 27;
  background: url(https://dev.hitoriku.work/wp/wp-content/uploads/2025/09/photo_01.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.recCard_btnContent {
  position: absolute;
  z-index: 1;

  bottom: 19%;
  right: -4%;
}

.recCard__catchPhrase {
  position: relative;
  z-index: 2;

  margin: auto;
  padding: 4% 0;

  font-size: var(--parts__recCard-catchPhrase-fs);
  line-height: 1.2;
  color: #FFF;

  background-color: var(--recColor);

  display: flex;
  justify-content: center;
}

.recCard__textContent {
  margin: 2% 3% 0;
}

.recCard__textContent p {
  margin: 0;
  color: var(--systemColor--defaultText);
}

.recCard__occupation,
.recCard__workPlace {
  display: flex;
  align-items: center;
  font-size: var(--parts__recCard-text-fs);
}

.recCard__occupation svg,
.recCard__workPlace svg {
  margin-right: 1%;
  width: 10%;
  height: auto;
}

.recCard__atmosphere {
  display: flex;
  gap: 1%;
  margin-top: 2%;
}

.recCard__atmosphere p {
  padding: 0 3%;
  font-size: var(--parts__recCard-atmosphere-fs);
  color: #FFF;
  background-color: var(--recColor);
  border-radius: 50px;
}

/*------------- ボタン -------------*/
.recCard_favoriteBtn {
  position: relative;
  padding: 0 9% 15% 0;

  display: flex;
  justify-content: center;
  align-items: center;

  width: var(--parts__recCard-favoriteBtn-sz);
  height: var(--parts__recCard-favoriteBtn-sz);

  color: var(--systemColor--grayText) !important;
  background-color: rgba(255, 255, 255, .65);
  backdrop-filter: blur(3px);

  border: none;
  border-radius: 50%;

  cursor: pointer;
}

.recCard_favoriteBtn svg {
  color: inherit;
  width: var(--parts__recCard-favoriteIcon-sz);
  height: var(--parts__recCard-favoriteIcon-sz);
}

.recCard_favoriteBtn--active {
  display: none;
}

.recCard_favoriteBtn[aria-pressed="true"] .recCard_favoriteBtn--default {
  display: none;
}

.recCard_favoriteBtn[aria-pressed="true"] .recCard_favoriteBtn--active {
  display: inline;
}

.recCard_favoriteBtn[aria-pressed="true"] {
  color: var(--systemColor--favoriteYellow) !important;
}