/* ========== THEME TOKENS ========== */
:root{
  --bg: #ffffff; --fg:#0f172a; --muted:#64748b;
  --primary:#09348B; --primary-ink:#ffffff; --ring:rgba(37,99,235,.25);
  --card:#ffffff; --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:18px; --gap:14px; --container:980px;
}

.toast {
  position: fixed;
  top:50%;
  background: #333;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  left:50%;
  transform: translateY(-50%) translateX(-50%); 
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 
}

.toast.show {
  opacity: 1;
}

.toast.ok {
  background: #2e7d32; /* 成功メッセージ用（緑） */
}

.toast.ng {
  background: #c62828; /* エラー用（赤） */
}


.userlist{
  max-height: 260px; overflow:auto; border:1px solid #e6e9ef; border-radius:10px; padding:8px;
  background:#fafbfc; font-size:14px;
  	display:flex;
	justify-content:flex-start;
	align-items: center;	
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.userlist .row{
  display: block;gap:10px; padding:6px 4px; border-bottom:1px dashed #eef1f6}
.userlist .row:last-child{border-bottom:none}
.userlist .uid{color:#667085; font-size:12px}


.btn-edit{
  margin-left:.5rem;padding:.45rem .7rem;border:1px solid #dfe3ea;background:#fff;
  border-radius:9999px;cursor:pointer;line-height:1;color:#0b3a82;
}
.btn-edit:hover{background:#0b3a82;color:#fff;border-color:#0b3a82}


.modal__panel{z-index: 9990;}
.modal__backdrop,
.modal{z-index: 9980;}
.modal[hidden]{display:none}
.modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5)}
.modal__panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(640px,92vw);background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);
  padding:10px;
  max-height:90vh;overflow:auto
}
.modal__panel form {
    gap:0;
}
.modal__panel .upper{
  	display:flex;
	justify-content:flex-start;
	align-items:flex-start;	
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.modal__panel .upper .frow{
  margin-right: 1em;
}

.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal__close{background:transparent;border:none;font-size:20px;cursor:pointer}
.frow{margin:12px 0}
.frow label{display:block;margin-bottom:6px;font-weight:600}
.frow input[type=text], .frow input[type=password]{width:100%;padding:.6rem;border:1px solid #cfd6e4;border-radius:10px}
.chk{display:flex;align-items:center;gap:8px}
.grid2{display:grid;grid-template-columns:1fr auto;gap:8px}
.help{font-size:12px;color:#667085;margin:.25rem 0 0}
.modal__foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.btn-primary{padding:.6rem 1rem;border-radius:9999px;border:1px solid #0b3a82;background:#0b3a82;color:#fff}
.modal__panel .btn-ghost{padding:.6rem 1rem;border-radius:9999px;border:1px solid #dfe3ea;background:#fff;color: #555;}
.msg{margin-top:8px;font-size:13px}


.theme-trail{
  --bg:#0b0f0c; --fg:#e6f1e8; --muted:#9fb3a6;
  --primary:#22c55e; --primary-ink:#03210e; --ring:rgba(34,197,94,.25);
  --card:#131913;
}
html,body{background:var(--bg);color:var(--fg);font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;}
a{color:inherit;text-decoration:none}
.mt-hero{padding:36px 16px;border-bottom:1px solid color-mix(in oklab, var(--fg) 10%, transparent)}
.mt-hero__inner{max-width:var(--container);margin:0 auto;text-align:center}
.mt-hero__logo{height:48px;vertical-align:middle;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.mt-hero__title{margin:8px 0 4px;font-size:clamp(24px,4vw,40px);letter-spacing:.02em}
.mt-hero__subtitle{margin:0 auto;max-width:720px;color:var(--muted);font-size:clamp(14px,2vw,16px)}

.mt-cta{max-width:var(--container);margin:18px auto;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--gap);padding:0px}
.mt-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 8px;border-radius:var(--radius);border:1px solid color-mix(in oklab, var(--fg) 12%, transparent);background:var(--card);box-shadow:var(--shadow);font-weight:700;transition:.18s ease;white-space:nowrap}
.mt-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.mt-btn:focus-visible{outline:0;box-shadow:0 0 0 6px var(--ring)}
.mt-btn--primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.mt-btn--ghost{background:transparent}
.mt-btn.mt-btn--primary{
    color: #ffffff;
}
a.mt-btn.mt-btn--ghost--primary{
    color: #ffffff;
    background-color:#09348B;
}
.mt-search{max-width:var(--container);margin:8px auto 6px;padding:24px 0}
.mt-search__form{display:grid;grid-template-columns:1.2fr .8fr .8fr auto;gap:var(--gap)}
.mt-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);background:var(--card);box-shadow:var(--shadow)}
.mt-list{max-width:var(--container);margin:8px auto 40px;padding:0 16px;list-style:none}
.mt-list li{padding:12px 0;border-bottom:1px dashed color-mix(in oklab, var(--fg) 14%, transparent);
display: flex;
  justify-content: space-between;
  align-items: center;
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.mt-list a{color:var(--primary);font-weight:600}

h2.sub{
    background-color: #95C04E;
    color: #ffffff;
    padding:4px 0.5em;
    font-size: 18px;
    font-weight: bold;
}
section{
    padding:0;
}
  main.app{
    padding: 0;
  }

@media (max-width:800px){
  .mt-cta{grid-template-columns:1fr 1fr}
  .mt-search__form{grid-template-columns:1fr;gap:10px}
}


/* === Mobile first tweaks === */
@media (max-width: 480px){

section{
    padding:0;
}

  .mt-hero{padding:20px 12px}
  .mt-hero__logo{height:40px}
  .mt-hero__subtitle{font-size:13px;opacity:.9}

  /* CTA：2列でデカく、タップしやすく */
  .mt-cta{
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 12px;
    margin:12px auto 8px;
  }
  .mt-btn{padding:7px 5px;font-size:15px;border-radius:14px}
  .mt-btn--primary{font-weight:800}

  /* 検索：1列に縦積み＋親指届く高さ */
  .mt-search{padding:0 12px;margin:6px auto}
  .mt-search__form{
    grid-template-columns:1fr;
    gap:10px;
  }
  .mt-input{padding:14px 12px;font-size:16px; /* iOSズーム防止 */ }

  /* リスト：指で狙える高さと間隔 */
  .mt-list{padding:0 12px;margin:6px auto 28px}
  .mt-list li{padding:14px 0}
  .mt-list a{display:block;padding:6px 2px}

  /* iOSセーフエリア */
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* 44px 以上のタップ領域を保証（どの幅でも効かせる保険） */
.mt-btn, .mt-input, .mt-list a{min-height:20px}
.mt-list a i{color: #999;;margin-left: 5px;}
.mt-list li strong{
  display:block;
  padding:6px 2px;
  font-weight: bold;
}
.mt-list strong i{color: #999;;margin-left: 5px;}

/* ===== Pager (mobile-first) ===== */
.pager{
  display:flex;
  flex-wrap:wrap;              /* 狭い画面で折り返す */
  gap:3px;
  align-items:center;
  justify-content:center;
  margin:1em 0;
  font-size:14px;
  line-height:1;
  --pager-fg:#0b3a82;          /* お好みで */
  --pager-bg:#fff;
  --pager-border:#dfe3ea;
  --pager-hover-bg:#0b3a82;
  --pager-hover-fg:#fff;
  --pager-disabled:#b8c0cc;
}

.pager a,
.pager span.pager__info,
.pager span.is-current,
.pager span.is-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;              /* タップ幅確保 */
  height:30px;                 /* タップ高さ確保 */
  padding:0 7px;
  border-radius:9999px;        /* ピル型 */
  border:1px solid var(--pager-border);
  background:var(--pager-bg);
  color:var(--pager-fg);
  text-decoration:none;
  user-select:none;
}

/* ボタン */
.pager a{
  transition:background-color .15s, color .15s, box-shadow .15s, border-color .15s;
}
.pager a:hover{
  background:var(--pager-hover-bg);
  color:var(--pager-hover-fg);
  border-color:var(--pager-hover-bg);
}
.pager a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(11,58,130,.25);
}

/* 現在ページ（span推奨） */
.pager .is-current{
  background:var(--pager-hover-bg);
  color:var(--pager-hover-fg);
  border-color:var(--pager-hover-bg);
  cursor:default;
}

/* 無効リンク（spanにする or aにこのclassを付与してpointer停止） */
.pager span.is-disabled{
  color:var(--pager-disabled);
  border-color:var(--pager-border);
  background:var(--pager-bg);
  pointer-events:none;
  opacity:.7;
  color: #999;
}

/* 「ページ 2 / 10」みたいな表示は中立デザインに */
.pager .pager__info{
  padding:0 7px;
  border:none;
  background:transparent;
  min-width:unset;
  height:auto;
}

/* ちょい大画面でゆとり */
@media (min-width:640px){
  .pager{ gap:7px; }
  .pager a,
  .pager span.pager__info,
  .pager span.is-current,
  .pager span.is-disabled{
    min-width:35px;
    height:35px;
    padding:0 1em;
    font-size:15px;
  }
  
}

.frow.search_chk .radio-group{
  	display:flex;
	justify-content:flex-start;
	align-items: center;
}

/*---------------------------------------------*
* width 640px
*----------------------------------------------*/
@media screen and (max-width:640px) {

  .modal__panel .upper .frow{
  margin-right:0;
  width: 100%;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


.mt-list a {
width: 100%;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mt-list span{
width: 100%;
text-align: right;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


}
/* width 640px end --------------------------------------------*/