@charset "UTF-8";
/* PC版用のメニューボタンをスマホ画面でいったん消す*/
@media screen and (max-width: 640px) {
  header, .main-nav, nav {
    display: none;
  }
  .openbtn4 {
    position: fixed;
    /*ボタン内側の基点となるためrelativeを指定*/
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: dimgray;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: block;
  }
  .openbtn4 span {
    display: inline-block;
    transition: all 0.4s;
    /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background: #fff;
    width: 45%;
  }
  .openbtn4 span:nth-of-type(1) {
    top: 13px;
  }
  .openbtn4 span:nth-of-type(2) {
    top: 19px;
  }
  .openbtn4 span:nth-of-type(3) {
    top: 25px;
  }
  .openbtn4 span:nth-of-type(3)::after {
    content: "Menu";
    /*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top: 3px;
    left: -3px;
    color: #fff;
    font-size: 0.6rem;
    text-transform: uppercase;
  }
  .openbtn4.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }
  .openbtn4.active span:nth-of-type(2) {
    opacity: 0;
  }
  .openbtn4.active span:nth-of-type(3) {
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }
  .openbtn4.active span:nth-of-type(3)::after {
    content: "Close";
    /*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top: 5px;
    left: 3px;
  }
  .sp-menu {
    display: block;
    width: 100%;
    height: 55vh;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 9999;
    transition: 0.3s;
  }
  .sp-menu.active {
    right: 0;
  }
  .sp-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .sp-menu li {
    padding: 20px;
    /* width: 50%; */
    font-family: "Zen Old Mincho", serif;
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
  }
  .sp-menu li a {
    margin-right: 0;
  }
  ul li a:hover {
    color: #0bd;
  }
  .sp-menu a {
    text-decoration: none;
    color: #FFF;
  }
  .sp-menu span {
    font-size: 0.5em;
  }
  .sp-menu p {
    text-align: center;
  }
  .sp-menu ul.active {
    padding: 10px;
    animation: fadeup 0.3s linear 0.3s 1 normal backwards;
  }
  @keyframes fadeup {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* sp-menuハンバーガーメニュー終/ */
/* モバイル版
------------------------------- */
@media (max-width: 640px) {
  .page-title {
    font-size: 2.5rem;
  }
  .page-header {
    flex-direction: column;
    align-items: center;
  }
  /* HEADER */
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }
  .main-nav li {
    margin: 0 20px;
  }
  /* HOME */
  .home-content, .menu-content {
    margin-top: 20%;
  }
  /* ページタイトル */
  .titlewra {
    max-width: 560px;
    margin: 10% auto 13%;
    width: 90%;
  }
  /* 地図 */
  #location .wrapper, #sns .wrapper {
    flex-direction: column;
  }
  .sns-box, .location-info, .location-map {
    width: 100%;
  }
  /* 地図スマホ版 */
  /* 遷移先それぞれbg画像 */
  #gyomu, #gaiyou, #contact {
    height: 305px;
  }
  /* 所在地など */
  .hidari {
    height: 55px;
  }
  .migi {
    margin: auto 0;
    font-size: 1.05em;
    color: #000;
  }
  .migi span {
    display: inline-block;
  }
  .timeline {
    width: 70%;
    margin: 0 auto 2em;
  }
  /* 業務内容1カラム縦並び */
  .business-content {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 68%;
    margin: 30px auto;
  }
  .content-box {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    /* 画像で折り返す */
    flex-wrap: wrap;
    flex-direction: column;
  }
  /* ボタン縦並び */
  .btn-wrapper {
    display: inline-flex;
    flex-direction: column;
  }
  .button {
    font-size: 1rem;
    margin-bottom: 13px;
    border-radius: 20px;
  }
  /* 業務内容br改行スマホ版では無効化する */
  .content-pp br {
    display: none;
  }
}
/* スマホ版 水泡 */
@media screen and (max-width: 640px) {
  .bubbles {
    width: 160px;
    padding-left: 20px;
    position: absolute;
    bottom: 0;
    margin-left: -170px;
    left: 50%;
    display: inline-block;
  }
}
/* スマホ版 波打つ文字 */
@media screen and (max-width: 640px) {
  .wave {
    font-size: 3em;
  }
}
/* contact ------------------------------------------------*/
@media screen and (max-width: 640px) {
  .contactbox {
    width: 90%;
    font-size: 0.85em;
    padding: 30px 10px;
  }
  .contactboxp span {
    font-size: 1.1em;
    letter-spacing: -0.05em;
  }
  .contactboxp {
    margin: 10px auto;
  }
  .button-011 div {
    width: 70%;
  }
  .button-011 button {
    width: 90%;
  }
  .button-012 {
    display: none;
  }
  .button-012-mobi {
    display: block;
  }
  .box_con form table tr th span {
    margin-left: 0em;
  }
  /* contact-after ------------------------------------------------*/
  .contact-after {
    font-size: 0.8em;
  }
  .contactbtn input {
    width: 60%;
  }

  /* ボタン */
.button {
  font-size: 1.375rem;
  background: rgba(136, 133, 237, 0.821);
  position: relative;
  cursor: pointer;
  padding: 2rem 3rem;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #5ea8dd 1%, rgb(136, 133, 237));
  background-size: 200%;
  transition: .3s;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 0 0 #369BEC;
  transition: .8s;
}

.button:hover {
  background: #369BEC;
  padding: 3rem 4rem;
  animation: fluidshape 10s ease .1s infinite;
}

.hoge{
  line-height: 170px;
  text-align: center;
  font-size: 1rem;
}

}

/* スマホ版 */
@media screen and (max-width: 640px) {
.detail-1-sp{
  margin: 1.5rem;
}

.flex {
  display: flex;
  flex-direction: column; /*縦並び*/
}

html body .content-wrap .inner-m {
  width: 100%;
  margin: 0 auto;
}

.flex .imagevoice {
  width: 100%;
  margin: 0;
  padding: 0;
}
.flex .imagevoice img {
  width: 100%;
  height: auto;
  padding: 3%;
}

.flex .right {
  width: 100%;
  margin: 1%;
  padding: 3%;
}

.detail-button {
  margin-right: 0;
  margin-bottom: 1rem;
}

.sekou li {
  font-size: 1rem;
}

.imgreform{
  display: none;
}

.con-p{
  font-size: 2rem;
}

}

html body .content-wrap .nopa{
  padding: 1rem 1rem;
}




/* 改行 */
@media screen and (max-width: 640px) {
  .pcbr{
    display: none;
  }

  .spstart{
    text-align: start;
  }

  .pcwidth{
    text-align: start;
  }}