@charset "UTF-8";

/* モバイル版----------------- */
@media screen and (max-width: 414px) {
  .title-top, .title-info, .title-contact {
    font-size: 3rem;
  }

  .title-info, .title-contact {
    margin-bottom: 2rem;
  }

  .title-menu {
    font-size: 3rem;
  }

  p {
    font-size: 0.75rem;
  }

  .info-wrapper p {
    margin-top: 5rem;
  }

  th, td {
    font-size: 1rem;
  }

  .hero {
    padding-top: 10vh;
  }

  .wrapper, .info-wrapper, .sns-wrapper, .from-wrapper {
    padding: 0 1rem;
  }

  .sns-wrapper {
    font-size: 1rem;
  }
}

/* タブレット版(縦)------------------ */
@media screen and (min-width: 415px) (max-width: 960px) {
  .title-top, .title-info, .title-contact, .contact h2 {
    font-size: 5rem;
  }

  .title-info, .title-contact {
    margin-bottom: 5rem;
  }
  .hero {
    padding-top: 13vh;
  }

}
/* タブレット版(横) ------------------*/
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .title-top, .title-info, .title-contact, .contact h2 {
    font-size: 4rem;
  }

  .title-contact {
    margin-bottom: 1rem;
  }

  .title-menu {
    font-size: 3rem;
  }

  p {
    padding: 0;
  }

  p, th, td {
    font-size: 1rem;
  }

  .hero {
    padding-top: 10vh;
  }

  .wrapper, .info-wrapper, .sns-wrapper, .from-wrapper {
    padding: 0 1rem;
  }

  .sns-wrapper {
    font-size: 1rem;
  }
}
/* マウスポインター有の時------- */
@media (hover: hover) {
  .sns-wrapper .button:hover {
    width: 200px;
  }

  .sns-wrapper .button:nth-child(1):hover .icon {
    background: #4267b2;
  }

  .sns-wrapper .button:nth-child(2):hover .icon {
    background: #1da1f2;
  }

  .sns-wrapper .button:nth-child(3):hover .icon {
    background: #e1306c;
  }

  .sns-wrapper .button:hover .icon i {
    color: white;
  }

  .sns-wrapper .button:nth-child(1):hover span {
    color: #4267b2;
  }

  .sns-wrapper .button:nth-child(2):hover span {
    color: #1da1f2;
  }

  .sns-wrapper .button:nth-child(3):hover span {
    color: #e1306c;
  }
}