@font-face {
  font-family: "ROLAchan";
  src: url("") format("opentype");
}

body {
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #333;
}

.inner {
  width: 85%;
  margin: 0 auto;
}

/* img{
  width: 100%;
} */

.pc-on {
  display: block;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger {
  opacity: 0;
}



/* header */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;

}

.header-right {
  font-family: "ROLAchan", sans-serif;
}

.header-right ul {
  display: flex;
}

.nav1 {
  margin-right: 30px;
}





/* main {
  background-image: url(../img/main.svg);
  height: 910px;
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  z-index: -5;
} */

/* mainvisual */
h1 {
  font-size: 131px;
  font-family: "ROLAchan", sans-serif;
  font-weight: normal;
  line-height: 1.1;
  text-align: center;
}

.main-p {
  font-weight: bold;
  font-size: 26px;
  margin-top: 18px;
  text-align: center;
}

.header-right a {
  position: relative;
}

.header-right a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #CEA454;
  bottom: -6px;
  /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1);
  /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top;
  /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform 0.3s;
}

.header-right a:hover::after {
  transform: scale(1, 1);
  /*ホバー後、x軸方向に1（相対値）伸長*/
}

/* h1 {
  position: relative;
} */

.main-title {
  z-index: 5;
}

.mainvisual {
  padding-top: 230px;
  position: relative;
  padding-bottom: 340px;
}

.main-01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -50;
}

.main-02 {
  position: absolute;
  right: 0;
}


/* works */
/* .works {
  margin-top: -60px;
} */

.sec-title {
  font-family: "ROLAchan", sans-serif;
  font-size: 50px;
}

.sec-title::after {
  content: url(../img/sec-title.svg);
  display: inline-block;
  background-size: contain;
  position: relative;
  top: -30px;
  left: -30px;
}

.works-title p {
  font-size: 17px;
  margin-top: 6px;
}

.works-title {
  display: flex;
  align-items: center;
}

.work-flex {
  display: flex;
  justify-content: end;
  position: relative;
  z-index: 10;
}

.w-item {
  width: 320px;
  z-index: 10;
  position: relative;
  transition: all 0.3s ease 0s;
}

.w-item:hover {
  transform: translateY(-5px);
  transform: scale(1.05);
  cursor: pointer;
}

.w-item img {
  width: 100%;
}

.works-row {
  margin-top: 70px;
}

.work-flex::after {
  content: '';
  background-color: #F2F2F2;
  /* width: 70%; */
  position: absolute;
  bottom: -11px;
  display: block;
  height: 186px;
  border-radius: 52px 0 0 52px;
  z-index: 0;
  max-width: 1040px;
  width: 100%;
}

.w-item img::after {
  content: 'ENAMI 会計事務所 WEBサイト';
}

.w-p {
  font-size: 16px;
  position: absolute;
  bottom: 15%;
  left: 24%;
  color: #fff;
}

.w-p span {
  color: #E4E4E4;
}

.w-p span {
  font-size: 12px;
  display: block;
}

.neko1 {
  position: relative;
}

.neko1::before {
  position: absolute;
  top: -41px;
  content: url(../img/neko1.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  left: 50px;
}

.neko2 {
  position: relative;
}

.neko2::before {
  position: absolute;
  top: -41px;
  content: url(../img/neko2.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  left: 30px;
}

.row2 {
  margin-top: 100px;
}

/* about */
.about {
  height: auto;
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  margin-top: 210px;
  position: relative;
  background: #5C5F62;
  padding: 50px 0;
}


/* 
.about::before {
    position: absolute;
      content: '';
      top: -80px;
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url(../img/about-top.svg);
      background-size: contain;
      background-repeat: no-repeat;
} */

.about-top {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
}

/* .about::after {
  position: absolute;
  content: '';
  bottom: -98px;
  z-index: -999;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(../img/about-bottom.svg);
  background-size: contain;
  background-repeat: no-repeat;
} */

/* .about .inner {
  padding-top: 130px;
} */

.title-white {
  color: #fff;
}

.about-bottom {
  position: absolute;
  bottom: -120px;
  left: 0;
  width: 100%;
  z-index: -999;
}

.name-en {
  color: #CEA454;
  font-size: 28px;
  font-family: "ROLAchan", sans-serif;
  letter-spacing: -0.05em;
}

.name-jp {
  font-size: 18px;
  color: #fff;
}

.about-right {
  color: #fff;
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin-top: -80px;
  position: relative;
}

.about-right span {
  background: #CEA454;
  padding: 4px;
  border-radius: 8px;
  font-weight: bold;
}

.about-flex {
  display: flex;
  max-width: 100%;
  width: 1000px;
  align-items: center;
  margin: 0 auto;
}

.about-left {
  margin-right: 100px;
}

.about-right::after {
  position: absolute;
  top: -14%;
  content: url(../img/neko4.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  right: -20%;
}

.btn a {
  padding: 20px 100px;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  position: relative;
}

.btn {
  margin-top: 40px;
  text-align: right;

}

.btn a::after {
  position: absolute;
  top: 24%;
  content: url(../img/arrow.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  right: -15%;
  transition: all .3s;
}

.btn a:hover::after {
  right: -25%;
}

/* skill */
.skill-t {
  justify-content: center;
}

.skill {
  margin-top: 150px;
}

.app {
  display: block;
  margin: 0 auto;
  margin-top: 40px;
}


/* thought */
.thoght-inner {
  background: #F2F2F2;
  max-width: 1130px;
  width: 90%;
  margin: 0 auto;
  padding: 120px 80px 40px 80px;
  border-radius: 40px;
  margin-top: -80px;
  /* margin-left: 13%; */
  position: relative;
}

.thought .inner {
  margin-top: 130px;
  z-index: 10;
}

.thoght-inner ul {
  margin-top: 40px;
  padding-left: 50px;
}

.th-title {
  font-size: 23px;
  font-weight: bold;
  color: #CEA454;
  margin-bottom: 10px;
}

.thoght-inner ul li {
  margin-bottom: 40px;
  position: relative;
}

.thoght-inner ul li p {
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.thoght-inner ul li::before {
  position: absolute;
  /* top: 16%; */
  content: url(../img/te.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  /* right: 6%; */
  left: -5%;
}

.thoght-inner::before {
  position: absolute;
  /* top: 16%; */
  content: url(../img/neko5.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  /* right: 6%; */
  right: 4%;
  top: 9%;
}

.thoght-inner::after {
  position: absolute;
  /* top: 16%; */
  content: url(../img/neko6.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  /* right: 6%; */
  left: -7%;
  bottom: 1%;
}

.thought {
  position: relative;
  /* background-image: url(../img/bottom.svg);
  height: 1080px;
  background-repeat: no-repeat;

  padding-top: 120px;
  margin-top: -110px;
  width: 100%;
  background-size: cover; */
}

.test5 {
  position: absolute;
  top: 0;
  right: 0;
}

.test6 {
  position: absolute;
  bottom: -20%;
}


/* footer */
footer {
  position: relative;
  /* margin-top: 100px; */
}

/* footer img {
  margin-top: 100px;
} */

footer p {
  margin-top: 50px;
  color: #fff;
  font-size: 12px;
}

.f-div {
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  text-align: center;
}




/* work page */
.work100 {
  /* background-image: url(../img/work.svg);
      height: auto;
      background-repeat: no-repeat;
      padding-top: 120px;
      margin-top: -110px;
      width: 100%;
      background-size: auto;
      background-position: bottom; */
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 220px;
  position: relative;
}

.work100::after {
  position: absolute;
  top: 36%;
  content: url(../img/work.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  left: 0;
}

.neko11::before {
  position: absolute;
  top: -26px;
  content: url(../img/neko11.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  right: 90px;
}

.work-header {
  position: relative;
}

.active {
  border-bottom: 2px solid #CEA454;
  padding-bottom: 5px;
}

.active::after {
  display: none;
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10;
  /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1100px;
  padding: 10px 30px;
  background-color: #F2F2F2;
  border-radius: 30px;
  max-height: calc(100vh - 100px);
  /* モーダルウィンドウが画面の縦（+余白）より大きくなった際の対処のため指定 */
  overflow-y: scroll;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: 30px;
}


.modal-flex img {
  width: 50%;
}

dt {
  float: left;
  clear: left;
  margin-right: 0.5em;
  width: 120px;
  line-height: 2;
  font-weight: bold;
}

dd {
  float: left;
  margin-left: 1em;
  line-height: 2;
}

.modal-flex {
  display: flex;
  margin-top: 40px;
}

.moda-text {
  padding: 40px;
}

/* .sh-text{
  border-top: 2px solid #fff;
  } */
.sh-title {
  display: inline-block;
  margin-top: 40px;
  background: #CEA454;
  color: #fff;
  padding: 9px 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.sh-text p {
  line-height: 2;
}



/* about page */
.name-jp-a {
  font-size: 18px;
  color: #333;
}

.area span {
  font-family: "ROLAchan", sans-serif;
  font-size: 20px;
  color: #CEA454;

}

.area-p {
  color: #CEA454;
  margin-left: 13px;
}

.area {
  max-width: 333px;
  width: 100%;
  background: #5C5F62;
  border-radius: 10px;
  padding: 20px;
  margin-top: 40px;
}

.area-p2 {
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 1.7;
}

.after {
  display: flex;
  align-items: center;
}

.about-p {
  margin-top: 90px;
  padding-bottom: 150px;
}

.about-p-flex {
  margin-top: 90px;
}

.p-right-title p {
  font-family: "ROLAchan", sans-serif;
  font-size: 29px;
  color: #CEA454;
  margin-left: 10px;
}

.p-right-title {
  display: flex;
  align-items: center;
  margin-bottom: 35px;
  margin-left: 11%;
}

.about-p-flex {
  display: flex;
}

.about-p-right {
  margin-left: 65px;
  position: relative;
  margin-top: -80px;
}

.about-p-right::before {
  position: absolute;
  /* top: 16%; */
  content: url(../img/line.svg);
  display: inline-block;
  left: 128px;
  top: 5.5%;
  z-index: 55;
}

.about-p-right::after {
  position: absolute;
  top: -26px;
  content: url(../img/about-neko1.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  right: 90px;
}

.about-dl dt {
  font-weight: normal;
  text-align: center;
}

.about-dl {
  display: flex;
  background: #F4EBDB;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 35px;
  line-height: 1.8;
  position: relative;
}

.about-dl::after {
  position: absolute;
  /* top: 16%; */
  content: url(../img/about-bar.svg);
  display: inline-block;
  left: 13%;
  top: -16px;
}

.dl-time {
  text-align: center;
  width: 110px;
}

.dl-sec {
  width: calc(100% - 150px);
  padding-left: 20px;
}

.like {
  background: #5C5F62;
  border-radius: 30px;
  padding: 30px 80px;
  margin-top: 160px;
  position: relative;
}

.like::before {
  position: absolute;
  top: -65px;
  content: url(../img/about-neko3.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  right: 80px;
}

.like-title p {
  font-family: "ROLAchan", sans-serif;
  font-size: 29px;
  color: #CEA454;
  margin-left: 10px;
}

.like-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.like-flex p {
  font-family: "ROLAchan", sans-serif;
  color: #CEA454;
}

.like-div {
  text-align: center;
}

.like-flex {
  display: flex;
  justify-content: space-around;
  max-width: 974px;
  width: 100%;
  margin: 0 auto;
  margin-top: 45px;
  flex-wrap: wrap;
  padding-top: 40px;
}

.like-bg {
  background-image: url(../img/like-bg.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.cat {
  width: 50%;
  text-align: right;
  /* margin-right: auto; */
  /* margin-left: auto; */
  display: block;
}

.come {
  display: flex;
  align-items: center;
  justify-content: end;
}

.cat-come {
  color: #fff;
  text-align: right;
}

.about-p-left {
  position: relative;
}

.about-p-left::after {
  position: absolute;
  bottom: 324px;
  content: url(../img/about-neko2.svg);
  display: inline-block;
  /* background-image: url(../img/main-ashi.svg); */
  background-size: contain;
  left: 80px;
}

.sp-on {
  display: none;
}

/* お問い合わせ */
.cn-flex{
      display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
}
.cn-btn{
  background: #CEA454;
    color: #fff;
    padding: 30px 60px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.04em;
    border-radius: 5px;
    border: 3px solid #CEA454;
}
.cn-btn:hover{
  background-color: transparent;
  transition: all .3s;
}
.contact-inn{
      background: #5C5F62;
        border-radius: 40px;
        color: #fff;
        margin: 0 auto;
        padding: 60px;
}
.contact{
  margin-top: 200px;
}
.cn-flex-p{
  margin-right: 30px;
  line-height: 1.7;
}
.cn-btn img{
  margin-right: 5px;
}

/* レスポンシブ */
@media only screen and (max-width: 1320px) {
  .about-bottom {
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    z-index: -999;
  }
}

@media only screen and (max-width: 995px) {
  .about-bottom {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    z-index: -999;
  }
}

@media only screen and (max-width: 890px) {
.cn-flex {
    text-align: center;
    display: block;
  }
    .cn-flex-p {
      margin-right: 0px;
      line-height: 1.7;
      margin-bottom: 50px;

}
.con-on{
  display: none;
}
}

@media only screen and (max-width: 813px) {
  .nav1 {
    margin-right: 20px;
  }

  .sec-title {
    font-size: 34px;
  }

  .name-en {
    font-size: 24px;
  }

  .main-title {
    margin-top: 40px;
  }

  /* main {
    background-image: url(../img/sp-main.svg);

    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    z-index: -5;
    width: 100%;
    height: 120vh;
  } */

  .main-02 {
    bottom: 10%;
  }

  h1 {
    font-size: 58px;
  }

  .main-p {
    font-size: 18px;
  }

  .sp-on {
    display: block;
  }

  .work-flex {
    display: block;
  }

  .w-item {
    margin-left: auto;
    position: relative;
    margin-bottom: 45px;
    width: 80%;
  }

  /* .about::before {
    position: absolute;
    content: '';
    top: -120px;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../img/sp-about-top.svg);
    background-size: contain;
    background-repeat: no-repeat;
  } */

  .works-title {
    display: block;
  }

  .w-item::after {
    content: '';
    background-color: #F2F2F2;
    width: 114%;
    position: absolute;
    bottom: -11px;
    display: block;
    height: 186px;
    border-radius: 52px 0 0 52px;
    z-index: -1;
    right: 0;
  }

  .work-flex::after {
    display: none;
  }

  .row2 {
    margin-top: 0;
    display: none;
  }

  .about-flex {
    display: block;
  }

  .about-left {
    text-align: center;
  }

  /* .about {
    background-image: url(../img/sp-m.svg);
    height: 1420px;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    margin-top: 90px;
    width: 100%;
    position: relative;
  } */

  .my-p {
    width: 80% !important;
    margin-top: 50px;
  }

  .works-row {
    margin-top: 10px;
  }

  .w-p {
    font-size: 16px;
    position: absolute;
    bottom: 13%;
    left: 24%;
    color: #fff;
  }

  .sec-title::after {
    top: -20px;
    left: -30px;
    width: 10px;
    content: url(../img/sp-te.svg);
    display: inline-block;
    background-size: contain;
    position: relative;
  }

  .sp-neko1::before {
    position: absolute;
    top: -9%;
    content: url(../img/sp-neko4.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 16%;
  }

  /*     position: absolute;
      top: -41px;
      content: url(../img/neko1.svg);
      display: inline-block;
      background-size: contain;
      left: 50px; */

  .neko1.sp-neko2::before {
    position: absolute;
    top: -9%;
    content: url(../img/sp-neko5.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    left: 9%;
  }

  .neko1::before {
    display: none;
  }

  .skill {
    margin-top: 120px;
  }

  /* .thought {
    background-image: url(../img/th-sp.svg);
    background-repeat: no-repeat;
    padding-top: 110px;
    height: auto;
    background-position: bottom;
    background-size: contain;
  } */

  .thoght-inner ul {
    margin-top: 40px;
    padding-left: 10px;
  }

  .about-left {
    margin-right: 0;
  }

  .about::after {
    position: absolute;
    top: 7%;
    content: url(../img/sp-neko3.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 13%;
  }

  .about-right {
    margin-top: 50px;
    font-size: 15.5px;
  }

  .about .inner {
    padding-top: 20px;
  }

  .btn {
    margin-top: 40px;
    /* text-align: right; */
    text-align: center;
  }

  .skill .sec-title {
    text-align: center;
    margin-left: 0 !important;
  }

  footer {
    margin-top: 18%;
  }

  .btn a::after {
    right: -11%;
    transition: all .3s;
  }

  .thoght-inner {
    background: #F2F2F2;
    max-width: 1130px;
    width: 90%;
    margin: 0 auto;
    padding: 90px 20px 10px 35px;
    margin-top: -100px;
  }

  .thoght-inner::before {
    position: absolute;
    /* top: 16%; */
    content: url(../img/sp-neko2.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    /* right: 6%; */
    right: 4%;
    top: -4%;
  }

  .thoght-inner ul li::before {
    left: -35px;
    top: -3px;
  }

  .thoght-inner::after {
    display: none;
  }

  .about-right::after {
    display: none;
  }

  /* 
  footer img {
    margin-top: 80px;
  } */



  .modal-flex {
    display: block;
  }

  .modal-flex img {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    display: block;
  }

  .moda-text {
    padding: 0;
    margin-top: 30px;
  }

  .about-p-flex {
    display: block;
  }

  .about-p-flex {
    margin-top: 50px;
  }

  .about-p-left .name-en,
  .about-p-left .name-jp-a {
    text-align: center;
  }

  .about-p-right {
    margin-left: 0;
    position: relative;
    margin-top: 80px;
  }

  .p-right-title p {
    font-family: "ROLAchan", sans-serif;
    font-size: 23px;
    color: #CEA454;
    margin-left: 10px;
  }

  .about-p-right::after {
    position: absolute;
    top: -46px;
    content: url(../img/about-sp-neko1.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 10px;
  }

  .p-right-title {
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    margin-left: 0;
    /* margin: 0 auto; */
    justify-content: center;
  }

  .dl-sec {
    width: calc(100% - 100px);
    padding-left: 20px;
  }

  .about-dl {
    padding: 10px;
  }

  .about-dl::after {
    position: absolute;
    /* top: 16%; */
    content: url(../img/about-bar.svg);
    display: inline-block;
    left: 31%;
    top: -16px;
  }

  .about-p-right::before {
    position: absolute;
    /* top: 16%; */
    content: url(../img/sp-line.svg);
    display: inline-block;
    left: 121px;
    top: 3.5%;
    z-index: 55;
    /* height: 820px; */
    background-repeat: repeat-y;
  }

  .area {
    margin: 0 auto;
    margin-top: 20px;
  }

  .about-p-left::after {
    display: none;
  }

  .like::before {
    position: absolute;
    top: -43px;
    content: url(../img/about-sp-nelp2.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 80px;
  }

  .like {
    background: #5C5F62;
    border-radius: 30px;
    padding: 30px;
    margin-top: 80px;
    position: relative;
  }

  .like-title p {
    font-size: 23px;
  }

  .like-title img {
    width: 48px;
  }

  .like-div img {
    width: 48px;
  }

  .like-right-p {
    margin-right: 10px;
  }

  .pc-on {
    display: none;
  }

  .like-flex {
    margin-top: 5px;
    flex-wrap: wrap;
    padding-top: 24px;
  }

  .cat-sp {
    max-width: 315px;
    display: inline-block;
    /* margin: 0 auto; */
    width: 100%;
    text-align: center;
  }

  .come {
    display: block;
    margin-top: 40px;
    text-align: center;
  }

  .cat-come {
    text-align: center;
  }

  .about-p {
    padding-bottom: 20px;
  }

  .my-about {
    display: block;
    margin: 0 auto;
  }

  .neko2::before {
    position: absolute;
    top: -28px;
    content: url(../img/sp-neko5.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    left: 30px;
  }

  .work100::after {
    position: absolute;
    top: 36%;
    content: url(../img/sp-w-bg.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    left: 0;
  }

  .work100 {
    padding-bottom: 30px;
  }

  .neko11::before {
    position: absolute;
    top: -19px;
    content: url(../img/sp-w-neko.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 60px;
  }

  .sh-text p {
    line-height: 1.7;
    font-size: 15px;
  }

  .app {
    width: 70%;
  }

  .th-title {
    font-size: 19px;
  }


  .neko55::before {
    position: absolute;
    top: -41px;
    content: url(../img/neko1.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    right: 70px;
  }

  .neko60::before {
    position: absolute;
    top: -41px;
    content: url(../img/neko2.svg);
    display: inline-block;
    /* background-image: url(../img/main-ashi.svg); */
    background-size: contain;
    left: 40px;
  }

  .test7 {
    position: absolute;
    top: 0;
    right: 0;
  }

  .test8 {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .about-top {
    position: absolute;
    top: -140px;
    left: 0;
    width: 100%;
  }

    .modalWrapper {
      padding: 30px 30px;
    }

    .contact .sec-title{
      margin-left: 0 !important;
      text-align: center;
    }
        .contact {
          margin-top: 100px;
        }
  .nav22{
    margin-right: 0 !important;
  }
}

@media only screen and (max-width: 675px) {
  .about-bottom {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    z-index: -999;
  }
}

@media only screen and (max-width: 551px) {
  .contact-inn{
    padding: 40px 20px;
  }
    .cn-btn {
      padding: 20px 40px;
    }
    .cn-flex {
      margin-top: 20px;
    }
    .cn-btn-di{
      margin-bottom: 10px;
    }
    .cn-btn{
      font-size: 19px;
    }
  .cn-btn img{
    width: 20px;
  }
.contact {
  margin-top: 70px;
}
}

@media only screen and (max-width: 490px) {
  .about {
    margin-top: 150px;
  }

  .about-top {
    position: absolute;
    top: -90px;
    left: 0;
    width: 100%;
  }
}

@media only screen and (max-width: 445px) {
  .about-bottom {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: -999;
  }
}