@charset "utf-8";

.f-trans{
  	width: 70%;
  	border-radius: 10px;
  	margin: 5rem auto;
    padding: 2rem 5%;
    position: relative;
  	background-color: #7691C1;
    box-shadow: 0 8px 24px #01142F1e;
}

.f-trans-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.f-trans-text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #FFF;
}

.f-trans-text-en{
  font-size: 1.25rem;
  color: #FFF;
  font-weight: 600;
}

.f-trans-text h2{
  font-size: 2.5rem;
  color: #FFF;
  font-weight: 600;
}

.f-trans-text desc{
  margin-top: 1rem;
}

.f-trans-contact{
    position: relative;
    padding: 1.5rem 2rem 1.5rem 4rem;
    height: auto;
  	width: 360px;
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    transition: all .5s;
  	background-color: #FFF;
  	border-radius: 50px;
}

.f-trans-contact:before{
   content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3rem;
  margin: auto 0;
    width: 25px;
    height: 20px;
    background: url("https://naniwa-thykoichiba.co.jp/system_panel/uploads/images/20260419103523999205.png");
    background-size: cover;
}

.f-trans-contact p{
    font-size: 20px;
  	font-weight: 500;
}

.f-trans-contact img{
    width: auto;
    height: 20px;
}

.f-trans-contact:hover{
  background-color: #00152F;
}

.f-trans-contact:hover p{
    color: #FFF;
}

.f-trans-contact:hover:before{
    background: url("https://naniwa-thykoichiba.co.jp/system_panel/uploads/images/20260419103523747556.png");
    background-size: cover;
}

@media (max-width: 600px) {
  .f-trans{
      width: 90%;
      margin: 3rem auto;
      padding: 2rem 1rem;
  }
  .f-trans-contact{
      padding: 1rem 1.5rem 1rem 2.5rem!important;
      gap: .5rem;
      border-radius: 30px;
  }
  .f-trans-contact p{
      font-size: 16px;
  }
  .f-trans-contact img{
      height: 16px;
  }
  .f-trans-text h2{
    font-size: 1.5rem;
  }
  .f-trans-contact:before{
      left: 1.5rem;
      width: 20px;
      height: 16px;
  }
}

.footer{
    padding: 2rem 0 1.5rem;
    position: relative;
  	background-color: #26374D;
}

.footer-wrap{
    width: 80%;
    max-width: 1200px;
    margin: 3rem auto 1rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 5rem;
    overflow: hidden;
    padding-bottom: 2rem;
    border-bottom: #536D82 1px solid;
}

.footer-logo img{
  width:  360px;
  height: auto;
}

.footer-desc{
   display: flex;
   flex-direction: column;
   gap: 2rem;
   font-size: 16px;
   color: #FFF;
}

.footer-desc-wrap{
   display: flex;
   gap: 1rem;
}

.footer-desc-wrap img{
   width: 16px;
   height: auto;
}

.footer-desc-link{
   width: 36px;
}

.footer-desc-link img{
   width: 36px;
  height: auto;
}

.footer__menu-wrap{
   display: flex;
   gap: 2rem;
}

.footer__menu{
   display: flex;
   flex-direction: column;
   gap: 1rem;
  margin-bottom: 2rem;
}
.footer__menu-child p{
  	position: relative;
    color: #FFF;
  	width: fit-content;
  	height: fit-content;
  	font-size: 1rem;
    padding: .25rem;
}

.footer__menu a:hover{
  opacity: .6;
  color: #FFF;
}

.footer-btn img{
  width: 190px;
  height: auto;
  cursor: pointer;
}

.footer-copy{
  margin: 1rem auto;
  width: 80%;
  max-width: 1200px;
  font-size: 10px;
  color: #FFF;
}

@media (max-width: 1400px) {
  .footer-wrap{
      gap: 3rem;
    flex-wrap: wrap;
  }
  .footer__menu-has{
      font-size: 18px;
      padding: 0rem 0 0 1.5rem;
  }
  .footer__menu-has:before{
      width: 18px;
      height: 18px;
  }
  .footer__menu-child p{
      font-size: 14px;
  }
}


@media (max-width: 960px) {
  .footer{
    padding: 1rem 0;
    position: relative;
    font-size: 14px;
  }
  .footer-wrap{
    width: 90%;
    margin: 2rem auto 1rem;
  }
  .footer-logo{
    width:  280px;
  }
  .footer_link{
     display: flex;
     gap: 1.5rem;
     font-size: 14px;
  }
  .footer__menu-wrap{
     gap: 1rem;
    flex-wrap: wrap;
  }
  
  .f-trans-wrap{
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
  }
  .f-trans-contact{
      position: relative;
      padding: 1rem 1.5rem;
      height: auto;
      width: 260px;
      display: flex;
      gap: .5rem;
      border-radius: 30px;
  }
}