@charset "utf-8";

/* ------------------- ヘッダー -------------------- */
/* .hd-user__item::after {
  color: var(--c-white);
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
} */
@media screen and (min-width: 768px){
	:root{
    --HEADER_NOTICE_HEIGHT: 0;
		--HEADER_UPR_HEIGHT: 65px;
	}
	body{
		padding-top: calc(var(--HEADER_NOTICE_HEIGHT) + var(--HEADER_UPR_HEIGHT));
	}
  .hd-container{
  margin-top: 2.8%;
}
}
@media screen and (max-width: 767px){
  :root{
    --HEADER_NOTICE_HEIGHT: 36px;
		--SP_HEADER_HEIGHT: 20px;
	}
  .hd-container{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .hd-memberBtn a{
    display: block;
    background-color: var(--c-green);
    color: var(--c-white) !important;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 16px;
  }
}
/* ------------------- メインビジュアル -------------------- */
.t-fv{
  position: relative;
  margin-bottom: var(--spc-100);
}
.t-fv .slick-dotted.slick-slider{
  margin-bottom: 0;
}
.t-fv_slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.t-fv_slider__item {
  overflow: hidden;
}
.t-fv_slider img{
  transition: 5s ease-in-out;
}
.t-fv_slider img.add-zoom {
  transform: scale(1.05);
}
@media (hover: hover){
  .slick-next:hover,
  .slick-prev:hover{
    background-color: var(--c-gray-300);
  }
  .t-fv_slider a:hover img{
    opacity: 1 !important;
  }
  .t-fv_slider a:hover{
    opacity: 1 !important;
  }
}
@media screen and (min-width: 768px){
  .t-fv_slider .slick-dots {
    bottom: -20px;
  }
}
@media screen and (max-width: 767px){
  .t-fv_slider__item {
    padding: 0;
    padding-bottom: 0;
  }
  .t-fv .slick-list {
    padding: 0 !important;
  }
  .t-fv_slider__item img{
    border: unset;
  }
  .t-fv_slider__item img{
    width: 100vw;
    height: 95vh;
    object-fit: cover;
    object-position: center;
  }
  .t-fv_slider .slick-dots {
    bottom: -20px;
  }
}
/* FVカーソル追従 */
@media screen and (min-width: 768px){
  .cursor-follow {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 0.8px solid var(--c-white);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.108);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease-out, opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    margin-top: 5px;
  }
  .cursor-follow div {
    width: 20px;
    height: 20px;
    /* --MASK: var(--icon) no-repeat center center / 100%;
    mask: var(--MASK);
    -webkit-mask: var(--MASK);
    background-color: var(--c-white); */
  }
  .t-fv_slider__item:hover ~ .cursor-follow,
  .t-fv_slider__item:hover .cursor-follow {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  /* .t-fv_slider__item a {
    cursor: none;
  } */
}

/* ------------------- お知らせ -------------------- */
.t-news{
  /* position: absolute; */
  top: 100%;
  left: 0;
  background-color: var(--c-black);
  width: 100%;
  margin-top: -10px;
}
.t-news__title{
  text-align: center;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--c-white);
}
.t-news__title a{
  color: var(--c-white);
  font-size: 12px;
}
@media screen and (min-width: 768px){
  .t-news{
    margin-bottom: var(--spc-120);
    padding-block: var(--spc-10);
  }
}
@media screen and (max-width: 767px){
  .t-news{
    margin-bottom: var(--spc-90);
    padding-block: 10px;
  }
}
/* top.css内 使う時は消してください */
.t-news{
  display: none;
}
/* ------------------- カテゴリ -------------------- */
.g-categoryBnr .g-btnContainer{
  display: none;
}
/* ------------------- ヘッダー -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}