/*
    ファイル名：basis.css
		作成者：許
*/
:root {
  --menu-width: 1110px;
  --contents-width-wide: 1100px;
  --contents-width-narrow: 800px;
  --colour-theme-light: #e67300;
  --colour-theme-dark: #0073e6;
  --colour-main-navy: #15264e;
  --colour-main-red: #c31922;
  --colour-main-light-blue: #7291da;
  --colour-main-yellow: #c2c219;
  --heading-size: 24px;
  --font-size: 20px;
  --font-family-regular: "Noto Sans JP Regular", sans-serif;
  --font-family-light: "Noto Sans JP Light", sans-serif;
  --font-family-medium: "Noto Sans JP Bold", sans-serif;
  --font-family-bold: "Noto Sans JP Black", sans-serif;
  --line-height: 1.6;
  --transition-duration: 0.2s;
  /* colour scheme: light */
  --colour-background: #ffffff;
  --colour-text: #333333;
  box-sizing: border-box;
}

*,
*::before,
*::after,
*::marker {
  box-sizing: inherit;
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src:
    local("Material Icons"), local("MaterialIcons-Regular"),
    url(/icons/material_design/MaterialIconsOutlined-Regular.otf);
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: top;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.text-align_center {
  text-align: center;
}

/* grid system */
.rows {
  display: flex;
  flex-wrap: wrap;
}

/* Regardless of Screen Size */
.col_12 {
  flex-basis: 100%;
  max-width: 100%;
}

.col_10 {
  flex-basis: calc(100% / 1.2);
  max-width: calc(100% / 1.2);
}

.col_8 {
  flex-basis: calc(100% / 1.5);
  max-width: calc(100% / 1.5);
}

.col_6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col_4 {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
}

.col_3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col_2 {
  flex-basis: calc(100% / 6);
  max-width: calc(100% / 6);
}

.col_auto {
  flex-basis: 0;
  flex-grow: 1;
}

/* Width < 576px */
@media (max-width: 576px) {
  .col-xs_12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-xs_10 {
    flex-basis: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  .col-xs_8 {
    flex-basis: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
  }

  .col-xs_6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-xs_4 {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }

  .col-xs_3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-xs_2 {
    flex-basis: calc(100% / 6);
    max-width: calc(100% / 6);
  }
}

/* Width >= 576px */
@media (min-width: 576px) {
  .col-sm_12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm_10 {
    flex-basis: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  .col-sm_8 {
    flex-basis: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
  }

  .col-sm_6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm_4 {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }

  .col-sm_3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm_2 {
    flex-basis: calc(100% / 6);
    max-width: calc(100% / 6);
  }
}

/* Width >= 768px */
@media (min-width: 768px) {
  .col-md_12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md_10 {
    flex-basis: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  .col-md_8 {
    flex-basis: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
  }

  .col-md_6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md_4 {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }

  .col-md_3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md_2 {
    flex-basis: calc(100% / 6);
    max-width: calc(100% / 6);
  }
}

/* Width >= 1024px */
@media (min-width: 1024px) {
  .col-lg_12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg_10 {
    flex-basis: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  .col-lg_8 {
    flex-basis: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
  }

  .col-lg_6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg_4 {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }

  .col-lg_3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg_2 {
    flex-basis: calc(100% / 6);
    max-width: calc(100% / 6);
  }
}

/* Width >= 1366px */
@media (min-width: 1366px) {
  .col-xl_12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-xl_10 {
    flex-basis: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  .col-xl_8 {
    flex-basis: calc(100% / 1.5);
    max-width: calc(100% / 1.5);
  }

  .col-xl_6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-xl_4 {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }

  .col-xl_3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-xl_2 {
    flex-basis: calc(100% / 6);
    max-width: calc(100% / 6);
  }
}

/* Menu & Main Content */
#content_container {
  display: grid;
  grid-template-columns: 240px auto;
  grid-template-rows: auto;
  grid-template-areas:
    ". content"
    ". footer";
  height: 100vh;
  overflow: auto;
}

#main_container {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  background-color: #ffffff;
  grid-area: content;
  padding: 8px;
  box-sizing: border-box;
}

/* HTMX読み込み時の背景重複を防止 */
#main_container>#main_container {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main_heading {
  margin: 0;
  font-size: var(--heading-size);
  color: var(--colour-main-navy);
}

@media screen and (max-width: 800px) {
  #content_container {
    grid-template-columns: 100%;
    grid-template-rows: 40px auto;
    grid-template-areas:
      "."
      "content"
      "footer";
  }

  #main_container {
    margin-top: 0;
  }
}

/* scrollbar */
#content_container::-webkit-scrollbar,
#content_container div::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#content_container::-webkit-scrollbar-thumb,
#content_container div::-webkit-scrollbar-thumb {
  background-color: var(--colour-main-navy);
  border-radius: 20px;
  border: 2px solid #ffffff;
}

#footer_container {
  position: absolute;
  display: block;
  z-index: 8;
  width: 100%;
  height: 20px;
  bottom: 0;
  color: #ffffff;
  grid-area: footer;
  background-color: #7291da;
  /* transition: top 0.5s ease-in-out; */
  user-select: none;
}

#copyright {
  margin: 4px 8px 0 8px;
  font-size: 10px;
  text-align: center;
}

/* button */
.button_containers {
  margin: 4px;
  position: relative;
  z-index: 10;
}

button,
a.buttons {
  background-color: #ffffff;
  color: var(--colour-main-navy);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 18px;
  border: 1px solid var(--colour-main-navy);
  border-radius: 5px;
  display: block;
  text-align: center;
  transition: 0.5s;
  font-size: 16px;
  width: 100%;
  margin: 10px 0;
}

button:hover,
a.buttons:hover {
  color: #ffffff;
  background-color: var(--colour-main-navy);
  border-color: var(--colour-main-navy);
}

button.red,
a.buttons.red {
  color: var(--colour-main-red);
  border-color: var(--colour-main-red);
}

button.red:hover,
a.buttons.red:hover {
  color: #ffffff;
  background-color: var(--colour-main-red);
  border-color: var(--colour-main-red);
}

button.light-blue,
a.buttons.light-blue {
  color: var(--colour-main-light-blue);
  border-color: var(--colour-main-light-blue);
}

button.light-blue:hover,
a.buttons.light-blue:hover {
  color: #ffffff;
  background-color: var(--colour-main-light-blue);
  border-color: var(--colour-main-light-blue);
}

button.yellow,
a.buttons.yellow {
  color: var(--colour-main-yellow);
  border-color: var(--colour-main-yellow);
}

button.yellow:hover,
a.buttons.yellow:hover {
  color: #ffffff;
  background-color: var(--colour-main-yellow);
  border-color: var(--colour-main-yellow);
}

.form-header {
  font-size: calc(var(--font-size) * 1);
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
  padding-bottom: 5px;
}

.control-label.is-required:before {
  content: "* ";
  color: red;
}

/* 防止按钮颤抖和闪烁的全局样式 */
button,
a.buttons,
.edit_buttons,
.yellow,
.red,
.light-blue {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  /* 防止闪烁 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  /* 优化渲染 */
  will-change: transform, box-shadow;
  /* 防止子像素渲染问题 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  /* 确保鼠标指针稳定 */
  cursor: pointer;
}

/* 按钮悬浮效果，使用阴影代替transform防止闪烁 */
button:hover,
a.buttons:hover,
.edit_buttons:hover,
.yellow:hover,
.red:hover,
.light-blue:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 强制控制所有SVG和图标尺寸，防止异常放大 */
svg,
.material-icons,
.icon {
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 分页组件内的所有图标特殊控制 */
.pagination-container svg,
.pagination-container .material-icons,
.pagination-container .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  font-size: 1.25rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 无数据提示内的图标特殊控制 */
.no-data-container svg,
.no-data-container .material-icons,
.no-data-container .icon {
  width: 4rem !important;
  height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
  font-size: 4rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

button:active,
a.buttons:active,
.edit_buttons:active,
.yellow:active,
.red:active,
.light-blue:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 防止按钮闪烁的额外样式 */
button,
a.buttons,
.edit_buttons,
.yellow,
.red,
.light-blue {
  /* 防止闪烁的过渡效果 */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  /* 禁用可能导致闪烁的动画 */
  animation: none !important;
}