@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:        #18af6e!important;  /* メインカラー（帯・フッターライン・ボタン:submit） */
  --color-main-hover:  #52b98d!important;  /* メイン ホバー（ボタン:submit） */
  --color-sub:         #52b98d!important;  /* サブカラー（帯下段背景・更新ボタン:button） */
  --color-sub-hover:   #03a05c!important;  /* サブカラー ホバー（更新ボタン:button） */
  
  --color-reserve-th:  #f2ecf1!important;  /* インデックスページ テーブルTH背景色 */
  --logo-max: 320px;                       /* キャッシュクリア用（ロゴの“原寸フラッシュ”を防止）cache-clear.js */
}

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

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

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

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

/*@media (min-width: 900px){
  #header h3 {
    margin-top: -5px!important;
  }
}

  
@media (min-width: 1400px){
  #header h3 {
    margin-top: -15px!important;
  }
}

@media (min-width: 1550px){
  #header h3 {
    margin-top: -20px!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;
}

/* ----------------- 上部注意バー ------------------ */
.top-alert{
  position: fixed; 
  left:0; 
  right:0; 
  top:0; 
  z-index:9999;
  transform: translateY(-100%);
  transition: transform .28s ease;
  background:#fdfad8; 
  color:#333552;
  border-bottom:2px solid #ffb300;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  font:14px/1.6 "Noto Sans JP", system-ui, sans-serif;
}
.top-alert__inner{
  display:flex; align-items:center; gap:.8rem; justify-content:flex-start;
  padding:.7rem 1rem; max-width:1100px; margin:0 auto;
}
.top-alert__left{ display:inline-flex; align-items:center; gap:.6rem; }
.top-alert__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.8em; height:1.8em; border-radius:50%;
  background:#ff6f00; color:#fff; font-weight:700;
}
.top-alert__text{ margin:0; font-weight:500; font-size: 1rem;}
.top-alert.is-visible{ transform: translateY(0); }

/* 本文側：上余白はJSで付け外し。滑らかに戻す用にトランジション */
body{
  margin:0;
  transition: padding-top .28s ease;
  font-family:"Noto Sans JP", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  .top-alert{ transition:none; }
  body{ transition:none; }
}

@media (max-width:600px){
.top-alert__text{ font-size: 0.9rem;}
}

/*---------------------------------------------------
　カレンダーページ(診療科目選択）セレクトボックスト（ヘッダ帯下に記述）　
------------------------------------------------------ 
#select_box {
  display: block;
}*/