@charset "utf-8";

.lower_link {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.lower_link_item {
  display: block;
  position: relative;
}
.lower_link_img {
  position: relative;
}
.lower_link_img::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .7;
}
.lower_link_img::after {
  content: '';
  position: absolute;
  width: 96%;
  height: 94%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* border: 1px solid #fff; */
  opacity: .4;
}
.lower_link_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 48px;
  font-size: clamp(2.6rem, 0.086rem + 3.274vw, 4.8rem);
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.lower_link_title span {
  font-size: 16px;
  font-size: clamp(1.4rem, 1.171rem + 0.298vw, 1.6rem);
  display: block;
  font-weight: 500;
}
.lower_link_more {
  position: absolute;
  bottom: 30px;
  bottom: clamp(1.6rem, 0rem + 2.083vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
}
.lower_link_more_text {
  position: relative;
  padding-bottom: 10px;
  color: #fff;
  font-size: 16px;
  font-size: clamp(1rem, 0.314rem + 0.893vw, 1.6rem);
  font-weight: 500;
}
.lower_link_more_text::after {
  content: '';
  position: absolute;
  background-image: url(../imgs/elements/lower_arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 119px;
  width: clamp(7rem, 1.4rem + 7.292vw, 11.9rem);
  height: 9px;
  bottom: 0px;
  left: 0;
}

@media only screen and (max-width:767px) {
  .lower_link {
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }
  .lower_link_title {
    font-size: 48px;
  }
  .lower_link_title span {
    font-size: 16px;
  }
  .lower_link_more {
    bottom: 30px;
  }
  .lower_link_more_text {
    font-size: 16px;
  }
  .lower_link_more_text::after {
    width: 119px;
  }
}

/* ホバーアクション
=============================================== */
.lower_link_item:hover .lower_link_img::before {
  opacity: .2;
  transition: .6s;
}
.lower_link_item:hover .lower_link_title {
  text-shadow: 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .6s;
}
.lower_link_item:hover .lower_link_more_text {
  text-shadow: 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .6s;
}
.lower_link_item:hover .lower_link_more_text::after {
  transform: translateX(10px);
  transition: .6s;
}