@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:        #fe8089!important;  /* メインカラー（帯/フッターライン・ボタン:submit） */
  --color-main-hover:  #e60012!important;  /* メイン ホバー（ボタン:submit） */
  --color-sub:         #a09f9d!important;  /* サブカラー（帯/ボタン:button） */
  --color-sub-hover:   #e60012!important;  /* サブカラー ホバー（ボタン:button） */
  
  --color-reserve-th:  #f4e8e9!important;  /* インデックスページ テーブルTH背景色 */
  
  --color-reset-button:      #a09f9d;  /* リセットボタン（基本はグレー） */
  --color-reset-button-hover:#888786;  /* リセットボタン ホバー */
  
  /* 追加 */
  --color-middle-gray:  #b2b1b1!important;  /* グレー　中間色 */
  --color-sub-dark:    #4d4d4c!important;  /* グレー　濃い */
  --color-g-menu01:    #fd9ca2!important;  /* ピンク */
  --logo-max: 280px;                       /* キャッシュクリア用（ロゴの“原寸フラッシュ”を防止）cache-clear.js */
}

/*--------------------------------------- 
 HTML 背景色
------------------------------------------*/
html {
  background-color: #f9f9f9;
}

#wrap {
  padding-left: 10px;
  padding-right: 10px;
}

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

/* ヘッダーロゴ画像　*/
  #header img.hospital-logo{
    display: block;
    width: clamp(270px, 32vw, 380px)!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: -10px!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 {
  border-color:  var(--color-main)!important;
}

.g-menu-01{
  border:1px solid var(--color-g-menu01)!important;
  border-bottom: 0!important;
	background-color: var(--color-g-menu01)!important;
  padding-top: 8px;
  padding-bottom: 9px;
}

/* ID発行ボタン・マイページボタンを表示（下側） */
.g-menu-02{
  border:1px solid var(--color-middle-gray)!important;
  border-top-color: var(--color-white)!important;
	background-color: var(--color-middle-gray)!important;
}

/* 帯下段ボタン */
.g-menu-02 > ul li a:link,
.g-menu-02 > ul li a:visited {
	color: var(--color-main-hover)!important;
}
.g-menu-02 > ul li a:hover,
.g-menu-02 > ul li a:active{
	color: var(--color-main)!important;
}

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

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

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

/*------------------------------------------------------------ 
  ログインエリア　左
-------------------------------------------------------------- */
#login-wrap {
  background-color: #f1f1f1!important;
}

/*------------------------------------------------------------ 
  テーブル　文字色
-------------------------------------------------------------- */
table.index_basic th,
table.index_basic td,
table.indexFree th,
table.indexFree td,
table.index5 th,
table.index5 td,
table.index6 th,
table.index6 td {
	color: var(--color-sub-dark)!important;
}

table.index5 a,
table.index6 a,
table.index_basic a,
table.indexFree a {
	color: var(--color-sub-dark)!important;
}

table.index5 th:hover,
table.index6 td:hover,
table.index5 th:hover,
table.index6 td:hover,
table.index_basic th:hover,
table.index_basic td:hover,
table.indexFree th:hover,
table.indexFree td:hover {
  background-color: var(--color-cool-gray)!important;
	color: var(--color-reset-button-hover)!important;
}

/*------------------------------------------------------------ 
  診療科目名称 <h4>
-------------------------------------------------------------- */
#main-contents #index-box > h4 {
  border-left: 5px solid var(--color-main-hover)!important;
}