﻿/* --------------------------------
    共通ブロック バナー用
-------------------------------- */

.c-uv-link-bnr{
  max-width: 800px;
  margin: 90px auto 0 auto;
}

.c-uv-link-bnr-img{margin-top: 20px;}
.c-uv-link-bnr h2{
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
}

.c-uv-link-bnr-btn{
  margin-top: 34px;
  text-align: center;  
}

.c-uv-link-bnr-btn a{
  width: 360px;
  height: 50px;
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 50px;
  border: solid 1px #000;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

@media screen and (min-width:741px) {

.c-uv-link-bnr-btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 100%;
  background-color: #000;
  z-index: -1;
  transform: skewX(-30deg) translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-uv-link-bnr-btn a:hover {color: #fff;}
.c-uv-link-bnr-btn a:hover::before {transform: skewX(-30deg) translateX(0);}

} 

@media screen and (max-width:740px) {
  .c-uv-link-bnr{
    max-width: 100%;
    margin: 45px auto 0 auto;
  }

  .c-uv-link-bnr-inner{padding: 0 15px;}
  .c-uv-link-bnr h2{
    font-size: clamp(1.8rem, calc(22 / 375 * 100vw), 2.2rem);
    line-height: 1.6;
  }
  .c-uv-link-bnr-btn{margin-top: 20px;}
  .c-uv-link-bnr-btn a{
    width: 280px;
    font-size: clamp(1.4rem, calc(16 / 375 * 100vw), 1.6rem);
    height: 45px;
    border-radius: 45px;
  }
}