@charset "utf-8";

/*SP*/

@media screen and (max-width: 1200px) {
  .wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ヘッダー */
  header {
    background-image: url(../img/main.jpg);
    background-size: 100% 100%;
    background-size: cover;
    background-position: center center;
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;
    /*===========max-width:1200px=========*/
  }

  /*webp対応*/
  .webp header {
    background-image: url(../img/main.webp);
  }

  /*webp非対応*/
  .no-webp header {
    background-image: url(../img/main.jpg);
  }
}

@media screen and (max-width: 767px) {
  /* ヘッダー */
  header {
    height: 50rem;
  }

  header h1 {
    margin-top: 30%;
  }

  /* マウスフォロー */
  .mouse-follow {
    display: none;
  }

  /* ハンバーガーメニュー */
  .site-header-navbtn {
    display: block;
  }

  /* ナビゲーション */
  .site-header-nav {
    background-color: #fffaec;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.6s;
    z-index: 5;
  }

  body.is-nav-open .site-header-nav {
    transform: translateX(0);
  }

  .site-header-nav ul {
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  .site-header-nav ul li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 1.5em;
    border-bottom: none;
  }

  .site-header-nav ul li a {
    font-size: 1.5rem;
  }

  .site-header-nav ul li {
    border-bottom: none;
    width: 6.5rem;
  }

  /* website */
  .site {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .site_text {
    text-align: left;
    width: 90vw;
    margin-left: auto;
    margin-inline-end: auto;
  }

  .site_link {
    margin-left: auto;
    margin-right: auto;
  }

  #website img {
    margin-left: auto;
    margin-right: auto;
  }

  .web_link {
    margin-top: 0;
  }

  .about_link {
    margin-top: -1rem;
  }
  /* バナー */

  .banner img {
    width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* フッター */
  .contact {
    background-size: cover;
  }
}

@media screen and (max-width: 620px) {
  .contact_wrapper {
    position: absolute;
    top: 40%;
    left: 50%;
  }
  /*===========max-width:620px=========*/
}

@media screen and (max-width: 599px) {
  header nav ul {
    flex-direction: column;
  }

  header h1 a {
    font-size: 60px;
  }

  .wrapper {
    margin-bottom: 100px;
  }

  header .wrapper,
  .wrapper p {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  #mainvisual img {
    height: calc(100vh - 60px);
  }

  /* About me */
  #about .content {
    flex-direction: column;
  }

  #about img {
    margin-right: 0;
    margin-bottom: 3rem;
  }

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

  #about .text p {
    text-align: left;
  }

  /* スキル */
  .skill_content {
    display: block;
  }

  .skill_content .skill_icon,
  .skill_content .skill_icon2 {
    width: 100%;
    margin-top: 1rem;
  }
}