@charset "utf-8";
/* CSS Document */

/* =========================================================
   (グループ連携ポータル）style.css
   セクション構成一覧（タイトル目次）
   =========================================================
   0. Googleフォント CDN
   1. CSS初期化（Normalize）
   2. 色変数・基本変数
   3. テキスト指定（インラインclass）
   4. カラー指定（インラインclass）
   5. テーブル
   6. チェックボックス
   7. テキストフォーム
   8. ボタン（共通・ログアウトボタン含む）

   9. ベース（html, body, container）
  10. ヘッダ（.site-header, .header-inner）
  11. ハンバーガーメニュー（#menu-toggle）
  12. レイアウト（.layout, .btn-s）
  13. サイドバー（#sidebar, .side-nav）
  14. メイン共通幅（#contents, #contents-list, .news-section）
  15. 病院一覧（.hp-grid, .hp-card, .hp-logo, .hp-building, .hp-links）
  16. お知らせアコーディオン（.news-section, .news-head）
  17. フッター（.site-footer, .footer-inner）
  18. ログインボックス(.login-table, #contents,.submit, .btn-ghost)
  19. 補助リンク（.other-links, .helper-links .note）
  20. 幅指定ユーティリティ（.w-*）
  21. マージン・パディング指定（.mt*, .pt*など）
   ========================================================= */

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

/* ボタンリセット */
button {
  margin: 0;
  padding: 0;
  min-width: auto;
  border-radius: 0;
  line-height: 1;
  box-shadow: none;
  text-decoration: none;
  border-radius: none;
}

/* ========== 色変数 ========== */
:root{
  --color-main: #1fa3e0;
  --color-main-hover: #0581c6;
  --color-sub:  #8bcdea;
  
  --color-link: #0589db;
  --color-link-hover: #f9a791;
  
  --color-text: #292069;
  --color-line: #cacbcc;
  --color-card: #f8f8f8;
  --color-white: #ffffff;
  --color-gray: #666666;
  --color-table-th: #d9e7ed;

  /* 角丸・影・幅 */
  --radius: 12px;
  --shadow: 0 3px 10px rgba(0,0,0,.05);
  --sidebar-w: 280px;

  /* ラッパー共通幅（病院一覧/お知らせで共有） */
  --wrap-max: 1200px;
  --wrap-vw: 94vw;      /* 既定（PC） */
  
  --color-red:               #eb0303;  /* 警告カラー（赤） */
  --color-yellow:            #fdffd2;  /* 注意カラー（イエロー枠） */
  --color-reset-button:      #8b9fa9;  /* リセットボタン（基本はグレー） */
  --color-reset-button-hover:#9aa4a8;  /* リセットボタン ホバー */
}

@media (max-width: 1024px){
  :root{ --wrap-vw: 98vw; }
}


/*--------------------------------------- 
 テキスト指定 （インライン指定）
------------------------------------------*/
.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;}


/*--------------------------------------- 
 テーブル
------------------------------------------*/
table {
  margin:0 auto;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	line-height: 1.4;
  -webkit-overflow-scrolling: touch;
  border-collapse:collapse;
  border-spacing: 0;
}
table th {
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	padding: 0.6em;
	padding-left: 1em;
  padding-right: 1em;
	vertical-align: middle;
	line-height: 1.4;
}
table td {
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	padding: 0.6em;
	padding-left: 1em;
  padding-right: 1em;
	vertical-align: middle;
	line-height: 1.4;
  border-collapse:collapse;
  border-spacing: 0;
}
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="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-line);
    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-line);
}

/*--------------------------------------- 
 テキストフォーム
------------------------------------------*/
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;
  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);
}

/*--------------------------------------- 
 ボタン
------------------------------------------*/
/* ボタン小 */
.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;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  background-color: var(--color-white);
  color:var(--color-gray);
  border-color: var(--color-gray);
}
.btn-s:hover,
.btn-s:focus,
a.btn-s:hover,
a.btn-s:focus { 
  outline: none; 
  text-decoration: none;
  background-color: var(--color-reset-button);
  color:var(--color-white);
  cursor: pointer;
  border-color: var(--color-reset-button);
}

/* =========================================================
   with e連携（グループ連携ポータル）/ 全体スタイル
   - PC: サイドバーは fixed。開いている間のみ本文にマージン付与。
   - SP: 初期は閉。ハンバーガーで開閉。
   - 病院一覧とお知らせの幅は共通ルールで同期。
   - カードは 3→2→1 列、行内で高さ揃え。
   ========================================================= */

/* -------------------------------
   1) ベース
   ------------------------------- */
html, body { margin:0; padding:0; }

body{
  color: var(--color-text);
  line-height: 1.6;
  background: #fff;
  padding-bottom: 60px;
  font-family: "Noto Sans JP", sans-serif!important;  
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-link); text-decoration: none; }
a:hover{ color: var(--color-link-hover); text-decoration: underline; }

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

/* -------------------------------
   2) ヘッダ / ハンバーガー
   ------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 60px;
  background: var(--color-table-th);
  /*border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow);*/
}
.header-inner{
  position: relative;
  display:flex;
  align-items:center;
  height: 60px;
}
.site-header .brand h1{
  position: absolute;
  left: 70px; 
  top: 4px;
  margin:0; 
  padding:14px 0;
  font-size: 18px; 
  font-weight: 600;
  color: var(--color-main);
  line-height: 1.3;
}

@media screen and (max-width: 400px) {
  .site-header .brand h1{
    font-size: 100%!important;
    position: absolute;
    left: 62px; 
    top: 5px;
  }
}

@media screen and (max-width: 350px) {
  .site-header .brand h1{
    font-size: 100%!important;
    position: absolute;
    left: 62px; 
    top: -5px;
  }
}

/* ハンバーガー */
#menu-toggle{
  position:absolute; 
  top:4px; 
  left:4px;
  width:52px; 
  height:52px; 
  padding:0; 
  margin:0;
  display:block;
  background:var(--color-main);
  border:1px solid var(--color-table-th);
  border-radius:6px;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
}

/* 3本線：中央基準で絶対配置 */
#menu-toggle .hamburger__bar,
#menu-toggle::before,
#menu-toggle::after{
  content:"";
  position:absolute;
  left:50%; 
  top:50%;
  width:30px; 
  height:2px;
  background:#fff;
  border-radius:3px;
  transform: translate(-50%, -50%);     /* 中央へ */
}
#menu-toggle::before{ transform: translate(-50%,-50%) translateY(-8px); } /* 上 */
#menu-toggle .hamburger__bar{ transform: translate(-50%,-50%); }          /* 中 */
#menu-toggle::after { transform: translate(-50%,-50%) translateY( 8px); }  /* 下 */

/* フォーカス */
#menu-toggle:focus{
  outline:3px solid color-mix(in srgb, var(--color-main) 20%, transparent);
}

/* 念のため：他スタイルの疑似要素干渉を無効化 */
#menu-toggle::marker,
#menu-toggle *::before,
#menu-toggle *::after{ content:none; }

/* -------------------------------
   3) レイアウト共通（サイドバー + メイン）
   ------------------------------- */
.layout-wrap {
  position: relative;
  margin: 0;
  padding: 0;
}

/* 全ページ共通の .layout 基本設定 */
.layout {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;  /* 並び崩れ防止 */
  margin: 0;
  padding: 0;
}

/* このページ（ログイン＋病院一覧）用：
   サイドバー＋メインを縦方向に積んで中央寄せ */
.layout-wrap .layout {
  flex-direction: column;
  align-items: center;
}

/* メイン枠（#contents / #contents-list）共通 */
.layout-wrap #contents,
.layout-wrap #contents-list {
  width: 94%;
  max-width: 1200px;  /* 既存の wrap-max に合わせる想定 */
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

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

/* 画面幅が 1200〜1500px のとき、中央の枠を少し狭くする */
@media (min-width: 1000px) and (max-width: 1300px) {
  .layout-wrap #contents-list {
    max-width: 1000px; /* ← ここを好みで調整（1050〜1150くらいが自然） */
    width: 86%;        /* ％指定で柔軟に */
  }
}

/* 画面幅が 1500px 以上のときは、さらに余白を作る */
@media (min-width: 1300px) {
  .layout-wrap #contents-list {
    max-width: 1000px; 
    width: 70%;
  }
}

/* レスポンシブ（幅980px以下） */
@media (max-width: 980px) {
  .layout-wrap #contents,
  .layout-wrap #contents-list {
    width: 80%;
  }
}

/* レスポンシブ（幅680px以下） */
@media (max-width: 680px) {
  .layout-wrap #contents,
  .layout-wrap #contents-list {
    width: 90%;
    margin-top: 60px;
  }
}

/* ログイン情報エリア（右上固定）*/
.login-aria {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;       /* 縦中央 */
  gap: 12px;                 /* 文言とボタンの間隔 */
  padding: 8px 12px;
}

.login-membar {
  font-size: 13px;
  color: #333;
  white-space: nowrap; /* 折り返し防止 */
}

.login-aria .btn-s {
  position: static;      /* ←重要：absolute解除 */
  padding: 4px 10px;
  font-size: 11px;
}

.layout-wrap a.btn-s:after {
  content: "";
  display: block;
  clear: both;
}

/* -------------------------------
   ログインページ専用 (#contents / .other-links)
   ※ 病院一覧だけならこのブロックはあっても動作には影響しません
   ------------------------------- */
/* ログインメイン枠 (#contents) */
.layout > #contents {
  flex: 0 1 auto;                 /* 伸ばさない */
  width: min(500px, 80%);         /* PC：最大500px／それまでは80% */
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  box-sizing: border-box;
}

/* スマホ（〜767px）では 90% 幅 */
@media (max-width: 767px) {
  .layout > #contents {
    width: 90%;
    max-width: none;
    margin-top: 0;
  }
}

/* 連携医療機関DLエリア .other-links を1段占有させる */
.layout > .other-links {
  flex: 0 0 100%;
  width: 80%;
  margin: 24px auto 0;
  padding-inline: clamp(12px, 3vw, 24px);
  display: block;
  text-align: left;
}

/* -------------------------------
   4) サイドバー（PCでも fixed）
   - data-open=false: 左に隠す
   - data-open=true : 画面内に表示
   ------------------------------- */
.sidebar{
  position: fixed;
  top: 60px;             /* ヘッダ高さと合わせる */
  left: 8px;
  z-index: 1100;
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top:none;
  border-radius: 0;
  padding: 12px;
  box-shadow: var(--shadow);

  transform: translateX(calc(-1 * var(--sidebar-w)));
  transition: transform .25s ease;
}
.sidebar[data-open="true"]{
  transform: translateX(0);
}

/* サイドナビ */
.side-nav ul{ list-style:none; 
  margin: 12px 0; 
  padding: 0; 
}
.side-nav li{ 
  border-bottom: 1px solid var(--color-line); 
  color: var(--color-text);
}
.side-nav a{
  display:block; 
  padding:10px 8px;
  color: var(--color-text);
  text-decoration: none;
}
.side-nav a:hover{ 
  color: var(--color-link-hover); 
  text-decoration: underline; 
}

/* -------------------------------
   5) メインコンテンツ幅（病院一覧 / お知らせで共通）
   ------------------------------- */
/* カード側ラッパー：中央寄せ */
#contents-list{
  width: min(var(--wrap-max, 1000px), var(--wrap-vw, 86vw));
  margin: 0 auto;
  padding-inline: clamp(12px, 3vw, 24px);
  box-sizing: border-box;
}

/* お知らせ：カードと完全に同じ幅・位置 */
.news-section{
  width: 100%;
  margin: 40px 0 0;
  padding-inline: 0;            /* 親(#contents-list)の左右余白をそのまま使う */
  box-sizing: border-box;
}


/* -------------------------------
   6) 病院一覧（グリッド + カード：flex版）
   ・PC：できるだけ3列を維持（幅は自動縮小）
   ・767px以下：2列
   ・640px以下：1列（80vw/中央）
   ------------------------------- */
.hp-title{
  margin: 0 auto 14px auto;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-main);
  text-align: center;
}
@media (max-width: 767px){
  .hp-title{
    font-size: 16px;
 }
}

/* 親：gap を変数化して再利用（横幅計算に使う） */
.hp-grid{
  --gap: clamp(12px, 2.2vw, 22px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--gap);
}

/* PCだけ少し締める */
@media (min-width: 1024px){
  .hp-grid{
    --gap: clamp(12px, 1.8vw, 20px);
  }
}


/* 子：3列幅を明示（= 100% - gap×2 を3分割）＋最小幅で下限を作る */
.hp-card{
  flex: 0 1 calc((100% - 2 * var(--gap)) / 3); /* 3列の理論幅 */
  max-width: calc((100% - 2 * var(--gap)) / 3); /* 行内で同幅に */
  min-width: 200px;

  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 12px 12px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

/* 画面幅が 1100px 以下になったら 2列にする */
@media (max-width: 980px){
  .hp-card{
    flex: 0 1 calc((100% - var(--gap)) / 2);
    max-width: calc((100% - var(--gap)) / 2);
  }
}

/* スマホ（640px以下）は 1列＋中央寄せ＆少し細め */
@media (max-width: 640px){
  .hp-grid{
    justify-content: center;
  }
  .hp-card{
    flex: 0 1 300px;   /* カードの目安幅。300〜340pxくらいお好みで */
    max-width: 84vw;   /* 画面幅の90%を上限に */
  }
}

/* ロゴ */
.hp-card h3{
  font-weight: 400;
  font-size: 1em;
  margin: 0 auto;
  padding: 0;
}
.hp-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 60px;
}
.hp-logo img{
  display: block;
  max-width: 96%;
  max-height: 70px;
  height: auto!important;
}

/* 建物写真（レイアウトシフト防止） */
.hp-building{
  position: relative;
  aspect-ratio: 16/9;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
}
.hp-building img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*@media (max-width: 640px){
  .hp-building {
    display: none;
  }
}*/

@media (max-width: 640px){
  .hp-building {
    aspect-ratio: 3 / 1;
    border: none;
    box-shadow: none;
  }
  .hp-building img {
    object-fit: cover;
    opacity: 0.9; 
  }
}

/* リンク行（下寄せ） */
.hp-links{
  margin: auto;
  margin-top: 8px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 14px;
  width: 100%;
}
.hp-links > h3 {
  /*border: 1px solid var(--color-line);*/
  padding: 3px;
}
.hp-link{
  color: var(--color-link);
}
.hp-link:hover{ 
  color: var(--color-link-hover); 
  text-decoration: underline; 
}
.hp-link--reserve{ 
  font-weight: 600; 
}
.hp-sep{ 
  color:#9aa0a6; 
  margin: 0 6px; 
}

/* 767px以下：2列（gap を考慮） */
@media (max-width: 767px){
  .hp-grid{ justify-content: center; gap: 20px; }
  .hp-card{
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    min-width: 0;                             /* 2列時は下限を解除 */
  }
}

/* 640px以下：1列（80vw/中央） */
@media (max-width: 640px){
  .hp-grid{ justify-content: center; }
  .hp-card{
    flex-basis: 70vw;
    max-width: 70vw;
    margin-inline: auto;
  }
}

/* -------------------------------
   7) お知らせアコーディオン（矢印付き）
   ------------------------------- */
.hp-title.news{ margin-top: 20px; }

.news-accordion{ list-style:none; margin:0; padding:0; }

/* 擬似要素の干渉を無効化（テーマ側の a::after など） */
.news-head::before,
.news-head::after{ content: none !important; }

/* タイトル行 */
.news-head{
  position: relative;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text); text-decoration: none;
  font-weight: 600;
  background: transparent;
}
.news-head:hover{ background: #f2f2fc; text-decoration: none;}
.news-head.is-open{ background: #f2f2fc; text-decoration: none;}
.news-head.is-open:hover{ background: #f2f2fc; text-decoration: none;}

.news-head__title{
  flex:1 1 auto; font-size: 15px; line-height:1.5; color: var(--color-text);
}

/* ▶（閉）／▼（開）をボーダーで表現 */
.news-arrow{
  flex: 0 0 auto; width:10px; height:10px;
  border-right: 2px solid var(--color-link);
  border-bottom: 2px solid var(--color-link);
  transform: rotate(-45deg);   /* ▶ */
  transition: transform .2s ease;
  margin-left: 8px;
}
.news-head.is-open .news-arrow{ transform: rotate(45deg); } /* ▼ */

/* 本文 */
.news-panel{
  padding: 6px 14px 16px;
  background: #fdfdff;
  font-size: 14px; line-height: 1.7;
  color: var(--color-gray);
  border-bottom: 1px solid var(--color-line);
  animation: slideDown .25s ease forwards;
}
.is-hidden{ display:none; }
@keyframes slideDown{ from{ opacity:0; transform: translateY(-6px);} to{ opacity:1; transform: none;} }

/* -------------------------------
   8) フッター（固定）
   ------------------------------- */
.site-footer {
  position: fixed; 
  left:0; 
  bottom:0; 
  width:100%;
  margin: 0;
  padding: 0;
  /*background-color: var(--color-white);*/
  /*border-top: 1px solid var(--color-line);*/
  /*box-shadow: var(--shadow);*/
  z-index: 100;
  font-size: 13px;
  color: #555;
  text-align: center;
  padding: 12px 5px 5px;
  line-height: 1.4;
}

.footer-inner {
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer-logo {
  height: 20px;
  width: auto;
  margin-right: 10px;
  vertical-align: middle;
}

.footer-operator a,
.footer-links a {
  color: #555;
  text-decoration: none;
}

.footer-operator a:hover,
.footer-links a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 4px;
  }
  .footer-logo {
    margin-bottom: 3px;
  }
  .footer-links {
    margin-top: 3px;
  }
}

/* -------------------------------
   9) ログインボックス
   ------------------------------- */
#contents {
  width: min(640px, 92%);
  margin: 0 auto 0;
  padding: 24px 16px 24px;
  background: var(--color-card);
  border: none;
  border-radius: var(--radius);
  text-align: center;
  /*box-shadow: var(--shadow);*/
  box-sizing: border-box;
}

/* スマホ時（767px以下）：もう少し狭く、上下に余白 */
@media (max-width: 767px) {
  #contents {
    width: 90%;
    padding: 24px 14px 20px;
  }
}

.message {
  margin: 0;
  padding: 20px 20px 10px 20px;
  display: block;
  pointer-events: none;
}

#contents h1{ 
  margin:0 0 6px; 
  font-size:20px; 
  color: var(--color-main); 
}
.layout h2{ 
  margin:0;
  font-size:17px;
  line-height: 1.3;
  font-weight: 500;
}

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

/* テーブル型ログインフォーム（PC） */
@media (min-width: 768px){
  .login-table{
    width:90%; 
    margin:0 auto 18px;
    /*border: 1px solid var(--color-line);*/
    border-color:  var(--color-line);
    border-collapse: collapse;
    padding-top: 44px;
  }
  .login-table th, 
  .login-table td {
    padding:10px 16px; 
    vertical-align:middle; 
    /*border: 1px solid var(--color-line);*/
      border-color:  var(--color-line);
  }
  .login-table th{
    width:36%; 
    text-align:left; 
    background: var(--color-table-th); 
    font-weight: 600;
  }
  .login-table td{ 
    width:64%; 
    background: var(--color-white); 
  }
}

/* テーブル型ログインフォーム（SP） */
@media (max-width: 767px){
  .login-table{ 
    width:94%; 
    margin:0 auto 18px;
    border-color:  var(--color-line);
  }
  .login-table tr{ 
    display:block; 
    width:100%; 
  }
  .login-table th{
    display:block; 
    width:100%; 
    background: var(--color-table-th); 
    border-color:  var(--color-line);
    font-size:96%; 
  }
  .login-table td{ 
    display:block; 
    width:100%; 
    background: var(--color-white); 
    border-color:  var(--color-line);
    font-size:96%; 
    padding-bottom:1em; 
  }
}

.submit{
  appearance:none; 
  border:none; 
  border-radius:4px;
  padding:8px 16px; 
  font-size:15px; 
  cursor:pointer;
  color:var(--color-white); 
  background: var(--color-main); 
  min-width:140px; 
  font-weight:500;
}

.submit:hover{ 
  filter: brightness(1.05); 
}
.submit:active{ 
  filter: brightness(0.97); 
}
.btn-ghost{
  color: var(--color-main)!important; 
  background:var(--color-white);
  border:1px solid var(--color-main)!important;
}
.btn-ghost:hover{ 
  background:color-mix(in srgb, var(--color-main) 8%, #fff)!important; 
}

/* -------------------------------
   10) 補助
   ------------------------------- */
.other-links {
  width: min(640px, 92%);
  margin: 30px auto 20px;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}
@media (max-width: 767px) {
  .other-links {
    width: 90%;
  }
}

.other-links li{ 
  margin: 3px 0; 
}

.other-links dt {
  margin: 3px 0;
  font-size:0.94rem;
  font-weight: 500;
  color: var(--color-main);
}
.other-links dd {
  margin: 3px 10px 3px 7px;
  display: inline;
}

@media (max-width: 767px){
  .other-links dd {
    display:block;
  }
}

/* リンク用 */
.other-links dd a {
  color: var(--color-link);
  text-decoration: none;
}
.other-links dd a:hover {
  text-decoration: underline;
}

.note{ 
  margin:30px 15px 15px 15px; 
  font-size:12px; 
  color:var(--color-text);
  text-align: left;
}

.helper-links{ 
  margin:8px 0 0 -20px; 
  font-size:14px; 
  text-align: left; 
  list-style-type: none;
  list-style-position:outside;
}

.helper-links a{ 
  color:var(--color-link); 
  text-decoration:none; 
}

.helper-links a:hover{ 
  color:var(--color-link-hover); 
  text-decoration:underline; 
} 

.displayblock {
  display: block;
}

.marginauto {
  margin: auto;
}

/*--------------------------------------- 
 テキスト指定 （インライン指定）
------------------------------------------*/
.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;}


/*--------------------------------------- 
 HEIGHT（インライン指定）
------------------------------------------*/
.h-100 {width:auto!important; height:100%!important;}
.h-97 {width:auto!important; height:97%!important;}
.h-95 {width:auto!important; height:95%!important;}
.h-90 {width:auto!important; height:90%!important;}
.h-85 {width:auto!important; height:85%!important;}
.h-80 {width:auto!important; height:80%!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;}
}