@charset "utf-8";
/* CSS Document */


/********** vacant **********/

main.vacant {
  .p-body {
    padding-bottom: 0;
    .p-chapter {
      .p-chapter__inner {
        h3 {
          margin: 0 0 6rem;
          font-size: 4rem;
          line-height: 1.5;
          text-align: center;
          word-break: keep-all;
        }
      }
    }
    #sec01 {
      .p-chapter__inner {
        h4 {
          margin: 12rem 0 8rem;
          font-size: 3.2rem;
          line-height: 1.5;
          text-align: center;
          word-break: keep-all;
        }
        p {
          font-size: 2rem;
          font-weight: 700;
        }
        img {
          display: block;
          margin: 0 auto 6rem;
          width: 80%;
          max-width: 560px;
        }
        .worryList {
          display: flex;
          flex-wrap: wrap;
          gap: 4rem;
          margin: 0 0 6rem;
          >li {
            padding: 2rem;
            width: calc(50% - 2rem);
            border: 1px solid var(--green);
            background: var(--green-tra);
            /* color: #fff; */
            border-radius: 10px;
            h5 {
              display: inline-block;
              margin: 0 0 1.5rem;
              padding: .5rem 2rem;
              font-size: 1.6rem;
              line-height: 1.4;
              letter-spacing: .05em;
              color: #fff;
              border-radius: 15px;
              background: var(--green);
            }
            >ul {
              > li {
                display: flex;
                font-size: 1.6rem;
                line-height: 1.5;
                &::before {
                  content: "・";
                }
                + li {
                  margin: .5em 0 0;
                }
              }
            }
          }
        }
      }
    }
    #sec02 {
      color: #fff;
      background: var(--light-green);
      .p-chapter__inner {
        padding: 0;
        max-width: 1400px;
        ul {
          display: flex;
          flex-wrap: wrap;
          gap: 0;
          li {
            position: relative;
            padding: 6rem;
            width: 50%;
            &:nth-child(1),
            &:nth-child(2) {
              &::before {
                content: "";
                position: absolute;
                display: inline-block;
                bottom: 0;
                left: 4rem;
                width: calc(100% - 8rem);
                height: 1px;
                background: #fff;
              }
            }
            &:nth-child(odd) {
              &::after {
                content: "";
                position: absolute;
                display: inline-block;
                left: 100%;
                top: 4rem;
                width: 1px;
                height: calc(100% - 8rem);
                background: #fff;
              }
            }
            h4 {
              margin: 4rem 0 3rem;
              font-size: 2.4rem;
              text-align: center;
              word-break: keep-all;
              line-height: 1.5;
            }
            .imgArea {
              display: grid;
              place-content: center;
              padding: 2rem;
              background: #fff;
              margin: 0 auto;
              width: 240px;
              height: 240px;
              border-radius: 50%;
              overflow: hidden;
            }
          }
        }
      }
    }
    #contact {
      padding: 12rem 0;
    }
  }
}

@media (max-width: 768px) {
  main.vacant {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          h3 {
            font-size: 3.2rem;
          }
        }
      }
      #sec01 {
        .p-chapter__inner {
          h4 {
            font-size: 2.7rem;
          }
        }
      }
      #sec02 {
        .p-chapter__inner {
          ul {
            li {
              padding: 4rem;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 600px) {
  main.vacant {
    .p-body {
      #sec01 {
        .p-chapter__inner {
          .worryList {
            >li {
              width: 100%;
            }
          }
        }
      }
      #sec02 {
        .p-chapter__inner {
          ul {
            li {
              padding: 6rem 4rem;
              width: 100%;
              &:nth-child(odd) {
                &::after {
                  display: none;
                }
              }
              &:first-child {
                padding-top: 0;
              }
              &:last-child {
                padding-bottom: 0;
              }
              &:not(:last-child) {
                &::before {
                  content: "";
                  position: absolute;
                  display: inline-block;
                  bottom: 0;
                  left: 4rem;
                  width: calc(100% - 8rem);
                  height: 1px;
                  background: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  main.vacant {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          h3 {
            margin: 0 0 4rem;
            font-size: 2.4rem;
          }
        }
      }
      #sec01 {
        .p-chapter__inner {
          h4 {
            margin: 8rem 0 6rem;
            font-size: 2.1rem;
          }
          p {
            font-size: 1.5rem;
          }
          img {
            margin: 0 auto 4rem;
          }
          .worryList {
            margin: 0 0 4rem;
            gap: 2rem;
            >li {
              padding: 1.5rem;
              h5 {
                padding: .5rem 1.5rem;
                font-size: 1.4rem;
                border-radius: 10px;
              }
              >ul {
                >li {
                  font-size: 1.4rem;
                }
              }
            }
          }
        }
      }
      #sec02 {
        .p-chapter__inner {
          ul {
            li {
              padding: 4rem;
              .imgArea {
                padding: 1.5rem;
                width: 180px;
                height: 180px;
              }
              h4 {
                margin: 3rem 0;
                font-size: 2rem;
              }
            }
          }
        }
      }
      #contact {
        padding: 8rem 0;
      }
    }
  }
}