/* ------------------------------
General Styles
------------------------------ */
:root {
  /* Color */
  --c-background-1: #FFF;
  --c-background-2: #F0F2F5;
  --c-surface-1: #FFF;
  --c-surface-2: rgba(68, 94, 131, 0.05);
  --c-surface-3: rgba(68, 94, 131, 0.08);
  --c-surface-4: rgba(68, 94, 131, 0.14);
  --c-surface-5: rgba(68, 94, 131, 0.32);
  --c-text-1: rgba(0, 0, 0, 0.88);
  --c-text-2: rgba(0, 0, 0, 0.72);
  --c-text-3: rgba(0, 0, 0, 0.48);
  --c-text-4: rgba(0, 0, 0, 0.28);
  --c-text-5: #FFF;
  --c-text-6: rgba(255, 255, 255, 0.80);
  --c-border-1: rgba(68, 94, 131, 0.16);
  --c-border-2: rgba(68, 94, 131, 0.32);
  --c-border-3: rgba(255, 255, 255, 0.32);
  --c-brand-primary: #1850BF;
  --c-brand-primary-dark: #0D4199;
  --c-brand-primary-light: #226BF2;
  --c-brand-primary-container: #E1EDFA;
  --c-semantic-assertive: #F4312E;
  --c-semantic-warning: #FF9029;
  --c-semantic-success: #00927A;
  --c-semantic-informative: #2267D8;
  --vh: auto;
  --scvh: auto;
  /* Break Point */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  /* Font Size */
  --font-24: 24px;
  --font-20: 20px;
  --font-16: 16px;
  --font-14: 14px;
  --font-12: 12px;
  --font-10: 10px;
  /* Line Height */
  --lineheight-24: 32px;
  --lineheight-20: 28px;
  --lineheight-16: 24px;
  --lineheight-14: 22px;
  --lineheight-12: 18px;
  --lineheight-10: 16px;
  /* Weight */
  --weight-B: 600;
  --weight-R: 400;
  /* Border Radius */
  --border-radius-4: 4px;
  --border-radius-round: 100vh;
  /* Animation */
  --animation-hover: .2s;
  --animation-zoom: .4s;
}

body {
  /* background: #191919; */
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--c-surface-1, #FFF);
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
}

img {
  height: auto;
  vertical-align: top;
}

main {
  display: block;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--c-brand-primary, #1850BF);
}

a:hover,
a:focus {
  text-decoration: none;
  outline: 0;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

h1,
h2,
h3,
h4 {}

h1 {}

p {
  margin: 0;
  padding: 0;
}

span {
  position: relative;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.lH-0 {
  line-height: 0;
}

.lH-1 {
  line-height: 100%;
}

.lH-2 {
  line-height: 125%;
}

.lH-3 {
  line-height: 150%;
}

.lH-4 {
  line-height: 175%;
}

.lH-5 {
  line-height: 200%;
}

.lH-6 {
  line-height: 225%;
}

.lH-7 {
  line-height: 250%;
}

.lH-8 {
  line-height: 275%;
}

.lH-9 {
  line-height: 300%;
}

/* ------------------------------
Button
------------------------------ */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--border-radius-4, 4px);
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-B, 600);
  transition: var(--animation-hover, .2s);
  box-sizing: border-box;
}

.button.primary-M {
  height: 40px;
  padding: 0px 24px;
  gap: 4px;
  background: var(--c-brand-primary, #1850BF);
  color: var(--c-text-5, #FFF);
}

.button.primary-S {
  height: 32px;
  padding: 0px 16px;
  gap: 2px;
  background: var(--c-brand-primary, #1850BF);
  color: var(--c-text-5, #FFF);
}

.button.primary-M:hover,
.button.primary-S:hover {
  background: var(--c-brand-primary-dark, #0D4199);
  transition: var(--animation-hover, .2s);
}

.button.secondary-M {
  height: 40px;
  padding: 0px 24px;
  gap: 4px;
  border: 2px solid var(--c-brand-primary, #1850BF);
  background: var(--c-surface-1, #FFF);
  color: var(--c-brand-primary, #1850BF);
}

.button.secondary-S {
  height: 32px;
  padding: 0px 16px;
  gap: 2px;
  border: 2px solid var(--c-brand-primary, #1850BF);
  background: var(--c-surface-1, #FFF);
  color: var(--c-brand-primary, #1850BF);
}

.button.secondary-M:hover,
.button.secondary-S:hover {
  background: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

.button.inverse-M {
  height: 40px;
  padding: 0px 24px;
  gap: 4px;
  border: 2px solid var(--c-text-5, #FFF);
  color: var(--c-text-5, #FFF);
}

.button.inverse-S {
  height: 32px;
  padding: 0px 16px;
  gap: 2px;
  border: 2px solid var(--c-text-5, #FFF);
  color: var(--c-text-5, #FFF);
}

.button.inverse-M:hover,
.button.inverse-S:hover {
  background: rgba(255, 255, 255, 0.16);
  transition: var(--animation-hover, .2s);
}

.button.text-M {
  height: 40px;
  padding: 0px 24px;
  gap: 4px;
  background: none;
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
}

.button.text-S {
  height: 32px;
  padding: 0px 16px;
  gap: 2px;
  background: none;
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
}

.button.text-M:hover,
.button.text-S:hover {
  background: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

.view-more {
  position: relative;
  color: var(--c-brand-primary, #1850BF);
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-B, 600);
  margin-right: 14px;
}

.view-more::after {
  content: '';
  position: absolute;
  background-image: url('../images/icons/more.svg');
  top: 5px;
  margin-left: 6px;
  width: 8px;
  height: 12px;
}

.view-more:hover {
  color: var(--c-brand-primary-dark, #0D4199);
  transition: var(--animation-hover, .2s);
}

/* ------------------------------
Tab
------------------------------ */
.tab.M {
  height: 56px;
  padding: 0 24px;
  font-size: var(--font-16, 16px);
  line-height: var(--lineheight-16, 24px);
  border-bottom: 4px solid;
  box-sizing: border-box;
}

.tab.S {
  height: 48px;
  padding: 0 16px;
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  border-bottom: 2px solid;
  box-sizing: border-box;
}

.tab.XS {
  height: 40px;
  padding: 0 16px;
  font-size: var(--font-12, 12px);
  line-height: var(--lineheight-12, 18px);
  border-bottom: 2px solid;
  box-sizing: border-box;
}

.tab {
  display: grid;
  align-items: center;
  font-weight: var(--weight-B, 600);
  text-align: center;
}

.tab.active {
  color: var(--c-brand-primary, #1850BF);
  pointer-events: none;
  border-color: var(--c-brand-primary, #1850BF);
}

.tab.inactive {
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
  border-color: rgba(0, 0, 0, 0);
}

.tab.inactive:hover {
  color: var(--c-text-1, rgba(0, 0, 0, 0.88));
  transition: var(--animation-hover, .2s);
}

/* ------------------------------
Filter
------------------------------ */
.filter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  border-radius: var(--border-radius-round, 100vh);
  font-size: var(--font-16, 16px);
  line-height: var(--lineheight-16, 24px);
  font-weight: var(--weight-B, 600);
  transition: var(--animation-hover, .2s);
}

.filter.M-inactive {
  height: 40px;
  padding: 0px 24px;
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
}

.filter.S-inactive {
  height: 32px;
  padding: 0px 16px;
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
}

.filter.M-inactive:hover,
.filter.S-inactive:hover {
  background: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

.filter.M-active {
  height: 40px;
  padding: 0px 24px;
  background: var(--c-surface-3, rgba(68, 94, 131, 0.08));
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
}

.filter.S-active {
  height: 32px;
  padding: 0px 16px;
  background: var(--c-surface-3, rgba(68, 94, 131, 0.08));
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
}

/* ------------------------------
CheckBox
------------------------------ */
.checkbox {
  appearance: none;
  margin: 0;
  padding: 0;
}

.checkbox-label {
  display: inline-block;
  padding: 0 0 0 24px;
  position: relative;
  cursor: pointer;
  color: var(--c-text-1, rgba(0, 0, 0, 0.88));
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
}

.checkbox-label::before {
  content: '';
  display: block;
  border-radius: var(--border-radius-4, 4px);
  background-color: var(--c-surface-1, #FFF);
  border: 2px solid var(--c-border-2, rgba(68, 94, 131, 0.32));
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;

}

.checkbox-label:hover::before {
  background-color: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}


.checkbox:checked+.checkbox-label::before {
  content: '';
  display: block;
  border-radius: var(--border-radius-4, 4px);
  background-color: var(--c-brand-primary, #1850BF);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0px;
}

.checkbox:checked+.checkbox-label:hover::before {
  background-color: var(--c-brand-primary-dark, #0D4199);
  transition: var(--animation-hover, .2s);
}

.checkbox:checked+.checkbox-label::after {
  position: absolute;
  width: 10px;
  height: 8px;
  background-image: url('../images/icons/checkbox.svg');
  top: 8px;
  left: 5px;
  pointer-events: none;
  content: '';
}

/* ------------------------------
Radio Button
------------------------------ */
.radio-btn {
  appearance: none;
  margin: 0;
  padding: 0;
}

.radio-label {
  display: inline-block;
  padding: 0 0 0 24px;
  position: relative;
  cursor: pointer;
  color: var(--c-text-1, rgba(0, 0, 0, 0.88));
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
}

.radio-label::before {
  content: '';
  display: block;
  border-radius: var(--border-radius-round, 100vh);
  background-color: var(--c-surface-1, #FFF);
  border: 2px solid var(--c-border-2, rgba(68, 94, 131, 0.32));
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
}

.radio-label:hover::before {
  background-color: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

.radio-btn:checked+.radio-label::after {
  content: '';
  display: block;
  border-radius: var(--border-radius-round, 100vh);
  background-color: var(--c-text-5, #FFF);
  border: 6px solid var(--c-brand-primary, #1850BF);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0px;
}

.radio-btn:checked+.radio-label:hover::after {
  border: 6px solid var(--c-brand-primary-dark, #0D4199);
  transition: var(--animation-hover, .2s);
}

/* ------------------------------
Select Box
------------------------------ */
.selectwrap {
  position: relative;
  width: 100%;
}

.selectwrap::after {
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url('../images/icons/arrow_down.svg');
  top: 8px;
  right: 12px;
  pointer-events: none;
  content: '';
}

.selectwrap.S::after {
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url('../images/icons/arrow_down.svg');
  top: 8px;
  right: 12px;
  pointer-events: none;
  content: '';
}

.select {
  appearance: none;
  width: 100%;
  height: 40px;
  /* セレクトボックスの高さ */
  background-color: var(--c-surface-1, #FFF);
  border: 2px solid var(--c-border-1, rgba(68, 94, 131, 0.16));
  border-radius: var(--border-radius-4, 4px);
  box-sizing: border-box;
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
  padding: 0 42px 0 14px;
  cursor: pointer;
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
  text-overflow: ellipsis;
}

.select.S {
  height: 32px;
  /* セレクトボックスの高さ */
  padding: 0 28px 0 12px;
}

.select:hover {
  background-color: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

select:focus {
  border: 2px solid var(--c-brand-primary, #1850BF);
  transition: var(--animation-hover, .2s);
}

select:focus {
  outline: none;
}

::-ms-expand {
  display: none;
}

/* ------------------------------
Text Area
------------------------------ */
.textfield {
  width: 100%;
  height: 106px;
  padding: 7px 12px;
  background-color: var(--c-surface-1, #FFF);
  border: 2px solid var(--c-border-1, rgba(68, 94, 131, 0.16));
  border-radius: var(--border-radius-4, 4px);
  box-sizing: border-box;
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
  resize: vertical;
}

.textfield:hover {
  background-color: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}

.textfield::placeholder {
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
}

.textfield.single-line {
  height: 3em !important;
}

textarea:focus {
  outline: none;
  border: 2px solid var(--c-brand-primary, #1850BF);
  transition: var(--animation-hover, .2s);
}

/* ------------------------------
Pager
------------------------------ */
.pager {
  display: inline-flex;
  flex-direction: row;
}

.pager li {
  list-style: none;
}

.page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--font-16, 16px);
  line-height: var(--lineheight-16, 24px);
  font-weight: var(--weight-B, 600);
  border-radius: var(--border-radius-round, 100vh);
  box-sizing: border-box;
}

.page-number.M-active {
  background-color: var(--c-brand-primary, #1850BF);
  border-radius: var(--border-radius-round, 100vh);
  color: var(--c-text-5, #FFF);
}

.page-number.M-inactive {
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
}

.page-number.M-disabled {
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
}


.page-number.M-inactive:hover {
  background-color: var(--c-surface-2, rgba(68, 94, 131, 0.05));
  transition: var(--animation-hover, .2s);
}


.pager-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
}

.page-number-prev {
  background-image: url('/assets/images/icons/arrow_left.svg');
  width: 24px;
  height: 24px;
}

.page-number-first {
  background-image: url('/assets/images/icons/arrow_first.svg');
  width: 24px;
  height: 24px;
}

.page-number-next {
  background-image: url('/assets/images/icons/arrow_right.svg');
  width: 24px;
  height: 24px;
}

.page-number-last {
  background-image: url('/assets/images/icons/arrow_last.svg');
  width: 24px;
  height: 24px;
}

/* ---------------- デスクトップ-Lサイズ（基本はstyle.cssに記述） ----------------- */
@media only screen and (min-width: 1080px) {
  .mobile {
    display: none !important;
  }

}

/* --------------------------　デスクトップ-Mサイズ -------------------------- */
@media only screen and (min-width: 744px) and (max-width: 1079px) {
  .mobile {
    display: none !important;
  }
}

/* -------------------------- モバイルサイズ -------------------------- */
@media only screen and (max-width: 743px) {
  .desktop {
    display: none !important;
  }

  .button.primary-M.compact,
  .button.secondary-M.compact,
  .button.inverse-M.compact,
  .button.text-M.compact {
    height: 32px;
    padding: 0px 16px;
    font-size: var(--font-14, 14px);
    line-height: var(--lineheight-14, 22px);
  }

  .button.primary-S.compact,
  .button.secondary-S.compact,
  .button.inverse-S.compact,
  .button.text-S.compact {
    height: 28px;
    padding: 0px 12px;
    font-size: var(--font-12, 12px);
    line-height: var(--lineheight-12, 18px);
  }


  /* ------------------------------
	Text Area
	------------------------------ */
  .page-number.compact {
    width: 32px;
    height: 32px;
    font-size: var(--font-14, 14px);
    line-height: var(--lineheight-14, 22px);
  }

  .pager-button.compact {
    width: 32px;
    height: 32px;
    padding: 4px;
  }

  /* ------------------------------
	Tab
	------------------------------ */
  .tab.M.compact {
    height: 48px;
    padding: 0 24px;
    font-size: var(--font-14, 14px);
    line-height: var(--lineheight-14, 22px);
    border-bottom-width: 2px;
  }

}

.error-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--c-background-2, #F0F2F5);
}

.error-card {
  background: var(--c-surface-1, #FFF);
  border-radius: var(--border-radius-4, 4px);
  box-shadow: 0 8px 24px rgba(68, 94, 131, 0.16);
  max-width: 500px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border-1, rgba(68, 94, 131, 0.16));
}

.error-card-header {
  background: var(--c-semantic-assertive, #F4312E);
  color: var(--c-text-5, #FFF);
  padding: 24px 30px;
  font-size: var(--font-20, 20px);
  line-height: var(--lineheight-20, 28px);
  font-weight: var(--weight-B, 600);
  text-align: center;
  position: relative;
}

.error-card-header::before {
  content: '⚠️';
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
}

.error-card-body {
  padding: 40px 30px;
  text-align: center;
}

.error-title {
  color: var(--c-text-1, rgba(0, 0, 0, 0.88));
  font-size: var(--font-24, 24px);
  line-height: var(--lineheight-24, 32px);
  font-weight: var(--weight-B, 600);
  margin-bottom: 20px;
}

.error-message {
  color: var(--c-text-2, rgba(0, 0, 0, 0.72));
  font-size: var(--font-16, 16px);
  line-height: var(--lineheight-16, 24px);
  margin-bottom: 25px;
}

.error-alert {
  background: var(--c-semantic-assertive, #F4312E);
  color: var(--c-text-5, #FFF);
  padding: 16px 20px;
  border-radius: var(--border-radius-4, 4px);
  margin: 25px 0;
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  font-weight: var(--weight-R, 400);
}

.error-help-text {
  color: var(--c-text-3, rgba(0, 0, 0, 0.48));
  font-size: var(--font-14, 14px);
  line-height: var(--lineheight-14, 22px);
  margin-bottom: 25px;
}

.error-button-wrapper {
  margin-top: 30px;
}

/* アニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-card {
  animation: fadeInUp 0.6s ease-out;
}

/* アイコン追加 */
.error-title::before {
  content: '🔧';
  display: block;
  font-size: 48px;
  margin-bottom: 15px;
}

/* レスポンシブ対応 */
@media only screen and (max-width: 743px) {
  .error-container {
    padding: 20px 16px;
  }

  .error-card-header {
    padding: 20px;
    font-size: var(--font-16, 16px);
    line-height: var(--lineheight-16, 24px);
  }

  .error-card-body {
    padding: 30px 20px;
  }

  .error-title {
    font-size: var(--font-20, 20px);
    line-height: var(--lineheight-20, 28px);
  }

  .error-title::before {
    font-size: 36px;
    margin-bottom: 10px;
  }
}

/* ------------------------------
Bootstrap Table Styles
------------------------------ */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--c-text-1);
  vertical-align: top;
  border-collapse: collapse;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table-bordered {
  border: 1px solid var(--c-border-1);
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}