/* pc  ~1100px */
/* sp  ~420px */

@charset "utf-8";

/* mvのスライド */
#slider {
  width: 100%;
  height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*WORKのtab*/

.tab {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 73%;
  margin: 0 auto;
}
.tab li a {
  display: block;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;

  font-family: "longhand-lp", sans-serif;
  font-weight: 600;
  font-style: normal;
  border-radius: 5px 5px 0 0;
  width: 6rem;
  font-size: 2.4rem;
  color: #447ca3;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a {
  background: #447ca3;
  color: #f5f2e9;
}

.works h3 {
  color: #447ca3;
  font-family: "longhand-lp", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.5rem;
  width: fit-content;
  padding: 0 1rem;
  margin: 0 auto 1rem;
  background: #f5f2e9;
}

/*エリアの表示非表示と形状*/

.area {
  width: 70%;
  margin: 0 auto;
  display: none; /*はじめは非表示*/
  opacity: 0; /*透過0*/
  background: #447ca3;
  padding: 50px 20px;
}

.area ul img {
  width: 100%;
  padding: 1rem 0 2rem;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: block; /*表示*/
  animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
  background: url(../images/cafe.jpg);
}

.slider-item02 {
  background: url(../images/call_crow.jpg);
}

.slider-item03 {
  background: url(../images/shaberu-kun.jpg);
}

.slider-item {
  width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat; /*背景画像をリピートしない*/
  background-position: center; /*背景画像の位置を中央に*/
  background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev,
.slick-next {
  position: absolute;
  z-index: 3;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff; /*矢印の色*/
  border-right: 2px solid #fff; /*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -50px 0 0 0; /*ドットの位置*/
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #fff; /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}

.works__more {
  text-align: right;
  width: fit-content;
  margin: 0 auto;
}
.works__more button {
  border: none;
}

.works__more button a {
  font-size: 3.5rem;
  padding: 0 2rem;

  font-family: "longhand-lp", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.works__more button:hover {
  background: #aab442;
  color: #f5f2e9;
}
.works__more button a:hover {
  color: #f5f2e9;
}

/* about */

.about__wrap {
  width: 80%;
  margin: 0 auto;
}

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

.about__pic img {
  width: 20rem;
}

.about__pic li {
  font-size: 2rem;
  margin: 3rem;
  border-bottom: #447ca3 3px dotted;
  padding: 0 10rem 0 0;
}
.about__pic li:first-child {
  font-size: 3rem;
}

.about__wrap p {
  font-size: 2rem;
  width: fit-content;
  margin: 5rem auto;
  line-height: 3rem;
}

.about__skill p {
  border: #447ca3 3px dotted;
  border-radius: 10px;
  font-size: 2.5rem;
  padding: 2rem 3rem;
}

.sp_br {
  display: none;
}

.about__button-wrap {
  width: fit-content;
  margin: 0 auto;
}

.about__button-wrap p {
  font-size: 2.8rem;
  margin: 1rem auto;
}
.about__button-wrap button {
  background: #447ca3;
  border: none;
  border-radius: 50rem;
  padding: 2rem 4rem;
}
.about__button-wrap button:hover {
  background: #aab442;
  transition: 0.3s;
}
.about__button-wrap button a {
  font-size: 2.3rem;
  padding: 2rem 4rem;
  color: #f5f2e9;
}

/*  */

.contact__wrap {
  width: 80%;
  margin: -10rem auto 0;
}
.contact h3 {
  font-size: 3rem;
  margin: 2rem 0;
}

.contact__wrap ol {
  display: flex;
}

.contact__wrap ol li {
  background: #fff;
  border-radius: 8px;
  padding: 2rem 3rem;
  font-size: 1.8rem;
  height: fit-content;
  line-height: 2.5rem;

  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #7d7d7d;
}

.next_sp {
  display: none;
}

.contact__wrap ol li:nth-child(2) {
  background: none;
  padding: 0;
}

.contact__wrap ol li:nth-child(4) {
  background: none;
  padding: 0;
}

.contact__wrap ol img {
  width: 2.5rem;
  padding: 5rem 1rem;
  height: fit-content;
}

.form-wrap {
  width: fit-content;
  margin: 6rem auto;
}

.form-inner {
  display: flex;
  gap: 10rem;
  margin: 3rem 0;
}

.form-inner dt {
  font-size: 2rem;
  width: 20rem;
}

.form-inner input {
  border: #447ca3 2px solid;
  border-radius: 3px;
}
.form-inner textarea {
  border: #447ca3 2px solid;
  border-radius: 3px;
}

.submit_button {
  width: fit-content;
  margin: 0 auto;
}

.submit_button input {
  background: #447ca3;
  border: none;
  border-radius: 30rem;
  padding: 1rem 5rem;
  color: #f5f2e9;
  font-size: 2rem;
}

.submit_button input:hover {
  background: #aab442;
  transition: 0.3s;
}

.footer__sp-copy {
  display: none;
}
@media screen and (max-width: 980px) {
  /*  */

  /*WORKのtab*/

  .tab {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 85%;
    margin: 0 auto;
  }

  /*エリアの表示非表示と形状*/
  .area {
    width: 80%;
  }

  /*areaにis-activeというクラスがついた時の形状*/
  .area.is-active {
    display: block; /*表示*/
    animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes displayAnime {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .slider li div {
    color: #f5f2e9;
    padding: 5rem 0 3rem 0;
    width: 80%;
    margin: 0 auto;
    font-size: 2rem;
  }

  .slider li p {
    color: #f5f2e9;
    width: 80%;
    margin: 0 auto;
    font-size: 1.8rem;
    line-height: 2.3rem;
  }
  .slider li img {
    width: 100%;
    margin: 0 auto;
  }

  /*矢印の設定*/

  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
    position: absolute; /*絶対配置にする*/
    z-index: 3;
    top: 35%;
    cursor: pointer; /*マウスカーソルを指マークに*/
    outline: none; /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc; /*矢印の色*/
    border-right: 2px solid #ccc; /*矢印の色*/
    height: 20px;
    width: 20px;
  }

  /*  */

  /* about */

  /*.about__wrap {
    width: 80%;
    margin: 0 auto;
  }*/

  .about__pic {
    display: block;
    text-align: center;
  }

  .about__pic img {
    width: 18rem;
  }

  .about__pic li {
    font-size: 2rem;
    margin: 3rem;
    border-bottom: #447ca3 3px dotted;
    padding: 0;
  }

  .br {
    display: none;
  }

  .sp_br {
    display: block;
  }

  .about__wrap p {
    font-size: 2rem;
    width: fit-content;
    margin: 3rem auto;
    line-height: 3rem;
  }

  .about__skill p {
    border: #447ca3 3px dotted;
    border-radius: 10px;
    font-size: 2rem;
    padding: 2rem 3rem;
  }

  .about__button-wrap {
    width: fit-content;
    margin: 0 auto;
  }

  .about__button-wrap p {
    font-size: 2.3rem;
    margin: 1rem auto;
  }
  .about__button-wrap button {
    background: #447ca3;
    border: none;
    border-radius: 50rem;
    padding: 2rem 4rem;
  }
  .about__button-wrap button:hover {
    background: #aab442;
    transition: 0.3s;
  }
  .about__button-wrap button a {
    font-size: 1.8rem;
    padding: 2rem 0;
    color: #f5f2e9;
  }

  /*  */

  .contact__wrap {
    width: 80%;
    margin: -5rem auto 0;
  }
  .contact h3 {
    font-size: 3rem;
  }

  .contact__wrap ol {
    display: block;
    text-align: center;
  }

  .contact__wrap ol li {
    background: #fff;
    border-radius: 8px;
    padding: 2rem 3rem;
    font-size: 1.8rem;
    height: fit-content;
    line-height: 2.5rem;

    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #7d7d7d;

    text-align: center;
    margin: 1rem 0;
  }

  .next_pc {
    display: none;
  }
  .next_sp {
    display: block;
  }

  .contact__wrap ol li:nth-child(2) {
    background: none;
    margin: 0;
    padding: 0;
  }

  .contact__wrap ol li:nth-child(4) {
    background: none;
    padding: 0;
  }

  .contact__wrap ol img {
    width: 5rem;
    height: fit-content;
    padding: 0;
    margin: 0 auto;

    /*transform: rotate(90deg);*/
    background: none;
    background: #f5f2e9;
  }

  .form-wrap {
    width: fit-content;
    margin: 6rem auto;
  }

  .form-inner {
    display: block;
    margin: 3rem 0;
  }

  .form-inner dt {
    font-size: 2rem;
    width: 20rem;
    margin: 1rem 0;
  }

  .form-inner input {
    border: #447ca3 2px solid;
    border-radius: 3px;
  }

  .form-text01,
  .form-text02 {
    width: 70%;
  }

  .form-inner textarea {
    border: #447ca3 2px solid;
    border-radius: 3px;
    width: 100%;
  }

  .submit_button {
    width: fit-content;
    margin: 0 auto;
  }

  .submit_button input {
    background: #447ca3;
    border: none;
    border-radius: 30rem;
    padding: 1rem 5rem;
    color: #f5f2e9;
    font-size: 2rem;
  }

  .submit_button input:hover {
    background: #aab442;
    transition: 0.3s;
  }

  .footer__sp-copy {
    display: block;
    text-align: center;
    margin: 1rem 0;
  }
}