@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: 50px;

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

  & hr{
    margin-bottom: 50px;
  }

  & .person-card {
    width: 100%;

    & .card-image {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      overflow: hidden;
      height:10%;

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

        & > div:first-child {
          width: 100%;
          height: 60%;
          overflow: hidden;
          padding: 0;

          & img {
            width: 100%;
            height:100%;
            object-fit: cover;
            object-position: center center;
          }
        }
        & > div:nth-child(2){
          display: flex;
          flex-wrap: wrap;
          height: 40%;
          width: 100%;

          & div{
            display: flex;
            justify-content: center;
            align-items: center;
            width:50%;
            height:100%;
            overflow: hidden;

            & img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }

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

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

      & h5{
        margin-top: 20px;
        & img{
          height:23px;
        }
      }

      & li{
        white-space: nowrap;
        font-weight: 400;
      }
    }
  }
}

.fukidashi{
  position: relative;
  display: inline-block;
  padding: 16px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.fukidashi::before {
content: "";
position: absolute;
top: 0;
left: 17%;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent transparent #000000;
translate: -50% -100%;
}

.fukidashi::after {
content: "";
position: absolute;
top: 0;
left: 17%;
border-style: solid;
border-width: 0 17px 18px 0;
border-color: transparent transparent #ffffff;
translate: calc(-50% - 0.4px) -100%;
}

th,img{
  height: 23px;
}
td{
  line-height: 1.2;
  font-weight: 400;
}
/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 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%;
          }

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

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


      }

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

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

        & .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 {
      width:70%;
      margin:50px auto;
    }

    & .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;
        }
      }
    }
  }
}