@charset "UTF-8";
/**
 * ViewPort Mixin and setting rem to pixel.
 */
/** ここでデザインファイルのサイズを入力 */
/**
 * mixin
 */
/**
 * pxをvwで返す関数
 */
/** デスクトップ上でpxをvwを返す */
/** モバイル上でpxをvwを返す */
/** largeDisplay（1536px以上）でウィンドウサイズサイズに追従するための関数 */
/**
 * Colors
 */
.section__contact {
  margin: 120rem auto;
}
@media (max-width: 768px) {
  .section__contact {
    margin: 100rem auto;
  }
}
.section__contact .contact-wrap {
  display: flex;
  justify-content: space-between;
  margin: 30rem auto 0;
  padding: 45rem;
  background: #FF9000;
  border-radius: 24rem;
  max-width: 1088rem;
}
@media (max-width: 768px) {
  .section__contact .contact-wrap {
    flex-direction: column;
    gap: 12rem;
    width: 88%;
    padding: 12rem;
    border-radius: 36rem;
  }
}
.section__contact .contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 480rem;
  padding: 40rem 0;
  background: #fff;
  border-radius: 24rem;
}
@media (max-width: 768px) {
  .section__contact .contact-item {
    width: 100%;
    padding: 48rem 0;
  }
}
.section__contact .small {
  display: block;
  font-size: 16rem;
  font-weight: 500;
}
.section__contact .large {
  display: block;
  margin: 20rem 0;
  color: var(--key-1, #FF9000);
  font-size: 48rem;
  font-weight: 500;
  font-family: "Avenir Next", "Avenir Next", "ryo-gothic-plusn", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", meiryo, sans-serif;
  font-style: normal;
}
@media (max-width: 768px) {
  .section__contact .large {
    font-size: 36rem;
  }
}
.section__contact .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rem;
  width: 240rem;
  height: 48rem;
  margin-top: 20rem;
  background: #FF9000;
  color: #fff;
  font-size: 13rem;
  font-weight: 500;
  border: 1px solid #FF9000;
  border-radius: 100px;
  transition: 0.4s ease;
  letter-spacing: 2rem;
}
.section__contact .button .icon {
  display: flex;
  width: 18rem;
}
.section__contact .button:hover {
  background: #fff;
  color: #FF9000;
}
@media (max-width: 768px) {
  .section__contact .button:hover {
    background: #FF9000;
    color: #fff;
  }
}