@charset "UTF-8";

/********************
 * custom.css
 ********************/

.l-header-nav__bnr {
   margin-top: 0.8rem;
}

.l-header-nav__bnr a {
   transition: transform .3s, -webkit-transform .3s;
   display: block;
}

.l-header-nav__bnr a:hover {
   transform: scale(0.95);
}
.l-header-nav__bnr a img{
   width: 100%;
   height: auto;
}



.p-top-keyvisual__gbtk {
   position: fixed;
   top: 15rem;
   right: 0;
   width: 39.4rem;
   z-index: 100;
}

/* anyhover */
@media (any-hover: hover) {
   .p-top-keyvisual__gbtk {
      transition: transform .3s, -webkit-transform .3s;
   }

   .p-top-keyvisual__gbtk:hover {
      transform: translateX(0.3rem);
   }
}


.p-top-keyvisual__gbtk:hover {
   transform: translateX(0.3rem);
   transition: transform .3s, -webkit-transform .3s;
   
}

/* 3カラムの関連リンクのスタイル */
.l-related-link__list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2.5rem calc(3.2rem * 0.8);
}

.l-related-link__list li {
   width: auto;
}

.l-related-link__list li.l-related-link__list__gbtk a {
   background: url(../img/common/logo_gbtk_bg.jpg) no-repeat center center / cover;
}

/* .l-related-link__list li.l-related-link__list__gbtk a img {
   width: 100%;
   height: auto;
} */




/****************************
 * 画面幅が1700px以下のときのスタイル
 ****************************/

@media screen and (max-width: 1700px) {
   .p-top-keyvisual {
      padding-top: 65%;
   }
}


/****************************
 * 画面幅が768px以下のときのスタイル
 ****************************/

@media screen and (max-width: 768px) {
   .l-header-nav__bnr {
      text-align: center;
      margin-top: 2rem;
   }
   .l-header-nav__bnr a img {
      width: auto;
     
   }

   .p-top-keyvisual {
      padding-top: 0;
   }

   .p-top-keyvisual__gbtk {
      top: auto;
      bottom: 0;
      width: 100%;
   }
   
}


/****************************
 * 画面高さが610px以下のときのスタイル
 ****************************/

@media screen and (max-height: 610px) {
   .l-header-nav__list li a {
      padding: .8rem 1.2rem;
   }
}



/****************************
 * 画面幅が428px以下のときのスタイル
 ****************************/

@media screen and (max-width: 428px) {
   .l-related-link__list {
      grid-template-columns: 1fr;
   }

}