@charset "UTF-8";
/* CSS Document */
body {
  background-color: #fff;
  color: #050505;
  font-size: 16px;
}
.main-contact {
  width: 1220px;
  margin: 0 auto 50px;
}
.main-contact p {
  font-size: 24px;
  line-height: 2;
}
.method3 {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 200px;
}
.main-contact ul li {
  width: 300px;
  text-align: center;
  margin-top: 50px;
  padding-top: 50px;
  border-radius: 10%;
  box-shadow: 0 0 2px 0px white;
}
.main-contact ul li p {
  margin-top: 30px;
  margin-bottom: 30px;
  color: #fff;
}
.method3 img {
  width: 100px;
}
.call img {
  width: 70px;
}
/*　枠線＋テキストが出現 　*/
.lineText {
  position: relative; /*テキストの基点となる位置を定義*/
}
/*線の設定*/
.lineText span.mask {
  position: relative;
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
}
.lineText span.mask::before, .lineText span.mask::after {
  position: absolute;
  top: 4%;
  right: 2.5%;
  bottom: 4%;
  left: 2.5%;
  z-index: 3;
  content: "";
  opacity: 0;
  transition: .3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
.lineText span.mask::before {
  border-top: 1px solid #fff; /*枠線の色と太さを変更したい場合はこの数値を変更*/
  border-bottom: 1px solid #fff; /*枠線の色と太さを変更したい場合はこの数値を変更*/
  transform: scale(0, 1);
}
.lineText span.mask::after {
  border-right: 1px solid #fff; /*枠線の色と太さを変更したい場合はこの数値を変更*/
  border-left: 1px solid #fff; /*枠線の色と太さを変更したい場合はこの数値を変更*/
  transform: scale(1, 0);
}
.lineText:hover span.mask::before, .lineText:hover span.mask::after { /*hoverした時の変化*/
  opacity: 1;
  transform: scale(1);
}
/*中央テキスト*/
.lineText span.cap {
  opacity: 0;
  transition: .5s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index: 3; /*テキストを前面に出す*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5; /*行の高さを1.5にする*/
}
.lineText:hover span.cap { /*hoverした時の変化*/
  opacity: 1;
}
/*========= レイアウトのためのCSS ===============*/
a {
  color: #333;
  text-decoration: none;
}
.lead {
  text-align: center;
  padding: 50px 20px;
}
/*画像のレスポンシブ*/
img {
  width: 100%;
  height: auto;
}
/* 横幅*/
.lineText {
  width: 70%;
  margin: 0 auto; /*中央揃え*/
}