@charset "utf-8";

@media screen and (min-width:1100px) {
    .lowerpage_title_wrap .contents .img_title { height:286px; }
}

.ul_wrap { width:100%; }
.ul_wrap li { width:48%; margin-bottom:20px; }
.ul_wrap li a { width:100%; }
.ul_wrap li.ul_wrap_junbi { width:100%; text-align:center; margin-bottom:0; }
a .photo { width:100%; height:205px; overflow:hidden; border-radius:10px; margin-bottom:10px; position: relative; z-index:0;   /* Safari対策：角丸を維持 */
-webkit-mask-image: -webkit-radial-gradient(white, black);backface-visibility: hidden;}
a .photo img { width:100%; height:100%; object-fit:cover;transition: transform 0.4s ease; display:block;   /* Safariのtransformバグ対策 */
  will-change: transform;}
a:hover .photo img { width:100%; height:100%; object-fit:cover; transform: scale(1.2); display:block;}
.ul_wrap li a p { font-size:18px; font-weight:bold; letter-spacing:0.1em; margin-bottom:10px; line-height:1.66em; }
.date { width:130px; height:30px; font-size:16px; border-radius:12px; background:#F5F5F5; color:#137CD3; font-weight:bold; letter-spacing:0.1; line-height:30px; text-align:center; }
.arrow_wrap { position:relative; float:right; }
.arrow_wrap img.arrow_photo { width:22px; height:22px; margin-top:4px; }
.arrow_wrap:before {content: "";width:16px; height: 1px;background-color: #000;position: absolute; left:-20px; top:15px; -webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: width 0.3s ease;transition: width 0.3s ease;}
/*a:hover .arrow_wrap::before {width:35px; }*/
a:hover .photo .arrow_wrap img { transform:initial;}
.ul_wrap li a:hover .arrow_wrap img { width:22px; }
.ul_wrap li a .arrow_wrap::before { background-color:#fff; top:60%; left:-200%; }
.ul_wrap li a:hover .arrow_wrap::before { width:32px; }
/*a .arrow_wrap::before { display:none;}*/
@media screen and (min-width: 768px) {
  .ul_wrap {display: flex;flex-wrap: wrap; justify-content:flex-start; }
  .ul_wrap:has(> :nth-child(4):last-child) {justify-content: space-between;}
  .ul_wrap li { width:22%; margin-bottom:40px; }
  .ul_wrap li a .photo { height:280px; }
  .ul_wrap li a .arrow_wrap::before  { width: 32px; top:50%; left:-47px; background-color:#fff; display:inline-block; }
  .ul_wrap li a .arrow_wrap img { margin-top:0; }
}


.photo::after {content: "";position: absolute;inset: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);mix-blend-mode: multiply;pointer-events: none; }
.photo .arrow_wrap { width:20px; position:absolute; z-index:1; bottom:11vw; right:10px; display:flex; align-items: center; }
.ul_wrap li a .arrow_wrap { margin-right:5px; }
.photo strong {  position:absolute; z-index:1;  bottom:20px; left:10px; color:#fff; font-weight:bold; font-size:18px; letter-spacing:0.1em; line-height:1.2em; }
.photo strong small { width:100%; font-size:10px; display:inline-block; }
.arrow_wrap:before { background-color:#fff; }
@media screen and (min-width: 768px) {
  .photo .arrow_wrap  { width:auto; right:5%; bottom:45px;  }
  .photo strong small { font-size:16px; }
  
  }

h2 { font-size:28px; letter-spacing:0.03em; line-height:1.35em; text-align:center;  color:#137CD3; text-align: center;position: relative;padding-bottom:20px; margin-bottom:40px; }
h2::before {content: "";display: inline-block;height: 2px;width: 50px;background-color:#137CD3;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
  


@media screen and (min-width: 768px) {
  .photo .arrow_wrap { width:20px; position:absolute; z-index:1; bottom:52px; }
  #swiper  .photo .arrow_wrap { bottom:1.2vw; }
  
}

@media screen and (max-width: 768px) {
.ul_wrap li a .arrow_wrap::before { display:none; }
}