@charset "utf-8";
/* CSS Document 文字コード：utf-8を使用
総合上飯田第一病院 */

/*------------------------------------------------------------- 
  メインカラー・サブカラー
---------------------------------------------------------------- */
:root {
  --color-gray-dark:   #333333!important;  /* テキスト色 */
  --color-blue-dark:   #292069!important;  /* リンクカラー（濃紺） */
  --color-link-hover:  #ff6633!important;  /* リンクカラー（オレンジ） */
  
  --color-main:        #16b3be!important;  /* メインカラー（帯・フッターライン・ボタン:submit） */
  --color-main-hover:  #038790!important;  /* メイン ホバー（ボタン:submit） */
  --color-sub:         #b7ede9!important;  /* サブカラー（帯下段背景・更新ボタン:button） */
  --color-sub-hover:   #98e2dc!important;  /* サブカラー ホバー（更新ボタン:button） */
  
  --color-reserve-th:  #d5f2f0!important;  /* インデックスページ テーブルTH背景色 */
  --color-reserve-th-bui:  #ffdfdf!important;  /* インデックスページ テーブルTH部位別背景色 */
}

/*------------------------------------------------------
　ヘッダ
    施設名称（テキスト）を非表示
    ヘッダーロゴ画像
    システム名称<h3>　
    ヘッダレイアウト
-------------------------------------------------------- */
#header h2:first-of-type{
    display: none!important;
}

/* ヘッダーロゴ画像　*/
  #header img.hospital-logo{
    display: block;
    width: clamp(220px, 26vw, 260px)!important;
  }

/* ヘッダー　システム名称<h3>　*/
  #header h3 {
    color: var(--color-sub-dark)!important;
    font-weight: 600!important;
  }

/* ヘッダレイアウト　*/
@media (min-width: 768px){
  #header{
    padding: 6px!important;
    height: 95px!important;
  }
  #header h3 {
    margin-top: 0px!important;
  }
}

@media (max-width: 767px){
  #header{
    padding: 6px!important;
    height: 95px!important;
  }
  #header h3 {
    margin-top: 0px!important;
  }
}

/*--------------------------------------- 
 HTML ログインエリア　背景色
------------------------------------------*/
html {
  background-color: #ffffff!important;
}

/* ログインエリア左 */
#login-wrap {
  background-color: var(--color-cool-gray)!important; /* --color-gray-light */
}

/*--------------------------------------- 
 フッター　
------------------------------------------*/
#footer .footer-text h4 a {
  color: var(--color-main)!important; /* --color-gray-dark / --color-blue-dark */
}

/*------------------------------------------------------------ 
  帯
-------------------------------------------------------------- */
/* 帯　上段 */
.g-menu-01{
	background-color: var(--color-main)!important; 
}

/* 帯　下段 */
.g-menu-02{
	background-color: var(--color-sub)!important; 
}

/* 帯下段ボタン(HOME,マイページ）*/
.g-menu-02 > ul li {
  background-color: var(--color-white)!important;
}
.g-menu-02 > ul li a:link,
.g-menu-02 > ul li a:visited {
	color: var(--color-main)!important;
  background-color: var(--color-white)!important;
}
.g-menu-02 > ul li a:hover,
.g-menu-02 > ul li a:active{
	color: var(--color-main-hover)!important;
}

/*--------------------------------------- 
 カレンダーページ　予約時間選択ボタン
------------------------------------------*/
#tt-box01 td > input[type="button"]{
  background: var(--color-main)!important;
}
#tt-box01 td > input[type="button"].submit:hover,
#tt-box01 td > input[type="button"].submit:focus {
  background: var(--color-main-hover)!important;
}

/*------------------------------------------------------------ 
  ログインページ　テーブル(TH）
-------------------------------------------------------------- */
.login table th{
  background-color: var(--color-reserve-th)!important;
}

/*------------------------------------------------------------ 
  indexページ　セレクト(診療科目選択) 
-------------------------------------------------------------- */
/*** デフォルト列数・高さ ***/
/* 通常ボタン */
ul.index-topbtn > li{width:calc(25% - 8px)!important;}

/* ボタンの縦サイズ */
ul.index-topbtn > li:not(.width-list) > a{ height:50px!important; }

/* プルダウン付きボタン */
ul.index-topbtn > li.width-list{width:calc(50% - 8px)!important;}

/* ---------------------- レスポンシブ ---------------------- */
@media (max-width:1024px){
  ul.index-topbtn > li{ width:calc(33.333% - 8px)!important; }
}
@media (max-width:767px){
  ul.index-topbtn > li{ width:calc(50% - 8px)!important; }
  ul.index-topbtn > li.width-list{ width:calc(100% - 8px)!important; }
}
@media (max-width:479px){
  ul.index-topbtn > li{ width:calc(100% - 8px)!important; }
}

/* ---------------------- リスト ホーバー色 -------------------- */
ul.index-topbtn li:hover{
  background:var(--color-reserve-th)!important;
}