@charset "utf-8";
/*** CSS Document 文字コード：utf-8を使用
 *京つむぎネット
 *京都桂病院
 *京都三菱京都病院
***/

/* ========== 色変数 ========== */
:root{
  --color-main: #f8b62a;
  --color-main-hover: #f0a402;
  --color-sub:  #e9ce4a;
  
  --color-link: #f39801;
  --color-link-hover: #00a85b;
  
  --color-text: #333333;
  --color-table-th: #f9f2cd;
  --color-footer: #eee5b3;
}

/* -------------------------------
   背景
   ------------------------------- */
body{
  padding-bottom: 60px;
}
.site-footer {
  background-color: var(--color-footer);
}

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

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

/* -------------------------------
   2) ヘッダ / ハンバーガー
   ------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 60px;
  background: var(--color-main);
  /*border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow);*/
}

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

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

#contents {
    background-color: #fdfbef!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;

  background-image:
    url("../img/back.png"),
    url("../img/back.png")!important;

  background-position:
    left top,
    right top!important;

  background-repeat:
    repeat-y,
    repeat-y!important;

  /* 背景画像を縮小 */
  background-size:
    auto 65%,
    auto 65%;

  background-color: #fff;
}

/* タブレットでは、back.imgを縮小 */
@media screen and (max-width: 900px) {
  body {
  /* 背景画像を縮小 */
  background-size:
    auto 60%,
    auto 60%;
  }
}

/* スマホでは左右の背景画像を非表示 */
@media screen and (max-width: 767px) {
  body {
    background-image: none!important;
  }
}

/* ------------------------------
　　ログインページ　メッセージ
   ------------------------------- */
.message {
  margin: 0 auto;
  padding: 20px 20px 10px 20px;
  color: var( --color-text);
  text-align: center;
}

/* -------------------------------
   京つむぎネット ロゴマーク
   ------------------------------- */
.logo-mark {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 0px auto;
}

.logo-mark-index {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 0px auto; 
}

/* 病院一覧メイン枠の余白 */
.layout-wrap #contents-list {
  margin: 10px auto;
}

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