/* CSS Document */
/**********************************/
.content_top .head {
  margin: 70px 0 40px; }
  .content_top .head br {
    display: none; }
.content_top p {
  text-align: justify;
  text-justify: inter-ideograph;
  font: 2rem/2em "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.16em; }
  .content_top p strong {
    display: block;
    margin: 40px 0 40px; }

@media (max-width: 1024px) {
  .content_top .head {
    margin: 60px 0 40px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .content_top .head {
    margin-bottom: 30px; }
    .content_top .head span {
      display: block;
      padding: 0 0 0 20px; }
  .content_top p {
    font: 1.8rem/2em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.16em; }
    .content_top p strong {
      display: block;
      margin: 40px 0 40px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .content_top .head {
    margin: 40px 0 25px; }
    .content_top .head span {
      padding: 0 0 0 17px; }
  .content_top p {
    font: 1.6rem/2em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.16em; }
    .content_top p strong {
      display: block;
      margin: 40px 0 40px; } }
/*max-width:480px*/
/**********************************/
.member_box {
  max-width: 1620px;
  width: calc(100% - 100px);
  margin: 0 auto; }

.member_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0 0 0 1px;
  margin-top: 1px; }

.member_item {
  box-sizing: border-box;
  width: calc((100% + 5px) /  5);
  border: 1px solid #C8C2D6;
  margin-left: -1px;
  margin-top: -1px;
  padding: 20px 20px 50px;
  position: relative; }
  .member_item .pic {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 0 10px; }
    .member_item .pic img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .member_item p {
    font: 1.5rem/1.5em "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em; }
  .member_item span {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font: 1.3rem/22px "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #5A4398;
    margin: 0 0 0 auto;
    padding: 0 30px 0 0; }
    .member_item span:before {
      position: absolute;
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      border: 1px solid #5A4398;
      border-radius: 50%;
      top: 0;
      right: 0; }
    .member_item span:after {
      position: absolute;
      content: "";
      display: block;
      width: 4px;
      height: 4px;
      background-color: #5A4398;
      border-radius: 50%;
      top: 9px;
      right: 9px; }

/*min-width:1980px*/
@media (max-width: 1280px) {
  .member_item {
    width: calc((100% + 4px) /  4); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .member_box {
    width: calc(100% - 80px);
    margin: 0 auto; }

  .member_item {
    width: calc((100% + 3px) /  3); } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .member_box {
    width: 100%;
    margin: 0 auto; }

  .member_item {
    width: calc((100% + 2px) /  2);
    padding: 10px 10px 40px; }
    .member_item span {
      right: 10px;
      bottom: 10px; } }
/*max-width:768px*/
/*max-width:480px*/
@media (hover: hover) {
  .member_item:hover {
    background-color: #5A4398; }
    .member_item:hover p {
      color: #fff; }
    .member_item:hover span {
      color: #fff; }
      .member_item:hover span:before {
        animation: dotFlash 0.6s ease-out forwards;
        border: 1px solid #fff; }
      .member_item:hover span:after {
        animation: dotFlash 0.6s ease-out forwards;
        background-color: #fff; } }
/*********************************/
.mv_member {
  width: 100%;
  background-color: #5A4398;
  position: relative; }
  .mv_member div {
    max-width: 1280px;
    width: calc(100% - 40px);
    height: auto;
    aspect-ratio: 1280/720;
    margin: 0 auto; }
    .mv_member div img {
      object-fit: cover;
      width: 100%;
      height: 100%; }

.member_status {
  max-width: 1280px;
  width: calc(100% - 100px);
  margin: 0 auto;
  padding: 55px 0 0;
  font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
  font-weight: 400; }
  .member_status h2 {
    padding: 0 0 0 25px;
    margin: 0 0 45px;
    font: 2.6rem/1.5em "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    color: #5A4398; }
    .member_status h2:before {
      position: absolute;
      content: "";
      display: block;
      width: 2px;
      height: 95%;
      left: 0;
      top: 52%;
      transform: translateY(-50%);
      background-color: #5A4398; }
    .member_status h2 span {
      display: block;
      color: #000;
      font: 2rem/1.3em "Noto Sans JP", sans-serif;
      font-weight: 500; }
  .member_status p {
    margin-bottom: 40px; }
  .member_status dl {
    margin: 0 0 60px;
    font: 1.7rem/1.8em "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start; }
  .member_status dt {
    width: 100%;
    padding: 0 0 0 19px;
    position: relative; }
    .member_status dt.flex {
      width: 90px;
      margin: 0 0 40px; }
    .member_status dt:before {
      display: block;
      width: 16px;
      height: 16px;
      background-color: #000;
      position: absolute;
      content: "";
      left: 0;
      top: 7px; }
  .member_status dd {
    width: 100%;
    margin: 0 0 40px; }
    .member_status dd.flex {
      width: calc(100% - 90px);
      margin: 0 0 40px; }
  .member_status .btn {
    position: relative;
    margin: 0 auto;
    text-align: center;
    border-radius: 50px;
    display: block;
    width: 270px;
    height: 70px;
    background-color: #5A4398;
    color: #fff;
    font: 1.8rem/69px "Inter Tight", sans-serif;
    font-weight: 500;
    letter-spacing: 0.16em; }
    .member_status .btn:before {
      position: absolute;
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      background-color: #FFE100;
      top: 50%;
      right: 25px;
      transform: translateY(-50%);
      transition: .3s;
      border-radius: 50%; }

@media (hover: hover) {
  .member_status .btn:hover:before {
    animation: dotFlash_message 0.6s ease-out forwards; }

  @keyframes dotFlash_message {
    0% {
      transform: scale(1) translateY(-50%);
      box-shadow: 0 0 0 0 rgba(255, 225, 0, 0.35), 0 0 0 0 rgba(255, 225, 0, 0.18); }
    45% {
      transform: scale(1.5) translateY(-50%);
      box-shadow: 0 0 0 8px rgba(255, 225, 0, 0.18), 0 0 0 16px rgba(255, 225, 0, 0.08); }
    100% {
      transform: scale(1.1) translateY(-50%);
      box-shadow: 0 0 0 16px rgba(255, 225, 0, 0), 0 0 0 28px rgba(255, 225, 0, 0); } } }
/*min-width:1980px*/
@media (max-width: 1280px) {
  .mv_member div {
    width: 100%; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .member_status {
    max-width: 768px;
    width: calc(100% - 80px);
    padding: 55px 0 0; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .mv_member div {
    aspect-ratio: 390/300; }

  .member_status {
    max-width: 480px;
    width: calc(100% - 60px);
    padding: 45px 0 0; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .member_status {
    max-width: 330px;
    width: calc(100% - 40px);
    padding: 40px 0 0; } }
/*max-width:480px*/