/* CSS Document */

.subpage-top-intro{
  background: #f3f3f3;
}

.intro-text p span{
  display: block;
  text-align: center;
}

.contact-way {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.contact-way{
  padding:10px 15px 80px;
  text-align:center;
  gap: 15px;
}

.contact-way a{
  border: 2px solid rgba(161,0,0,1);
  color: rgba(161,0,0,1);
}

.contact-item p{
  margin-top:10px;
  font-size:18px;
  background: #fff;
  transform: skewX(-10deg);
}

.contact-item p a{
  font-size: 1.35rem;
}

.contact-item:nth-child(2):hover p a{
  color: #fff;
}

.contact-item:nth-child(2) .btn::after {
    content: "";
    width: 10px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    right: 1rem;
    border-right: 2px solid rgba(161,0,0,1);
    border-top: 2px solid rgba(161,0,0,1);
    transform-origin: 100% 50%;
    transform: rotate(45deg);
    transition: transform ease .3s;
}



.contact-item:nth-child(2) .btn:hover::after {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.contact-item:last-child p a{
  border: 2px solid #000;
  background:#000;
  color: #fff;
}

.contact-item i{
  margin-right: 10px;
}


@media(max-width: 1300px){
  
  .contact-way {
    padding: 0 0 40px;
  }

  .contact-item {
    padding: 20px 0;
  }
  
  .contact-item p a {
    padding: 10px 20px;
  }
  
  .contact-item p a {
    font-size: 1.1rem;
  }
  
}

@media(max-width: 1200px){
  
  .feature-item p a {
    font-size: 1.1rem;
  }
  
  .feature-item p {
    font-style: italic;
    transform: inherit;
  }
  
  .contact-item:nth-child(2) .btn::after {
    width: 8px;
  }
  
}


@media(max-width: 1000px){
  
  .title-box p {
    display: none;
  }
  
  .subpage-top-intro {
    padding: 40px 0 0;
  }
  
  .contact-item {
    width: 49%;
    padding: 0;
    min-width: 220px;
  }
  
  .contact-way {
    padding-top: 20px;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .contact-item p {
    margin-top: 0;
    font-size: 1.1rem;
    transform: skewX(0);
  }
  
  .contact-item p a {
    font-size: 1rem;
  }
  
  .contact-item p a {
    padding: 10px;
  }
  
  .contact-item i {
    margin-right: 5px;
  }
  

  
}


@media(max-width: 768px){

  .intro-text p span {
    text-align: left;
    display: inline;
  }
}


@media(max-width: 500px){
  .contact-way {
    padding: 10px 0 50px;
    grid-template-columns: repeat(1, 1fr);
  }
  
  .contact-item {
    width: 100%;
    padding: 0;
  }
  
  .contact-item p {
    margin-top: 0;
  }

}