@charset "utf-8";
@media screen and (max-width: 1120px) {
  .flow .item {
    width: 48%;
  }
}
@media screen and (max-width: 900px) {
  .ham {
    width: 31px;
    height: 31px;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 30;
    cursor: pointer;
    background-color: transparent;
  }
  .ham span {
    position: absolute;
    width: 100%;
    height: 2px;
  }
  .ham1 {
    top: calc(50% - 10% / 2 - 25%);
    transition: 0.2s;
    background-color: var(--accent-color);
  }
  .ham2 {
    top: calc(50% - 10% / 2);
    background-color: var(--accent-color);
  }
  .ham3 {
    top: calc(50% - 10% / 2 + 25%);
    transition: 0.5s;
    background-color: var(--accent-color);
  }
  .open .ham1 {
    top: calc(50% - 10% / 2);
    background-color: var(--accent-color);
    transform: rotate(135deg);
  }
  .open .ham2 {
    opacity: 0;
  }
  .open .ham3 {
    top: calc(50% - 10% / 2);
    background-color: var(--accent-color);
    transform: rotate(-135deg);
  }
  .main-navigation {
    display: none;
    position: fixed;
    background-color: var(--base-color);
    width: 100%;
    height: 100vh;
    padding-top: 5rem;
    text-align: center;
    top: 0;
    left: 0;
    transition: 0.3s;
  }
  .nav-menu {
    flex-direction: column;
  }
  .nav-menu li {
    line-height: 3;
  }
  .nav-menu a {
    color: var(--accent-color);
    &:hover {
      opacity: 0.5;
    }
  }
  .open .main-navigation {
    display: block;
    .contact-btn {
      background-color: var(--base-color);
      padding: 0;
    }
  }
  .header {
    padding: 0;
  }
}
@media screen and (max-width: 800px) {
  .service .container .item {
    padding: 1rem;
  }

  /* ---------------
共通スタイル
---------------- */

  .inner {
    margin: clamp(2rem, 0.12rem + 7vw, 17rem) 0;
    padding: 0 4%;
  }
  .logo {
    font-size: 1.5rem;
  }

  /* ---------------------------
index.html
----------------------------- */

  /* div mainvisual-- */
  .mainvisual {
    margin-bottom: 6rem;
    .catch-copy {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      line-height: 1;
      right: 0;
      padding: 2rem;
    }
  }
  .service {
    .container {
      display: block;
      .item-4 {
        border-bottom: none;
        br {
          display: none;
        }
        .item-img {
          display: inline-block;
          padding: 1rem;
        }
        text-align: center;
      }
    }
  }
  /* section-flow----- */
  .flow {
    .container {
      flex-direction: column;
    }
    .item {
      width: 100%;
    }
  }
  /* section-price------- */
  .price {
    & th,
    & td {
      padding: 0.5rem;
    }
  }
  /* section-contact----- */
  .contact {
    .container {
      flex-direction: column;
      .contact-title,
      & p,
      & div {
        width: 95%;
        text-align: center;
        margin-bottom: 1rem;
      }
    }
  }
  /* -----------------
  footer
  ------------------- */
  .footer {
    .footer-container {
      flex-direction: column;
    }
    .item,
    .nav-menu {
      width: 100%;
      margin-bottom: 2rem;
    }
  }

  /* ------------------
flow.html
------------------- */

  .low-page {
    .title {
      margin-left: 0;
    }
    .sub-content {
      .container {
        flex-direction: column;
      }
      & li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line-color-right);
      }
    }
    & .sub-content li:last-of-type {
      margin-bottom: 3rem;
    }
  }

  /* ---------------
detail.html
---------------- */

  .back-ground {
    background-position: 90% 0;
  }
  .detail-page {
    padding: 3rem 0 0 1rem;
    & ol {
      padding: 0 0 0 1.5rem;
    }
    .article {
      margin: 3rem 1rem;
      padding: 2rem 1rem;
    }
    .section:last-of-type {
      padding: 1rem;
    }
    .section {
      padding: 1rem;
      margin-left: 1rem;
      .title {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 1rem;
      }
      & h3 {
        font-size: 1rem;
      }
    }
    .section-container {
      flex-direction: column;
    }
    .text {
      width: 100%;
    }
    .image {
      width: 100%;
      height: 15rem;
    }
  }

  /* ------------------
contact.html
------------------ */

  .contact-form {
    width: 100%;
    .items {
      flex-direction: column;
    }
    .label {
      width: 100%;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .item {
      width: 100%;
    }
  }
  /* ------------
  about.html
  ------------- */
  .about-page {
    .summary {
      & dt {
        width: 30%;
      }
      & dd {
        width: 70%;
      }
      & dt,
      & dd {
        padding: 0.5rem;
      }
    }
    .grid-container {
      grid-template-columns: 1fr;
      & dl {
        display: grid;
        grid-template-columns: 1fr 3fr;
      }
    }
  }
}