@charset "utf-8";

.footer__top-wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 20px;
  background: #DFEDF5;
  padding: 45px 20px;
  border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .footer__top-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 900px) {
  .footer__top-wrap {
    padding: 45px 50px;
    column-gap: 40px;
  }
}

.footer__top-item{
  background: #F7F9FC;
  border-radius: 10px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 31px 0 41px;
  text-align: center;
}

.footer__top-item + .footer__top-item{
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .footer__top-item + .footer__top-item{
    margin-top: 0;
  }
}

.footer__top-title {
  font-size: 18px;
  letter-spacing: 0.036em;
  line-height: calc(24 / 18);
  font-family: "Noto Serif", serif;
  color:#D0E4ED;
}
.footer__top-sub {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  line-height: calc(30 / 22);
}

.footer__top-text {
  margin-top: 10px;
  font-size: 12px;
}
@media screen and (min-width: 900px) {
  .footer__top-text {
    margin-top: 20px;
    font-size: 14px;
  }
}

.footer__top-link {
  margin-top: 22px;
}
.footer__top-tel {
  position: relative;
  border-bottom: 1px solid rgba(0, 40, 85, 0.3);
  padding:  0 0 0 40px;
  font-family: "Noto Serif", serif;
  font-size: 32px;
  color: #002855 !important;
  line-height: calc(43 / 32);
  letter-spacing: 0.05em;
}
.footer__top-tel::before {
  content: "";
  position: absolute;
  background: url("../images/icon-tel.svg") center / contain no-repeat;
  width: 27px;
  height: 27px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.footer__top-tel:hover {
  opacity: 0.7;
}

.footer-contact {
  width: 240px;  
  height: fit-content;
  border: 1px solid #EBECEE;
  background: transparent;
  padding: 11px 15px 11px 20px;
  border-radius: 5px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-contact p {
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: calc(25.2 / 14);
  font-family: "Noto Sans JP", serif;
}
.footer-contact::before {
  content: "";
  display: inline-block;
  background: url('../images/icon-mail.svg') center / contain no-repeat;
  width: 25px;
  height: 20px;
}
.footer-contact::after {
  content: "";
  position: absolute;
  background: url('../images/arrow-white-right.svg') center / contain no-repeat;
  width: 5px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.footer-contact:hover {
  background: #fff;
}

.footer-contact:hover p {
  color: #7C2D2D;
}
.footer-contact:hover::before{
  background: url('../images/icon-mail-red.svg') center / contain no-repeat;
}
.footer-contact:hover::after{
  background: url('../images/arrow-brown.svg') center / contain no-repeat;
}

.footer__bottom-wrap {
  position: relative;
}

.footer__bottom {
  padding-block: 60px 64px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  border-bottom: 1px solid rgba(111, 84, 84, 0.1);
}
@media screen and (min-width: 768px) {
  .footer__bottom {
  padding-block: 73px 85px;
    gap: 69px;
  }
}

.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  border-bottom: 1px solid rgba(0, 40, 85, 0.3);
  padding-bottom: 71px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .footer__bottom-links {
    gap: 57px;
    margin: 0 auto;
    justify-content: center;
  }
}
@media screen and (min-width: 1160px) {
  .footer__bottom-links {
    max-width: 100%;
  }
}

.footer__bottom-list {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.footer__bottom-list p {
  width: fit-content;
  color: #002955;
  position: relative;
  display: inline-block;
}
.footer__bottom-list p::after {
  background-color: #002955;
  bottom: 0px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .3s;
  width: 100%;
}
.footer__bottom-list p:hover::after {
  bottom: -4px;
  opacity: 1;
}

.footer__bottom-logo {
  aspect-ratio: 329 / 48;
  max-width: 329px;
  height: auto;
  margin-inline: auto;
}

.footer__bottom-add {
  margin-top: 68px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .footer__bottom-add {
     display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto; 
    gap: 25px;
  }
}
@media screen and (min-width: 1100px) {
  .footer__bottom-add {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 60px;
  }
}
.footer__bottom-add > :first-child {
  grid-column: span 2;
  justify-self: center;
}

.footer__bottom-add > :nth-child(n+2) {
  justify-self: center;
}


.footer__copyright {
  border-top: 1px solid rgba(0, 40, 85, 0.3);
  padding: 46px 0 52px;
  font-size: 11px;
  line-height: calc(23.4 / 11);
  letter-spacing: 0.05em;
  color: rgba(0, 40, 85, 0.6);
  text-align: center;
}