@charset "utf-8";

/* ---------------------------------------------------- */
/* 宇陀野菜の生産者さん　person/index.html */
/* ---------------------------------------------------- */
#link-person {
  max-width: 1600px !important;
  width: 96%;
  margin: 0 auto;
  padding: 3rem 0 !important;


  & .person-title {
    width: 100%;
    height: 140px;
    text-align: center;
    margin-bottom: 30px;

    & img {
      width: auto;
      height: 100%;
      margin: 0 auto;
    }
  }

  & .person-card {
    width: 100%;
    margin-bottom: 3rem;

    & .card-image {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      overflow: hidden;
      border-radius: 1rem 0 0 1rem;

      & .intro-person {
        width: clamp(150px, 70%, 280px);
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        border: solid 3px #fff;
        border-radius: 50%;
      }

      & .intro-image {
        width: 100%;
        height: auto;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;

        & div {
          width: 50%;
          height: 50%;
          overflow: hidden;
          padding: 0;

          & img {
            min-width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            border: 1px solid #adadad;
          }
        }
      }
    }

    & .card-body {
      width: 50%;
      padding: 1rem 1rem 1rem 2rem;
      background-color: #fff;
      border-radius: 0 1rem 1rem 0;

      & .person-text {
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        background-color: cornsilk;
      }
    }
  }
}

/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 1200px未満*/
/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
@media screen and (max-width:1199px) {

  #link-person {

    & .person-card {

      & .card-image {
        width: 40%;

        & .intro-person {
          width: clamp(150px, 70%, 280px);
        }

        & .intro-image {

          & div {
            width: 100%;
            height: 25%;
          }

          & div:nth-child(3) {
            border-radius: 0;
          }

          & div:nth-child(4) {
            border-radius: 0 0 0 1rem;
          }
        }

        & .intro-image-sm {
          & div {
            max-height: 160px;
          }
        }

        & .intro-image-md {
          & div {
            max-height: 200px;
          }
        }

        & .intro-image-lg {
          & div {
            max-height: 240px;
          }
        }
      }

      & .card-body {
        width: 60%;
      }
    }
  }
}

/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 992px未満*/
/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
@media screen and (max-width:991px) {
  #link-person {
    & .person-card {
      & .card-image {
        & .intro-image-sm {
          & div {
            max-height: 160px;
          }
        }

        & .intro-image-md {
          & div {
            max-height: 240px;
          }
        }

        & .intro-image-lg {
          & div {
            max-height: 280px;
          }
        }
      }
    }
  }
}

/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 768px未満*/
/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
@media screen and (max-width:767px) {

  #link-person {
    padding: 2rem 0 !important;
   
    & .person-title {
      height: 100px;
    }
  
    & .person-card {
  
      & .card-image {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
  
        & .intro-person {
          width: clamp(150px, 70%, 230px);
        }
  
        & .intro-image {
          & div {
            width: 50%;
            height: 50%;
          }

          & div:nth-child(2) {
            border-radius: 0 1rem 0 0;
          }

          & div:nth-child(4) {
            border-radius: 0;
          }
        }
      }
  
      & .card-body {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0 0 1rem 1rem;

        & .person-text {
          padding: 0.5rem;
        }
      }
    }
  }
}