@charset "utf-8";
/*** CSS Document 文字コード：utf-8を使用
 * 豊田・加茂地区 グループ連携サイト
 * /hospital/【グループ連携サイト】/css/orig.css

 *トヨタ記念病院
 *豊田地域医療センター
 *豊田構成病院
 *みよし市民病院
 *明豊病院
***/

/* ========== 色変数 ========== */
:root{
  --color-main: #01afa9;
  --color-main-hover: #00928d;
  --color-sub:  #8bcdea;
  
  --color-link: #fd7c0a;
  --color-link-hover: #00928d;
  
  --color-text: #333;
  --color-table-th: #c7e9e6;
}

/* -------------------------------
   ヘッダ
   ------------------------------- */
.site-header .brand h1{
  color: var(--color-main-hover);
}

/* -------------------------------
   背景
   ------------------------------- */
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%); /* 画面の下に押し出す */
  }
}

/* -------------------------------
   病院カード　病院名称
   ------------------------------- */
.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);
  }
}