@charset "utf-8";
/* レスポンシブデザイン */
@media screen and (max-width: 700px) {
  /* --------------------------
loop.php (contact)
------------------------------*/
  #contact .item40 {
    width: 60%;
  }
  #contact p {
    text-align: left;
  }
  .ham {
    display: block;
    border: none;
    width: 31px;
    height: 31px;
    position: relative;
    right: 0;
    top: 0;
    z-index: 30;
    cursor: pointer;
    background-color: transparent;
  }
  .ham span {
    position: absolute;
    width: 100%;
    height: 3px;
    right: 0;
  }
  .ham1 {
    top: calc(50% - 10% / 2 - 25%);
    transition: 0.2s;
    background-color: #333;
  }
  .ham2 {
    top: calc(50% - 10% / 2);
    background-color: #333;
  }
  .ham3 {
    top: calc(50% - 10% / 2 + 25%);
    transition: 0.5s;
    background-color: #333;
  }
  .open .ham1 {
    top: calc(50% - 10% / 2);
    background-color: #fff;
    transform: rotate(135deg);
  }
  .open .ham2 {
    opacity: 0;
  }
  .open .ham3 {
    top: calc(50% - 10% / 2);
    background-color: #fff;
    transform: rotate(-135deg);
  }
  #global-navigation-container {
    display: none;
    position: fixed;
    background-color: var(--main-color);
    width: 100%;
    height: 100vh;
    padding: 3rem 1rem;
    top: 0;
    left: 0;
    transition: 1s;
    .menu {
      flex-direction: column;
    }
    & li {
      line-height: 2.5;
      text-align: center;
    }
    & a {
      font-size: 1.2rem;
      padding: 0.2rem 0.5rem;
      color: #fff;
    }
  }
  .open #global-navigation-container {
    display: block;
  }
  /* ----------------------------------------
front-page.php
--------------------------------------------*/
  #front-page-header {
    position: fixed;
    width: 100%;
    border-top: 10px solid var(--main-color);
  }
  .prologue {
    flex-direction: column-reverse;
  }
  .prologue .image {
    width: 60%;
  }
  /* mainvisual-------- */
  .mainvisual {
    height: 60vh;
    padding: 3rem;
  }
  /* sample-site------- */
  #sample-site .heading2::after,
  #sample-site .heading2::before {
    padding: 0;
  }
  /* flow-------------- */
  .flow {
    text-align: center;
    & li {
      width: 100%;
      margin-bottom: 4rem;
    }
    & li:last-of-type::after {
      content: "▶";
    }
    & li:first-of-type::after {
      content: none;
    }

    & li::after {
      top: -45px;
      right: 48%;
      rotate: 90deg;
    }
  }
  /* induction--------------- */
  #induction.flex-box {
    flex-direction: column-reverse;
  }
  /* ------------------------------------------
  footer.php
  ------------------------------------------- */

  #footer {
    .item60 {
      margin-bottom: 2rem;
    }
    & br {
      display: none;
    }
  }

  /* ------------------------------------------
page-service.php
---------------------------------------------*/
  #page-service .plan .item {
    width: 100%;
  }
  #page-service .plan dt {
    width: 75%;
  }
  #page-service .plan dd {
    width: 25%;
  }
  #price-detail .item,
  #preparation .item {
    width: 100%;
    margin-bottom: 1rem;
  }
  #page-service .flex-box {
    align-items: center;
  }

  /* --------------------------------------------
page-flow.php
------------------------------------------------ */
  #page-flow {
    .number {
      scale: 0.7;
    }
    & ol {
      padding-left: 20px;
    }
    & section {
      padding: 1rem;
    }
    .order-list,
    .lists {
      margin: 1rem 0;
    }
    .text {
      padding: 0;
    }
  }
  #diagram {
    .image {
      padding: 0;
    }
  }
  /* -----------------------------------------------
page-sample.php
--------------------------------------------------*/
  #page-sample .container .item {
    width: 80%;
  }
  /* -----------------------------------------------
  page-contact.php
  ----------------------------------------------- */
  #page-contact {
    .wpcf7 form {
      padding: 0;
    }
  }
  /* ------------------------------------------------
single.php
----------------------------------------------------*/
  #single-sample {
    .image {
      width: 100%;
      height: 280px;
      overflow: hidden;
      box-shadow: 8px 5px 10px dimgray;
    }
    img {
      height: auto;
      object-fit: contain;
    }
  }
  #single {
    .single-title::after {
      top: -1rem;
      right: -1rem;
      writing-mode: vertical-lr;
    }
    & h2 {
      letter-spacing: normal;
      line-height: normal;
    }
  }
}