@charset "utf-8";
/*** CSS Document 文字コード：utf-8を使用
 *SAKU洛連携｜地域医療連携予約システム
 *京都第一赤十字病院
 *京都第二赤十字病院
 *京都府立医科大学附属病院
 *京都市立病院
 *京都大学医学部附属病院
***/

/* ========== 色変数 ========== */
:root{
  --color-main: #6c1c7c!important;
  --color-main-hover: #0581c6!important;
  --color-sub:  #e8c9fa!important;
  
  --color-link: #6c1c7c!important;
  --color-link-hover: #b16dd9!important;
  
  --color-text: #292069!important;
  --color-table-th: #f4e3f2!important;
}

/*--------------------------------------- 
  Googleフォント CDN
--------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap')!important;

.site-header .brand h1{
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 140%!important;
  position: absolute;
  left: 70px; 
  top: 0;
}

@media screen and (max-width: 400px) {
  .site-header .brand h1{
    font-size: 110%!important;
    position: absolute!important;
    left: 64px!important; 
    top: 7px!important;
  }
}

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

.footer-inner {
  justify-content: bottom!important;
  padding-bottom: 6px!important;
  /*opacity: 1;*/
}

@media screen and (max-width: 600px) {
  .footer-inner {
    justify-content: bottom!important;
    padding-bottom: 0!important;
  }
 /* .footer-inner {
    flex-direction: column!important;
    gap: 2px!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-link)!important;
  font-weight: 600!important;
  font-size: 1rem!important;
  display: block;
}

/* 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);
  }
}