@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 20px 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); 
}



/*--------------------------------------------------------
診療科目
--------------------------------------------------------*/
.category-sec{
  background-image: url("/matsushita/upload/backgroud-yellow.webp");
}
.category-title {
  color: #333;
  font-size: clamp(1.125rem, 0.444rem + 1.06vw, 1.2rem);
}

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


/*--------------------------------------------------------
  新着情報
--------------------------------------------------------*/
.news-background {
  background-color: #F6F6F6;
}
.sec-title-text{
  color: #4D4D4D;
}
.news-inner {
  width: 100%;
  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:#FFFFE6;   /* 背景色変更 */
}
/* オーバーレイ */
.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;
}

@media screen and (max-width: 768px) {
    .news-inner {
	    display: block;
    }
}


/*--------------------------------------------------------
  活動
--------------------------------------------------------*/
.activity-background {
  background-image: url("/matsushita/upload/activity-background-1.webp");
}



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


/*--------------------------------------------------------
  トップページ調整
--------------------------------------------------------*/

.text-note {
    width: 92%;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    padding: 0px 0 60px 0;
    margin-top: -40px;
}
.text-note p {
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.8;
    text-align: left;
}

.text-note ul.txtlist {
  list-style: none;
  margin: -1em 0 2em;
  font-size: var(--fs-body);
  list-style: none !important;
  padding: 0 !important;
}

.text-note ul.txtlist li {
  margin-bottom: 0.5em !important;
  padding-left: 1.5em;
  position: relative;
  line-height: 1.8;
}

.text-note ul.txtlist li::before {
    content: "";
    height: 16px;
    width: 16px;
    border: 5px solid var(--base2);
    border-radius: 20px;
    left: 0;
    top: 11px;
    position: absolute;
}

.text-note ul.txtlist li p,
.text-note ul.txtlist li span {
  margin: 0;
  display: inline;
}




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


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



/*--------------------------------------------------------
  手術件数
--------------------------------------------------------*/
.operation-content{
  width: 90%;
  max-width: 90%;
  display: block;
  margin: 30px auto;
}
.operation-inner{
  width:100%;
  display: block;
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .operation-content{
  width: 92%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px auto;
  padding-top: 20px;
  padding-bottom: 10px;
}
  .operation-inner{
  width: 31%;
  padding: 40px 10px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1); /* x方向, y方向, ぼかし, 色 */
  position: relative;
  overflow: hidden; /* 疑似要素がはみ出さないように */
  transition: all 1s ease;
}
}

.operation-title {
  display: block;
  width: 90%;
}
.operation-number{
	font-size: 50px;
}

/*--------------------------------------------------------
  トップページ調整
--------------------------------------------------------*/
.text-note ul.txtlist {
  margin: 1em 0;
}
.text-note ul.txtlist li::before {
    height: 14px;
    width: 14px;
    border: 4px solid var(--base2);
    top: 7px;
}



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