@charset "UTF-8";
/* CSS Document
 * 文字コード：utf-8を使用
 * 
 * 2025/10/29 19:46 更新
 * 2025/9/2 更新(暫定　※ログインページフォームの幅を変更中 右エリア表示開始時にを戻す)
 *
 * 初期設定（Googleフォント CDN）(CSS 初期化)(メインカラー定義/:root)★
 * テーブル,ラジオボタン,チェックボックス,テキストフォーム,セレクトボックス,inputボタン(.submit)<button>
 * 基本テキスト
 * レイアウト
 * メインコンテンツ(#main-contens)
 * ヘッダ　ログアウト#header<h1>，ロゴ画像#header<h2>，システム名称#header<h3>
 * ヘッダの縦サイズを変更した場合、プルダウン（診療科目選択）表示位置
 * ヘッダ下　帯(#g-menu/.g-menu-01/.g-menu-02) ★
 * 現在時間 #today-time
 * カレンダーページ(診療科目選択)(#select_box #chgKamoku)
 * フッター (#footer<h1>,#footer<h4>,#footer<p>,#建物写真を背景配置)
 * 予約フォーム（#reserved-box,.myp-tb,.letter-box #紹介状を作成するリンク）
 * indexページ ページ先頭の科目選択ボタン(.index-topbtn),プルダウン(#listKamoku)★
 * indexページ　グループページへ移動エリア（.submit-box)
 * 緊急メンテナンス用タグ
 * ページトップ(.go-top)
 * カレンダーページ(予約日/.timetable-tb)(予約時間/.sub-calendar-tb)
 * マイページ(テーブル/.mypage-tb)(上部メニューボタン/.menu)
 * テーブルレスポンシブ(.table-responsive)
 * 各種テーブル(.index_basic, .index5, .index6, .indexFree)
 * 各種テキストボックス・各種テキスト(#main-notice, #main-notice2, .message-box /h3, h4, h6, p, li, dt, dd )★
 * 各種ボタン(ボタン大（a.button）, ボタン小（.bot-s）, ボタン中（.btn-m)）★
 * 各種ボタンカラー(ボタン大、ボタン大（サブ）、ボタンリセット)★
 * ログインページ（#login-wrap)（.login)（#login-text1)（#login-text2)（#login-text3)（#login-text3)（.manual)
 * コメントボックス（ログインページ以外）
 * 二要素認証ページ
 * テキスト指定（インライン指定）★
 * カラー指定 （インライン指定）★
 * WIDTH（インライン指定）★
 * マージン・パディング（インライン指定）★
*/

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

/*--------------------------------------- 
  CSS 初期化
--------------------------------------- */
html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	font-style:normal;
	font-weight: 400;
	font-size: 100%;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, serif!important;
}

html {
  scroll-behavior: smooth;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.displayblock {
  display: block;
}

/* ===============================
    旧 clearfix の影響を無効化
   =============================== */
.clearfix::before,
.clearfix::after { content:none !important; display:none !important; }
.clearfix { min-height:0 !important; }

/* ===============================
    新 clearfix
   =============================== */
.clearfix { display: flow-root; }

/*--------------------------------------- 
 メインカラー定義
--------------------------------------- */
:root {

  /* ベースカラー */
  --color-white:             #ffffff;  /* 白 */
  --color-gray-light:        #f5f5f5;  /* 淡い背景色（奇数） */
  --color-cool-gray:         #f3f5f9;  /* 淡いクールグレー（帯のボタン背景） */
  --color-gray:              #999999;  /* 主にテーブルの枠線 */

  /* ベーステキストカラー */
  --color-gray-dark:         #333333;  /* テキスト色 */
  --color-blue-dark:         #292069;  /* リンクカラー（濃紺） */
  --color-link:#ff5533;                /* リンクカラー（オレンジ） */
  --color-link-hover:        #fc834d;  /* リンクカラー（オレンジ やや明るい） */

  /* メインカラー・サブカラー */
  --color-main:              #1fa3e0;  /* メインカラー（帯・フッターライン・ボタン:submit） */
  --color-main-hover:        #0298de;  /* メイン ホバー（ボタン:submit） */
  --color-sub:               #51bffc;  /* サブカラー（帯下段背景・更新ボタン:button） */
  --color-sub-hover:         #4bb5f0;  /* サブカラー ホバー（更新ボタン:button） */
  
  /* テーブルカラー */
  --color-blue-light-l:      #e0f3fe;  /* メインテーブルTH背景色（明るいブルー） */
  --color-blue-light:        #cae9fe;  /* テーブルTH背景色（ミディアムな明るいブルー） */
  --color-reserve-th:        #cae9fe;  /* インデックスページ テーブルTH背景色 */
  --color-reserve-th-bui:    #ffdfdf;  /* インデックスページ テーブルTH部位別背景色 */

  /* ボタンリセット / ログアウトボタン */
  --color-reset-button:      #8b9fa9;  /* リセットボタン（基本はグレー） */
  --color-reset-button-hover:#8c9599;  /* リセットボタン ホバー */

  /* レッド・オレンジ・ピンク・イエロー系 */
  --color-red:               #eb0303;  /* 警告カラー（赤） */
  --color-yellow:            #fdffd2;  /* 注意カラー（イエロー枠） */
  --color-pink-warm:         #ffdfdf;  /* ホバー（予約日選択テーブル） */
  --color-pink-light:        #fbe6f1;  /* 土日（予約日選択テーブル） */
  --color-pink:              #fe8d8d;  /* 現在日（予約日選択テーブル） */
  --color-pink-dark:         #fd5e5e;  /* インデックスページ(.woman) */
  --color-blue-warm:#bbdae8;
  --color-blue:#5eb2d9;
 /*  --color-alert-border:      #fd5e5e;  メッセージボックス(.message-box)ボーダー色 */

  /* チェックボックス・リンクホバー */
  --color-blue-hover-link:   #0f69ff;  /* チェックボックス選択時などの青 */
}

/*--------------------------------------- 
 テーブル　※basicを上書き
------------------------------------------*/
table {
  margin:0 auto;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: var(--color-gray);
	border-bottom-color: var(--color-gray);
	line-height: 1.4;
  background-color: var(--color-white);
  -webkit-overflow-scrolling: touch;
}
table th {
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: var(--color-gray);
	border-left-color: var(--color-gray);
	padding: 0.6em;
	padding-left: 1em;
  padding-right: 1em;
	vertical-align: middle;
	line-height: 1.4;
  background-color: var(--color-blue-light-l);
}
table td {
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: var(--color-gray);
	border-left-color: var(--color-gray);
	padding: 0.6em;
	padding-left: 1em;
  padding-right: 1em;
	vertical-align: middle;
	line-height: 1.4;
	color: var(--color-gray-dark);
}
table td a:link,
table td a:valid,
table td a:visited,
table td a:active,
table td a:hover,
table td:link,
table td:valid,
table td:visited,
table td:active,
table td:hover {
  text-decoration: none!important;
}

/*--------------------------------------- 
　ラジオボタン
------------------------------------------*/
input[type="radio"],input[type="checkbox"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="radio"] {
	width: 20px;
	height: 20px;
	border-radius: 100px;
	position: relative;
	vertical-align: sub;
	margin-right: 3px;
  margin-left: 15px;
}
input[type="radio"]::before, input[type="radio"]::after{
	content: "";
	display: block;
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}
input[type="radio"]::before {
	background-color: #fff;
	border: 1px solid var(--color-gray);
	height: 20px;
	width: 20px;
	left: 0px;
}
input[type="radio"]::after {
	background-color: #3f7afc;
	opacity: 0;
	height: 14px; /* 中点の高さ */
	width: 14px; /* 中点の横幅 */
	left: 3px; /* 中点の位置 */
}
input[type="radio"]:checked::after {
	opacity: 1;
}

/*--------------------------------------- 
 チェックボックス
------------------------------------------*/
input[type="checkbox"]{
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 15px;
    padding-right: 5px;
    padding-top: 6px;
}

/* ラベルの左に表示させる正方形のボックス */
input[type="checkbox"]::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -12px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color: var(--color-gray);
    background-color: #FFF;
    padding-bottom: 10px;
}
/* チェックが入った時のレ点 */
input[type="checkbox"]:checked::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 16px;
    height: 9px;
    margin-top: -8px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color:  var(--color-blue-hover-link);
}

/*--------------------------------------- 
 テキストフォーム
------------------------------------------*/
input[type=text],input[type=password],textarea,input[type=tel],input[type=number],input[type=email]{
	border-width:1px;
	border-style:solid;
	border-radius: 4px;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	padding: 0.6em 0.8em;
	text-align: left;
	background-color: var(--color-white);
	border-color: var(--color-gray);
  margin-top: 3px;
  margin-bottom: 3px;
  width: 100%!important;
}
input[type=text]:focus,input[type=password]:focus,textarea:focus,input[type=tel]:focus,input[type=number]:focus,input[type=email]:focus,
input[type=text]:hover,input[type=password]:hover,textarea:hover,input[type=tel]:hover,input[type=number]:hover,input[type=email]:hover {
	box-shadow: none;
	outline: none;
	background-color: var(--color-yellow);
}

/*--------------------------------------- 
 セレクトボックス
------------------------------------------*/
select,option {
	border-width:1.3px;
	border-style:solid;
	font-family: inherit;
	font-size: 1em;
	padding: 0.2em;
	text-align: left;
  border-radius: 4px;
	background-color: var(--color-gray-light-l);
	border-color: var(--color-gray);

}
select:focus,select:hover,option:focus,option:hover {
	box-shadow: none;
	outline: none;
  background-color: var(--color-blue-light-l);
}

/* placeholder */
input::-webkit-input-placeholder {color: var(--color-gray); text-align: left;}
input:-moz-placeholder {color: var(--color-gray); text-align: left;}
input::-moz-placeholder { color: var(--color-gray); text-align: left;}
input:-ms-input-placeholder {color: var(--color-gray); text-align: left;}


/*------------------------------------------- 
 inputボタン(submit)(button)(submit), button
--------------------------------------------- */
/* inputボタン　basicを上書き */
.submit,.reset {
	text-align: center;
	border-radius: 3px;
	box-shadow: none;
	padding-top: 0.1em;
	padding-right: 1em;
	padding-bottom: 0.1em;
	padding-left: 1em;
	color: var(--color-gray-dark);
	border: 1px solid var(--color-gray);
	margin-right: 0.2em;
	margin-left: 0.2em;
}

input[type="button"],input[type="submit"],input[type="reset"],button,.button,a.button {
  appearance: none;
  text-align: center;
  cursor: pointer;
  min-width: 140px;
}

/*--------------------------------------- 
 基本テキスト
------------------------------------------*/
a:link,a:visited {
  color: var(--color-link);
/*	color: var(--color-blue-dark); */
	text-decoration: underline;
}
a:hover,a:active {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* 見出し共通 */
h1, h2, h3, h4, h5, h6 { line-height: 1.5; }

h3{
  text-align: left;
  font-size: 1.25rem;
  margin: .5em 0 .5em auto;
  padding: 0;
  font-weight: 600;
  line-height: 1.5;
}

h4{
  text-align: left;
  font-size: 1.125rem;
  margin: .5em 0 .5em auto;
  padding: 0;
  font-weight: 600;
  line-height: 1.5;
}

h4 span{
  display: inline-block;
  font-size: .94em;
  line-height: 1.2;
  margin-left: .6em;
  padding-top: .2em;
}

h5{
  text-align: left;
  font-size: 1rem;
  margin: .5em 0 .25em auto;
  font-weight: 600;
  line-height: 1.4;
}

h6{
  text-align: left;
  font-size: .875rem;
  margin: .5em 0 .25em auto;
  font-weight: 600;
  line-height: 1.4;
}

p{
	line-height: 1.5;
	margin: .5em 0 .5em 0;
  text-align: left;
}

strong {
	line-height: 1.6;
  font-weight: 600;
}

dl {
	margin: .5em 0 .5em 0;
}

dt {
  text-align: left;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.4;
}

dd {
  text-align: left;
	font-size: 94%!important;
  margin-bottom: 10px;
  line-height: 1.4;
}

ul {
  margin: 0.5em 0;           /* 上下に余白 */
  padding-left: 1.2em;       /* 左余白（マーカー分） */
  list-style-position: outside; /* マーカーを外側に配置 */
}

ul li {
  margin: 0;                 /* 左余白リセット */
  line-height: 1.6;          /* 行間 */
  font-size: 96%;            /* 全体の文字サイズ */
  text-align: left;
}

ul li::marker {
  color: var(--color-sub);   /* ドットの色 */
  font-size: 1.1em;          /* ドットを少し大きめ */
}

ol {
  list-style-type: decimal;
  padding-left: 1.1em;
	margin: .5em 0 .5em 0;
}

ol li {
  line-height: 1.6;
  text-align: left;
	font-size: 96%;
}

small{
	font-size: 86%;
	font-weight: normal;
	text-align: left;
	padding-top: 0.5em;
	line-height: 1.3;
}

/*--------------------------------------- 
 レイアウト
------------------------------------------*/
body,html {
  height: 100%;
  margin: 0;
	padding: 0;
	width: 100%;
  color: var(--color-gray-dark); 
	font-optical-sizing: auto;
}

html{
  scroll-padding-top: var(--anchor-offset);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

#wrap{
  position: relative;
  margin: 0 auto;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  background-color: var(--color-white);
  max-width: 1000px;
  flex: 1 0 auto;
  min-height:100vh;
  display:flex !important;
  flex-direction:column !important;
}
@supports (min-height:100dvh){
  #wrap{ min-height:100dvh; }
}
#wrap.clearfix{
  display:flex !important;
  flex-direction:column !important;
  overflow:visible !important;
}

@media all and (max-width: 767px) {
#wrap{
	width:96%;
}
}
@media all and (min-width: 768px){
#wrap{
	width:96%;
}
}
@media all and (min-width: 992px) {
#wrap{
	width:80%;
}
}
@media all and (min-width: 1301px) {
#wrap{
	width:70%;
}
}
@media all and (min-width: 1501px) {
#wrap{
	width:60%;
}
}

/*--------------------------------------- 
 メインコンテンツ #main-contens
------------------------------------------*/
#main-contents {
  margin: 0 auto 0 auto;
  position: relative;
  padding-top: 1rem;
  padding-bottom: 30px;
  width: 97%;
  min-height: 0 !important;   /* 不要な高さを持たせない */
}

#index-box {
  padding: 0;
  margin: 0;
  min-height: 0 !important;
}

/*--------------------------------------- 
 ヘッダ
　ログアウト   h1
　施設名称     h2:first-of-type
　ロゴ画像     img.hospital-logo
　システム名称　h3
------------------------------------------*/
/* === PC用（768px以上） === */
@media (min-width: 768px){
  #header{
    display: grid;
    grid-template-columns: 1fr auto;   /* 左:施設名, 右:ログアウト */
    grid-template-rows: auto auto;     /* 1行目:h2+h1, 2行目:h3 */
    grid-template-areas:
      "title logout"
      "system system";
    align-items: center;
    gap: 6px 12px;
    padding: 8px;
    background-color: var(--color-white);
    height: 95px;
  }

  #header h2:first-of-type{
    grid-area: title;
    position: static;
    margin: 0;
    font-weight: 700;
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.2;
    text-align: left;
    display: block;
  }
  
  #header img.hospital-logo{
    display: none;
    width: clamp(260px, 32vw, 320px);
  }

  /* ログアウトは右上に絶対配置 */
  #header > h1{
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
    z-index: 99;
  }
  
  #header > h1 img {
    display: none;
  }

  #header > h3{
    grid-area: system;
    position: static;
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: var(--color-main);
  }
}

/* === モバイル用（850px以下） === */
@media (max-width: 767px){
  #header{
    display: grid;
    grid-template-columns: 1fr;          /* 縦並び */
    grid-template-rows: auto auto;       /* h2, h3 */
    grid-template-areas:
      "title"
      "system";
    align-items: center;
    gap: 4px;
    height: auto;
    padding: 8px;
    background-color: var(--color-white);
    position: relative;                  /* ← h1絶対配置の基準にする */
  }

  /* ログアウトは右上に絶対配置 */
  #header > h1{
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
    z-index: 99;
  }
    
  #header > h1 img {
    display: none;
  }

  #header h2:first-of-type{
    grid-area: title;
    margin: 0;
    font-size: clamp(20px, 5.2vw, 26px);
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    display: block;
  }
  
  #header img.hospital-logo{
    display: none;
    margin-bottom: 5px;
    width: clamp(220px, 28vw, 280px);
  }

  #header > h3{
    grid-area: system;
    margin: 0;
    font-size: 1.05rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-main);
  }
}

/* === さらに小さい端末（550px以下） === */
@media (max-width: 550px){
  #header h2:first-of-type{ font-size: clamp(18px, 5vw, 22px); }
  #header > h3{ font-size: 1.1rem; }
}

/* ログアウトボタンだけ表示 */
#header h1 > a.btn_logout {
  display: block;
  text-decoration: none;
}

/* それ以外の h1 内の要素やテキストは非表示 */
#header h1 {
  font-size: 0;
  color: transparent;
}

/*---------------------------------------------------
　カレンダーページ(診療科目選択)レイアウト（ヘッダ内に記述している）　
------------------------------------------------------ */
#select_box {
  display: none;
	width: auto;
	padding: 0;
  z-index: 99999;
}

/* ヘッダの縦サイズを変更した場合のプルダウン（診療科目選択）表示位置 */
#select_box {
    position: absolute;
    top:151px;
    left:8px;
}
/*@media all and (max-width: 767px) {
#select_box {
    position: absolute;
    top:203px;
    left:8px;
}
}*/

#select_box option {
    display: block;
}

#select_box #chgKamoku {
    background-color: var(--color-cool-gray);
    color: var(--color-gray-dark)!important;
    border-color: var(--color-gray);
    font-weight: normal;
    padding-left: 6px;
    padding-right: 6px;
}
#select_box #chgKamoku option {
    background: var(--color-white)!important;
    color: var(--color-gray-dark)!important;
}

/*--------------------------------------- 
 帯（ヘッダ下）PC 背景色変更 
------------------------------------------*/
#g-menu {
	margin: 0;
  padding: 0;
  box-sizing:border-box;
  border-radius: 4px;
  color: var(--color-white);
}

/* 紹介元クリニック名称（左側） */
.g-menu-01{
	float: left;
	width:50%;
  text-align: left;
	color: #FFF;
	padding: 0.5em;
	margin: 0;
	font-weight: 500;
}

/* ID発行ボタン・マイページボタンを表示（右側） */
.g-menu-02{
	float: right;
	width: 50%;
	margin: 0;
	text-align: right;
	font-size: 96%;
	padding: 0.5em;
  overflow: hidden;
}

/*--------------------------------------- 
 帯（ヘッダ下）スマフォ 背景色変更 
------------------------------------------*/
/*　紹介元クリニック名称（上側） */
.g-menu-01{
	float: none;
	width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
	background-color:  var(--color-main);
}

/* ID発行ボタン・マイページボタンを表示（下側） */
.g-menu-02{
	float: none;
	width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
	background-color: var(--color-sub); 
}

/*--------------------------------------- 
　帯のボタン 色変更 
------------------------------------------*/
.g-menu-02 > ul{
  margin:0;
}
.g-menu-02 > ul li{
  float: right;
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	white-space: nowrap;
	padding: 5px 6px;
	font-size: 14px;
	line-height: 1;
	border-radius: 4px;
	user-select: none;
  min-width: 80px;
  margin: 0;
  margin-left: 5px;
  /*border: 1px solid var(--color-gray);*/
  background-color: var(--color-cool-gray);
}
.g-menu-02 > ul li > a{
	display: block;
	width: auto;
	font-weight: 600;
}
.g-menu-02 > ul li > a:link,
.g-menu-02 > ul li > a:visited{
	color: var(--color-main);
	text-decoration: none;
}

.g-menu-02 ul li > a:hover,
.g-menu-02 > ul li > a:active{
	color: var(--color-main-hover);
	text-decoration: none;
}


/*--------------------------------------- 
　現在時間
------------------------------------------*/
#main-contents #today-time {
  position: absolute;
  bottom:8px;
  right:0;
	width: 100%;
	margin: 0;
	font-size: 90%;
	font-style: italic;
	color: var(--color-gray);
	text-align: right;
	line-height: 1;
}

/*--------------------------------------- 
 フッター　線の色　背景色
------------------------------------------*/
#footer {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  padding: 15px 0 15px;
  border-top: 3px solid var(--color-main);
  box-sizing: border-box;
  margin-top:auto; 
  display:flow-root;
  clear:both;
}

/* フッター直下の最初の子の上マージンを無効化（赤線に密着させる） */
#footer > *:first-child { margin-top: 0; }

/* 内側のラッパー（最大幅を制限して中央配置） */
/* 共通（デフォルトは gap:0） */
#footer .footer-inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  max-width: 1000px;
  width: 96.5%;
  text-align: left;
}

/* 建物写真 */
#footer .footer-photo {
  max-width: 160px;
  height: auto;
  margin-right: 5px;
}

/* テキスト部分 */
#footer .footer-text {
  max-width: 700px;
}

#footer .footer-text h4 {
  margin: 0 0 5px auto;
}
#footer .footer-text h4 a {
  font-size: 90%;
  font-weight: 500;
  color: var(--color-main);
}

#footer .footer-text h6 {
	color: var(--color-base);
  text-align: left;
  font-weight: normal;
}

#footer .footer-text p {
  font-size: 84%;
  font-style: italic;
  margin: 0;
  line-height: 1.6;
}

#footer a:link,
#footer a:visited {
  text-decoration: none;
  color: var(--color-blue-dark);
}

#footer a:hover,
#footer a:active {
  text-decoration: underline;
}

/* スマホ対応 */
@media (max-width: 767px) {
  #footer .footer-inner {
    flex-direction: column;
    align-items: left; 
    text-align: left;
  }

  #footer .footer-photo {
    min-width: 120px;
    max-width: 25%;
    margin-bottom: 5px;
    margin-right: 0;
  }

  #footer .footer-text {
    max-width: 100%;
  }
}

/* e連携ロゴマーク */
#footer img.erekei-logo {
  position: absolute;
  top: 10px;
  right: 0;
  margin: 0;
  width: 70px;
  height: auto;
  z-index: 9; 
} 

/*--------------------------------------- 
 予約フォーム(#reserved-box)　※basicを上書き
------------------------------------------*/
#reserved-box {
	clear: both;
	width: 100%;
	text-align: left;
	font-size: 100%;
	margin: 0em;
	padding-top: 0.6em;
	padding-right: 0px;
	padding-bottom: 0.6em;
	padding-left: 0px;
	box-sizing: border-box;    	
}

#reserved-box p {
	clear: both;
	text-align: left;
	margin: 0em;
	line-height: 1.6;
	padding-top: 0.6em;
	padding-right: 0em;
	padding-bottom: 0.6em;
	padding-left: 0em;
	font-size: 96%;
}

#reserved-box ul{
	width: 100%;
	padding: 0px;
	margin-top: 0.5em;
	margin-right: 0px;
	margin-bottom: 0.5px;
	margin-left: 0px;
}

#reserved-box ul li{
  float: left;
  width: 24%;
  margin-left: 0.3%;
  text-align: center;
  border: 1px solid var(--color-gray);
  margin-bottom: 0.7em;
  margin-top: 0px;
  margin-right: 0.3%;
  border-radius: 2px;
  box-shadow: var(--color-gray) 1px 1px 1px;
  background: linear-gradient(#fff, #d7ddd4);
}

#reserved-box ul li a{
	display: block;
	padding-top: 0.6em;
	padding-bottom: 0.3em;
	font-size: 0.9em;
	font-weight: normal;
	letter-spacing: 0.1em;
}

#reserved-box ul li a span{
	color: var(--color-link-hover);
}

#reserved-box ul li a:link,
#reserved-box ul li a:visited{
	color: var(--color-blue-dark);
	text-decoration: none;
}

#reserved-box ul li a:hover,
#reserved-box ul li a:active{
	color: var(--color-blue-hover-link);
	text-decoration: none;
}

/*--------------------------------------- 
  予約フォーム　テーブル（myp-tb）
------------------------------------------*/
table.myp-tb{
	line-height: 1.1;
	background-color: var(--color-white);
	padding: 0px;
	width: 100%;
}
table.myp-tb th {
	background-color: var(--color-blue-light-l);
	text-align: left;
	padding: 0.8em;
}
table.myp-tb td{
	margin: 0px;
	text-align: left;
	background-color: var(--color-white);
	padding: 0.8em;
}
table.myp-tb tr:nth-child(odd) td {
	background-color: var(--color-gray-light);
}
table.myp-tb td > input[type="button"]{
  padding: 6px 8px;
  margin-left: -7px;
	font-size: 12px;
  min-width: 100px;
  border: none;
}

/* 2個目以降の .myp-tb の一番上の行の上線を消す */
.myp-tb + .myp-tb { border-top: none; }
.myp-tb + .myp-tb > thead > tr:first-child > *,
.myp-tb + .myp-tb > tbody > tr:first-child > *,
.myp-tb + .myp-tb > tr:first-child > * {
  border-top: none !important;
}

@media all and (max-width: 767px) {
table.myp-tb {
	margin:0 auto;
  border-right: none;
  border-left:none;
}
table.myp-tb thead {
	display: none;
}
table.myp-tb tr {
	width: 100%; 
	border-width:0;
	display: block;
  height: auto;
}
table.myp-tb td,
table.myp-tb th {
	width: 100%; 
	display: block;
	border-top:none;
  height: auto;
}
table.myp-tb tr:nth-child(odd) td {
	background: var(--color-white);
}
table.myp-tb + table.myp-tb {
  margin-top: -1px; 
  border-top: none !important;
} 
}

@media (max-width: 767px) {
  .myp-tb + .myp-tb { 
    border-top: 0 !important; 
    border-bottom: 0 !important;
  }
}

/*--------------------------------------- 
  予約フォーム　紹介状を作成するボタン
------------------------------------------*/
.letter-box {
	background-color: #FFFFFF!important;
}

.letter-box a {
	width: 200px;
  text-decoration: none!important;
  background-image: url("https://www3.e-renkei.com/appoint/img/icon/form-open.png")!important;
  background-position: 13px!important;
  background-repeat: no-repeat!important;
  border: none!important;
}

.letter-box a::first-letter {
  color: transparent!important;
}

.letter-box a:link,.letter-box a:visited {
	color: var(--color-main)!important;
  font-weight: 600;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.letter-box a:hover,.letter-box a:active {
	background-color: #ffffff!important;
 	color: var(--color-main-hover)!important;
}

/* ==============================
   indexページ：科目ボタン
   - .width-list を除き li の高さを固定して揃える
   - li が高さを持ち、a が100%でフィット
============================== */
/* 行間は li の margin で管理（gap不使用） */
ul.index-topbtn{
  display:flex;
  flex-wrap:wrap;
  margin:-4px;            /* 相殺用 */
  padding:0;
  list-style:none;
}

/* 共通枠（横並びの幅だけ担当） */
ul.index-topbtn > li{
  box-sizing:border-box;
  margin:4px;                                /* 行間 */
  width:calc(25% - 8px);                     /* 4列 */
  border:1px solid var(--color-gray);
  border-radius:4px;
  background:linear-gradient(#fff,#f5f5f5);
  box-shadow:var(--color-gray) 1px 1px 1px;
  display:flex;
  align-items:stretch;                        /* 中身を同じ高さに */
  text-align:center;
}

/* ★ .width-list 以外の高さを固定して揃える（PC） */
ul.index-topbtn > li:not(.width-list) > a,
ul.index-topbtn > li:not(.width-list) {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:50px;
  padding:0 12px;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
}

/* 補足（赤字）li:not(.width-list) */
ul.index-topbtn > li:not(.width-list) > a > span,
ul.index-topbtn > li:not(.width-list) > span{
  margin-top:2px;
  font-size:86%;
  color:var(--color-red);
  display: block;
}

/* 補足（赤字）li.width-list */
ul.index-topbtn > li.width-list > span,
ul.index-topbtn > li.width-list > a > span{
  margin-top:2px;
  font-size:86%;
  color:var(--color-red);
  display: block;
}

/* プルダウン付きは自由高さ＋縦積み */
ul.index-topbtn > li.width-list{
  width:calc(50% - 8px);
  flex-direction:column;
  align-items:stretch;
}
ul.index-topbtn > li.width-list > a{
  min-height:36px;
  padding:10px 12px;
}
ul.index-topbtn > li.width-list select{
  display:block;
  width:70%;
  margin:4px auto 8px;
  font-size:.8rem;
  background:#fff;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){            /* 3列＋高さ少し下げ */
  ul.index-topbtn > li{ width:calc(33.333% - 8px); }
  ul.index-topbtn > li:not(.width-list) > a{ height:50px; }
}
@media (max-width:767px){             /* 2列＋高ささらに下げ */
  ul.index-topbtn > li{ width:calc(50% - 8px); }
  ul.index-topbtn > li.width-list{ width:calc(100% - 8px); }
  ul.index-topbtn > li:not(.width-list) > a{ height:50px; }
}
@media (max-width:479px){             /* 1列 */
  ul.index-topbtn > li{ width:calc(100% - 8px); }
}

/* -------------- ホバー・リンクカラー -------------- */
ul.index-topbtn li a:link,
ul.index-topbtn li a:visited{ 
  color: var(--color-gray-dark);
  text-decoration:none; 
}

ul.index-topbtn li:hover{
  background:var(--color-reserve-th);
}
ul.index-topbtn li:hover a{ text-decoration:none; }


/*-----------------------------------------------------------
　カレンダーページ　ページ先頭の科目選択ボタン)プルダウン
-------------------------------------------------------------- */
/* ページ上部 アンカーリンクのプルダウン */
#listKamoku {
  margin-top: 20px;
  width: 30%;
}
@media all and (max-width: 767px) {
  #listKamoku {
    width: 100%;
  }
}


/*-----------------------------------------------------------
　indexページ下方　グループページへ移動エリア（.submit-box)
-------------------------------------------------------------- */
/* このページ専用：病院選択フォームの横並び＆整列 */
#gotoGroup {
  display: flex;
  align-items: center;
  gap: 4px;         /* 要素間の余白 */
  margin: 20px 0 0 0;    /* セクション上下余白 */
  flex-wrap: wrap;   /* スマホで折り返し */
}

/* セレクト：インラインstyle=width:160px を上書き */
#gotoGroup select[name="gotogroup"] {
  min-width: 240px !important;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  height: 36px;
  border-color: var(--color-gray);
  border-radius: 4px;
  box-sizing: border-box;
}

/* 「移 動」ボタン：色は既存変数に任せ、サイズだけ合わせる  */
#gotoGroup .submit {
  width: auto;
  min-width: 0;
  padding: 6px 16px;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border-color: var(--color-gray);
  box-shadow: none;
  color: var(--color-white);
  background-color: var(--color-main);
  margin-right: 10px;
}
#gotoGroup .submit:hover {
  color: var(--color-white);
  background-color: var(--color-main-hover);
}

/* 病院一覧へのリンク：色は既存のテーマ色を使用（なければ適宜） */
#gotoGroup a {
  font-size: 14px;
  color: var(--color-blue-dark);
  text-decoration: underline;
}
#gotoGroup a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

/* 余白のための &nbsp; を無効化（もしレイアウトが崩れる場合） */
#gotoGroup br, 
#gotoGroup .nbsp, 
#gotoGroup:where(*) { /* 置換用の保険。不要なら削除可 */
  /* ここには何も書かない。&nbsp; はHTML側の削除推奨 */
}

/*--------------------------------------- 
 緊急メンテナンス用タグ
------------------------------------------*/
#login-text1 {
	width: 94%;
  margin: auto;
}

#login-text1 > h5 {
	margin-top: 0.8em;
	margin-bottom: 0.7em;
	line-height: 1.7;
	font-size: 96%;
}

#login-text1 > h5 a:link,
#login-text1 > h5 a:visited{
	color: var(--color-red);
}
#login-text1 h5 a:hover,
#login-text1 h5 a:active{
	color: #03C;
	text-decoration: underline;
}

/*--------------------------------------- 
 ページトップ
------------------------------------------*/
.go-top{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 50px;
  height: auto;
  text-align: center;
  background-color:var(--color-main);
  z-index: 10;
  padding: 4px;
}

.go-top:hover{
  background-color:var(--color-main-hover);
}

.go-top a{
    fill: #FFF;
    line-height: 1;
    display: inline-block;
    width: 100%;
}

/*--------------------------------------- 
 カレンダーページ　予約日/予約時間　※basicを上書き
------------------------------------------*/
#tt-box01{
	float: right;
	width: 45%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: .5em;
	margin-left: auto;
	padding: 0px;
	font-size: 105%;
}

#tt-box01::after {
  content: "";
  display: block;
  clear: both;
}

#tt-box02{
	float: left;
	width: 50%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: .5em;
	margin-left: 0px;
	padding: 0px;

}

#tt-box01,
#tt-box02 {
	font-size: 102%;
}
#tt-box01 {
    width: 40%;
    margin-top: 15px;
}
#tt-box02{
	width: 55%; 
	margin-top: 15px;
}

@media all and (max-width: 767px) {
#tt-box01{
	float: none;
	width: 100%;
	margin-top: 30px;
  padding-bottom: 0;
}
#tt-box02{
	float: none;
	width: 100%;
}
}

/* 予約時間選択テーブル */
table.timetable-tb{
	margin: 10px auto 25px auto!important;
}
table.timetable-tb th{
	text-align: center;
	padding-top: 0.22em; 
	padding-bottom: 0.22em;
	background-color: var(--color-blue-light-l);
	color: var(--color-blue-dark);
}
table.timetable-tb td{
	text-align: center;
	line-height: 1;
  font-weight: 400;
	color: var(--color-blue-dark);
}

table.timetable-tb td > input[type="button"].submit {
	padding: 4px 6px;
	font-size: 13px;
  min-width: 80px;
}

/* 予約日（矢印　SVG）*/
.arrow_box a > img {
    margin: 0 -3px 0 -3px;
    padding: 0;
    vertical-align:middle;
  	font-size: 100%;
    transform: scale(1.16);
}
.arrow_box a > img:hover {
    transform: scale(1.4);
}

.arrow_box {
    min-width: 250px;
    margin: 0 auto;
    padding: 6px;
    padding-top: 8px;
    color: var(--color-gray-dark);
    vertical-align:middle;
    font-weight: 400;
  	font-size: 100%;
    line-height: 1.4;
    background-color: var(--color-cool-gray);
    border-radius: 19px;
    height: 38px;
    text-align: center;
}

/* 予約日選択テーブル　*/
table.sub-calendar-tb {
	margin: 10px auto 25px auto!important;
}
table.sub-calendar-tb th{
	padding-top: 0.4em; 
	padding-bottom: 0.4em;
	background-color: var(--color-blue-light-l);
}

table.sub-calendar-tb td {
	line-height: 1.4; 
	position: relative;
	padding: 0.16em;
}
table.sub-calendar-tb td a {
	display: block;
	width: 100%;
	color: var(--color-blue-dark);
	text-decoration: none;
	font-weight: 400;
	padding: 0.32em 0.4em;
}
table.sub-calendar-tb td:hover {
	background-color: var(--color-pink-warm);
}
table.sub-calendar-tb td a:hover {
	cursor: pointer;
}

/* 土・日　*/
table.sub-calendar-tb td:first-child {
  background-color: #fff0f0;
}
table.sub-calendar-tb td:last-child {
  background-color: #f0f8ff;
}

table.sub-calendar-tb td {
	background: var(--color-white);
}
table.sub-calendar-tb td.close {
	background-color: var(--color-pink-light);
}
table.sub-calendar-tb td.unable{
	background-color: var(--color-cool-gray);
	color: var(--color-gray);
}
table.sub-calendar-tb td.nowday {
	background-color: var(--color-pink);
}

.sub-calendar-tb .f-ao, 
.sub-calendar-tb .f-aka {
  color: var(--color-gray-dark); 
  font-weight: normal;
}

/* 不明 ※basicを上書き */
table.form-tb{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0.8em;
	margin-left: auto;
	width: 100%;
}
table.form-tb th{
	background-color: var(--color-blue-light-l);
	width: 28%;
	text-align: center;
	/*vertical-align: middle;*/
}
table.form-tb td{
	background-color: none;
	text-align: left;
	/*vertical-align: middle;
	padding: 0.5em;*/
	line-height: 1.4;
}

/*--------------------------------------- 
 マイページ　※basicを上書き
------------------------------------------*/
table.mypage-tb{
	width: 100%;
	line-height: 1;
	margin: 0px;
}
table.mypage-tb th{
	text-align: center;
	/*padding: 0.2em;*/
	background-color: var(--color-blue-light);
  color: var(--color-blue-dark);
}

table.mypage-tb th a:link,
table.mypage-tb th a:visited{
  color: var(--color-blue-dark);
  text-decoration: underline;
}
table.mypage-tb a:hover,
table.mypage-tb a:active {
	color: var(--color-link-hover);
	text-decoration: underline;
}

table.mypage-tb td {
  padding: 6px 4px!important;
  font-size: 90%!important;
  line-height: 1.2;
  text-align: left;
  height: auto;
}
table.mypage-tb td > p {
  margin: 0 !important;   /* ← これが効きます */
  padding: 0 !important;
}
/* 20250825 追加 */
table.mypage-tb td > input[type="button"]{
  padding: 6px 8px;
  margin-left: 0;
	font-size: 12px;
  min-width: 100px;
  margin: 0;
}
table.mypage-tb td > input[type="button"].submit {
	padding: 4px 6px;
	font-size: 13px;
  min-width: 80px;
}

/*--------------------------------------- 
  マイページ　上部メニューボタン
------------------------------------------*/
.menu{
	position: relative;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 0.4em;
}
.menu ul li{
	padding-top: 0.4em;
	padding-right: 0.8em;
	padding-bottom: 0.4em;
	padding-left: 0.8em;
  list-style-type: none;
}

/*--------------------------------------- 
  不明　※basicを上書き
------------------------------------------*/
table.ireko-tb{
	width: 100%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 0px;
	margin: 0px;
}
table.ireko-tb th{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
table.ireko-tb td{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 33%;
	/*padding: 0px;*/
  line-height: 1.3;
  font-size: 103%;
}

/*--------------------------------------- 
  テーブルレスポンシブ
  ※テーブルタグを囲む　
------------------------------------------*/
.table-responsive {
  overflow-x: scroll;
  padding: 0;
  margin: 0;
}
.table-responsive table {
  width: 100%;
  padding: 0;
  margin: 0;
  min-width: 600px;
}

/*--------------------------------------- 
 各種テーブル
------------------------------------------*/
/* ===== インデックス表 共通設定 ===== */
table.index5,
table.index6,
table.index_basic,
table.indexFree {
  table-layout: fixed;  /* 均等割りを安定させる */
  width: 100%;
  font-size: 96%;
  margin: 0;
}

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 {
  text-align: center;
  vertical-align: middle;
	color: var(--color-gray-dark);
	font-size: 100%;
  font-weight: 500;
}

table.index5 th,
table.index6 th {
  background-color: var(--color-reserve-th);
}

table.index_basic th,
table.indexFree th {
    background-color: var(--color-cool-gray);
}

/* ===== 5列テーブル ===== */
table.index5 th,
table.index5 td {
  width: 20%;
}
table.index5 th.bui {
  background-color: var(--color-reserve-th-bui);
}

/* ===== 6列テーブル ===== */
table.index6 th,
table.index6 td {
  width: 16.666%;
}
table.index6 th.bui {
  background-color: var(--color-reserve-th-bui);
}

/* ===== index_basic テーブル サイズ（幅・縦）===== */
table.index_basic td {
	width: 20%;
	height: 60px;
}

/* ===== テーブル下の詳細テーブル ===== */
.under-table {
  table-layout: fixed;  /* 均等割りを安定させる */
  font-size: 80%;
  margin: 0 0 10px 0;
}
.under-table th {
    background-color: var(--color-cool-gray);
}
.under-table td {
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align:middle;
}
/* 左端（区分列）を固定幅に */
.under-table th:first-child {
  min-width: 100px;
}
/* 他の列は均等に自動割り当て */
.under-table th:not(:first-child),
.under-table td:not(:first-child) {
  width: auto;
}


/* ===== 左寄せテーブル ===== */
.under-table-left th,
.under-table-left td {
  text-align: left!important;
}

/* ===== 共通リンク ===== */
table.index5 a,
table.index6 a,
table.index_basic a,
table.indexFree a {
  display: inline-block; /* セルいっぱいをクリック領域に */
  width: 100%;
  height: 100%;
  text-align: center;
	color: var(--color-blue-dark);
}

/* 共通　小テキスト赤文字 */
table.index5 span,
table.index6 span,
table.index_basic span,
table.indexFree span {
	font-size: 82%;
	color: #fd4141;
  display: block;
}

/* 共通　テキスト ホーバー */
table.index5 td: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);
	color: var(--color-link-hover);
  cursor: pointer;
}

/* 利用箇所不明 */
.back-color {
	background-color: var(--color-gray-light-l);
}

/*---------------------------------------
 各種テキストボックス
------------------------------------------*/
/*　ヘッダ下　テキストボックス */
#main-notice{
  clear: both;
	width: 100%;
  margin: 0;
	padding: 0;
  margin-top: 0rem;
  margin-bottom: 1.5rem;
  display: block;
  text-align: left;
}

/* ページ下方　テキストボックス */
#main-notice2{
  clear: both;
  margin: 0;
	padding: 0;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
	width: 100%;
  text-align: left;
  display: block;
}

/*　【病院別 注意事項】ページ上部　テキストボックス */
.message-box {
	clear: both;
	width: 100%;
	text-align: left;
  margin: 0;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem; 
  padding: 1rem;
	padding-top: 0.5rem;
  padding-bottom: 0.5rem;
	border: 1.5px solid var(--color-main);
  display: block;
  height: auto;
}

#main-notice:after,
#main-notice2:after {
  content: "";
  display: block;
  clear: both;
} 

/*----------------------------------------------------  
 各種テキスト
------------------------------------------------------- */
/* 予約ステップ（ページ上部 ：〇〇してください） 赤文字　*/
#main-contents h3 {
  /*color: var(--color-red);*/
  color: var(--color-pink-dark);
  font-size: 105%;
}

/* #main-contents 内にある 最初の h3 のみにスタイルが適用 */
#main-contents > h3:first-of-type {
  margin-top: 15px;
}

/* （カレンダーページ）#main-noticeボックス直後の「選択中の診療科目名」*/
#main-contents #main-notice + h3 + h4 {
  font-size: 100%;
}

/* （カレンダーページ）#main-noticeボックス直後の「選択中の診療科目名」直後の「選択中の医師（サブ項目名）」*/　
#main-contents #main-notice > h4 > span::before {
  content: "　";
  font-size: 110%;
}

/* （マイページ）現在の予約　メニューの直後にある　*/
#main-contents .menu + h4 {
  color: var(--color-blue-dark);
  font-size: 105%;
}

/*----------------------------------------------------  
 　テーブル上部
------------------------------------------------------- */
#main-contents #index-box > h4 {
  font-size: 104%;
  font-weight: 500;
  color: var(--color-blue-dark);
  padding: 6px 8px;
  margin: 30px 0 8px;
  border-left: 5px solid var(--color-main);
  background-color: #f9fbfd;
}

/* 「医師指定なし」「診療科について」全体のラッパー */
#main-contents #index-box > h4 + span {
  display: flex;               /* 横並びに */
  align-items: center;          /* 縦中央に揃える */
  gap: 8px;                    /* ボタンとリンクの間の余白 */
  font-size: 70%;
  margin: 4px 0 4px 0;
  text-align: left;
}

/* 「診療科について」リンク全体を横並び中央揃えに */
#main-contents #index-box > h4 + span .hp-link {
  display: inline-flex;
  align-items: center;          /* アイコンと文字を中央に */
  gap: .1.8em;
  font-size: 120%;
  text-align: left;
}

a.hp-link:link,
a.hp-link:visited {
  color: var(--color-blue-dark);
  cursor: pointer;
}
a.hp-link:hover,
a.hp-link:focus{
  color: var(--color-blue-dark);
  text-decoration: none;
}

/* アイコン画像のサイズと揃え */
#main-contents #index-box > h4 + span .hp-link img {
  width: 1.6em;
  height: 1.6em;
  display: block;
  object-fit: contain;
}

#main-contents #index-box > h4 + p {
  margin: 5px auto 5px auto;
  padding: 0;
  font-size: 82%;
  font-weight: 400;
  line-height: 1.6;
}

#main-contents #index-box > h5 {
  margin-top: 25px;
  padding: 0;
  font-size: 100%;
  font-weight: 500;
  line-height: 1.3;
}

#main-contents #index-box > h6 {
  margin-top: 25px;
  padding: 0;
  font-size: 98%;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-pink-dark);
}

#main-contents #index-box > h6 + p {
  margin-top: 0;
}

#main-contents #index-box p {
  margin: 5px auto 5px auto;
  padding: 0;
  font-size: 92%;
  font-weight: 400;
  line-height: 1.6;
}

#main-contents #index-box dt {
  margin: 5px auto 0 auto;
  padding: 0;
  font-size: 95%;
  font-weight: 500;
  line-height: 1.5;
}

#main-contents #index-box dd {
  margin: 0 auto 10px auto;
  padding: 0;
  font-size: 92%;
  font-weight: 400;
  line-height: 1.6;
}

/* 女性医師 */
#main-contents #index-box > h4 > .woman {
  content: "　";
  font-size: 96%;
  color: var(--color-pink-dark);
  font-weight: 600;
}


/*----------------------------------------------------  
 　テーブル下部
　（インデックスページ）(テーブル下・リストボタン下)補足文の見出し
------------------------------------------------------- */
#main-contents #index-box > table.index5 + h5,
#main-contents #index-box > table.index6 + h5,
#main-contents #index-box > .table-responsive + h5 {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0;
  font-size: 90%;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: #444!important;
}

#main-contents #index-box > table.index5 + p,
#main-contents #index-box > table.index6 + p,
#main-contents #index-box > .table-responsive + p {
  margin: 5px auto 5px auto;
  padding: 0;
  font-size: 84%;
  font-weight: 400;
  line-height: 1.6;
}

#main-contents #index-box > table.index5 + dt,
#main-contents #index-box > table.index6 + dt,
#main-contents #index-box > .table-responsive + dt {
  margin: 5px auto 0 auto;
  padding: 0;
  font-size: 95%;
  font-weight: 500;
  line-height: 1.5;
}

#main-contents #index-box > table.index5 + dd,
#main-contents #index-box > table.index6 + dd,
#main-contents #index-box > .table-responsive + dd {
  margin: 0 auto 10px auto;
  padding: 0;
  font-size: 84%;
  font-weight: 400;
  line-height: 1.6;
}

#main-contents #index-box > table.index5 + ul,
#main-contents #index-box > table.index6 + ul,
#main-contents #index-box > .table-responsive + ul {
  list-style: none;
  margin: 0;
  margin-top: 5px;
  padding-left: 0;
}

#main-contents #index-box > table.index5 + li,
#main-contents #index-box > table.index6 + li,
#main-contents #index-box > .table-responsive + li {
  position: relative;
  padding-left: 0.8em;
  line-height: 1.5;
  font-size: 92%;
}

/* リストのドット */
#main-contents #index-box > table.index5 + li::before,
#main-contents #index-box > table.index6 + li::before,
#main-contents #index-box > .table-responsive +  li::before {
  content: "\2022"; /* bullet (•) */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-pink);
  font-size: 1.3em;
  line-height: 1;
}

/*----------------------------------------------------  
 　コメント
------------------------------------------------------- */
/* （メッセージ）コメントボックス　見出し */
#main-contents #main-notice > h4,
#main-contents #main-notice2 > h4,
.message-box > h4 {
  margin-top: 10px;
  font-size: 105%;
  font-weight: 600;
  line-height: 1;
  color: var(--color-pink-dark);
}

#main-contents #main-notice > h3,
#main-contents #main-notice2 > h3,
.message-box > h3 {
  margin-top: 10px;
  font-size: 107%;
  font-weight: 600;
  line-height: 1;
  color: var(--color-gray-dark);
}

#main-contents #main-notice > h6,
#main-contents #main-notice2 > h6,
.message-box > h6{
  margin-top: 10px;
  padding: 0;
  font-size: 94%;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-pink-dark);
}

/* （メッセージ）コメントボックス　リストのドット */
#main-contents #main-notice ul li::before,
#main-contents #main-notice2 ul li::before,
.message-box ul li::before{
  content: "\2022"; /* bullet (•) */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-pink);
  font-size: 1.3em;
  line-height: 1;
}

#main-contents #main-notice ul,
#main-contents #main-notice2 ul,
.message-box ul{
  list-style: none;
  margin: 0;
  margin-top: 5px;
  padding-left: 0;
}

#main-contents #index-box ul li,
#main-contents #main-notice ul li,
#main-contents #main-notice2 ul li,
.message-box ul li {
  position: relative;
  padding-left: 0.8em;
  line-height: 1.5;
  font-size: 92%;
}

/* リストのドット */
#main-contents #index-box ul li::before,
#main-contents #main-notice ul li::before,
#main-contents #main-notice2 ul li::before,
.message-box ul li::before{
  content: "\2022"; /* bullet (•) */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-pink);
  font-size: 1.3em;
  line-height: 1;
}

/*----------------------------------------------------  
 　インデックスページ　診療科目選択ボタン
------------------------------------------------------- */
/* #index-box 内の .index-topbtnのドットは無効化 */
#main-contents #index-box ul.index-topbtn li::before {
  content: none !important;
}

/* （インデックスページ）<li> 補足リスト　一段サイズダウン */
#main-contents #index-box ul.small-list li,
#main-contents #main-notice ul.small-list li,
#main-contents #main-notice2 ul.small-list li {
  line-height: 1.5;
  font-size: 90%;
}

/* ------------------------------------------　
  各種ボタン
 --------------------------------------------- */
/* ボタン大 */
form #btnLogin,
form #btnReset,
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.submit,
.reset,
.btn_close,
.button {
  margin: 0.24em;
  padding: 0.6em 0.8em;
  font-size: 98%;
  font-weight: 500;
  min-width: 140px;
  border-radius: 3px;
  line-height: 1;
  box-shadow: none;
/*	border: 1px solid var(--color-gray); */
  text-decoration: none;
}
form #btnLogin:hover,
form #btnReset:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.submit:hover,
.reset:hover,
.btn_close:hover,
.button:hover,
a.button:hover {
  outline: none; 
  text-decoration: none;
}

/* ボタン大 */
a.button {
  display: inline-block;
  padding: 0.6em 0.8em;
  font-size: 98%;
  font-weight: 500;
  min-width: 140px;
  border-radius: 3px;
  line-height: 1;
  box-shadow: none;
/*	border: 1px solid var(--color-gray);*/
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
	margin-bottom: 5px;
}

/* ボタン中 */
.btn-m,
a.btn-m {
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	white-space: nowrap;
	margin-bottom: 7px;
	padding: 4px 14px;
	font-size: 14px;
	line-height: 1.42857143;
	border-radius: 4px;
	user-select: none;
	border:none;
  text-decoration: none;
  min-width: 120px;
  font-weight: 500;
}
.btn-m:hover,
a.btn-m:hover{ 
  outline: none; 
  text-decoration: none;
}

/* ボタン小 */
.btn-s,
a.btn-s{
	display:inline-block;
  font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	white-space: nowrap;
	margin-bottom: 5px;
	padding: 4px 8px;
	font-size: 11px;
	line-height: 1.42857143;
	border-radius: 4px;
	user-select: none;
	border:none;
  text-decoration: none;
}
.btn-s:hover,
.btn-s:focus { 
  outline: none; text-decoration: none;
}

/* ボタン(中よりやや小さい) */
.btn-sm,
a.btn-sm {
	display:inline-block;
  font-weight: 500;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	white-space: nowrap;
  margin-top: 0;
	margin-bottom: 7px;
  margin-left: 0;
  margin-right: 6px;
	padding: 4px 10px;
	font-size: 13px;
	line-height: 1.2;
	border-radius: 4px;
	user-select: none;
	border:none;
  text-decoration: none;
  min-width: 120px;
}
.btn-sm:hover,
a.btn-sm:hover{ 
  outline: none; 
  text-decoration: none;
}

/* indexページの上部に診療科目へのリンクボタンを設置するエリア　
  <div class="btn-box">
    <a href="#" class="button">診療科目</a>
  </div> 
*/

/* indexページ　アンカーリンクボタンエリア */
.anchorlink-area {
  clear: both;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* -------------------------------------------- 
 各種ボタンカラー
----------------------------------------------- */
input[type="submit"].submit,
button.submit,
.submit-box .submit,
form #btnLogin {
  background: var(--color-main); 
  color: var(--color-white);
}

input[type="submit"].submit:hover,
input[type="submit"].submit:focus,
button.submit:hover,
.submit-box .submit:hover,
form #btnLogin:hover {
  background: var(--color-main-hover);
  outline: 0;
}

input[type="reset"].reset,
button.reset,
.submit-box .reset,
form #btnReset {
  background: var(--color-reset-button); 
  color: var(--color-white);
}

input[type="reset"].reset:hover, 
input[type="reset"].reset:focus,
button.reset:hover,
.submit-box .reset:hover,
form #btnReset:hover {
  background-color: var(--color-reset-button-hover);
}

input[type="button"],
input[type="button"].submit {
  background: var(--color-sub); 
  color: var(--color-white);
}
input[type="button"]:hover,
input[type="button"]:focus
input[type="button"].submit:hover,
input[type="button"].submit:focus {
  background: var(--color-sub-hover);
}

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

/* ボタン大カラー */
.btn_primary {
  background-color: var(--color-main);
  color: var(--color-white)!important;
}
.btn_primary:hover,
.btn_primary:focus{
    background-color: var(--color-main-hover);
}

/* ボタン大カラー(サブ) */
.btn_second,
a.btn_second{
  background-color: var(--color-sub);
  color: var(--color-white)!important;
}
.btn_second:hover,
.btn_second:focus,
a.btn_second:hover,
a.btn_second:focus{
    background-color: var(--color-sub-hover);
}

/* ボタン大カラー(sm) */
.btn-sm-color,
a.btn-sm-color,
.btn-sm-color:link,
.btn-sm-color:visited,
a.btn-sm-color:link,
a.btn-sm-color:visited {
  background-color: var(--color-pink-warm);
  color: var(--color-gray-dark);
  text-decoration: none;
}
.btn-sm-color:hover,
.btn-sm-color:focus,
a.btn-sm-color:hover,
a.btn-sm-color:focus{
    background-color: var(--color-pink);
    color:var(--color-white);
}

/* ボタン大カラー(sm) ※担当医について */
.btn-sm-color-blue,
a.btn-sm-color-blue,
.btn-sm-color-blue:link,
.btn-sm-color-blue:visited,
a.btn-sm-color-blue:link,
a.btn-sm-color-blue:visited {
  background-color: var(--color-main);
  color: var(--color-white);
  text-decoration: none;
}
.btn-sm-color-blue:hover,
.btn-sm-color-blue:focus,
a.btn-sm-color-blue:hover,
a.btn-sm-color-blue:focus{
    background-color: var(--color-main-hover);
    color:var(--color-white);
}

/* ボタン大　リセットボタンカラー（基本的にグレー） */
.btn_reset {
    background-color: var( --color-reset-button);
    color:var(--color-white);
}
.btn_reset:hover,
.btn_reset:focus {
    background-color: var(--color-reset-button-hover);
}

/* ボタン小　ヘッダのログアウト(.btn_logout)
（基本はグレー/右側に建物の写真を配置した場合、カラー調整） */
.btn_logout {
    background-color: var( --color-reset-button);
    color:var(--color-white)!important;
}
.btn_logout:hover, 
.btn_logout:focus {
    background-color: var(--color-reset-button-hover);
}

/*--------------------------------------- 
  ログインページ
------------------------------------------*/
#login-contents {
  flex: 0 0 100%;   /* 1行占有） */
  width: 100%;
}

#login-contents {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
@media all and (max-width: 767px) {
  #login-contents img {
    max-width: 100%;
  }
}

/* コメントエリア上 */
#login-text1 {
  display: block;
  margin: 0.5em auto 0.5em auto;
  width: 95%;
  box-sizing: border-box;
  height: auto;
  text-align: left;
}
#login-text1 img {
  max-width: 200px;
}

@media all and (max-width: 767px) {
#login-text1 {
    width: 93%;
  }
}

/* ログインエリア左 */
#login-wrap {
  padding: 0.6em;
  border: none;
  background-color: var(--color-cool-gray);
  border-radius: 4px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
	text-align: center; 
}

/* #login-group を「横並びから外す」ように見せる */
#login-group {
  flex: 0 0 100%;      /* 1行フル幅を占有 */
  order: 99;           /* 常に下に回す */
  text-align: center;  /* 中央寄せ */
}

#login-wrap img {
  max-width: 200px;
}

#login-text2{
  width: 95.6%;
  box-sizing: border-box;
  padding: 0.6em;
  border: none;
  text-align: center;
  margin-top: 7px;
}

/* ▼▼ 下固定のCSSをコメントアウト ▼▼ */
/*
#login-text2{
  position: relative;
  width: 95.6%;
  box-sizing: border-box;
  padding: 0.6em;
  min-height: 200px;
  border: none;
  text-align: left;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#login-text2 .manual{
  display:flex;
  flex-direction:column;
  align-items: center;  
  flex:1 1 auto;
  min-height:0;
}

#login-text2 .manual-smalltxt{
  position: static;
  margin-top: auto;
  font-size: 84%;
  line-height: 1.6;
  width: 100%;
}

#login-text2 .manual-button{ 
  margin-bottom: .6em; 
  margin-top: .6em;
}

@media all and (max-width: 767px) {
  #login-text2 { width: 93%; }
}
@media (max-width: 767px){ #login-text2{ min-height: 180px; } }
@media (max-width: 400px){ #login-text2{ min-height: 230px; } }
*/
/* ▲▲ ここまで下固定のCSSをコメントアウト ▲▲ */


/* --- 通常表示用：manual-smalltxt を manual-button の下に表示 --- */
#login-text2 .manual {
  display: block;   /* 通常のブロック表示に戻す */
  text-align: center;
}

#login-text2 .manual-button {
  margin-top:  1em;
  margin-bottom: .6em;
}

#login-text2 .manual-smalltxt {
  margin-top: .6em;
  font-size: 84%;
  line-height: 1.6;
}

/* コメントエリア右 */
#login-text3{
  position: relative;
  box-sizing: border-box;
  padding-bottom: 40px;
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: auto;
  flex:1;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  margin: 0 auto;
}

/* スマホ：縦に並べる */
@media screen and (max-width: 767px) {
  #login-contents {
    flex-direction: column;
    align-items: stretch;
  }
  #login-wrap,
  #login-text3,
  #login-text2{
    width: 100%;
    flex: none;
  }
  #login-text3,
  #login-text2{
    margin-top: 0;
  }
  #login-wrap {
    width: 112%;
    margin: auto auto auto -6%;
  }
}

/*「ご利用ガイド」のアイコンとテキストの縦位置を揃える
<div class="manual-button">
<a href="https://e-renkei.com/downloads/erenkei_document.pdf" target="_blank">
  <span class="pdf-icon"></span>
  <span class="pdf-text">ご利用ガイド</span>
</a>
</div>
*/

/* マニュアル全体 */
.manual{
  margin: 0;
}
.manual > p{
  font-size: 86%;
  text-align: left;
  padding: 0.5em;
  line-height: 1.4;
}

/* ボタン一覧（常に縦並び・左寄せ） */
.manual-button{
  display: inline-flex;      /* 中身を shrink-to-fit */
  flex-direction: column;    /* 常に縦 */
  align-items: flex-start;   /* 左寄せ */
  gap: 8px;                  /* ボタン同士の間隔 */
}

/* 各ボタン */
.manual-button a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 14px;
  color: var(--color-gray-dark);
  padding: 4px;
  min-height: 30px;
  border-radius: 4px;
  white-space: nowrap;       /* 折り返さない＝一番長い要素に幅が揃う */
}

/* アイコン */
.manual-button .pdf-icon,
.manual-button .file-icon,
.manual-button .form-icon{
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.manual-button .pdf-icon {
  background-image:url('https://www3.e-renkei.com/appoint/img/icon/pdf-icon.png');
}
.manual-button .file-icon {
  background-image:url('https://www3.e-renkei.com/appoint/img/icon/file-icon.png');
}
.manual-button .form-icon {
  background-image:url('https://www3.e-renkei.com/appoint/img/icon/form-icon.png');
}

/* テキスト */
.pdf-text{
  font-weight: 600;
  line-height: 1.2;
}

/* ログインページ テーブル */
.login table{
	empty-cells: show;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	margin-top: 30px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
}

/* 暫定 新レイアウト制作中 (右エリア追加後、width: 90%;に戻す) */
.login table,
.form-message {
    width: 60%!important;
}
.login table th{
	font-weight: normal;
	text-align: center;
  background-color: var(--color-reserve-th);
	padding-top: 5px;
	width: 40%;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
	line-height: 1.3;
	font-size: 100%;
}
.login table td{
	font-weight: normal;
	text-align: left;
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
}

/* @media all and (max-width: 767px) {
  .login table,
  .form-message {
    width: 86%!important;
  }
  .login table td .per60 {
  width: 100%!important;
  }
  .login table th{
	  width: 30%;
    font-size: 96%;
  }
}*/

@media all and (max-width: 767px) {
  .login table {
    width: 94%!important;
    border-top-width: 0;
  }
  .login table tr {
    width: 100%;
    display: block;
  }
  .login table th{
	  width: 100%;
    font-size: 96%;
    display: block;
    border-left-width:0;
    border-right-width:0;
  }
  .login table td{
	  width: 100%;
    font-size: 96%;
  	display: block;
    border-width:0;
    padding-bottom: 1em;
  }
}

.form-message {
  text-align: left;
  margin: 1em auto 1em auto;
}

hr {
  height: 0.05em;
  background-color: #ccc;
  border: none;
  width: 100%;
}

#login-coment {
    margin-top: 40px;
}

/* ログインページ　テキスト・画像　 */
.login h3 {
	color: var(--color-red);
	font-size: 96%;
	text-align: center;
	letter-spacing: 0.1em;
	border-radius: 15px;
	font-weight: normal;
	line-height: 2;
	padding: 0px;
	margin-top: 0.7em;
}
.login p {
	text-align: center;
	line-height: 1.6;
	margin-top: 0.5em;
}
#login-text3 img {
  width: 100%;
  margin-bottom: 10px;
}
#login-text1 p,
#login-text2 p,
#login-text3 p {
  font-size: 94%;
}

.login table + p {
  margin-top: 20px;
  margin-bottom: 20px;
}

input + label a {
  font-size: 94%;
  margin-left: 5px;
}

.manual-button + p {
  margin-top: 15px;
  margin-bottom: 0;
}

/* 親：上下に積んで中央寄せ（PC） */
#login-text2 .manual{
  display: flex;
  flex-direction: column;  /* 必ず縦積み */
  align-items: center;      /* 子要素を中央に */
  margin: 0;
}

/* ボタン群：縦並び・左寄せの“塊”を中央に置く */
#login-text2 .manual-button{
  display: flex;            /* 縦のボタンリスト */
  flex-direction: column;
  align-items: flex-start;  /* 中身は左寄せ */
  gap: 8px;
}

/* 各ボタン（アイコン＋テキスト） */
#login-text2 .manual-button a{
  display: -ms-inline-flexbox;  /* IE11ケア */
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 14px;
  color: var(--color-gray-dark);
  padding: 4px;
  min-height: 30px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 注意文：PCは“最長行幅の塊”を中央に置く */
#login-text2 .manual-smalltxt{
  align-self: center;       /* 親の中央に配置 */
  display: inline-block;    /* shrink-to-fit（fit-content不要） */
  margin: 15px auto 0;
  text-align: left;         /* 文章は左寄せ */
  line-height: 1.6;
  font-size: 84%;
  max-width: 90%;           /* はみ出し保険 */
}

/* スマホ：横幅100%で自然な段落に（上下の積みは維持） */
@media (max-width: 767px){
  #login-text2 .manual-smalltxt{
    display: block;
    width: 100%;
    margin: 15px 0 0;
  }
}

/* 警告・エラーメッセージ */
#msgError {
	color: var(--color-red);
	line-height: 1.4;
	font-size: 100%;
	font-weight: 500;
	text-align: center;
}

/* ログインページに必須表示 */
.kotei-display {
  margin: 5px auto 20px auto;
  text-align: center;
  height: auto;
  display: block;
/*  display: none; */
}

.login p label a:link,a:visited {
	color: var(--color-blue-dark);
	text-decoration: underline;
}
.login p label a:hover,a:active {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* ログインページ　PDFダウンロード（未使用） */
table.login-download {
	width: 80%;
	font-size: 1em;
	border-top-style: none;
	border-left-style: none;
	vertical-align: middle;
	display: table;
	border-right-style: none;
	border-bottom-style: none;
	line-height: 1;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

table.login-download th {
	color: var(--color-red);
	border-right-style: none;
	border-bottom-style: none;
	text-align: center;
	border-top-style: none;
	border-left-style: none;
}
table.login-download td {
	text-align: center;
	border: 1px solid var(--color-gray);
	background-color: var(--color-gray-light);
	letter-spacing: 0.1em;
	width: 50%;
	line-height: 2;
}

/*--------------------------------------- 
 二要素認証ページ
------------------------------------------*/
.security{
	padding-top: 0.5em;
	padding-right: 0px;
	padding-bottom: 0.4em;
	padding-left: 0px;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	text-align: center;
}

.security > a,
.security > a:hover{
  color: #ffffff; 
}

table.box-2fa,
table.email-box{
	empty-cells: show;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
}

table.box-2fa,
.text-box-2fa {
  width: 50%;
  margin: 0 auto;
}

table.email-box,
.text-2fa{
  width: 80%;
  margin: 0 auto;
}

table.email-box {
	margin-bottom: 20px;
}

table.box-2fa th,
table.email-box th{
	font-weight: normal;
	text-align: center;
  background-color: var(--color-blue-light-l);
	padding-top: 5px;
	width: auto;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
	line-height: 1.3;
	font-size: 96%;
}

table.box-2fa td,
table.email-box td {
	font-weight: normal;
	text-align: left;
	padding-left: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-gray);
  background: var(--color-gray-light);
}

table.box-2fa td,
table.email-box td { 
  width: 60%;
  word-break: break-word;
}

/* レスポンシブ設定 */
@media all and (max-width: 1500px) {
  table.email-box,
  .text-2fa {
  width: 80%;
}
}

@media all and (max-width: 900px) {
  table.email-box,
  .text-2fa {
  width: 80%;
}
  table.box-2fa th,
  table.email-box th {
	  width: 40%;
    font-size: 96%;
  }
}

/*@media all and (max-width: 767px) {
  table.box-2fa,
  table.email-box,
  .text-2fa,
  .text-box-2fa {
    width: 98%;
  }
  table.box-2fa th,
  table.email-box th {
	  width: 36%;
  }
}*/

/* 2025/10/28 追加 */
@media all and (max-width: 767px) {
  table.box-2fa,
  table.email-box,
  .text-2fa,
  .text-box-2fa {
    width: 96%!important;
    border-top-width: 0;
  }
  table.box-2fa tr,
  table.email-box tr {
    width: 100%;
    display: block!important;
  }
  table.box-2fa th,
  table.email-box th {
	  width: 100%;
    font-size: 96%;
    display: block!important;
    border-left-width:0;
    border-right-width:0;
  }
  table.box-2fa td,
  table.email-box td {
	  width: 100%;
    font-size: 96%;
  	display: block;
    border-width:0;
    padding-bottom: 1em;
  }
}
/* ここまで　2025/10/28 追加 */

input.per60 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 二要素認証ページ 説明文 */
.text-2fa,
.text-box-2fa {
  line-height: 1.6;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 90%;
  text-align: center;
}

.text-box-2fa {
  margin-bottom: 40px;
}

.text-2fa dt,
.text-2fa dd,
.text-2fa li,
.text-2fa p,
.text-box-2fa p {
  text-align: left;
}
.text-2fa dt,
.text-2fa dd {
  margin-bottom: 10px;
}
.text-2fa ul{
  margin: 10px auto;
  text-align: left;
  list-style: disc;
  list-style:inside;
  margin-left: 5px;
}
.text-2fa dt {
  font-weight: 600;
}

/*--------------------------------------- 
 テキスト指定 （インライン指定）
------------------------------------------*/
.txt9 {font-size: 80% !important;  /* 約12.8px */}
.txt10 {font-size: 85% !important;  /* 約13.6px */}
.txt11 {font-size: 85% !important;  /* 13px */}
.txt12 {font-size: 92% !important;  /* 14.8px */}
.txt13 {font-size: 100% !important; /* 16px */}
.txt14 {font-size: 110% !important; /* 17.6px */}
.txt16 {font-size: 115% !important; /* 18.2px */}
.txt17 {font-size: 120% !important; /* 19.2px */}
.txt18 {font-size: 130% !important; /* 20.8px */}
.txt20 {font-size: 140% !important; /* 22.4px */}
.alignright {float:right !important;}
.alignleft {float: left!important;}
.txtCenter {text-align:center!important;}
.txtLeft {text-align:left!important;}
.txtLeft li {text-align:left!important;}
.txtRight {text-align:right!important;}
.txtBold {font-weight: 600!important;}
.txtNoamal {font-weight: normal!important;}
.vertical-top {vertical-align: top!important;}
.vertical-bottom {vertical-align: bottom!important;}
.vertical-middle {vertical-align:middle!important;}

/*--------------------------------------- 
 カラー指定 （インライン指定）
------------------------------------------*/
.c-white {color: var(--color-white)!important;}
.c-red {color: var(--color-red)!important;}
.c-gray {color: var(--color-gray-dark)!important;}
.c-blue-dark {color: var(--color-blue-dark)!important;}
.color-pink-dark {color: var(--color-pink-dark)!important;}
.c-pink {color: var(--color-pink)!important;}
.alert-border {border: 1px solid var(--color-alert-border)!important;}

/*--------------------------------------- 
 WIDTH（インライン指定）
------------------------------------------*/
/* WIDTH（PC)*/
.w-100 {width:100%!important; height:auto!important;}
.w-95 {width:95%!important; height:auto!important;}
.w-90 {width:90%!important; height:auto!important;}
.w-85 {width:85%!important; height:auto!important;}
.w-80 {width:80%!important; height:auto!important;}
.w-75 {width:75%!important; height:auto!important;}
.w-70 {width:70%!important; height:auto!important;}
.w-65 {width:65%!important; height:auto!important;}
.w-60 {width:60%!important; height:auto!important;}
.w-50 {width:50%!important; height:auto!important;}
.w-48 {width:48%!important; height:auto!important;}
.w-40 {width:40%!important; height:auto!important;}
.w-35 {width:35%!important; height:auto!important;}
.w-30 {width:30%!important; height:auto!important;}
.w-25 {width:25%!important; height:auto!important;}
.w-20 {width:20%!important; height:auto!important;}
.w-15 {width:15%!important; height:auto!important;}
.w-10 {width:10%!important; height:auto!important;}
.w-1 {width:1%!important; height:1px!important;}
.w-auto {width:auto!important;}

/* WIDTH（タブレット */
@media all and (max-width: 979px) {
.w---100 {width:100%!important; height:auto!important;}
.w---95 {width:95%!important; height:auto!important;}
.w---90 {width:90%!important; height:auto!important;}
.w---80 {width:80%!important; height:auto!important;}
.w---70 {width:70%!important; height:auto!important;}
.w---60 {width:60%!important; height:auto!important;}
.w---50 {width:50%!important; height:auto!important;}
.w---40 {width:40%!important; height:auto!important;}
.w---30 {width:30%!important; height:auto!important;}
.w---20 {width:20%!important; height:auto!important;}
.w---15 {width:15%!important; height:auto!important;}
.w---10 {width:10%!important; height:auto!important;}
.w---1 {width:1%!important; height:1px!important;}
.w---auto {width:auto!important;}
}

/* WIDTH（スマフォ) */
@media all and (max-width: 767px) {
.w--100 {width:100%!important; height:auto!important;}
.w--95 {width:95%!important; height:auto!important;}
.w--90 {width:90%!important; height:auto!important;}
.w--80 {width:80%!important; height:auto!important;}
.w--70 {width:70%!important; height:auto!important;}
.w--60 {width:60%!important; height:auto!important;}
.w--50 {width:50%!important; height:auto!important;}
.w--40 {width:40%!important; height:auto!important;}
.w--30 {width:30%!important; height:auto!important;}
.w--20 {width:20%!important; height:auto!important;}
.w--15 {width:15%!important; height:auto!important;}
.w--10 {width:10%!important; height:auto!important;}
.w--1 {width:1%!important; height:1px!important;}
.w--auto {width:auto!important;}
}

/*--------------------------------------- 
  マージン・パディング（インライン指定）
------------------------------------------*/
/* TOP */
.pt0 {padding-top:0!important;}
.pt5 {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt20 {padding-top:20px!important;}
.pt30 {padding-top:30px!important;}
.pt40 {padding-top:40px!important;}

.mt0 {margin-top:0px!important;}
.mt5 {margin-top:5px!important;}
.mt6 {margin-top:6px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}

.mt-5 {margin-top:-5px!important;}
.mt-6 {margin-top:-6px!important;}
.mt-10 {margin-top:-10px!important;}
.mt-15 {margin-top:-15px!important;}
.mt-20 {margin-top:-20px!important;}
.mt-30 {margin-top:-30px!important;}

/* LEFT */
.pl0 {padding-left:0!important;}
.pl5 {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pl15 {padding-left:15px!important;}
.pl20 {padding-left:20px!important;}

.ml0 {margin-left:0!important;}
.ml5 {margin-left:5px!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}

.ml-5 {margin-left:-5px!important;}
.ml-10 {margin-left:-10px!important;}
.ml-15 {margin-left:-15px!important;}
.ml-20 {margin-left:-20px!important;}

/* BOTTOM */
.pb0 {padding-bottom:0!important;}
.pb5 {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!important;}
.pb20 {padding-bottom:20px!important;}
.pb30 {padding-bottom:30px!important;}
.pb40 {padding-bottom:40px!important;}

.mb0 {margin-bottom:0!important;}
.mb3 {margin-bottom:3px!important;}
.mb5 {margin-bottom:5px!important;}
.mb6 {margin-bottom:6px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px!important;}
.mb30 {margin-bottom:30px!important;}
.mb35 {margin-bottom:35px!important;}
.mb40 {margin-bottom:40px!important;}

.mb-10 {margin-bottom:-10px!important;}
.mb-15 {margin-bottom:-15px!important;}
.mb-20 {margin-bottom:-20px!important;}

/* RIGHT */
.pr0 {padding-right:0!important;}
.pr5 {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr20 {padding-right:20px!important;}
.mr0 {margin-right:0!important;}
.mr5 {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}

/* スマフォ用　前に[-] */
@media all and (max-width: 767px) {
.-ml0 {margin-left:0!important;}
.-mr0 {margin-right:0!important;}
.-mt0 {margin-top:0!important;}
.-mb0 {margin-bottom:0!important;}
  
.-mt6 {margin-top:6px!important;}
.-mb6 {margin-bottom:6px!important;}
	
.-ml10 {margin-left:10px!important;}
.-mr10 {margin-right:10px!important;}
.-mt10 {margin-top:10px!important;}
.-mb10 {margin-bottom:10px!important;}
  
.-ml15 {margin-left:15px!important;}
.-mr15 {margin-right:15px!important;}
.-mt15 {margin-top:15px!important;}
.-mb15 {margin-bottom:15px!important;}
  
.-ml20 {margin-left:20px!important;}
.-mr20 {margin-right:20px!important;}
.-mt20 {margin-top:20px!important;}
.-mb20 {margin-bottom:20px!important;}
	
.-ml-10 {margin-left:-10px!important;}
.-mr-10 {margin-right:-10px!important;}
.-mt-10 {margin-top:-10px!important;}
.-mb-10 {margin-bottom:-10px!important;}
  
.-ml-15 {margin-left:-15px!important;}
.-mr-15 {margin-right:-15px!important;}
.-mt-15 {margin-top:-15px!important;}
.-mb-15 {margin-bottom:-15px!important;}
  
.-ml-20 {margin-left:-20px!important;}
.-mr-20 {margin-right:-20px!important;}
.-mt-20 {margin-top:-20px!important;}
.-mb-20 {margin-bottom:-20px!important;}
}