@charset "utf-8";
/*** CSS Document 文字コード：utf-8を使用
 *水SUIねっと福井
 *福井県立病院
 *福井赤十字病院
***/

/* ========== 色変数 ========== */
:root{
  --color-main: #45b035;
  --color-main-hover: #149201;
  --color-sub:  #fd9214;
  --color-sub-hover: #fea843;
  
  --color-link: #179f03;
  --color-link-hover: #fd9214;
  
  --color-text: #292069;
  --color-table-th: #e8f8d1;
}

/* -------------------------------
   システム名称
   ------------------------------- */
.brand h1 {
  color: var(--color-sub)!important;
  font-size: 20px!important; 
}

/* -------------------------------
   ハンバーガーメニュー
   ------------------------------- */
.hamburger {
  background-color:  var(--color-sub)!important;
}

.hamburger:hover {
  background-color:  var(--color-sub-hover)!important;
}

/* -------------------------------
   病院カード　病院名称
   ------------------------------- */
.hp-links > h3 a {
  padding: 3px;
  color: var(--color-main)!important;
  font-weight: 600!important;
  font-size: 1rem!important;
  display: block;
}

.hp-link{
  color: var(--color-main);
}
.hp-link:hover{ 
  color: var(--color-link); 
  text-decoration: underline; 
}

/* PC/タブレット：3列の場合、カードを少し小さく */
@media (min-width: 641px){
  .hp-card{
    flex: 0 1 calc(((100% - 2 * var(--gap)) / 3) * 0.86);
    max-width: calc(((100% - 2 * var(--gap)) / 3) * 0.86);
  }
}

/* 2列時（タブレット）も同じく 90%に */
@media (max-width: 980px) and (min-width: 641px){
  .hp-card{
    flex: 0 1 calc(((100% - var(--gap)) / 2) * 0.90);
    max-width: calc(((100% - var(--gap)) / 2) * 0.90);
  }
}


/* -------------------------------
   背景
   ------------------------------- */
body{
  padding-bottom: 60px;
}

.footer-inner {
  justify-content: bottom;
  padding-bottom: 5px;
}

/* -------------------------------
   背景画像を追加
   ------------------------------- */
body{
  padding-bottom: 150px!important;
}
.site-footer {
  background-image:url("../img/bg.png")!important;
  background-position: center!important;
  background-size:auto!important;
  background-repeat: repeat-x!important;
  padding-top: 104px!important;
}

.footer-inner {
  justify-content: bottom!important;
  background-color: var(--color-table-th);
  /*opacity: 1;*/
}

@media screen and (max-width: 600px) {
  .footer-inner {
    justify-content: bottom!important;
    padding-bottom: 0!important;
  }
  .footer-logo {
    margin-bottom: 2px!important;
  }
  .footer-links {
    margin-top: 2px!important;
    font-size: 12px!important;
  }
}

/* フッターをスライドさせるためのアニメーション */
.site-footer {
  transition: transform 0.3s ease;
}

/* スマホ幅で隠すときのクラス */
@media screen and (max-width: 600px) {
  .site-footer--hidden {
    transform: translateY(110%); /* 画面の下に押し出す */
  }
}