@charset "utf-8";
/*--------------------------------------------------------
ファーストビュー
--------------------------------------------------------*/
.top-fv-catch {
  position: absolute; 
  top: 36%;
  left: 4%;          
  color: var(--white);
  font-size: clamp(1.375rem, 0.392rem + 4.92vw, 5rem);/* w320=22px → w1500=80px */ 
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 0 20px; /* スマホで文字が端に寄りすぎないように */
  z-index: 10; 

    text-shadow:
    0 0 10px rgba(100, 100, 100, 0.8),
    0 0 8px rgba(100, 100, 100, 0.6),
    0 0 12px rgba(100, 100, 100, 0.4);
}
.top-fv-catch-sub{
  margin-top: 20px;
  font-size: clamp(0.875rem, 0.638rem + 1.19vw, 1.75rem);/* w320=14px → w1500=28px */
    line-height: 1.8em;
    padding-left: 10px;
    letter-spacing: 0.1em;
}

@media screen and (max-width:1020px) {
    .top-fv-catch {
        top: 17%;
        right: 6%;
        text-align: left;
        font-size: clamp(2rem, 0.392rem + 4.92vw, 5rem);
    }
   .top-fv-catch-sub {
        font-size: clamp(1rem, 0.638rem + 1.19vw, 1.75rem);
        padding-right: 18px;
    }
}



/*--------------------------------------------------------
  メインビジュアル
--------------------------------------------------------*/
/* アクティブ（現在のスライド） */
.hero-pagination .swiper-pagination-bullet-active {
  background: var(--base1); 
}


/*--------------------------------------------------------
緊急お知らせ
--------------------------------------------------------*/
.fv-alert-icon {
  width: 2%;
  width: 2%;
  background: url("/grandfamilia/upload/icon-attention.svg") no-repeat center/contain;
  margin-left: 1%;
}
.fv-alert-inner:hover .fv-alert-icon {
  background-image: url("/grandfamilia/upload/icon-attention-black.svg");
}


/*--------------------------------------------------------
  新着情報
--------------------------------------------------------*/
.news-background {
  background-color: #F6F6F6;
}
.sec-title-text{
  color: #4D4D4D;
}
.news-inner {
  width: 100%;
  display: block;
  padding: 20px 10px;
  position: relative;
  overflow: hidden; /* 疑似要素がはみ出さないように */
transition: background-color 1s ease; /* 背景色の変化を0.5秒 */
  border-bottom: solid 1px #d4d4d4;
  display: flex;
}
/* hover時：背景をlightblue、シャドウなし */
.news-inner:hover {
  background-color: #FFFFD9;   /* 背景色変更 */
}
/* オーバーレイ */
.news-inner::before,
.news-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 1s ease; /* 背景の変化を0.5秒 */
}
/* 初期状態（透明） */
.news-inner::before {
  background: rgba(0,0,0,0);
}
/* hover時：白のオーバーレイ */
.news-inner:hover::after {
  background: rgba(255,255,255,0.6); /* 白60%で明るく見える */
}

.news-date{
  background-color: var(--lightgray);  
  padding: 8px 12px;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  margin-left: 10px;
}
.news-date-large{
    font-size: 18px;
}
.news-item{
  font-weight: 500;
  font-size: clamp(0.875rem, 0.535rem + 0.53vw, 1rem); /* w768=14px -> w1500=16px */
   padding-left: 14px;
   line-height: 1.6em;
  margin-top: 0.3em;
}





/*--------------------------------------------------------
  活動
--------------------------------------------------------*/
.activity-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;             
  height: 100%;
  border-radius: 30px 0 0 30px; /* 角丸（上左, 上右, 下右, 下左） */
  z-index: -1;              /* コンテンツの後ろへ */
  background: #F6F6F6;
}


/*--------------------------------------------------------
  ピックアップ
--------------------------------------------------------*/
/* 自作のSVGを背景に */
.pickup-prev {
  background: url('../upload/icon-arrow-left.svg') no-repeat center/contain;
}
.pickup-next {
  background: url('../upload/icon-arrow-right.svg') no-repeat center/contain;
}
/* アクティブ（現在のスライド） */
.pickup-pagination .swiper-pagination-bullet-active {
  background: var(--base1); /* ←ブランドカラーなど好きな色 */
}




/************************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************
     スマホ用の設定　ここから
************************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************/
@media screen and (max-width:1020px) {
/*--------------------------------------------------------
緊急お知らせ
--------------------------------------------------------*/
.fv-alert-inner:hover .fv-alert-icon {
  background-image: url("/grandfamilia/upload/icon-attention-black.svg");
}
.fv-alert-date::after {
	    background: url(/grandfamilia/upload/icon-attention.svg) center center no-repeat;
        background-size: contain;
  
}
.fv-alert-inner:hover .fv-alert-date::after {
  background-image: url("/grandfamilia/upload/icon-attention-black.svg");
}


/*--------------------------------------------------------
診療科目
--------------------------------------------------------*/
.category-inner::after {
	background-image: url(../upload/icon-link.svg);
}



/*--------------------------------------------------------
  新着情報
--------------------------------------------------------*/
.news-inner {
  display: block;
}


} /**** END media screen *****/