@charset "UTF-8";
/* ----------------------------------------------------
　sassを使用しています。このデータは編集しないようご注意ください。
---------------------------------------------------- */
/* ----------------------------------------------------
diet_members
---------------------------------------------------- */
#diet_members {
  --3color_gradation: linear-gradient(
    90deg,
    rgba(255, 82, 144, 1) 19%,
    rgba(255, 112, 191, 1) 64%,
    rgba(74, 162, 230, 1) 95%
  );
}
#diet_members > section + * {
  margin-top: 150px;
}
#diet_members > section .memberdata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#diet_members > section .memberdata .photo {
  border-radius: 1.8rem;
  overflow: hidden;
  width: 42%;
  max-width: 240px;
}
#diet_members > section .memberdata .data {
  width: 53%;
}
#diet_members > section .housetype {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
#diet_members > section .housetype li.type {
  display: block;
  width: fit-content;
  padding: 0.5rem 2rem;
  position: relative;
  font-size: 1.4rem;
}
#diet_members > section .housetype li.type::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50vh;
  padding: 2px;
  background: var(--3color_gradation);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
#diet_members > section .housetype .area {
  font-size: 2rem;
}
#diet_members > section h2.name {
  font-size: 4.6rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
#diet_members > section .furigana {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}
#diet_members > section .katagaki {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}
#diet_members > section .snslink {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 6px;
  margin: 2rem 0;
}
#diet_members > section .snslink li {
  width: calc(33% - 4px);
  border-radius: 50vh;
  border: 1px solid #e8e8e8;
  font-size: 1.2rem;
  text-align: center;
  pad: 2px 3px;
}
#diet_members > section .message h3 {
  display: block;
  width: fit-content;
  margin: 0 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
  font-weight: bold;
  background-image: var(--3color_gradation);
  background-clip: text;
  color: transparent;
}
#diet_members > section .message p {
  line-height: 2;
}

@media (max-width: 768px) {
  #diet_members > section + * {
    margin-top: 10rem;
  }
  #diet_members > section .memberdata {
    display: block;
  }
  #diet_members > section .memberdata .photo {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 3rem;
  }
  #diet_members > section .memberdata .data {
    width: 100%;
  }
  #diet_members > section .housetype {
    display: block;
    margin-bottom: 1rem;
    text-align: center;
  }
  #diet_members > section .housetype li.type {
    margin: 0 auto 0.5rem;
    padding: 0.5rem 3rem;
    font-size: 1.4rem;
  }
  #diet_members > section .housetype .area {
    font-size: 1.4rem;
  }
  #diet_members > section h2.name {
    font-size: 2.7rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  #diet_members > section .furigana {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
  #diet_members > section .katagaki {
    text-align: center;
  }
  #diet_members > section .snslink {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 6px;
    margin: 2rem 0;
  }
  #diet_members > section .snslink li {
    width: calc(50% - 4px);
  }
  #diet_members > section .address {
    font-size: 1.4rem;
  }
  #diet_members > section .message {
    margin-top: 2rem;
  }
  #diet_members > section .message h3 {
    display: block;
    width: fit-content;
    margin: 0 auto 0;
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    background-image: var(--3color_gradation);
    background-clip: text;
    color: transparent;
  }
  #diet_members > section .message p {
    line-height: 2;
    font-size: 1.6rem;
  }
}