@charset "utf-8";

:root {
  /** global sizing variables */
  --menu-width: 160px;
  --closed-menu-width: 40px;
  --header-height: 50px;
  --scrollbar-width: 16px;
  --sidebar-width: 242px;
  /* jsで制御 */
  --menu-toggle-transition-duration: 0s;
  @media screen and (max-width: 1080px){
    --sidebar-width: 216px;
  }


  /*tailwind css colors*/
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-red-900: oklch(39.6% .141 25.723);
  --color-red-950: oklch(25.8% .092 26.042);
  --color-orange-50: oklch(98% .016 73.684);
  --color-orange-100: oklch(95.4% .038 75.164);
  --color-orange-200: oklch(90.1% .076 70.697);
  --color-orange-300: oklch(83.7% .128 66.29);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-orange-800: oklch(47% .157 37.304);
  --color-orange-900: oklch(40.8% .123 38.172);
  --color-orange-950: oklch(26.6% .079 36.259);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-amber-700: oklch(55.5% .163 48.998);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-amber-900: oklch(41.4% .112 45.904);
  --color-amber-950: oklch(27.9% .077 45.635);
  --color-yellow-50: oklch(98.7% .026 102.212);
  --color-yellow-100: oklch(97.3% .071 103.193);
  --color-yellow-200: oklch(94.5% .129 101.54);
  --color-yellow-300: oklch(90.5% .182 98.111);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-yellow-600: oklch(68.1% .162 75.834);
  --color-yellow-700: oklch(55.4% .135 66.442);
  --color-yellow-800: oklch(47.6% .114 61.907);
  --color-yellow-900: oklch(42.1% .095 57.708);
  --color-yellow-950: oklch(28.6% .066 53.813);
  --color-lime-50: oklch(98.6% .031 120.757);
  --color-lime-100: oklch(96.7% .067 122.328);
  --color-lime-200: oklch(93.8% .127 124.321);
  --color-lime-300: oklch(89.7% .196 126.665);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-lime-500: oklch(76.8% .233 130.85);
  --color-lime-600: oklch(64.8% .2 131.684);
  --color-lime-700: oklch(53.2% .157 131.589);
  --color-lime-800: oklch(45.3% .124 130.933);
  --color-lime-900: oklch(40.5% .101 131.063);
  --color-lime-950: oklch(27.4% .072 132.109);
  --color-green-50: oklch(98.2% .018 155.826);
  --color-green-100: oklch(96.2% .044 156.743);
  --color-green-200: oklch(92.5% .084 155.995);
  --color-green-300: oklch(87.1% .15 154.449);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-green-800: oklch(44.8% .119 151.328);
  --color-green-900: oklch(39.3% .095 152.535);
  --color-green-950: oklch(26.6% .065 152.934);
  --color-emerald-50: oklch(97.9% .021 166.113);
  --color-emerald-100: oklch(95% .052 163.051);
  --color-emerald-200: oklch(90.5% .093 164.15);
  --color-emerald-300: oklch(84.5% .143 164.978);
  --color-emerald-400: oklch(76.5% .177 163.223);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --color-emerald-800: oklch(43.2% .095 166.913);
  --color-emerald-900: oklch(37.8% .077 168.94);
  --color-emerald-950: oklch(26.2% .051 172.552);
  --color-teal-50: oklch(98.4% .014 180.72);
  --color-teal-100: oklch(95.3% .051 180.801);
  --color-teal-200: oklch(91% .096 180.426);
  --color-teal-300: oklch(85.5% .138 181.071);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-teal-500: oklch(70.4% .14 182.503);
  --color-teal-600: oklch(60% .118 184.704);
  --color-teal-700: oklch(51.1% .096 186.391);
  --color-teal-800: oklch(43.7% .078 188.216);
  --color-teal-900: oklch(38.6% .063 188.416);
  --color-teal-950: oklch(27.7% .046 192.524);
  --color-cyan-50: oklch(98.4% .019 200.873);
  --color-cyan-100: oklch(95.6% .045 203.388);
  --color-cyan-200: oklch(91.7% .08 205.041);
  --color-cyan-300: oklch(86.5% .127 207.078);
  --color-cyan-400: oklch(78.9% .154 211.53);
  --color-cyan-500: oklch(71.5% .143 215.221);
  --color-cyan-600: oklch(60.9% .126 221.723);
  --color-cyan-700: oklch(52% .105 223.128);
  --color-cyan-800: oklch(45% .085 224.283);
  --color-cyan-900: oklch(39.8% .07 227.392);
  --color-cyan-950: oklch(30.2% .056 229.695);
  --color-sky-50: oklch(97.7% .013 236.62);
  --color-sky-100: oklch(95.1% .026 236.824);
  --color-sky-200: oklch(90.1% .058 230.902);
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-sky-400: oklch(74.6% .16 232.661);
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-sky-600: oklch(58.8% .158 241.966);
  --color-sky-700: oklch(50% .134 242.749);
  --color-sky-800: oklch(44.3% .11 240.79);
  --color-sky-900: oklch(39.1% .09 240.876);
  --color-sky-950: oklch(29.3% .066 243.157);
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-100: oklch(93.2% .032 255.585);
  --color-blue-200: oklch(88.2% .059 254.128);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-blue-800: oklch(42.4% .199 265.638);
  --color-blue-900: oklch(37.9% .146 265.522);
  --color-blue-950: oklch(28.2% .091 267.935);
  --color-indigo-50: oklch(96.2% .018 272.314);
  --color-indigo-100: oklch(93% .034 272.788);
  --color-indigo-200: oklch(87% .065 274.039);
  --color-indigo-300: oklch(78.5% .115 274.713);
  --color-indigo-400: oklch(67.3% .182 276.935);
  --color-indigo-500: oklch(58.5% .233 277.117);
  --color-indigo-600: oklch(51.1% .262 276.966);
  --color-indigo-700: oklch(45.7% .24 277.023);
  --color-indigo-800: oklch(39.8% .195 277.366);
  --color-indigo-900: oklch(35.9% .144 278.697);
  --color-indigo-950: oklch(25.7% .09 281.288);
  --color-violet-50: oklch(96.9% .016 293.756);
  --color-violet-100: oklch(94.3% .029 294.588);
  --color-violet-200: oklch(89.4% .057 293.283);
  --color-violet-300: oklch(81.1% .111 293.571);
  --color-violet-400: oklch(70.2% .183 293.541);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-violet-600: oklch(54.1% .281 293.009);
  --color-violet-700: oklch(49.1% .27 292.581);
  --color-violet-800: oklch(43.2% .232 292.759);
  --color-violet-900: oklch(38% .189 293.745);
  --color-violet-950: oklch(28.3% .141 291.089);
  --color-purple-50: oklch(97.7% .014 308.299);
  --color-purple-100: oklch(94.6% .033 307.174);
  --color-purple-200: oklch(90.2% .063 306.703);
  --color-purple-300: oklch(82.7% .119 306.383);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-500: oklch(62.7% .265 303.9);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-purple-700: oklch(49.6% .265 301.924);
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-purple-900: oklch(38.1% .176 304.987);
  --color-purple-950: oklch(29.1% .149 302.717);
  --color-fuchsia-50: oklch(97.7% .017 320.058);
  --color-fuchsia-100: oklch(95.2% .037 318.852);
  --color-fuchsia-200: oklch(90.3% .076 319.62);
  --color-fuchsia-300: oklch(83.3% .145 321.434);
  --color-fuchsia-400: oklch(74% .238 322.16);
  --color-fuchsia-500: oklch(66.7% .295 322.15);
  --color-fuchsia-600: oklch(59.1% .293 322.896);
  --color-fuchsia-700: oklch(51.8% .253 323.949);
  --color-fuchsia-800: oklch(45.2% .211 324.591);
  --color-fuchsia-900: oklch(40.1% .17 325.612);
  --color-fuchsia-950: oklch(29.3% .136 325.661);
  --color-pink-50: oklch(97.1% .014 343.198);
  --color-pink-100: oklch(94.8% .028 342.258);
  --color-pink-200: oklch(89.9% .061 343.231);
  --color-pink-300: oklch(82.3% .12 346.018);
  --color-pink-400: oklch(71.8% .202 349.761);
  --color-pink-500: oklch(65.6% .241 354.308);
  --color-pink-600: oklch(59.2% .249 .584);
  --color-pink-700: oklch(52.5% .223 3.958);
  --color-pink-800: oklch(45.9% .187 3.815);
  --color-pink-900: oklch(40.8% .153 2.432);
  --color-pink-950: oklch(28.4% .109 3.907);
  --color-rose-50: oklch(96.9% .015 12.422);
  --color-rose-100: oklch(94.1% .03 12.58);
  --color-rose-200: oklch(89.2% .058 10.001);
  --color-rose-300: oklch(81% .117 11.638);
  --color-rose-400: oklch(71.2% .194 13.428);
  --color-rose-500: oklch(64.5% .246 16.439);
  --color-rose-600: oklch(58.6% .253 17.585);
  --color-rose-700: oklch(51.4% .222 16.935);
  --color-rose-800: oklch(45.5% .188 13.697);
  --color-rose-900: oklch(41% .159 10.272);
  --color-rose-950: oklch(27.1% .105 12.094);
  --color-slate-50: oklch(98.4% .003 247.858);
  --color-slate-100: oklch(96.8% .007 247.896);
  --color-slate-200: oklch(92.9% .013 255.508);
  --color-slate-300: oklch(86.9% .022 252.894);
  --color-slate-400: oklch(70.4% .04 256.788);
  --color-slate-500: oklch(55.4% .046 257.417);
  --color-slate-600: oklch(44.6% .043 257.281);
  --color-slate-700: oklch(37.2% .044 257.287);
  --color-slate-800: oklch(27.9% .041 260.031);
  --color-slate-900: oklch(20.8% .042 265.755);
  --color-slate-950: oklch(12.9% .042 264.695);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);
  --color-gray-950: oklch(13% .028 261.692);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% .001 286.375);
  --color-zinc-200: oklch(92% .004 286.32);
  --color-zinc-300: oklch(87.1% .006 286.286);
  --color-zinc-400: oklch(70.5% .015 286.067);
  --color-zinc-500: oklch(55.2% .016 285.938);
  --color-zinc-600: oklch(44.2% .017 285.786);
  --color-zinc-700: oklch(37% .013 285.805);
  --color-zinc-800: oklch(27.4% .006 286.033);
  --color-zinc-900: oklch(21% .006 285.885);
  --color-zinc-950: oklch(14.1% .005 285.823);
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-stone-50: oklch(98.5% .001 106.423);
  --color-stone-100: oklch(97% .001 106.424);
  --color-stone-200: oklch(92.3% .003 48.717);
  --color-stone-300: oklch(86.9% .005 56.366);
  --color-stone-400: oklch(70.9% .01 56.259);
  --color-stone-500: oklch(55.3% .013 58.071);
  --color-stone-600: oklch(44.4% .011 73.639);
  --color-stone-700: oklch(37.4% .01 67.558);
  --color-stone-800: oklch(26.8% .007 34.298);
  --color-stone-900: oklch(21.6% .006 56.043);
  --color-stone-950: oklch(14.7% .004 49.25);
  --color-black: #000;
  --color-white: #fff;


  /* ui colors */
  --color-info : #4c9cba;
  --color-info-light : #CFE9FD;
  --color-info-dark : #137397;
  --color-success : #5cb85c;
  --color-success-light : #daf7d9;
  --color-success-dark : #73a839;
  --color-warning : #f0ad4e;
  --color-warning-light : #fcf8e3;
  --color-warning-dark : #dd5600;
  --color-danger : #e15d4a;
  --color-danger-light : #fff3f1;
  --color-danger-dark : #da373e;



  /* theme color */
  /*--color-theme: #f6ac19;*/
  /*--color-theme-light: #ffeecc;*/

  /*--color-base-300: #a3a2a0;*/
  /*--color-base-200: #e9e7e6;*/
  /*--color-base-100: #f4f2f1;*/
  /*--color-base-50: #fbf9f8;*/

  /*--color-base-400: var(--color-gray-400);*/
  /*--color-base-300: var(--color-gray-300);*/
  /*--color-base-200: var(--color-gray-200);*/
  /*--color-base-100: var(--color-gray-100);*/
  /*--color-base-50: var(--color-gray-50);*/

  --color-base-50: oklch(97.14% .002 252.839);
  --color-base-100: oklch(95.0% .003 264.542);
  --color-base-200: oklch(90.1% .006 264.531);
  --color-base-300: oklch(87.1% .01 258.338);
  --color-base-400: oklch(70.7% .022 261.325);

  --color-text: #141414;
  --color-text-lighter: #444;


  /*--color-base-400: var(--color-neutral-500);*/
  /*--color-base-300: var(--color-neutral-400);*/
  /*--color-base-200: var(--color-neutral-300);*/
  /*--color-base-100: var(--color-neutral-200);*/
  /*--color-base-50: var(--color-neutral-100);*/


  /** break pointes */
  /*--breakpoint-sm: 640px;*/
  /*--breakpoint-md: 768px;*/
  /*--breakpoint-lg: 1024px;*/
  /*--breakpoint-xl: 1280px;*/
  /*--breakpoint-2xl: 1536px;*/

}

/* テーマカラー用のルートクラス */


:root.theme-blue {
  --color-theme: var(--color-blue-500);
  --color-theme-light: var(--color-blue-100);
}

:root.theme-sky {
  --color-theme: var(--color-sky-500);
  --color-theme-light: var(--color-sky-100);
}

:root.theme-lime {
  --color-theme: var(--color-lime-500);
  --color-theme-light: var(--color-lime-100);
}

:root.theme-green {
  --color-theme: var(--color-green-500);
  --color-theme-light: var(--color-green-100);
}

:root.theme-emerald {
  --color-theme: var(--color-emerald-500);
  --color-theme-light: var(--color-emerald-100);
}

:root.theme-indigo {
  --color-theme: var(--color-indigo-400);
  --color-theme-light: var(--color-indigo-100);
}

:root.theme-purple {
  --color-theme: var(--color-purple-400);
  --color-theme-light: var(--color-purple-100);
}

:root.theme-rose {
  --color-theme: var(--color-rose-400);
  --color-theme-light: var(--color-rose-100);
}

:root.theme-teal {
  --color-theme: var(--color-teal-400);
  --color-theme-light: var(--color-teal-100);
}

:root.theme-amber {
  --color-theme:  #f6ac19;
  --color-theme-light: #ffeecc;
}


:root.theme-yellow {
  --color-theme: var(--color-yellow-400);
  --color-theme-light: var(--color-yellow-100);
}

:root.theme-cyan {
  --color-theme: var(--color-cyan-500);
  --color-theme-light: var(--color-cyan-100);
}


:root.theme-indigo {
  --color-theme: var(--color-indigo-500);
  --color-theme-light: var(--color-indigo-100);
}

:root.theme-pink {
  --color-theme: var(--color-pink-400);
  --color-theme-light: var(--color-pink-100);
}

:root.theme-violet {
  --color-theme: var(--color-violet-400);
  --color-theme-light: var(--color-violet-100);
}

:root.theme-stone {
  --color-theme: var(--color-stone-500);
  --color-theme-light: var(--color-stone-200);
}

:root.theme-slate {
  --color-theme: var(--color-slate-700);
  --color-theme-light: var(--color-slate-200);
}

/** util */
.text-danger {
  color: var(--color-danger);
}



html {
  color: var(--color-text);

  a {
    color: var(--color-info-dark)
  }
}

body:has(.is-menu-closed) {
  --menu-width: var(--closed-menu-width);
}

@media print {
  :root {
    --menu-width: 0px;
    --closed-menu-width: 0px;
    --header-height: 0px;
  }

  html {
    color: #000;

    a {
      color: #000;
    }
  }
  #wrapper {
    width: 100%;
  }
  #page_title {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    h2 {
      padding: 0 !important;
    }

  }
  .dataTable {
    margin: 0 !important;
    width: 100% !important;
    contain: none !important;
    /*max-width: fit-content !important;;*/

    td, th {
      white-space: normal !important;
      word-break: break-all !important;
      overflow-wrap: break-word !important;
      padding: 4px 5px !important;
    }
  }
  .dataTableWrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    body:has(.menu) &,
    body:has(.is-menu-closed) &,
    .is-fixed-list &,
    .is-fixed-list:has(.is-menu-closed) & {
      width: 100% !important;
    }
  }
  #main {
    padding: 4px !important;
    .dataTable {
      width: 100% !important;
    }
    > div {
      padding: 0 !important;
    }

  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  #wrapper,
  #full-width-wrapper {
    padding: 0!important;
    margin: 0 !important;
    width: 100% !important;
  }
  #fixed_area {
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #fixed_area #header {
    display: none!important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
  }
  .dataTableScroller {
    display: none!important;
  }
}

.cake-sql-log {
  display: none;
}

/* =========================================================

全ページ共通のスタイルを定義

01. basic layout
02. header
03. menu_tab
04. nav
05. page_title
06. footer1
07. button
08. error
09. list
10. pager
11. dataTable
12. message box
13. fixed_btn_area
14. sidenavi

========================================================= */

/* 01.basic layout
--------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}


#wrapper {
  height: 100%;
  padding: 0;
  padding-left: var(--menu-width);
  margin: 0 auto;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition-property: padding-left;
  transition-duration: var(--menu-toggle-transition-duration);

  &.is-fixed-list {
    width: 100%;
    overflow: auto;
    scrollbar-width: none;
  }
}
@media screen and (max-width: 1024px) {

}

#full-width-wrapper {
  height: 100%;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}


/*-- z-index---*/
#header {
  z-index: 34;
}

#fixed_area {
  z-index: 32;
}

.menu {
  z-index: 35;
}

#menu_inner {
  z-index: 20;
}

.menu ul.tab li span.arrow {
  z-index: 101;
}

.menu #menu_inner ul ul.dropMenu {
  z-index: 102;
}

#page_title {
  z-index: 19;
}

#footer {
  z-index: 5;
}

#msgBox {
  z-index: 31;
}

/*-- 基本固定エリア（ヘッダ）--*/
#fixed_area {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: var(--menu-width);
  box-sizing: border-box;
  width: 100%;
  transition-property: padding-left;
  transition-duration: var(--menu-toggle-transition-duration);

}

#fixed_area.full-width-fixed-area {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  z-index: 33;
  left: 0;
  box-sizing: border-box;
  padding-top: 0;
  padding-left: 0;
}

#fixed_area.full-width-fixed-area #header {
  box-shadow: none;
  position: static;
  box-sizing: content-box;
  background-color: #fff;
}

#fixed_area.full-width-fixed-area #header_inner {
  display: block;
  flex: 1;

}

#fixed_area.full-width-fixed-area #header_inner #title_area {
  position: absolute;
  top: 16px;
  width: auto;
  left: 30%;
}

#main {
  padding-top: var(--header-height);
  position: relative;
  /*display: block;*/
  #full-width-wrapper & {
    padding-top: 0;
  }
  #children_list & {
    padding-top: 0;
  }
  &.is-popup {
    padding-top: 0;
  }
  .enji-popup-body & {
    padding-top: 0;
  }
}

#main > div {
  padding: 20px 16px;
  margin: 0;
  box-sizing: border-box;
}

.top-main-inner {
  max-width: 1500px;
}

/*-- 基本固定エリア（フッタ）--*/
#footer {
  padding: 32px 0 24px;
  color: #888;
  &::before {
    content: '';
    display: block;
    clear: both;
  }
  p {
    text-align: center;
  }
}

/*-- スクロールエリア --*/
#news {
  background: #fff;
  margin: 0 10px;
  /*overflow: hidden;*/
  padding-top: 0; /*padding-bottom:37px;*/
}

#edit {
  margin: 0 0 0 10px;
  padding-top: 10px; /*padding-bottom:37px;*/
  width: 100%;
  max-width: 1280px;
}

#mainBox #edit {
  margin: 0;
  padding: 0;
}

#users {
  overflow: hidden;
  padding-top: 14px;
}

#mail, #attendance {
  background: #fff;
  margin: 0 5px;
  /*overflow: hidden;*/
  padding-top: 0; /*padding-bottom:37px; */
}

#container {
  width: auto;
}

div.wordwrap {
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP Printers */
  word-break: break-all;
}

p.sousaTxt {
  color: #666;
  font-size: 93%;
  margin-top: 3px;
}

/* 02.header
--------------------------------------------------------- */
#header {
  background: var(--color-base-50);
  /*background-color: var(--color-theme-light);*/
  box-sizing: border-box;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  .close-button {
    display: none;
    body:has(.menu-config) & {
      display: block;
    }
  }

}

.header-search {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left {
  display: flex;
  gap: 8px;
  padding-left: 8px;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.hamburger-button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 36px;
  height: 32px;
  padding: 8px;

  body:has(.menu-config) & {
    display: none;
  }

  span {
    display: block;
    height: 2px;
    border-radius: 2px;
    width: 100%;
    background-color: var(--color-theme);
  }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-title {
  color: #444;
  font-size: 14px;
  /*border-left: 3px solid var(--color-theme);*/
  /*padding-left: 8px;*/
}

.school-year {
  border-radius: 100px;
  white-space: nowrap;
  padding: 2px;
  padding-left: 6px;
  display: flex;
  color: var(--color-text);
  background-color: var(--color-base-100);
  align-items: center;
  gap: 2px;
  /*body:has(.menu-config) & {*/
  /*  display: none;*/
  /*}*/
}

.school-year a {
  text-decoration: none;
}

.school-year__change-button {
  font-size: 11px;
  display: block;
  color: white;
  border-radius: 100px;
  white-space: nowrap;
  padding: 1px 6px;
  background-color: var(--color-theme);
  cursor: pointer;
  text-decoration: none;
}

.login-info {
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-facility {
  display: flex;
  gap: 4px;
  font-size: 12px;
  align-items: center;
}



.login-facility-name {
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}

.login-facility-info {
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  padding: 1px 4px;
  background-color: var(--color-base-100);

  /*&.is-system-type-5 {*/
  /*  color: var(--color-info);*/
  /*}*/
  /*&.is-system-type-6 {*/
  /*  color: var(--color-success);*/
  /*}*/
}

.login-facility-id {
  padding: 0 2px;
}


.login-facility-plan {
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  padding: 0px 2px;
  display: inline-block;
  color: white;
  text-align: center;
  &.is-plan-light {
    background-color: #61B635;
  }
  &.is-plan-standard {
    background-color: #3CB7EB;
  }
  /*padding: 1px 6px;*/
  /*background-color: var(--color-theme-light);*/
}

.login-user-name {
  text-align: right;
  margin-top: 1px;
  font-size: 11px;
  color: #777;
}

.header-env {
  font-size: 100%;
  border-radius: 4px;
  background-color: var(--color-warning);
  color: white;
  padding: 4px 8px;
  font-weight: normal;
  font-weight: bold;
  top: 8px;
  left: 50%;
  white-space: nowrap;
  &.is-staging {
    background-color: var(--color-success);
  }
  &.is-review {
    background-color: var(--color-info);
  }
}

.header-icon-menu {
  padding-right: 32px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--color-base-200);
  ul {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
  }
}

.ico_headar_menu a {
  color: var(--color-neutral-400);
  font-size: 10px;
  cursor: pointer;
  &:hover {
    color: var(--color-theme);
  }
}

.ico_headar_logout {
}

li.ico_headar_logout a {
  color: var(--color-neutral-400);;
  font-size: 10px;
  &:hover {
    color: var(--color-theme);
  }
}


.etc-menu-button {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 8px;
  flex-direction: column;
  background-color: transparent;
  width: 32px;
  cursor: pointer;
  border: none;
  margin-right: 4px;
  &.is-active {
    background-color: var(--color-theme-light);
    border-radius: 4px;
  }
  span {
    background-color: var(--color-theme);
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 4px;
  }
}

.header-user-button {
  background-color: transparent;
  border: none;
  color: var(--color-theme);
  font-size: 16px;
  height: 32px;
  width: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &.is-active {
    background-color: var(--color-theme-light);
    border-radius: 4px;
  }
}

.header-user-modal {
  display: none;
  background-color: var(--color-base-50);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  position: absolute;
  right: 4px;
  padding: 12px;
  border-radius: 4px;
  top: calc(100% - 6px);
  .login-facility {
    display: flex;
  }

}

.etc-menu-modal {
  display: none;
  background-color: var(--color-base-50);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  position: absolute;
  right: 4px;
  padding: 12px;
  border-radius: 4px;
  top: calc(100% - 6px);
  .header-icon-menu {
    display: flex;
    border: none;
    margin: 0;
    padding: 0;
  }

}

@media screen and (max-width: 1280px) {
  :root {
    --header-height: 44px;
  }
  #main > div {
    padding: 16px 12px;
  }
  .page-title {
    font-size: 13px;
  }
  .header-icon-menu {
    padding-right: 12px;
    padding-left: 10px;
    margin-left: 4px;
    ul {
      gap: 10px;
      font-size: 16px;
    }
  }
  .login-info {
    gap: 8px;
    margin-right: 8px;
  }
  .header-env {
    padding: 4px;
    font-size: 12px;
  }
}

@media screen and (max-width: 1080px) {
  .login-info {
    gap: 8px;
    margin-right: 4px;
  }
  .header-user-button {
    display: flex;
  }
  .header-user-modal {
    &.is-open {
      display: block;
    }
  }
  .login-facility {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .login-info {
    gap: 8px;
  }
  .header-icon-menu {
    display: none;
  }
  .etc-menu-modal {
    &.is-open {
      display: block;
    }
  }
  .etc-menu-button {
    display: flex;

  }
}




/* 03.menu_tab
--------------------------------------------------------- */

.menu {
  margin: 0;
  width: var(--menu-width);
  box-sizing: border-box;
  position: fixed;
  z-index: 1000;
  height: 100%;
  top: 0;
  left: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
  background-color: var(--color-base-100);
  background-color: var(--color-theme-light);
  /*background-color: white;*/
  transition-property: width;
  transition-duration: var(--menu-toggle-transition-duration);
  &.is-menu-closed {
    scrollbar-width: none;
  }
  /*.theme-blue &, .theme-mono &, .theme-slate &  {*/
  /*  border-right: 1px solid var(--color-base-100);*/
  /*}*/

  &.menu-config {
    background-color: var(--color-base-100);
    /*.theme-blue &, .theme-mono &, .theme-slate &  {*/
    /*  background-color: var(--color-base-200);*/
    /*}*/
  }
}

#logo_area {
  padding-left: 8px;
}
.logo-image {
  max-width: 160px;
  max-height: 28px;
}

.menu_logo {
}

.menu_logo a {
  display: flex;
  height: 52px;
  padding: 8px 8px;
  align-items: center;

  &:hover {
    filter: brightness(1.08);
  }
}

.menu_logo img {
  /*filter: brightness(0.1) invert(1);*/
  width: 136px;
  transition-property: width;
  transition-duration: var(--menu-toggle-transition-duration);

  .is-menu-closed & {
    width: 110px;
  }
}

.menu * {
  box-sizing: border-box;
}

#menu_inner {
  width: auto !important;
  padding-bottom: 16px;
}

/*---20200128_edit--*/
.menu ul.tab {
  padding: 0 4px;

}


.menu-item {
  border-radius: 4px;


  &:hover, &.is-open {
    /*background-color: var(--color-theme-light);*/
    background-color: rgba(255, 255, 255, 0.6);
    i {
      color: var(--color-theme);
    }
    &:has(.selected) i {
      color: var(--color-theme-light);
    }
  }
  &:has(.selected) {
    background-color: var(--color-theme);
    .selected a  {
      font-weight: bold;
      color: white;
    }
  }
  a {
    text-decoration: none;
    color: var(--color-text);
    padding: 8px 12px;
    margin-left: -4px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: -4px;
    font-size: 12px;
    &.menu-cat-link {
      overflow: hidden;
      padding-right: 0;
      .is-menu-closed & {
        padding-right: 12px;
      }
      i {
        width: 1em;
        font-size: 12px;
        text-align: center;
        flex-shrink: 0;

      }
      span {
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}

/*.menu-item a::after {*/
/*  content: '\f054';*/
/*  font-family: "Font Awesome 6 Pro";*/
/*  font-weight: 900;*/
/*  font-size: 10px;*/
/*  color: var(--color-theme);*/
/*}*/

.menu-config .menu-item {
  a {
    display: flex;
    gap: 4px;
    padding-left: 20px;
    &::before {
      /*content: '\f0ad';*/
      font-family: "Font Awesome 6 Pro";
      font-weight: 900;
      font-size: 10px;
      color: var(--color-theme);
    }
  }
  &:first-of-type a {
    padding-left: 14px;
    justify-content: start;
    gap: 4px;
    &::before {
      content: '\f013';

    }
    &::after {
      content: none;
    }
  }
  &:has(.selected) a::before {
    color: white;
  }
}

.menu ul.tab li.Open > span a {

}

.menu ul.tab li .selected {

}

.menu ul.tab li span.arrow {
  display: none;
}

/*---/20200128_edit--*/

/* 04. nav
--------------------------------------------------------- */
.menu ul li {
  overflow: visible;
  position: relative;
}

.menu ul li.Open .dropMenu {
  display: block;
}

.menu ul li.Close .dropMenu {
  display: none;
}

.dropMenu {
  position: fixed;
  display: none;
  border-radius: 4px;
  background-color: var(--color-base-50);
  border-top: none;
  line-height: 120%;
  width: 200px;
  padding: 4px;
  z-index: 100;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
  li {
    border-radius: 4px;
    &:hover {
      background-color: var(--color-theme-light);
    }
    a {
      text-decoration: none;
      color: var(--color-text);
      display: block;
      padding: 8px 8px;
      font-size: 12px;

    }
  }
}


/* 05. page_title
--------------------------------------------------------- */


#page_title {
  display: none;
}

#page_title h2 {
  line-height: 1;
  padding: 0 0 9px 30px;
}

#page_title h2 .page_link {
  font-weight: 100;
  margin-left: 50px;
  font-size: 0.9em
}

#pageHeader {
  display: none;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*height: 34px;*/
  /*width: 100%;*/
  /*padding: 0;*/
  /*border-bottom: 1px dotted #999;*/
  /*position: relative;*/
  /*background: #ddedfa;*/
}

#pageHeader .page-title {
  margin-left: 10px;
  line-height: 34px;
  font-weight: 700;
}

#pageHeader .settings-area {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.settings-area > .btn,
.settings-area > .config-menu-button a{
  margin-left: 10px;
  margin-top: 3px;
}



/* 07. button
--------------------------------------------------------- */
.btn {
  display: inline-block;
  text-align: center;
  position: relative;

  a {
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid var(--color-base-300);
    background-color: var(--color-base-100);
    cursor: pointer;
    display: flex;
    margin: 0;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-weight: bolder;
    flex-direction: row-reverse;
    gap: 4px;
    padding: 0 12px;
    height: 100% !important;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    &:hover {
      background-color: var(--color-base-50);
      color: var(--color-theme);
    }
  }
  &:has(.strong) {
    a {
      background-color: var(--color-theme);
      border-color: var(--color-theme);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      color: white;
      &:hover {
        color: var(--color-theme) !important;
        background-color: white;
      }

    }
  }
}



/*-- s_size_btn --*/
.s_size, .disable_s {
  height: 24px;
}

.s_size a {
  padding: 0 8px;
}

.s_size a:hover {
  background-position: 0 0;
  background-repeat: repeat-x;
}

/*-- m_size_btn --*/
.m_size {
  height: 24px;
}
.m_size a {
}

.m_size a:hover {

}



/*-- l_size_btn --*/
.l_size {
  height: 32px;

}

.l_size a {
}

.l_size a:hover {

}

.l_size a.strong span {
}



/*-- l_size_nendo_btn --*/
.l_size_nendo {
}

.l_size_nendo a {

}

.l_size_nendo a:hover {

}

.l_size_nendo a.strong span {
}

/** button wrappers */

.search_btn {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.regist_btn {
  display: flex;
  gap: 8px 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}


/*-- green_btn --*/
.green a {
  background: url(../../img/enji/common/bg_btn_other.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
  padding: 9px 12px;
}

.green a:hover {
  background: url(../../img/enji/common/bg_btn_other_on.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
}

.green a span {
  color: #fff;
}

/*-- blue_btn --*/
.blue a {
  background: url(../../img/enji/common/bg_btn_blue.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
  padding: 9px 12px;
}

.blue a:hover {
  background: url(../../img/enji/common/bg_btn_blue_on.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
}

.blue a span {
  color: #fff;
}

/*-- disable_btn --*/


.disable_s a {
  /*background: url(../../img/enji/common/bg_btn_disable.gif);*/

  color: #999;
  pointer-events: none;
  background-color: var(--color-base-300);
  height: 24px;
}

.disable_s a:hover {
  cursor: default;
}

.disable_s a span {
  color: #999;
  cursor: default;
}

.disable {
  height: 23px;
}

.disable a {
  background: url(../../img/enji/common/bg_btn_disable_m.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
  padding: 6px 12px;
}

.disable a:hover {
  cursor: default;
}

.disable a span {
  color: #999;
  cursor: default;
}

.disable_l {
  height: 31px;
}

.disable_l a {
  background: url(../../img/enji/common/bg_btn_disable_l.gif);
  background-position: 0 0;
  background-repeat: repeat-x;
  padding: 9px 12px;
}

.disable_l a:hover {
  cursor: default;
}

.disable_l a span {
  color: #999;
  cursor: default;
}

/*-- disable_lbl --*/
.disable_lbl {
  height: 31px;
}

.disable_lbl a {
  color: var(--color-text);
  display: block;
  line-height: 1;
  text-decoration: none;
  text-align: center;
}

.disable_lblb a:hover {
  cursor: default;
}

.disable_lbl a span {
  background: #ffcc99;
  cursor: default;
  padding: 8px 5px !important;
  display: block;
}


/*--ico --*/
/*.ico span {*/
/*  !*padding-left: 12px;*!*/
/*}*/

/*.ico_s span {*/
/*  !*padding-left: 12px;*!*/
/*}*/

/*!*--ico_s --*!*/
/*.ico_s span a {*/
/*  padding-right: 6px;*/
/*!*  padding-left: 0;*!*/
/*!*}*!*/

/*--img_position --*/
/*.ico img {*/
/*  position: absolute;*/
/*  top: 7px;*/
/*  left: 7px;*/
/*  vertical-align: top;*/
/*}*/

/*.ico_s img {*/
/*  position: absolute;*/
/*  top: 11px;*/
/*  left: 5px;*/
/*}*/

/*.ico .ico_arrow img {*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 7px;*/
/*}*/

/*.ico .ico_arrow_s img {*/
/*  position: absolute;*/
/*  top: 4px;*/
/*  left: 7px;*/
/*}*/

/*.ico_l img {*/
/*  position: absolute;*/
/*  top: 11px;*/
/*  left: 7px;*/
/*  vertical-align: top;*/
/*}*/

/*!*-- search --*!*/
/*.ico .ico_search img {*/
/*  position: absolute;*/
/*  top: 3px;*/
/*  left: 5px;*/
/*}*/

/*.search_btn .ico .ico_search img {*/
/*  position: absolute;*/
/*  top: 7px;*/
/*  left: 7px;*/
/*}*/

/*!*-- logout --*!*/
/*.ico .ico_logout img {*/
/*  position: absolute;*/
/*  top: 2px;*/
/*  left: 5px;*/
/*}*/

/*!*-- setting --*!*/
/*.ico .ico_setting img {*/
/*  position: absolute;*/
/*  top: 3px;*/
/*  left: 5px;*/
/*}*/

/*!*-- document --*!*/
/*.ico .ico_document img {*/
/*  position: absolute;*/
/*  top: 2px;*/
/*  left: 5px;*/
/*}*/

/*!*-- delete --*!*/
/*.ico_s .ico_delete img {*/
/*  position: absolute;*/
/*  top: 5px;*/
/*  left: 5px;*/
/*}*/

/*!*-- edit --*!*/
/*.ico_s .ico_edit img {*/
/*  position: absolute;*/
/*  top: 7px;*/
/*  left: 7px;*/
/*}*/

/*!*-- copy --*!*/
/*.ico_s .ico_copy img {*/
/*  position: absolute;*/
/*  top: 7px;*/
/*  left: 8px;*/
/*}*/

/*!*-- plus --*!*/
/*.ico_s .ico_plus img {*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 8px;*/
/*}*/

/*!*-- comment --*!*/
/*.ico_s .ico_comment img {*/
/*  position: absolute;*/
/*  top: 4px;*/
/*  left: 4px;*/
/*}*/

/*!*-- plus --*!*/
/*.ico .ico_plus img {*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 8px;*/
/*}*/

/*!*-- minus --*!*/
/*.ico .ico_minus img {*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 8px;*/
/*}*/

/*!*-- reload --*!*/
/*.ico .ico_reload img {*/
/*  position: absolute;*/
/*  top: 5px;*/
/*  left: 8px;*/
/*}*/

/*!*-- add --*!*/
/*.ico .ico_add img {*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 8px;*/
/*}*/

/*!*-- up --*!*/
/*.ico .ico_up img, .ico_s .ico_up img {*/
/*  position: absolute;*/
/*  top: 4px;*/
/*  left: 5px;*/
/*}*/

/*!*-- down --*!*/
/*.ico .ico_down img {*/
/*  position: absolute;*/
/*  top: 9px;*/
/*  left: 7px;*/
/*}*/

/*!*-- disable --*!*/
/*.ico .ico_disable img {*/
/*  position: absolute;*/
/*  top: 2px;*/
/*  left: 4px;*/
/*}*/

/*!*-- comment --*!*/
/*.ico .ico_comment img {*/
/*  position: absolute;*/
/*  top: 4px;*/
/*  left: 4px;*/
/*}*/


ul.btn_area {
  margin: 15px auto 25px;
  padding: 0 auto;
  text-align: center;
}

ul.btn_area li {
  float: left;
  margin-right: 10px !important;
  text-align: center;
}

ul.btn_area li.last {
  margin-right: 0;
}

ul.btn_area li span {
  margin: 0;
}


/* 08.error
--------------------------------------------------------- */
.err {
  background: url(../../img/enji/common/bg_error.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  line-height: 1;
  margin-bottom: 3px;
  padding-bottom: 8px;
}

.err p {
  background: url(../../img/enji/common/bg_err.gif);
  background-position: left top;
  background-repeat: repeat;
  display: inline-block;
  font-size: 93%;
  line-height: 1;
  padding: 3px 0;
}

.err p span {
  background: url(../../img/enji/common/ico_error.gif);
  background-position: 3px 1px;
  background-repeat: no-repeat;
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 3px 5px 3px 20px;
}

/* 09. searchBox
--------------------------------------------------------- */
.searchBox {
  border: 1px solid var(--color-base-100);
  background-color: var(--color-base-50);
  margin-bottom: 20px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
}
@media screen and (max-width: 1280px) {
  .searchBox {
    padding: 12px;
  }
}

.searchBox table {
  border-collapse: collapse;
  border-spacing: none;
}

.searchBox table.searchHead {
  border-collapse: collapse;
  border-spacing: none;
}

.searchBox table.searchHead .searchTitle {
  position: relative;
  .open, .close {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.searchBox table.searchHead .searchTitle h3 {

}

.searchBox table.searchHead .searchTitle h3 span {
}

.searchBox table.searchHead .searchTitle .searchName {
  display: block;
  float: left;
  padding: 6px 6px 2px 40px;
}



.searchBodyFrame {
  margin-bottom: 12px;
}

.searchBody {
  margin: 0;
  width: 100%;

  li:has(label) {
    padding: 4px 0;
  }
  .multi_select li {
    padding: 0;
  }
}

.searchBody tr {
  border-bottom: 1px solid var(--color-base-200);
}

.searchBody tr.top {
  background: none;
}

.searchBody th  {
  text-align: left;
  padding: 8px 8px 8px 0;
}

.searchBody th h4 {

}

.searchBody th h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  background-color: var(--color-theme);
  margin-right: 4px;
  color: var(--color-theme);
}

.searchBody td {
  padding: 8px 0;
  padding-right: 16px;
  &:last-of-type {
    padding-right: 0;
  }
}

@media screen and (max-width: 1280px) {
  body:not(.enji-thickbox-body) {
    .searchBodyFrame {
      margin-bottom: 4px;
    }
    .searchBody {
    }
    .searchBody tr {
      td, th {
        width: auto !important;
        display: block;
        padding: 0;
        break-inside: avoid-column;
        &.space {
          display: none;
        }
      }
      padding-bottom: 8px;
      margin: 8px 0;
      display: grid;
      grid-auto-flow: column;       /* 縦→横へ流す */
      grid-template-rows: repeat(2, auto); /* 上段/下段 */
      grid-template-columns: repeat(3, 1fr); /* 最大3列 */
      max-width: 100%;
      gap: 8px;
    }
  }
}

@media screen and (max-width: 1024px) {
  body:not(.enji-thickbox-body) {
    .searchBody {
      tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列固定 */
        grid-auto-rows: auto; /* 行高さ自動 */

        *:nth-child(1) {
          grid-row: 1;
          grid-column: 1
        }

        *:nth-child(2) {
          grid-row: 2;
          grid-column: 1
        }

        *:nth-child(3) {
          grid-row: 1;
          grid-column: 2
        }

        *:nth-child(4) {
          grid-row: 2;
          grid-column: 2
        }

        *:nth-child(5) {
          grid-row: 3;
          grid-column: 1
        }

        *:nth-child(6) {
          grid-row: 4;
          grid-column: 1
        }

        *:nth-child(7) {
          grid-row: 3;
          grid-column: 2
        }

        *:nth-child(8) {
          grid-row: 4;
          grid-column: 2
        }
      }
    }
  }
}



.searchBody td input {
  vertical-align: middle;
  margin-right: 2px;
}

.searchBody td .ico_cal {
  margin-left: 3px;
  vertical-align: middle;
}

.searchBody td img.date_ar {
  vertical-align: middle;
  margin: 0 3px 1px 3px;
}

.searchBody td ul {
  width: 100%;
}

.searchBody td ul li {
  float: left;
  width: 25%;
}

.searchBody td ul.five li {
  float: left;
  width: 20%;
}

.searchBody .multi_select ul li {
  float: none;
  width: auto;
}

.searchBody div.multi_list {
  overflow-x: hidden;
  overflow-y: auto;;
  background-color: #fff;
}

.searchBody div.multi_list li {
  margin-right: 0;
  font-size: 0.8em;
}

/*--- func_btn_area ---*/
.func_btn_box {
  text-align: left; /*text-align:right;*/
}

.func_btn_list li {
  padding-right: 1% !important;
}

/*---  .result ---*/
.result {
  margin: 5px 0 5px; /*margin:18px 0 6px;*/
}

.result table td span {
  color: var(--color-theme);
  font-size: 15px;
  font-weight: bold;
  margin: 0 4px;
}

.result table td.display_limit {
  padding-right: 10px;
  vertical-align: middle;
}

.result table td.display_limit select {
}

/* 10. pager
--------------------------------------------------------- */
.pager.top .regist_btn {

}

.pager {
  margin-bottom: 16px;
}

.pager ul {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.pager ul li {

  a, &.current {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-base-200);
    text-decoration: none;
    color: #777;
    &:hover {
      background-color: var(--color-theme-light);
    }

    &:has(span){
      color: transparent;
      position: relative;

      &::before {
        content: '\f104';
        font-family: 'Font Awesome 6 Pro';
        position: absolute;
        color: #777;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

    }
  }
  &:last-of-type a:has(span)::before {
    content: '\f105';
  }

  &.current {
    background-color: var(--color-theme) !important;
    color: #fff;
  }

}

.pager ul li {

}

.pager ul li a,
.pager ul li span.active {

}



.pager ul li a:hover {

}

.pager ul li span.active {
}

.pager ul li.txt {
}

.pager ul li.txt a {

}

.pager ul li.txt a {
}


/* 11. list_head / list_bottom
--------------------------------------------------------- */
#mainBox .list_head {
  margin-top: 10px;
  margin-bottom: 8px;
  width: 100%;
}

#mainBox .list_head ul {
  width: 100%;
}

#mainBox .list_head ul li.left {
  float: left;
}

#mainBox .list_head ul li.right {
  float: right;
}

#mainBox .list_bottom {
  margin-top: 8px;
  width: 100%;
}

#mainBox .list_bottom ul {
  width: 100%;
}

#mainBox .list_bottom ul li.left {
  float: left;
}

#mainBox .list_bottom ul li.right {
  float: right;
}


/* 12. dataTable
--------------------------------------------------------- */



.dataTableWrapper {
  padding: 0 !important;
  overflow: auto;
  background-color: var(--color-base-200);
  max-width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
  position: relative;
  scrollbar-width: none;
  /* タブレット向けパフォーマンス最適化 */
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  transform: translateZ(0);
  --margin: 32px;
  @media screen and (max-width: 1280px) {
    --margin: 24px;
  }
  body:has(.menu) & {
    width: calc(100dvw - var(--menu-width)  - var(--margin) - var(--scrollbar-width));
  }
  .is-fixed-list & {
    width: calc(100dvw - var(--menu-width));
  }
}



.dataTableScroller {
  overflow: auto;
  bottom: 0;
  position: fixed;
  z-index: 30;
  width: 100%;
  /* タブレット向けパフォーマンス最適化 */
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  transform: translateZ(0);
  #main:has(#fixed_btn_area) &,
  &.is-multiple {
    position: relative;
    margin-top: -16px;
  }

}

.dataTableScrollerContent {
  height: 1px;
}

.dataTable {
  border-top: 1px solid var(--color-base-200);
  border-left: 1px solid var(--color-base-200);
  border-right: 1px solid var(--color-base-200);
  border-collapse: collapse;
  box-sizing: border-box;
  background-color: white;
  margin: 0 !important;
  min-width: 100%;
  width: auto;
  max-width: none;
  contain: layout;


  /* タブレット向けパフォーマンス最適化 */
  /*contain: layout style paint;*/

  &.leftTh {
    border-left: 1px solid var(--color-base-200);
    border-right: 1px solid var(--color-base-200);
    margin-bottom: 16px !important;
    contain: none;
    th {
      white-space: nowrap;
    }
  }
  &:not(.leftTh) {
    th {
    }
  }

  tr.odd {
    background-color: var(--color-base-50);
  }

  th,
  td {
    padding: 8px;
    border-right: 1px solid var(--color-base-200);
    border-bottom: 1px solid var(--color-base-200);
    white-space: normal;
    box-sizing: border-box;
    /*width: auto !important;*/
    /*max-width: none !important;*/
    &:last-of-type {
      /*border-right: none;*/
    }
    &.col_button {
      min-width: 40px !important;
    }
    &.col_route {
    }
    &.noPrint {
      padding: 4px;
      min-width: fit-content;
    }
    &:has(.btn),
    &:has(.btnSetBox) {
      min-width: max-content;
    }
  }
  th {
    font-size: 93%;
    font-weight: 700;
    text-align: center;
    background-color: var(--color-base-100);
    color: #666;
    min-width: 32px;
    /*width: auto !important;*/

    /*white-space: nowrap;*/

  }
  td:has(.btnSetBox) {
    padding: 2px;
    max-width: max-content;
  }
  .btnSetBox {
    width: max-content!important;
    box-sizing: border-box;
    tbody, thead,tr, th, td {
      display: block;
      padding: 0 ;
      width: auto !important;
      box-sizing: border-box;
    }
    td {
      padding: 2px !important;
      max-width: none !important;
      min-width: auto!important;
    }
    tr {
      display: flex;
      > * {
        flex: 1;
      }
    }
    .btn {
      font-size: 12px;
      width: 100% !important;
      max-height: 24px;
      a {
        padding-left: 6px !important;
        padding-right: 6px !important;
      }
    }
    a {
      width: 100%;
    }
  }

}





@media screen and (max-width: 1280px) {
  .dataTable:not(.leftTh) {

    th, td {
      padding: 4px;
    }
    td:has(.btnSetBox) {
      padding: 1px;
    }
    .btnSetBox {
      width: 100% !important;
      tr , td ,th , tbody{
        display: block;
      }
      tr {
        /*display: flex;*/
      }
      .btn {
        max-height: 20px;
        a {
          font-size: 10.5px;
          padding-left: 4px !important;
          padding-right: 4px !important;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .dataTable:not(.leftTh) {
    font-size: 11.5px;
    a {
      font-size: 11.5px;
    }
    th, td {
      padding: 2px;
    }

  }
}




.dataTable th img.needIcon {
  float: right;
  margin-left: 5px;
  margin-top: 2px;
  display: inline-block;
}

.dataTable th .essential {
  background: url(../../img/enji/common/i_essential.gif) right center no-repeat;
  font-weight: 700;
  margin: 0;
  white-space: normal;
  padding-right: 40px;
}

.dataTable td input {
  margin-right: 2px;
}

.dataTable td span.strong {
  font-weight: bold;
}

.dataTable td p.sousaTxt {
  color: #666;
  font-size: 93%;
  margin-top: 3px;
}

.dataTable td .ico_cal {
  margin-left: 3px;
  vertical-align: middle;
}

.dataTable td td {
  border: none;
  padding: 1px 2px;
}


.dataTable img {
  vertical-align: text-bottom;
}

.dataTable th.showPrint,
.dataTable td.showPrint {
  display: none;
}

.dataTable th.small_pd {
  padding: 2px 1px;
}

.dataTable th.top {
  border-bottom: 0;
}

.dataTable th.btm {
  /*background: url(../../img/enji/common/bg_th.gif) left bottom 0px repeat-x;*/
}

.dataTable td.sort_col {
  text-align: center;
}

.dataTable td.sort_col img {
  cursor: pointer;
}

.dataTable tr.tall th {
  /*background: url(../../img/enji/common/bg_th_l.gif) left 1px repeat-x;*/
}

.dataTable tr.ex_tall th {
  /*background: url(../../img/enji/common/bg_th_ll.gif) left 1px repeat-x;*/
}

.dataTable div.tate {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  align-items: center;
  display: grid;
  width: 100%;
  min-height: 4.0em;
}

.dataTable div.tate_half {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  align-items: center;
  display: grid;
  width: 100%;
  min-height: 2.0em;
}

.dataTable2 {
  border: 1px solid #999;
  border-collapse: collapse;
  border-spacing: none;
}

.dataTable2 th,
.dataTable2 td {
  padding: 4px 5px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  white-space: normal;
}

.dataTable2 th {
  background: url(../../img/enji/common/bg_th.gif) left 1px repeat-x;
  font-size: 93%;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

.dataTable2 th img.needIcon {
  float: right;
  margin-left: 5px;
  margin-top: 2px;
  display: inline-block;
}

.dataTable2 th .essential {
  background: url(../../img/enji/common/i_essential.gif) right center no-repeat;
  font-weight: 700;
  margin: 0;
  white-space: normal;
  padding-right: 40px;
}

.dataTable2 td input {
  margin-right: 2px;
}

.dataTable2 td span.strong {
  font-weight: bold;
}

.dataTable2 td p.sousaTxt {
  color: #666;
  font-size: 93%;
  margin-top: 3px;
}

.dataTable2 td .ico_cal {
  margin-left: 3px;
  vertical-align: middle;
}

.dataTable2 td td {
  border: none;
  padding: 1px 2px;
}

.dataTable2 img {
  vertical-align: text-bottom;
}

.dataTable2 th.showPrint,
.dataTable2 td.showPrint {
  display: none;
}

.dataTable2 th.small_pd {
  padding: 2px 1px;
}

.dataTable2 th.top {
  border-bottom: 0;
}

.dataTable2 th.btm {
  background: url(../../img/enji/common/bg_th.gif) left bottom 0px repeat-x;
}

.dataTable2 td.sort_col {
  text-align: center;
}

.dataTable2 td.sort_col img {
  cursor: pointer;
}

.dataTableFix {
  overflow-y: scroll;
}

.dataTableFix table {
  border-left: 1px solid #999;
  border-collapse: separate;
}

.dataTableFix thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}

.dataTableFix thead tr.top th {
  border-top: 1px solid #999;
}

.dataTableFix th,
.dataTableFix td {
  padding: 4px 5px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  white-space: normal;
}

.dataTableFix th {
  background: #fff;
  font-size: 93%;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

.dataTableFix th img.needIcon {
  float: right;
  margin-left: 5px;
  margin-top: 2px;
  display: inline-block;
}

.dataTableFix th .essential {
  background: #fff;
  font-weight: 700;
  margin: 0;
  white-space: normal;
  padding-right: 40px;
}

.dataTableFix td input {
  margin-right: 2px;
}

.dataTableFix td span.strong {
  font-weight: bold;
}

.dataTableFix td p.sousaTxt {
  color: #666;
  font-size: 93%;
  margin-top: 3px;
}

.dataTableFix td .ico_cal {
  margin-left: 3px;
  vertical-align: middle;
}

.dataTableFix td td {
  border: none;
  padding: 1px 2px;
}

.dataTableFix img {
  vertical-align: text-bottom;
}

.dataTableFix th.showPrint,
.dataTableFix td.showPrint {
  display: none;
}

.dataTableFix th.small_pd {
  padding: 2px 1px;
}

.dataTableFix td.sort_col {
  text-align: center;
}

.dataTableFix td.sort_col img {
  cursor: pointer;
}

.condition {
  box-sizing: border-box;
  margin: 8px 0;
}

.showPrintTable {
  display: none;
}

table.coloringOdd > tbody > tr:nth-child(odd) td {
  background-color: var(--color-base-50);
}

ul.coloringOdd > li:nth-child(odd) {
  background-color:  var(--color-base-50);
}

#children_list {
  display: block;
  overflow: visible;
}

/*--- edit ---*/
#edit .mobile {
  max-height: 840px;

}

#edit .dataTable th {
  /*background: url(../../img/enji/common/bg_th2.gif) left 1px repeat-x;*/
  text-align: left;
  /*width: 150px;*/
}

#edit .dataTable td label {
  margin-left: 3px;
}

#edit ul.btn_area {
  margin: 15px auto 25px;
  padding: 0 auto;
  text-align: center;
}

#edit ul.btn_area li {
  float: left;
  margin-right: 10px;
  text-align: center;
}

#edit ul.btn_area li.last {
  margin-right: 0;
}

#edit ul.btn_area li span {
  margin: 0;
}

/*--- edit innerDataTable ---*/
#edit .dataTable td .innerDataTable {
  border: 1px solid #999;
  border-collapse: collapse;
  border-spacing: none;
}

#edit .dataTable td .innerDataTable th {
  width: 100px;
  padding: 2px 2px;
  font-weight: 300;
  border-bottom: 1px solid #999;
  color: #111;
  background: #f4f4f4;
}

#edit .dataTable td .innerDataTable td {
  width: 115px;
  padding: 2px 2px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}

/*--- confirm ---*/
.confirm .dataTable th {
  padding: 15px 5px;
}

.confirm .dataTable td {
  padding: 15px 5px;
}

/*--- finish ---*/
#finish {
  padding: 0 0 37px;
}

#finish .msgBox {
  margin: 10px 10px 60px;
}

#finish ul.btn_area {
  margin: 15px auto 25px;
  padding: 0 auto;
  text-align: center;
}

#finish ul.btn_area li {
  float: left;
  margin-right: 10px !important;
  text-align: center;
}

#finish ul.btn_area li.last {
  margin-right: 0;
}

#finish ul.btn_area li span {
  margin: 0;
}

.formTxt .formTxtError input {
  border: 2px solid #C00;
}

.leftTh th {
  /*background: url(../../img/enji/common/bg_th2.gif) left 1px repeat-x;*/
  padding: 8px;
  text-align: left;
}

.leftTh td {
  padding: 8px;
}

th.info,
td.info {
  background-image: linear-gradient(-135deg, #f00 5px, transparent 0) !important;
}

/* 13.  message Box
--------------------------------------------------------- */
.msgBox {
  background: #fff;
  padding: 1px;
  text-align: left;
  line-height: 140%;
  margin-bottom: 10px;
  border-radius: 12px;
  max-width: 1280px;
}

.msgBox p {
  line-height: 1.5;
  margin-top: 3px;
}

.msgBox .msgInner {
  padding: 16px;
  padding-left: 48px;
  position: relative;
  &::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    font-family: "Font Awesome 6 Pro";
    font-size: 20px;
    color: var(--color-success);
  }
}

.msgBox .msgInner h4 {
  font-weight: bold;
  font-size: 14px;
}

.msgBox.check {
  background-color: var(--color-success-light);

}

.msgBox.check .msgInner {
  /*background: url(../../img/enji/common/msgIconInfo.gif) 15px 15px no-repeat #CFE9FD;*/
  &::before {
    content: '\f058';
    color: var(--color-success);
  }
}

.msgBox.check .msgInner h4 {
  color: var(--color-success-dark);
}

.msgBox.attention {
  background-color: var(--color-warning-light);
}

.msgBox.attention .msgInner {

  .box & {

  }
  &::before {

    content: '\f071';
    color: var(--color-warning);
  }

}

.msgBox.attention .msgInner h4 {
  display: none;
}

.msgBox.error {
  background-color: var(--color-danger-light);
}

.msgBox.error .msgInner {
  &::before {
    content: '\f06a';
    color: var(--color-danger);
  }
}

.msgBox.error .msgInner h4 {
  color: var(--color-danger-dark);
}

.msgBox.info {
  background-color: var(--color-info-light)
}

.msgBox.info .msgInner {
  padding-left: 48px;
  /*background: url(../../img/enji/common/msgIconInfo.gif) 15px 15px no-repeat #CFE9FD;*/
  position: relative;
  &::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    font-family: "Font Awesome 6 Pro";
    content: '\f05a';
    font-size: 20px;
    color: var(--color-info);
  }
}

.msgBox.info .msgInner h4 {
  color: var(--color-info-dark);
}

#attendance .msgBox.attention {
  margin-top: 30px;
}

/* 14. #fixed_btn_area
--------------------------------------------------------- */
#fixed_btn_area {
  margin: 0 auto;
  text-align: center;
  padding-left: calc(var(--menu-width) + 12px);
  padding-right: 12px !important;
  padding-top: 8px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box;
  z-index: 31;
  #main:has(&) {
    padding-bottom: 80px;
  }
  table, tbody, th, td {
    display: block;
    width: auto !important;
  }
  tr {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  td:has(.btn_area)  {
    .btn_area {
      display: flex;
      gap: 8px;
      li {
        margin: 0 !important;
      }
    }
    & + td {
      display: none;
    }
  }
}

#fixed_btn_area ul {
  margin: 0 auto;
  padding: 0 auto;
  text-align: center;
}

#fixed_btn_area ul li {
  float: left;
  margin-right: 10px;
  text-align: center;
}

#fixed_btn_area ul li.last {
  margin-right: 0;
}

#fixed_btn_area ul li span {
  margin: 0;
}


/* 15. sideBox
--------------------------------------------------------- */
#sideBox {
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  float: left;
  margin-top: 5px;
  margin-right: 0;
  margin-left: 5px;
  vertical-align: top;
  width: 242px;
}

#sideBox.sideRight {
  border-right: none;
  border-left: 1px solid #ccc;
}

#sideBox .localMenu {
  margin: 15px;
  text-align: left;
  line-height: 130%;
}

#sideBox .localInfo {
  margin: 15px;
  text-align: left;
  line-height: 130%;
}

#sideBox .localInfo h3 {
  background: #666;
  border: 1px solid #999;
}

#sideBox .localInfo ul li a {
  background: url(../../img/enji/default/ico_arrow.gif) 0 0 no-repeat;
}

#sideBox .localInfo ul li span {
  background: url(../../img/enji/default/ico_arrow.gif) 0 0 no-repeat;
}

#sideBox .localInfo ul li ul li a {
  background: url(../../img/enji/default/ico_arrow.gif) 0 0 no-repeat;
}

a:has(.unverified) {
  font-size: 11px;
  text-decoration: none;
  background-color: var(--color-base-100);
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1;
}

#sideBox h3 {
  display: block;
  overflow: hidden;
  color: #fff;
  text-align: left;
}

#sideBox h3 span {
  display: block;
  line-height: 34px;
  margin: 0;
  padding: 0 10px;
}

#sideBox ul li {
  display: block;
  width: 100%;
  background: url(../../img/enji/common/line_sideBox.gif) left bottom repeat-x;
}

#sideBox ul li a {
  display: block;
  border-top: 1px solid #fff;
  font-weight: 700;
  padding: 8px 0px 7px 22px;
  text-decoration: none;
  color: var(--color-text);
}

#sideBox ul li span {
  display: block;
  border-top: 1px solid #fff;
  padding: 8px 0px 7px 22px;
  text-decoration: none;
  color: var(--color-text);
}

#sideBox ul li a span.sideActive {
  padding: 0;
}

#sideBox ul li span.sideActive {
  font-weight: bold;
}

#sideBox ul li a:hover {
  color: #ff9933;
  text-decoration: underline;
}

#sideBox ul li ul {
  margin: 0px 6px 0px 10px;
  border: none;
}

#sideBox ul li ul li {
  border-top: none;
}

#sideBox ul li ul li a,
#sideBox ul li ul li span {
  border-top: 1px dotted #ccc;
  background-position: left 50%;
  background-repeat: no-repeat;
  line-height: 32px;
  padding: 7px 0px 6px 12px;
  zoom: 1;
}

#sideBox ul.noLinkList {
  padding: 0px 20px;
  margin: 10px 0;
  list-style: circle;
  border: none;
}

#sideBox ul.noLinkList li {
  border: none;
  margin:  5px 0px;
  list-style: circle;
  display: list-item;
  vertical-align: text-top;
  line-height: 100%;
  font-size: 0.9em;
}

#sideBox p {
  padding: 0px 0px 10px;
  line-height: 150%;
}

#mainBox {
  float: left;
  margin-top: 15px;
  margin-right: 0;
  padding-bottom: 37px;
  /*width: 676px;*/
}

#mainBox .dataTable th {
  padding: 10px 5px;
}

#mainBox .dataTable ul li {
  display: inline-block;
  float: left;
  margin: 0 5px;
  text-align: center;
}

#sideBox2 {
  background-color: #FCFCFC;
  border: 1px solid #CCCCCC;
  float: left;
  /*margin-left: 15px;*/
  margin-right: 5px;
  margin-top: 5px;
  vertical-align: top;
  width: 242px;
}

#sideBox2 h3 span {
  display: block;
  line-height: 34px;
  margin: 0;
  padding: 0 10px;
}

#sideBox2 ul li {
  background: url("../../img/enji/common/line_sideBox.gif") repeat-x scroll left bottom transparent;
  display: block;
  width: 100%;
}

#sideBox2 ul li a {
  border-top: 1px solid #FFFFFF;
  color: var(--color-text)333;
  display: block;
  font-weight: 700;
  padding: 8px 0 7px 22px;
  text-decoration: none;
}


/* 16.mainBox
--------------------------------------------------------- */
#mainBox {
  /*float: left;*/
  margin-top: 18px;
  margin-right: 0;
  margin-left: 15px;
  padding-bottom: 37px;
  /*width: 676px;*/
}

#mainBox .dataTable th {
  padding: 10px 5px;
}

#mainBox .dataTable ul li {
  display: inline-block;
  float: left;
  margin: 0 5px;
  text-align: center;
}

#mainBox div.modified {
  position: relative;
  top: -13px;
}

.lump {
  margin-right: 12px;
}

h3.title {
  border-left: 4px solid var(--color-theme);
  padding-left: 12px;
  margin-bottom: 16px;
}

h3.title span {

}

div.modified {
  color: #888;
  font-size: 0.9em;
  float: right;
}

/*--- main_mennu_list ---*/
#main_menu_list {
}

.menu_section {
  background-color: var(--color-base-50);
  border-radius: 12px;
  padding: 12px 12px;
  margin-bottom: 12px;
}

.menu_section_title {
  margin-bottom: 12px;
  padding-left: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: normal;
  &::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    background-color: var(--color-theme);
  }
}

#main_menu_list ul {
  gap: 12px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

#main_menu_list ul li {

}

#main_menu_list ul li.last {
}

#main_menu_list ul li a {
  display: flex;
  background-color: white;
  border-radius: 8px;
  padding: 8px 8px;
  text-decoration: none;
  width: 100%;
  justify-content: center;
  height: 140px;
  color: #555;
  box-sizing: border-box;
  border: 1px solid var(--color-base-200);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  &:hover {
    opacity: 0.8;
  }
}



#main_menu_list ul li .list_cont {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
  align-items: center;
  height: 100%;
}

#main_menu_list ul li .list_cont_img {
  min-height: 45px;
  max-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}

#main_menu_list ul li .list_cont dl {

  dt {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
  }
  dd {
    color: #666;
    padding: 4px 4px 0;
    span {
      font-size: 11px;
    }
  }
}


/*--- main_mennu_list_l---*/
#main_menu_list_l {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
  position: relative;
}

#main_menu_list_l ul {
  margin-bottom: 10px;
  width: 100%;
}

#main_menu_list_l ul li {
  float: left;
  margin: 6px 10px 0 0;
}

#main_menu_list_l ul li.last {
  margin-right: 0;
}

#main_menu_list_l ul li a {
  display: block;
  height: 130px;
  width: 176px;
  text-decoration: none;
}

#main_menu_list_l ul li a:hover {
  cursor: pointer;
}

#main_menu_list_l ul li .list_cont {
  padding: 10px;
  height: 110px;
  width: 156px;
}

#main_menu_list_l ul li .list_cont dl dt {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.4;
  padding-left: 18px;
  width: 122px;
}

#main_menu_list_l ul li .list_cont dl dd {
  color: var(--color-text);
  float: left;
  margin-top: 4px;
  line-height: 1.3;
}

#main_menu_list_l ul li .list_cont dl dd span {
  display: block;
  text-align: left;
  width: 156px;
}

/*---20200128_edit--*/
#main_menu_list_l ul {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#main_menu_list_l ul li {
}

#main_menu_list_l ul li a {

}

#main_menu_list_l ul li a:hover .list_cont {

}

/*---/20200128_edit--*/

/** support news **/
.support-news {
  border: 1px solid var(--color-base-200);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  h5 {
    margin-bottom: 4px;
    display: flex;
    gap: 4px;
    padding: 8px;
    background-color: var(--color-base-50);
    border-bottom: 1px solid var(--color-base-100);
    font-weight: normal;
    font-size: 12px;
    align-items: center;
    position: relative;
    &::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      flex-shrink: 0;
      box-sizing: border-box;
      border: none;
      background-color: var(--color-theme);
    }
    .blog-link {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  ul {
    padding: 0 8px 8px;
    li {
      display: flex;
      border-bottom: 1px solid var(--color-base-100);
      padding: 8px 4px;
      gap: 4px;
      align-items: center;
      .date {
        color: #777;
        white-space: nowrap;
        min-width: 100px;
        flex-shrink: 0;
      }
      &:last-of-type {
        border-bottom: none;
      }
      &.strong {
        background-color: var(--color-danger-light);
        a {
          color: var(--color-danger-dark)
        }
      }
    }
  }
  dl {
    padding: 0 8px 8px;
    dt {
      float: left;
      color: #777;
      padding: 8px 16px 8px 4px;
    }
    dd {
      padding: 8px 4px;
      border-bottom: 1px solid var(--color-base-100);
      &:last-of-type {
        border-bottom: none;
      }
    }

  }
}


/* 17. print
--------------------------------------------------------- */

/* 18. fixed_head_area ( fixed )
--------------------------------------------------------- */
.fixed_head_area {
  background: #fff;
  padding: 0;
  position: fixed;
  /*width: 660px;*/
  width: 80%;
  min-width: 660px;
  z-index: 1;
  box-sizing: border-box;
  .is-popup & {
    position: static;
  }
  .enji-popup-body & {
    position: static;
  }
}

.fixed_head_area #title_area {
  border-bottom: 1px dotted #999;
  padding-top: 10px;
  padding-bottom: 6px;
  width: 100%;
}

.fixed_head_area .h3_title {
  float: left;
}

.fixed_head_area .h3_title h3 {
  line-height: 1;
  height: 26px;
  margin: 0 0 0 3px;
  padding: 0;
}

.fixed_head_area .h3_title h3 span {
  display: block;
  line-height: 1;
  height: 13px;
  margin: 0;
  padding: 7px 0 6px 9px;
}

.fixed_head_area .h3_title p {
  padding-bottom: 6px;
}

.fixed_print_head_area {
  background: #fff;
  padding: 0;
  position: fixed;
  width: 660px;
  z-index: 1;
}

.fixed_print_head_area #title_area {
  border-bottom: 1px dotted #999;
  padding-top: 10px;
  padding-bottom: 6px;
  width: 100%;
}

.fixed_print_head_area .h3_title {
  float: left;
}

.fixed_print_head_area .h3_title h3 {
  line-height: 1;
  height: 26px;
  margin: 0 0 0 3px;
  padding: 0;
}

.fixed_print_head_area .h3_title h3 span {
  display: block;
  line-height: 1;
  height: 13px;
  margin: 0;
  padding: 7px 0 6px 9px;
}

.fixed_print_head_area .h3_title p {
  padding-bottom: 6px;
}

/* 19. container ( fixed )
--------------------------------------------------------- */
.container {
  padding-top: 53px;
  padding-bottom: 65px;
  .is-popup & {
    padding-top: 0;
  }
}

/* 20. fixed_foot_area ( fixed )
--------------------------------------------------------- */
.fixed_foot_area {
  /*color: #fff;*/
  border-top: 1px solid var(--color-base-100);
  height: 35px;
  padding: 10px 0;
  width: 660px;
  position: fixed;
  bottom: 0;
  z-index: 91;
  background-color: #fff;
}

.fixed_foot_area dl {
  padding: 0 10px;
  width: 100%;
}

.fixed_foot_area dl dt {
  float: left;
  font-weight: 700;
  line-height: 1;
  padding: 10px 8px 9px 0;
}

.fixed_foot_area dl dd {
  float: left;
  padding-right: 10px;
}

.fixed_foot_area dl dd.last {
  padding-right: 0px;
}

/* 21. sideBox
--------------------------------------------------------- */
.button-support {
  padding: 8px 16px;
  text-decoration: none;
  color: white;
  border-radius: 4px;
  display: inline-block;
  background-color: var(--color-theme);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  font-weight: bold;
  border: 1px solid var(--color-theme);
  font-size: 14px;
  line-height: 1;
  &:hover {
    background-color: white;
    color: var(--color-theme);
  }
}

#edit table td.sideRight {
  vertical-align: top;
  position: relative;
}

/*#edit table td.sideRight #sidebar {*/
/*  margin-left: 15px;*/
/*  padding-top: 134px;*/
/*  position: fixed;*/
/*}*/
*#edit table td.sideRight #sidebar  {
  position:  sticky;
  top: var(--header-height) !important;
}

#edit table td.sideRight #sidebar .preview {
  margin: 10px auto;
  width: 200px;
}

#edit table td.sideRight #sidebar .btn_preview ul {
  width: 160px;
}

#edit table td.sideRight #sidebar .btn_preview ul li {
}

.sortable-contents {
  > div {
    margin-bottom: 4px;
  }
}

.box {
  /*margin-top: 4px;*/
  box-sizing: border-box;
  /*border-radius: 8px;*/
  background-color: white;
  overflow: hidden;
  border: 1px solid var(--color-base-100);
  &.first {
    margin-top: 0;
  }
}


#side_box0 {
  border: none;
}

.box_head {
  /*height: 7px;*/
  /*width: 242px;*/
  display: none;
}

.sortable-sidebar {
  background-color: var(--color-theme-light);
  padding: 4px;
  border-radius: 8px;
}

.box_cont {
  /*padding: 3px 10px 1px 10px;*/
  /*width: 222px;*/
  /*padding: 44px 12px 12px;*/
  /*position: relative;*/
  background-color: white;


  &:nth-of-type(2) {
    h6::after {
      content: "\f07d";
      font-family: "Font Awesome 6 Pro";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 8px;
      color: var(--color-theme);
    }
  }
  h6 {
    background-color: var(--color-base-50);
    padding: 8px 8px;
    font-weight: normal;
    display: flex;
    position: relative;
    align-items: center;
    position: relative;
    padding-left: 28px;

    span:has(.toggleBtn) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &::before {
        content: '\f056';
        color: var(--color-theme);
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
      }
      &:has(.is-closed) {
        &::before {
          content: '\f055'
        }
      }
      .toggleBtn {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;

      }
    }

  }
  > div, > ul {
    margin: 0 8px;
    padding: 8px 0;
  }


}

.box_bottom {
  /*height: 7px;*/
  /*width: 242px;*/
  display: none;
}

h1.grayTitle {
  border-left: 4px solid var(--color-theme);
  padding-left: 12px;
  margin-bottom: 16px;
}

h1.grayTitle span {

}



.date_select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-theme-light);
  font-size: 12px;
  padding-bottom: 4px;
  span {
    a {
      color: var(--color-theme);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      text-decoration: none;
      padding: 0;
      img {
        display: none;
      }
      &::after {
        content: "\f104";
        display: block;
        font-family: "Font Awesome 6 Pro";
      }
    }
    &:last-of-type {
      a {
        &::after {
          content: "\f105";
        }
      }
    }
  }
}

/* 22. addList
--------------------------------------------------------- */
.addList {
  margin: 10px 0;
  width: 100%;
}

.addList li {
  border-bottom: 1px dotted #ccc;
  padding: 2px 0;
  float: left;
  padding: 3px 40px 3px 0;
  margin: 0 10px !important;
  position: relative;
  width: 180px;
}

.addList li.nowidth {
  width: auto;
}

.addList li a {
  line-height: 13px;
  margin: 0;
  padding: 5px 0 5px 0;
  position: absolute;
  right: 5px;
  top: 0;
  font-size: 0.8em;
}

.addList li a:hover {
  color: #ff3399;
}

.addList li span {
  color: #666666;
  font-size: 0.8em;
}

.listCategory {
  margin: 0 0 10px;
  width: 100%;
}

.short li {
  padding: 3px 40px 3px 0;
  width: 100px;
}

/* 23. schedule
--------------------------------------------------------- */

/** 預かり保育スタイル*/
.schedule {
  background: #fff;
  margin: 0 0 30px 10px;
  padding: 10px 0 0;
  width: 950px;
}

.schedule #cal_navi {
  background: #efefef;
  margin: 0;
  padding: 2px 10px 2px;
}

.schedule #cal_navi dl {
  background: url(../../img/enji/common/line_searchBody.gif) left bottom repeat-x;
  margin-bottom: 3px;
  padding: 5px 0 3px 0;
  width: 100%;
}

.schedule #cal_navi dl dt {
  color: #1A1A1A;
  font-family: 'Century Gothic', 'Dotum', arial;
  font-weight: 700;
  float: left;
  font-size: 200%;
  line-height: 1;
}

.schedule #cal_navi dl dt span {
  display: block;
  float: left;
}

.schedule #cal_navi dl dt span.year {
  background: url(../../img/enji/schedule/ico_year.gif) right 6px no-repeat;
  margin-right: 10px;
  padding-right: 20px;
}

.schedule #cal_navi dl dd.month {
  color: #1A1A1A;
  float: left;
  font-family: 'Century Gothic', 'Dotum', arial;
  font-weight: 700;
  font-size: 200%;
  line-height: 1;
}

.schedule #cal_navi dl dd.month span {
  display: block;
  float: left;
}

.schedule #cal_navi dl dd.month span.month {
  background: url(../../img/enji/schedule/ico_month.gif) right 6px no-repeat;
  padding-right: 20px;
}

.schedule #cal_navi ul {
}

.schedule #cal_navi ul li {
  float: left;
  line-height: 20px;
}

.schedule #cal_navi ul li.disable {
  color: #999;
}

.schedule #cal_navi ul li a {
  color: var(--color-text);
  display: block;
  font-size: 93%;
  line-height: 1;
  padding: 4px 0;
  text-decoration: none;
}

.schedule #cal_navi ul li.this_month {
  background: url(../../img/enji/schedule/btn_month.gif) 0 0 no-repeat;
  margin-right: 10px;
  text-align: center;
  width: 43px;
}

.schedule #cal_navi ul li.pre_month {
  background: url(../../img/enji/schedule/btn_pre_month.gif) 0 0 no-repeat;
  margin-right: 10px;
  padding-left: 20px;
  width: 33px;
}

.schedule #cal_navi ul li.next_month {
  background: url(../../img/enji/schedule/btn_next_month.gif) 0 0 no-repeat;
  padding-left: 10px;
  width: 43px;
}

.schedule #cal_navi #cal_btn {
  float: right;
}

.schedule .schedule_table {
  float: left;
  margin-right: 18px;
  padding-bottom: 10px;
  width: 728px;
}

.schedule .schedule_table table {
  background: #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  margin: 10px 0 0;
}

.schedule .schedule_table table th {
  background: url(../../img/enji/common/bg_th2.gif) left 1px repeat-x;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  font-size: 93%;
  font-weight: 700;
  padding: 5px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

.schedule .schedule_table table td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 0;
  text-align: center;
  word-break: break-all;
}

.schedule .schedule_table table td div {
  padding: 5px;
  width: 93px;
}

.schedule .schedule_table table td div ul {
  min-height: 32px;
}

.schedule .schedule_table table td div ul li {
  line-height: 1.3;
  text-align: center;
}

.schedule .schedule_table table td div ul li a {
  color: var(--color-text);
}

.schedule .schedule_table table td div ul li a:hover {
  color: #F00;
  text-decoration: underline;
}

.schedule .schedule_table table td p {
  color: var(--color-text);
}

.schedule .schedule_table table td.sunday {
  background: #ffefef;
}

.schedule .schedule_table table td.sunday p {
  color: #cc3333;
}

.schedule .schedule_table table td.holiday {
  background: #ffefef;
}

.schedule .schedule_table table td.holiday p {
  color: #cc3366;
}

.schedule .schedule_table table td.saturday {
  background: #e9f1f6;
}

.schedule .schedule_table table td.saturday p {
  color: #3399cc;
}

.schedule .schedule_table table.extend td {
  vertical-align: top;
}

.schedule .schedule_table table.extend td div {
  padding: 0px;
  width: 103px;
}

.schedule .schedule_table table.extend td div ul {
  min-height: 52px;
}

.schedule .schedule_table table.extend td div ul li {
  min-height: 26px;
  padding-top: 5px;
}

.schedule #sideBox {
  border: none;
  float: left;
  margin: 10px 0;
  width: 202px;
}

.schedule #sideBox h3 {
  background: var(--color-text);
  border: none;
  margin-bottom: 3px;
}

.schedule #sideBox h3 span {
  line-height: 24px;
  padding-left: 6px;
}

.schedule #sideBox table {
  background: #fff;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  margin: 0;
  width: 100%;
}

.schedule #sideBox table td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 5px;
}

.schedule #sideBox table td a {
  color: var(--color-text);
}

.schedule #sideBox table td a:hover {
  color: #F00;
  text-decoration: underline;
}

/* 預かり保育スタイル end */

.schedule {
  margin: 0 32px;
  padding: 10px 0 0;
  width: 1200px;

}

.schedule a:hover,
.schedule button:hover {
  opacity: 0.8;
}

.schedule button:disabled {
  opacity: 0.8;
}

/* calendar */
.schedule-header * {
  box-sizing: border-box;
}

.schedule-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dadada;
}

.schedule-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.schedule-nav a,
.schedule-nav button {
  border: 1px solid #dadada;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #0A9FCA;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  height: 26px;
  box-sizing: border-box;
}

.schedule-nav a i {
  font-size: 10px;
}


.schedule-header__content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.schedule-header__calendar-button .ico-calendar {
  color: #35b5cc;
  cursor: pointer;
  font-size: 15px;
}

.schedule-heading {
  padding-left: 8px;
  padding-top: 2px;
  font-size: 18px;
  display: flex;
  gap: 4px;
  color: #555;
  line-height: 1;
}

.schedule-header__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.schedule-action-button {
  /*background-color: #35b5cc;*/
  color: white;
  border-radius: 4px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 12px;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #dadada;
  color: #0A9FCA;
}

.schedule-action-button--disabled {
  color: #bbb;
  background-color: #eee;
  cursor: default !important;
}

.schedule-action-button__small-text {
  font-size: 11px;
}

.schedule-main {
  display: flex;
}

.schedule-main {
  box-sizing: border-box;
}


.schedule-table-wrapper {
  margin-right: 20px;
  padding-bottom: 10px;
  flex: 1;
}

.schedule-table {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 20px;
}

.schedule-table td,
.schedule-table th {
  border: 1px solid #dadada;
}

.schedule-table th {
  padding: 4px;
  color: #666;
}

.schedule-table td {
  vertical-align: top;
  position: relative;
}

.schedule-table td > div {
  min-height: 100px;
}

.schedule-table th.schedule-table__sunday-header,
.schedule-table .sunday .schedule-table__date {
  color: #ee5a5a;
}

.holiday-badge {
  color: white;
  background-color: #ee5a5a;
  font-size: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  height: 14px;
  width: 14px;
  margin-left: 4px;
}

.schedule-table__date {
  color: #666;
  padding: 3px 8px;
}

.schedule-table__date {
  display: flex;
  align-items: center;
}

.is-today .schedule-table__date-text {
  background-color: #009afb;
  padding: 0 4px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  display: inline-block;
}


.schedule-table__edit-button {
  color: #60cad9 !important;
  position: absolute;
  top: 4px;
  right: 4px;
}

.schedule-table a.cal_link {
  display: block;
  color: inherit;
  color: var(--color-text);
  text-decoration: none;
}

.schedule-table a.cal_link:hover {
  text-decoration: underline;
}


.schedule-table ul {
  padding-bottom: 4px;
  max-height: 280px;
  overflow: auto;
  margin-top: -8px;
}

.schedule-table li:first-of-type {
  margin-top: 8px !important;
}

.schedule-table li {
  min-height: 0;
  margin: 3px 4px;
  border-radius: 4px;
  padding: 2px 2px 2px 5px;
  font-size: 12px;
  text-align: left;
}

.schedule-table li.li_event {
  background-color: #75bcfc;
  color: white;
}

.schedule-table li.is-staff-only {
  background-color: white;
  padding-left: 3px;
  position: relative;
  /*background-color: #f3bd5d;*/
  background-color: #fc90c0;
}

.schedule-table li.is-staff-only::before {
  content: '\f023';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  color: white;
  font-size: 9px;
  display: inline-block;
  transform: scale(0.82);
  margin-right: 2px;
  border-radius: 4px;
}

.schedule-table li.li_event img {
  margin-right: 1px;
  transform: scale(0.88) translateY(-1px);
  margin-left: -1px;
}

.schedule-table li.day-type-closed {
  color: #ee5a5a;
  border: 1px solid #f67171;
  padding: 1px 1px 1px 3px;
}

.schedule-table li.day-type-closed .closed-target {
  font-size: 9px;
  color: #444;
}

.schedule-table li.tname {
  border-radius: 0;
  background-color: #f0f0f0;
  padding: 2px;
  font-size: 11px;
  margin: 8px 0 6px;
  box-shadow: none;
  border-top: 1px dotted #dadada;
  color: #444;
}

.schedule-table li.tname::before {
  content: '▼';
  margin-right: 4px;
  font-size: 0.7em;
  /*color: #f59351;*/
  color: #aaa;
  transform: translateY(-1px) scale(0.9);
  display: inline-block;
}

.schedule-table__count {
  background-color: #a3a3a3;
  color: white;
  display: inline-block;
  padding: 0px 3px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 3px;
}

.schedule-table a.cal_link:hover .schedule-table__count {
  text-decoration: none !important;
}

/** sidebar **/
.schedule-sidebar {
  width: 200px;
}

.schedule-sidebar > *:last-of-type {
  margin-bottom: 0;
}

.schedule-sidebar,
.schedule-sidebar * {
  box-sizing: border-box;
}

.widget-box {
  border: 1px solid #dfdfdf;
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 12px 13px 14px;
  color: #555;
  background-color: #f9f9f9;
  position: relative;
}


.widget-box__heading {
  border-bottom: 1px solid #dadada;
  padding-bottom: 4px;
  color: #5a5a5a;
  margin-bottom: 10px;
}

.widget-box__heading--info {
  color: #0a6ebd;
}

.widget-box__heading---info::before {
  content: '\f05a';
  font-family: 'Font Awesome 6 Pro';
  margin-right: 4px;
  color: #a3a3a3;
}

.small-schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  color: #666;
  font-size: 11px;
}

.small-schedule-table th,
.small-schedule-table td {
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  padding: 2px;
}

.drive-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drive-pattern-list > li {
  border-radius: 4px;
}

.drive-pattern-list > li a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
}

.drive-pattern-list > li a::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Pro';
  /*color: white;*/
  font-size: 10px;
  transform: scale(0.9);
  display: inline-block;
}

.vertical-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vertical-checkbox-list > li input {
  margin-right: 4px;
  cursor: pointer;
}

.vertical-checkbox-list > li label {
  cursor: pointer;
}

.disc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disc-list > li {
  display: flex;
  align-items: flex-start;
}

.disc-list > li::before {
  flex-shrink: 0;
  font-size: 0.8em;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #888;
  margin-right: 4px;
  margin-top: 4px;
  content: '';
}

.disc-list a {
  color: #0A9FCA;
}

.widget-box__setting {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #a3a3a3;
}

.small-desc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.small-desc-list__item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.small-desc-list dt {
  background-color: #a3a3a3;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 3px;
  display: inline-block;
}

.small-desc-list--vertical {
  display: block;
}

.small-desc-list--vertical dt {
  margin-bottom: 8px;
  font-size: 12px;
}

.small-desc-list--vertical dd {
  margin-bottom: 12px;
}

.small-desc-list--vertical > *:last-child {
  margin-bottom: 0;
}

.alert-box {
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #dadada;
}

.alert-box__heading {
  color: rgb(1, 67, 97);
}


/*-- color --*/
.schedule table td.color_A {
  background-color: #ffc184 !important;
}

/*  1  */
.schedule table td.color_B {
  background-color: #c1ff84 !important;
}

/*  2  */
.schedule table td.color_C {
  background-color: #ffff7f !important;
}

/*  3  */
.schedule table td.color_D {
  background-color: #9effff !important;
}

/*  4  */
.schedule table td.color_E {
  background-color: #a8ffd3 !important;
}

/*  5  */
.schedule table td.color_F {
  background-color: #a8d3ff !important;
}

/*  6  */
.schedule table td.color_G {
  background-color: #ffb2d8 !important;
}

/*  7  */
.schedule table td.color_H {
  background-color: #d3a8ff !important;
}

/*  8  */
.schedule table td.color_I {
  background-color: #ffa8a8 !important;
}

/*  9  */
.schedule table td.color_J {
  background-color: #a8a8ff !important;
}

/*  10  */

span.alert {
  color: #ff0000;
}

span.cancel {
  color: #ff0000;
  text-decoration: line-through;
}

span.kana {
  font-size: 0.8em;
  white-space: nowrap;
}

span.plan {
  color: #666666;
}

span.plan::before {
  content: "(予定)";
  font-size: 0.8em;
}

td.cancel {
  color: #ff0000;
  text-decoration: line-through;
}

tr.trGlay {
  background-color: #cccccc;
}

/* 24. widget_calendar
--------------------------------------------------------- */
.widget_calendar {
  background: #fff;
  margin: 0;
  padding: 2px 0 0;
}

.widget_calendar #cal_navi {
  background-color: var(--color-base-100);
  margin: 0;
  padding: 2px 10px 2px;
}

.widget_calendar #cal_navi dl {
  margin-bottom: 3px;
  padding: 5px 0 3px 0;
  width: 100%;
}

.widget_calendar #cal_navi dl dt {
  float: left;
  line-height: 1;
}

.widget_calendar #cal_navi dl dt span {
  display: block;
  float: left;
}

.widget_calendar #cal_navi dl dt span.year {
  background: url(../../img/enji/schedule/ico_year.gif) right 6px no-repeat;
  margin-right: 10px;
  padding-right: 20px;
}

.widget_calendar #cal_navi dl dd.month {
  color: #1A1A1A;
  float: left;
  font-family: 'Century Gothic', 'Dotum', arial;
  font-weight: 700;
  font-size: 200%;
  line-height: 1;
}

.widget_calendar #cal_navi dl dd.month span {
  display: block;
  float: left;
}

.widget_calendar #cal_navi dl dd.month span.month {
  background: url(../../img/enji/schedule/ico_month.gif) right 6px no-repeat;
  padding-right: 20px;
}

.widget_calendar #cal_navi ul {
}

.widget_calendar #cal_navi ul li {
  float: left;
  line-height: 20px;
}

.widget_calendar #cal_navi ul li.disable {
  color: #999;
}

.widget_calendar #cal_navi ul li a {
  color: var(--color-text);
  display: block;
  font-size: 93%;
  line-height: 1;
  padding: 4px 0;
  text-decoration: none;
}

.widget_calendar #cal_navi ul li.this_month {
  margin-right: 10px;
  text-align: center;
  width: 43px;
}

.widget_calendar #cal_navi ul li.pre_month {
  margin-right: 10px;
  padding-left: 20px;
  width: 33px;
}

.widget_calendar #cal_navi ul li.next_month {
  padding-left: 10px;
  width: 43px;
}

.widget_calendar #cal_navi #cal_btn {
  float: right;
}

.widget_calendar .widget_calendar_table {
  margin-right: 18px;
  border: 1px solid var(--color-base-200);
  border-radius: 4px;
}

.widget_calendar .widget_calendar_table table {

  margin: 0;
}

.widget_calendar .widget_calendar_table table th {
  padding: 5px;
  text-align: center;
  color: #888;
  font-size: 11px;
  border-bottom: 1px solid var(--color-base-200);
  @media screen and (max-width: 1280px) {
    padding: 4px 0;
  }
}

.widget_calendar .widget_calendar_table table td {
  padding: 4px;
  text-align: center;
  word-break: break-all;
  color: #777;
  @media screen and (max-width: 1280px) {
    padding: 4px 0;
  }
  &:has(span) {
    cursor: pointer;
    &:hover span {
      background-color: var(--color-theme-light);
    }
  }
  span {
    text-decoration: underline;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    @media screen and (max-width: 1280px) {

    }

  }
  &.today {
    span {
      border: 2px solid var(--color-theme-light);
      background-color: var(--color-theme-light);
      font-weight: bold;
      &:hover {
        color: #fff;
      }
    }
  }
  &.has-item {
    padding: 0;
    vertical-align: middle;
    text-align: center;
    span {
      background-color: var(--color-theme);
      color: #fff;

    }
  }
}

.widget_calendar .widget_calendar_table table td div {
  padding: 5px;
  width: 93px;
}

.widget_calendar .widget_calendar_table table td div ul {
  min-height: 32px;
}

.widget_calendar .widget_calendar_table table td div ul li {
  line-height: 1.3;
  text-align: center;
}

.widget_calendar .widget_calendar_table table td div ul li a {
  color: var(--color-text);
}

.widget_calendar .widget_calendar_table table td div ul li a:hover {
  color: #F00;
  text-decoration: underline;
}

.widget_calendar .widget_calendar_table table td p {
  color: var(--color-text);
}

.widget_calendar .widget_calendar_table table td.sunday {
  color: var(--color-danger);
}

.widget_calendar .widget_calendar_table table td.sunday p {
  color: #cc3333;
}

.widget_calendar .widget_calendar_table table td.holiday {
  background: #ffefef;
}

.widget_calendar .widget_calendar_table table td.holiday p {
  color: #cc3366;
}

.widget_calendar .widget_calendar_table table td.saturday {
  color: var(--color-info);
}

.widget_calendar .widget_calendar_table table td.saturday p {
  color: #3399cc;
}


.widget_calendar .widget_calendar_table table.extend td {
  vertical-align: top;
}

.widget_calendar .widget_calendar_table table.extend td div {
  padding: 0px;
  width: 103px;
}

.widget_calendar .widget_calendar_table table.extend td div ul {
  min-height: 52px;
}

.widget_calendar .widget_calendar_table table.extend td div ul li {
  min-height: 26px;
  padding-top: 5px;
}

.widget_calendar #sideBox {
  border: none;
  float: left;
  margin: 10px 0;
  width: 202px;
}

.widget_calendar h3 {
  background: var(--color-text);
  border: none;
  margin-bottom: 3px;
}

.widget_calendar h3 span {
  line-height: 24px;
  padding-left: 6px;
}


/* 25. display_config_dialog
--------------------------------------------------------- */
#display_config_dialog h5 {
  background-color: #ddedfa;
  font-size: 0.8em;
  padding: 3px 10px;
}

#display_config_dialog ul {
  width: 100%;
  font-size: 0.8em;
  margin: 2px 0 0 5px;
}

#display_config_dialog ul.two li {
  float: left;
  width: 50%;
}

#display_config_dialog ul.three li {
  float: left;
  width: 33%;
}

#display_config_dialog ul.four li {
  float: left;
  width: 25%;
}

#display_config_dialog ul.tablet_two li {
  float: left;
  width: 50%;
  font-size: 125%;
  margin: 8px 0;
}

dl.weekday_check {
  float: left;
  border: 1px solid #999;
  background-color: #ccccff;
  height: 30px;
}

dl.weekday_check dt {
  float: left;
  font-weight: 700;
  line-height: 1;
  margin-right: 13px;
  margin-left: 10px;
  padding: 0;
}

dl.weekday_check dd {
  float: left;
  position: relative;
  top: 7px;
  margin: 0 8px;
}


table.sortable_table div.option {
  margin: 2px 0;
  padding: 5px;
  background-color: #ddeeff;
}

table.hidden_item_table td {
  background-color: #eee;
}

table.hidden_item_table td div.option {
  background-color: #dddddd;
}

table.hidden_item_table td input {
  background-color: #eee;
  color: #888;
}


div.config_alert {
  color: #f60;
  font-size: 0.8em;
}

div.config_alert i {
  font-size: 1.1em;
  color: #f60;
}


.l_ico {
  width: 40px;
  height: 40px;
  font-size: 200%;
}

.m_ico {
  width: 30px;
  height: 30px;
  font-size: 150%;
}

.s_ico {
  width: 20px;
  height: 20px;
  font-size: 100%;
}

.i_light_blue {
  background-color: #b0deff;
}

.i_light_gray {
  background-color: #d8d8d8;
}

.i_light_green {
  background-color: #62b960;
}

.imark {
  position: relative;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: inline-table;
}

a.imark {
  cursor: pointer;
  text-decoration: none;
}

.imark:hover {
  text-decoration: none;
}

.imark .color_white {
  color: #fff !important;
}

.imark .color_gray {
  color: #888888 !important;
}


.cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  color: #000;
  margin-bottom: 3px;
}

.cp_actab input.cp_chk {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.cp_actab label.cp_lbl {
  line-height: 3;
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  cursor: pointer;
  margin: 0 0 1px 0;
  border-bottom: 1px solid #ccc;
  font-size: 24px;
  line-height: 1.7em;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.cp_actab .cp_actab-content {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.35s;
  transition: max-height 0.35s;
}

.cp_actab .cp_actab-content p {
  margin: 0.5em 1em 1em 3em;
}

/* :checked */
.cp_actab input.cp_chk:checked ~ .cp_actab-content {
  max-height: 20em;
}

/* Icon */
.cp_actab label.cp_lbl::after {
  line-height: 3;
  position: absolute;
  top: -7px;
  right: 0;
  display: block;
  width: 3em;
  height: 3em;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  text-align: center;
}

.cp_actab input[type=checkbox] + label::after {
  content: '+';
}

.cp_actab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

.cp_blue {
  background-color: #CFE9FD;
  border: 1px solid #688FDC;
}

.cp_red {
  background-color: #ffc8b9;
  border: 1px solid #dc3933;
}

.cp_orange {
  background-color: #ffdd88;
  border: 1px solid #ff8800;
}

.cp_white {
  background-color: #fff;
  border: 1px solid #ccc;
}

.list_color_box {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  float: left;
  border: 1px solid #ccc;
}


@media screen and (max-width: 840px) {
  #header #header_inner #logo_area {
    width: 46px;
    overflow: hidden;
  }

  #header #header_inner dl#year_select {
    width: 120px;
  }

  #header #header_inner dl#year_select dt {
    float: none;
    padding: 0 0 2px;
  }

  #header #header_inner dl#year_select dd {
    text-align: center;
    float: none;
    padding: 0;
  }

  /*-- l_size_nendo_btn --*/
  .l_size_nendo {
    height: 23px;
  }

  .l_size_nendo a {
    background: url(../../img/enji/common/bg_btn_m.gif);
    background-position: 0 0;
    background-repeat: repeat-x;
    padding: 6px 12px;
  }

  .l_size_nendo a:hover {
    background: url(../../img/enji/common/bg_btn_m_on.gif);
    background-position: 0 0;
    background-repeat: repeat-x;
  }

}

.color_select {
  width: 100px;
  height: 25px;
  border: 1px solid rgb(0, 0, 0);
  float: left;
  margin-right: 20px;
}

.color_input {
  width: 150px;
}

.edit__sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1px dotted #999;
  border-radius: 4px;
  cursor: move;
  margin-right: 2px;
}

.cell-lbl {
  text-align: center;
}

.cell-lbl span {
  color: white;
  border-radius: 5px;
  white-space: nowrap;
  padding: 1px 8px;
}

.label-default {
  background-color: #999999;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}

.label-primary {
  background-color: #2fa4e7;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #178acc;
}

.label-success {
  background-color: #73a839;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #59822c;
}

.label-info {
  background-color: #033c73;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #022241;
}

.label-warning {
  background-color: #dd5600;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #aa4200;
}

.label-danger {
  background-color: #c71c22;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #9a161a;
}

.ouchien-login {
  margin: 20px auto;
  text-align: center;
}

.ouchien-login .err {
  background-position: center bottom;
}

.map-pin {
  border: solid 1px #444;
  border-radius: 14px;
  color: #000;
  font-size: 12px;
  padding: 3px 7px;
  position: relative;
}

.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 97%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #444;
}

/** general button **/

.close-button {
  background-color: var(--color-base-200);
  text-decoration: none;
  color: var(--color-text);
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  &::before {
    content: '×';
  }
}

.close_btn img {
  display: none;
}

.close_btn a {
  background-color: var(--color-base-200);
  text-decoration: none;
  color: var(--color-text);
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  &::before {
    content: '× 閉じる';
  }

}


/* ナビゲーションリンク（前へ・次へ） */
#PrevBtn, #NextBtn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  margin: 0 !important;
}

#PrevBtn {
  left: 8px;
}

#NextBtn {
  right: 8px;
}


.previous_link,
.follow_link {
  position: static !important;
  margin: 0 !important;
  color: #777;
  font-size: 11px;
  width: 38px !important;
  line-height: 1.33;

  /* 画像非表示（Font Awesomeを使用） */
  img {
    display: none;
  }

  /* リンクの共通スタイル */
  a {
    background-color: var(--color-base-100);
    text-decoration: none;
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    color: var(--color-text);
    padding: 4px 0;
    font-size: 16px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 2px;

    /* Font Awesomeアイコンのデフォルト設定 */
    &::before {
      font-family: "Font Awesome 6 Pro";
      font-style: normal;
    }
  }
}

/* 前へボタン */
.previous_link {
  a::before {
    content: "\f104"; /* 左矢印アイコン */
  }

  /* 2番目の前へボタン（保存して前へ） */
  &:nth-of-type(2) a::before {
    content: '\f104\0020\f0c7'; /* 左矢印 + 保存アイコン */
  }
}

/* 次へボタン */
.follow_link {
  a::before {
    content: "\f105"; /* 右矢印アイコン */
  }

  /* 2番目の次へボタン（保存して次へ） */
  &:nth-of-type(2) a::before {
    content: '\f0c7\0020\f105'; /* 保存アイコン + 右矢印 */
  }
}

/** settings page */
.setting-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-base-100);
}

.setting-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  li {
    a {
      color: var(--color-text);
      display: block;
      width: 172px;
      padding: 8px;
      min-height: 106px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: var(--color-base-100);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      &:hover {
        background-color: var(--color-base-50);
      }
      dt {
        margin-bottom: 8px;
        display: flex;
        gap: 4px;
        font-weight: bold;
        &::before {
          content: "\f0ad";
          font-weight: 900;
          color: var(--color-theme);
          font-family: "Font Awesome 6 Pro";
        }
      }
      dd {
        color: #777;
      }
    }
  }

}

.class-list-buttons {
  margin-bottom: 8px;
}

/** FAQ in GNAV */

#QaSimpleSearch{
  position: absolute;
  z-index: 35;
  display: none;
  float: right;
}

.QaSimpleSearchBox {
  width: 300px;
  float: left;
  border: #d0d0d0 1px solid;
  background-color: white;
  border-radius: 5px 5px 5px 5px;
  color: rgb(255, 255, 255);
  box-shadow: lightgrey 3px 3px 10px ;
}

.QaSimpleSearchHeadBar{
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 99999;
  width: 100%;
  height: 30px;
  background-color: rgb(33, 150, 243);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  border-radius: 5px 5px 0px 0px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: Roboto, メイリオ, Meiryo, sans-serif;
  vertical-align: middle;
}

#QaSimpleSearchDragArea {
  position: absolute;
  width: 270px;
  height: 30px;
  cursor: move;
}

.QaSimpleSearchTitle{
  position: absolute;
  line-height: 30px;
  padding-left: 5px;
  font-size: 110% !important;
}

.QaSimpleSearchCloseButton{
  text-decoration: none;
  font-weight: bold;
  float: right;
  padding-right: 10px;
  line-height: 30px;
  font-size: 120% !important;
}
.QaSimpleSearchCloseButton a{
  text-decoration: none;

}

.QaSimpleSearchCloseButton a:link { color: #FFFFFF; }
.QaSimpleSearchCloseButton a:visited { color: #000080; }
.QaSimpleSearchCloseButton a:hover { color: #ff0000; }
.QaSimpleSearchCloseButton a:active { color: #ff8000; }

.QaSimpleSearchQaLink{
  text-decoration: none;
  line-height: 30px;
  height: 30px;
}

#search_word{
  width: 69%;
  border: 1px #ccc solid;
  border-radius: 5px;
  font-size: 100%;
  margin-right: 5px;
  padding: 0 2px;
  height: 28px;
  float: left;
}

.submitBtn{
  background: transparent url(/faq/img/qa/bg_btn.png) no-repeat scroll left top;
  color: #666;
  width: 74px;
  height: 32px;
  font-weight: bold;
  border: 0;
  font-size: 14px;
}

.searchListArea{
  margin: 0 3px 3px 3px;
  max-height: 400px;
  overflow: auto;
}

.searchList a{
  font-weight: bold;
  font-size: 12px;
  padding-top: 5px;
  padding-bottom: 4px;
  line-height: 14px;
  /*text-align: ;*/
  display: block;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #337ab7;
}

.searchList span{
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  /*text-align: ;*/
  display: block;
  text-decoration: none;
  color: GrayText;
}

.qaLoading{
  width: 100%;
}

.qaLoading img{
  margin: 25px 0 25px 127px;
}

/** 停留所地図 **/

.route-map-wrapper {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
  > * {
    float: none;
    margin: 0 !important;
  }
  #mail {
    flex: 1;
  }
}

.route-map-title {
  padding: 12px;
  background-color: var(--color-base-100);
}

/** import */
#message_area {
  max-width: 100% !important;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
  + form {
    padding: 0 16px;
  }
}

/** AI */
@keyframes ai-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
.ai-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-edit-box {
  position: relative;
  display: inline-block;
  width: 420px;
  margin-top: 8px;
}
.ai-edit-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 40px 10px 14px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-edit-box input:focus {
  border-color: #6ba3e8;
  box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
}
.ai-edit-box input:disabled {
  background: #f9fafb;
  opacity: 0.6;
}
.ai-send-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s;
  padding: 0;
} 
.ai-send-btn:hover:not(:disabled) {
  background: #bfdbfe;
}
.ai-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ai-toggle-group {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 4px;
}
.ai-toggle-btn {
  padding: 3px 10px;
  font-size: 12px;
  border: none;
  border-right: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1.6;
}
.ai-toggle-btn:last-child {
  border-right: none;
}
.ai-toggle-btn.is-active {
  background: #3b82f6;
  color: #fff;
}
.ai-toggle-btn:hover:not(.is-active) {
  background: #e5e7eb;
}
.ai-toggle-label {
  font-size: 12px;
  color: #374151;
  margin-right: 4px;
  vertical-align: middle;
}
.ai-generate-panel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 12px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}
.ai-generate-panel-label {
  font-size: 12px;
  font-weight: bold;
  color: #1d4ed8;
  white-space: nowrap;
  margin-right: 4px;
}
.ai-generate-panel-sep {
  width: 1px;
  height: 20px;
  background: #bfdbfe;
  flex-shrink: 0;
}
.ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.ai-generate-btn:hover:not(:disabled) {
  background: #bfdbfe;
}
.ai-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* === メールAI アウトプットエリア === */
.mail-ai-output {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
  width: 90%;
  box-sizing: border-box;
}
.mail-ai-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mail-ai-output-label {
  font-size: 13px;
  font-weight: bold;
  color: #444;
}
.mail-ai-history-btn {
  font-size: 12px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px 6px;
}
.mail-ai-history-btn:hover {
  color: #333;
  text-decoration: underline;
}
.mail-ai-output-body {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  min-height: 80px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.mail-ai-output-placeholder {
  color: #aaa;
  font-style: italic;
}
.mail-ai-output-preparing {
  color: #666;
}
.mail-ai-output-text {
  color: #222;
}
.mail-ai-output-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}
.mail-ai-apply-btn,
.mail-ai-copy-btn {
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
.mail-ai-apply-btn {
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
}
.mail-ai-apply-btn:hover:not(:disabled) {
  background: #3a7bc8;
}
.mail-ai-apply-btn:disabled,
.mail-ai-copy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mail-ai-output-note {
  margin-top: 4px;
  font-size: 11px;
  color: #888;
}

/* === メールAI 履歴モーダル === */
.mail-ai-modal {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.mail-ai-modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mail-ai-modal-title {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
}
.mail-ai-modal-note {
  font-size: 11px;
  color: #888;
  font-weight: normal;
  margin-left: 8px;
}
.mail-ai-modal-close {
  font-size: 20px;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.mail-ai-modal-close:hover {
  color: #333;
}
.mail-ai-modal-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}
.mail-ai-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
.mail-ai-tab.is-active {
  color: #4a90e2;
  border-bottom-color: #4a90e2;
}
.mail-ai-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.mail-ai-history-item {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fafafa;
}
.mail-ai-history-item-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}
.mail-ai-history-item-answer {
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #222;
}
.mail-ai-history-item-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}
.mail-ai-history-copy-btn {
  font-size: 12px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  color: #666;
}
.mail-ai-modal-empty {
  text-align: center;
  color: #aaa;
  padding: 24px 0;
}