@import url("./var.css");

/* ===================================================
  * Top Page
==================================================== */

.top p {
  line-height: 1.5;
}


.top-mainvisual {
  position: relative;
  margin-bottom: 20px;
  /* overflow: hidden; */

  @media (min-width: 768px) {
    padding-top: 20px;
    margin-bottom: 0;
  }

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/top/mainvisulal-bg-sp.svg) no-repeat left center/contain;
    z-index: -1;
    @media (min-width: 768px) {
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background: url(../images/top/mainvisulal-bg-pc.svg) no-repeat left center/contain;
    }
  }
}

.top-mainvisual__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  @media (min-width: 768px) {
    width: 1200px;
    max-width: 100%;
    justify-content: flex-start;
    flex-direction: row;
    margin: 0 auto;
  }
}

.top-mainvisual__content {
  order: 1;
  padding: 0 20px;
  @media (min-width: 768px) {
    order: 0;
    padding: 150px 30px 25px;
    width: 100%;
    max-width: 660px;
    flex-grow: 1;
    z-index: 3;
    /* background: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 51%, transparent 100%); */
  }
}

.top-mainvisual__title {
  font-size: 28px;
  margin-bottom: 15px;
  line-height: 1.2;
  @media (min-width: 768px) {
    font-size: 40px;
  }
}

.top-mainvisual__title--small {
  font-size: 17px;
  @media (min-width: 768px) {
    font-size: 22px;
  }
}

.top-mainvisual__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.top-mainvisual__desc {
  color: var(--text-desc-color);
  font-size: 14px;
  @media (min-width: 768px) {
    flex-size: 15px;
  }
}

.top-mainvisual__badge {
  max-width: 230px;
}

.top-mainvisual__img {
  position: relative;
  order: 0;
  margin: -30px -30px 0 15px;
  @media (min-width: 768px) {
    width: 880px;
    position: absolute;
    right: calc(47% - 900px);
    top: 8px;
    margin: 0;
    /* order: 1; */
    /* margin-right: -300px; */
  }
  @media (min-width: 1200px) {
    right: -20%;
  }
  &::after {
    content: "";
    position: absolute;
    top: 41%;
    left: -2%;
    width: 47%;
    height: 35%;
    background: url(../images/top/mainvisual-item-sp.png) no-repeat center center/contain;
    z-index: 2;
    @media (min-width: 768px) {
      top: 42%;
      left: 4.8%;
      width: 42%;
      height: 41%;
      background: url(../images/top/mainvisual-item-pc.png) no-repeat center center/contain;
    }
  }
}

.top-mainvisual__slider {
  position: absolute;
  z-index: 1;
  top: 25.7%;
  left: 3.65%;
  width: 48.6%;
  @media (min-width: 768px) {
    top: 19.5%;
    left: 8.9%;
    width: 43%;
  }
  .swiper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
  }
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    aspect-ratio: 14 / 10;
    border-radius: 10px;
    overflow: hidden;
    @media (min-width: 768px) {
      border-radius: 15px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.8);
  }
}

.top-search {
  position: relative;
  margin-bottom: 50px;
  @media screen and (min-width: 768px) {
    padding-left: 20px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    z-index: -1;
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.2);
  }
}

.top-search__panel {
  position: relative;
  background: var(--main-primary-color);
  color: #fff;
  font-weight: 700;
  padding: 30px 20px;
  border-radius: 20px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */-10px 0 10px rgba(0, 0, 0, 0.5), /* 左 */
    0 -10px 10px rgba(0, 0, 0, 0.5), /* 上 */
    0 10px 10px rgba(0, 0, 0, 0.5);
  @media (min-width: 768px) {
    display: flex;
    justify-content: center;
    border-radius: 150px 0 0 150px;
    padding: 30px 0px 30px 50px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    width: 100%;
    height: 100%;
    background: var(--main-primary-color);
  }
}

.top-search__inner {
  @media (min-width: 768px) {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
  }
}

.top-search__keyword {
  margin-bottom: 30px;
  @media (min-width: 768px) {
    width: 50%;
    padding: 0 20px;
    margin-bottom: 0;
  }
}

.top-search__title {
  position: relative;
  font-size: 18px;
  margin-bottom: 15px;
  padding-left: 22px;
  @media (min-width: 768px) {
    font-size: 22px;
    margin-bottom: 25px;
    padding-left: 30px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url(../images/common/icon-arrow-triangle-search-title.svg) no-repeat center center/cover;
    @media screen and (min-width: 768px) {
      width: 22px;
      height: 22px;
      top: calc(50% + 2px);

    }
  }
}

.top-search__box {
  margin-bottom: 20px;
}

.top-search__popular {
  @media (min-width: 768px) {
    display: flex;
    flex-wrap: wrap;
  }
  span {
    display: inline-block;
    margin-bottom: 10px;
    @media (min-width: 768px) {
      font-size: 12px;
      padding-right: 10px;
    }
  }
}

.top-search__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 10px;
  @media (min-width: 768px) {
    margin-bottom: 0;
  }
}

.top-search__item {
  padding: 0 5px 10px;
}

.top-search__link {
  display: inline-block;
  background: #fff;
  color: var(--main-primary-color);
  padding: 5px 7px;
  border-radius: 2px;
  @media (min-width: 768px) {
    font-size: 14px;
  }
}

.top-search__purpose {
  width: 100%;
  @media (min-width: 768px) {
    position: relative;
    width: 50%;
    padding: 0 20px;
    border-left: 2px solid #fff;
  }
}

.top-serach__more {
  display: block;
  text-align: center;
  @media (min-width: 768px) {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    font-size: 14px;
  }
}

.top-section {
  padding: 30px 0;
  margin-bottom: 30px;
  @media screen and (min-width: 768px) {
    padding: 50px 0;
    margin-bottom: 50px;
  }
}

.top-section__inner {
  padding: 0 20px;
  width: 100%;
  @media (min-width: 768px) {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.top-section__inner--s {
  width: 100%;
  @media (min-width: 768px) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.top-section__heading {
  margin-bottom: 30px;
  @media (min-width: 768px) {
    margin-bottom: 50px;
  }
}

.top-section__title {
  font-size: 24px;
  margin-bottom: 15px;
  small {
    font-size: 18px;
    padding-left: 10px;
  }
  @media (min-width: 768px) {
    font-size: 28px;
    margin-bottom: 30px;
  }
}

.top-section__title--en {
  display: block;
  position: relative;
  color: var(--main-primary-color);
  font-size: 12px;
  font-weight: 900;
  padding-bottom: 15px;
  margin-bottom: 10px;
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--main-primary-color);
  }
  @media (min-width: 768px) {
    padding-bottom: 20px;
    margin-bottom: 15px;
  }
}

.top-category__wrapper {
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
}

.top-category__search {
 margin-bottom: 30px;
}

.top-category__searchbox {
  overflow-x: scroll;
  padding-bottom: 20px;
  margin: 0 calc(50% - 50vw) 0px;
  @media (min-width: 768px) {
    margin: 0 0 30px;
  }
}

.top-category__main {
  width: 100%;
  @media (min-width: 768px) {
    width: calc(100% - 330px);
    margin-left: 0;
    margin-right: auto;
  }
}

.top-category__info {
  margin-bottom: 30px;
}

.top-category__list {
  display: flex;
  width: 500px;
  padding-left: 10px;
  @media (min-width: 768px) {
    width: auto;
  }
}

.top-category__item {
  padding: 0 10px;
  width: calc(100% / 6);
  svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

.top-category__item.is-active {
  .top-category__icon {
    rect {
      fill: #b00000 !important;
    }
    #icon_all {
      stroke: #fff !important;
      fill: transparent !important;
    }
    g {
      fill: #fff !important;
    }
    #icon_cad path {
      fill: #fff !important;
    }
  }
}


.top-category__link {
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}

.top-category__icon {
  margin-bottom: 10px;
}

.top-category__result {
}

.top-category__subtitle {
  margin-bottom: 20px;
  @media (min-width: 768px) {
    font-size: 20px;
  }
}

.top-category__desc {
  @media (min-width: 768px) {
    margin-bottom: 20px;
  }
}

.top-category__note {
  font-size: 10px;
}

.top-sidebar {
  width: 100%;
  @media (min-width: 768px) {
    width: 330px;
    padding-left: 30px;
    flex-grow: 1;
  }
}

.top-sidebar__group {
  margin-bottom: 30px;
}

.top-sidebar__title {
  color: var(--main-primary-color);
  font-size: 18px;
  margin-bottom: 10px;
  @media (min-width: 768px) {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.top-sidebar__bnr {
  display: block;
  margin-bottom: 15px;
}

.top-sidebar__keywordlist {
  display: flex;
  flex-wrap: wrap;
}

.top-sidebar__keyworditem {
  margin-right: 10px;
  margin-bottom: 10px;
}

.top-sidebar__keywordlink {
  display: inline-block;
  color: var(--main-primary-color);
  font-weight: 700;
  font-size: 12px;
  @media (min-width: 768px) {
    font-size: 14px;
  }
}

.top-sidebar__keywordlink--border {
  display: inline-block;
  color: var(--main-primary-color);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--main-primary-color);
  padding: 2px 5px;
  @media (min-width: 768px) {
    font-size: 14px;
  }
}

.top-free-content {
  background: var(--bg-gray-color);
  padding: 100px 0;
}

.top-free-content__wrapper {
  @media (min-width: 768px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }
  .card {
    @media (min-width: 768px) {
      width: calc(100% / 4 - 20px);
    }
  }
}

.top-recommend {
  background: var(--bg-gray-color);
  border-radius: 0 100px 0 0;
  padding: 50px 0;
  @media screen and (min-width: 768px) {
    padding: 100px 0;
  }
}

.top-recommend__keyword {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  color: var(--main-primary-color);
  font-size: 18px;
  font-weight: 700;
}

.top-recommend__keywordlist {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  gap: 10px;
}

.top-combination {

}

.top-combination__list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.top-combination__item {
  width: 100%;
  @media (min-width: 768px) {
    width: calc(100% / 3 - 40px);
  }
}

.top-combination__img {
  width: 100%;
  margin-bottom: 15px;
}

.top-attend__list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
}

.top-attend__item {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #ccc;
  @media (min-width: 768px) {
    width: calc(100% / 3 - 30px);
  }
}

.top-attend__subtitle {
  padding: 20px 20px 15px;
  font-size: 18px;
}

.top-attend__text {
  padding: 0 20px 20px;
}

.top-voice {
  background: #000;
  padding: 50px 0;
  color: #fff;
  @media screen and (min-width: 768px) {
    padding: 100px 0;
  }
  .top-section__title--en {
    color: #D0A900;
    &::before {
      background: #D0A900;
    }
  }
}

.top-voice__inner {
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
}

.top-voice__list {
  margin-bottom: 50px;
  @media (min-width: 768px) {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
  }
}

.top-voice__item {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  color: #000;
  padding: 20px;
  margin-bottom: 20px;
  @media (min-width: 768px) {
    width: calc(100% / 3 - 20px);
    margin-bottom: 0;
   }
}

.top-voice__thumbnail {
  margin: -20px -20px 20px;
  max-width: calc(100% + 40px);
  width: calc(100% + 40px);
  @media (min-width: 768px) {
    margin: -25px -25px 25px;
    max-width: calc(100% + 50px);
    width: calc(100% + 50px);

  }
}

.top-voice__name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  span {
    font-size: 12px;
    padding-left: 20px;
  }
}

.top-voice__seminar {
  font-size: 16px;
  margin-bottom: 20px;
}

.top-voice__subtitle {
  font-size: 20px;
  margin-bottom: 20px;
  @media screen and (min-width: 768px) {
    font-size: 24px;
  }
}

.top-voice__badge {
  display: block;
  position: relative;
  margin: 0 -20px;
  @media (min-width: 768px) {
    margin: 0;
  }
  img {
    width: 100%;
  }
}

.top-about {
  padding: 30px 0 50px;
  @media screen and (min-width: 768px) {
    padding: 100px 0;
  }
}

.top-about__panel {
  background: url(../images/top/bg-about.png) var(--bg-gray-color) no-repeat center center/cover;
  width: calc(100% + 40px);
  border-radius: 30px;
  padding: 20px;
  margin: 0 -20px;
  @media (min-width: 768px) {
    width: 100%;
    padding: 80px;
    margin: 0;
  }
}

.top-about__wrapper {
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
    gap: 80px;
  }
}

.top-about__heading {
  margin-bottom: 30px;
  @media (min-width: 768px) {
    width: 35%;
  }
}

.top-about__title {
  font-size: 24px;
  margin-bottom: 15px;
  @media (min-width: 768px) {
    font-size: 28px;
  }
}

.top-about__content {
  @media (min-width: 768px) {
    width: 55%;
  }
}

.top-about__text {
  line-height: 1.8;
  margin-bottom: 20px;
  @media (min-width: 768px) {
    margin-bottom: 30px;
  }
}

.top-about__text:last-child {
  margin-bottom: 0;
}

/* ===================================================
  * Top Page end
==================================================== */


/* ===================================================
  * Member Page
==================================================== */

.bg--gray {
  background: var(--bg-gray-color);
}

.bg--gray2 {
  background: #ececec;
}

.container {
  padding: 64px 0 0;
  @media (min-width: 768px) {
    padding: 64px 0px 0;
  }
}


.container--content {
  padding: 60px 0;
  @media (min-width: 768px) {
    padding: 100px 0;
  }
}

.container--search {
  padding: 60px 0;
  @media (min-width: 768px) {
    padding: 100px 0;
  }
  .container__wrap {
    @media (min-width: 768px) {
      max-width: 1200px;
    }
  }
}

.container__wrap {
  /* padding: 0 20px; */
  @media (min-width: 768px) {
    /* padding: 0 20px; */
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}


.section-member {
  margin-bottom: 30px;
  @media (min-width: 768px) {
    margin-bottom: 50px;
  }
}

.section-member__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  gap: 20px;
  .section-member__title {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.section-member__heading--start {
  justify-content: flex-start;
}

.section-member__heading-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 20px;
}

.section-member__title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-left: 25px;
  @media (min-width: 768px) {
    font-size: 20px;
    padding-left: 36px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
    @media (min-width: 768px) {
      top: 2px;
      left: 0;
      width: 28px;
      height: 28px;
    }
  }
  &.icon--chart {
    &::before {
      background: url(../images/common/icon-title-chart.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--check {
    &::before {
      background: url(../images/common/icon-title-check.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--schedule {
    &::before {
      background: url(../images/common/icon-title-schedule.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--content {
    &::before {
      background: url(../images/common/icon-title-content.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--survey {
    &::before {
      background: url(../images/common/icon-title-survey.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--survey-add {
    &::before {
      background: url(../images/common/icon-title-survey-add.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--edit {
    &::before {
      background: url(../images/common/icon-title-edit.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--subtitle-info {
     &::before {
      background: url(../images/common/icon-subtitle-info.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--subtitle-member {
     &::before {
      background: url(../images/common/icon-subtitle-member.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--user {
    &::before {
      background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--graph {
    &::before {
      background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--history {
    &::before {
      background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--news {
    &::before {
      background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
      border: none;
    }
  }
  &.icon--invoice {
    &::before {
      background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
      border: none;
    }
  }
}


.section-member__subtitle {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  @media (min-width: 768px) {
    font-size: 20px;
    padding-left: 30px;
  }
}

.section-member__subtitle::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  border: 4px solid var(--main-primary-color);
  @media (min-width: 768px) {
    top: 8px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 6px solid var(--main-primary-color);
  }
}

.section-member__message {
  font-weight: 700;
  font-size: 14px;
  margin: 30px 0;
  text-align: center;
  @media (min-width: 768px) {
    font-size: 16px;
    margin-bottom: 50px 0;
  }
  &.is-success {
    margin: 0 0 30px;
    border: 5px solid green;
    padding: 5px;
    border-radius: 5px;
  }
  &.is-error {
    margin: 0 0 30px;
    border: 5px solid red;
    padding: 5px;
    border-radius: 5px;
  }
}

.section-member__desc {
  font-weight: 700;
  margin-bottom: 30px;
}


.member-panel {
  background: #fff;
  padding: 20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  width: calc(100% + 40px);
  @media screen and (min-width: 768px) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 30px;
  }
}

.member-panel__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #dcdcdc;
  @media screen and (min-width: 768px) {
    padding: 20px 30px;
  }
}

.member-panel__heading .section-member__title {
  padding-bottom: 0;
  margin-bottom: 0;
  border: 0;
}

.member-panel__heading .section-member__title span {
  font-size: 0.8em;
}

.member-panel__morebtn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--main-primary-color);
}

.member-panel__body {
  padding: 20px;
  @media screen and (min-width: 768px) {
    padding: 30px;
  }
}

.member-panel__venues {
  @media screen and (min-width: 768px) {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
}

.member-panel__venue {
  @media screen and (min-width: 768px) {
    width: 50%;
    margin-bottom: 0;
  }
}

/* .member-panel__venue .member-item {
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  background: #fff;
  text-align: left;
  @media screen and (min-width: 768px) {
    margin-bottom: 0;
  }
} */

button.member-item {
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  background: #fff;
  text-align: left;
  transition: all 0.5s ease;
  @media screen and (min-width: 768px) {
    margin-bottom: 0;
  }
}

button.member-item:hover {
  opacity: 0.7;
  transform: scale(1.02);
}

.member-panel__venue.is-empty {
  display: none;
  @media screen and (min-width: 768px) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #efefef;
    border: 2px solid #d7d7d7;
    border-radius: 10px;
    box-shadow: none;
    padding: 15px;
  }
}

.member-panel__venue.is-empty p {
  text-align: center;
  color: #525252;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15rem;
  line-height: 1.8;
  margin-top: 20px;
}


.member-panel__elearning {
  padding: 10px;
  margin: -10px;
  max-height: 300px;
  overflow-y: scroll;
}

.member-panel__wrapper {
  @media screen and (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
}

.member-item {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.member-item__wrapper {
  @media screen and (min-width: 768px) {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .member-item__alert,
  .member-item__main {
    width: 100%;
    @media screen and (min-width: 768px) {
      width: 50%;
    }
  }
}

/* .member-item__content {
  @media screen and (min-width: 768px) {
    width: 50%;
  }
} */

.member-item__alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px;
  background: var(--main-primary-color);
  border-radius: 10px;
  margin-bottom: 15px;
  gap: 15px;
}


.member-item__alertpanel {
  background: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  font-weight: 700;
  width: 100%;
  flex-grow: 1;
  line-height: 1.5;
  @media screen and (min-width: 768px) {
    width: auto;
  }
}

.member-item__alerttitle {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.member-item__alertmain {
  font-size: 24px;
  color: var(--main-primary-color);
}

.member-item__alertsub {
  font-size: 16px;
  color: #5e5e5e;
}

.member-item__alerttitle strong {
  color: var(--main-primary-color);
}

.member-item__thumbnail {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  width: 20%;
  margin-right: 15px;
  @media screen and (min-width: 768px) {
    width: 15%;
  }
}

.member-item__thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.member-item__info {
  @media screen and (min-width: 768px) {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
  }
}

.member-item__head {
  margin-bottom: 10px;
  @media screen and (min-width: 768px) {
    padding-right: 20px;
    margin-bottom: 0;
  }
}

.member-item__index {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  background: #f0f0f0;
}

.member-item__index:not(:last-of-type) {
  margin-bottom: 10px;
}

.member-item__indextitle {
  padding-right: 30px;
}

.member-item__indexinfo {
  color: var(--main-primary-color);
}

.member-item__data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

.member-item__title {
  margin-bottom: 10px;
  @media screen and (min-width: 768px) {
    margin-bottom: 0;

  }
}

.member-item__category {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 5px;
  padding: 3px 20px;
  background: var(--main-primary-color);
  color: #fff;
  margin-right: 20px;
}

.member-item__keywords {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
}

.member-item__keyword {
  color: var(--main-primary-color);
  font-weight: 700;
  padding: 2px 5px;
  font-size: 14px;
}


.member-item__date {
  font-weight: 700;
  font-size: 14px;
  color: #777;
  margin-left: auto;
  display: none;
  @media screen and (min-width: 768px) {
    display: block;
  }
}

.member-item__link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid #959595;
  padding-top: 20px;
  @media screen and (min-width: 768px) {
    padding-top: 0;
    padding-left: 20px;
    border-top: none;
    border-left: 2px solid #959595;
  }
  .btn {
    width: 200px;
    @media screen and (min-width: 768px) {
      width: 130px;
    }
  }
}

.member-item__venue {
  font-size: 14px;
  @media screen and (min-width: 768px) {
    font-size: 16px;
  }
}

.member-item__address {
  font-size: 13px;
  @media screen and (min-width: 768px) {
    font-size: 14px;
  }
}

.member-item__googlemaplink {
  display: inline-block;
  color: #0C489D;
  margin-bottom: 15px;
}

.member-item__googlemap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #ccc;
  iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}

.member-news__list {
  padding: 10px 0;
  background: #fff;
  border-radius: 10px;
}

.member-news__item {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  gap: 5px;
  @media screen and (min-width: 768px) {
    flex-direction: row;
    padding: 20px 30px;
    gap: 30px;
  }
  &:nth-of-type(odd) {
    background: #fbfbfb;
  }
  span, h3 {
    font-size: 14px;
    font-weight: 700;
    @media screen and (min-width: 768px) {
      font-size: 16px;
    }
  }
}

.search-skillup {
  margin-bottom: 30px;
  @media screen and (min-width: 768px) {
    margin-bottom: 50px;
  }
}

.search-skillup__title {
  font-size: 20px;
  margin-bottom: 20px;
}

.search-skillup__nexttext {
  text-align: center;
  font-size: 24px;
}©

.search-skillup__panel {
  position: relative;
  background: #AB8526;
  padding: 20px 10px 10px 20px;
  margin-bottom: 60px;
  border-radius: 10px;
}

.search-skillup__panel::after {
  position: absolute;
  background: url(../images/common/icon-arrow-search-skillup.svg) no-repeat center center/cover;
  content: "";
  width: 120px;
  height: 50px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% - 10px));
}

.search-skillup__list {
  max-height: 360px;
  overflow-y: scroll;
  padding-right: 20px;
}

.search-skillup__item {
  display: flex;
  justify-content: space-between;
}

.search-skillup__item:not(:last-child) {
  margin-bottom: 20px;
}

.search-skillup__checkbox {
  cursor: pointer;
  position: relative;
  background: #7d7d7d;
  border-radius: 5px;
  width: 35px;
  margin-right: 5px;
}

.search-skillup__checkbox::before {
  position: absolute;
  background: #fff;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-skillup__content {
  flex-grow: 1;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 3px solid #AB8526;
}

.search-skillup__item .member-item__link {
  border: none;
}

.search-skillup__item.is-active .search-skillup__checkbox {
  background: var(--main-primary-color);
}

.search-skillup__item.is-active .search-skillup__checkbox::before {
  background: url(../images/common/icon-check-red.svg) #fff no-repeat center center/contain;
}

.search-skillup__item.is-active .search-skillup__content {
  border: 3px solid #D17575;
}


.member-cta {
  @media (min-width: 768px) {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
  }
}

.member-cta__link {
  margin-bottom: 20px;
  @media (min-width: 768px) {
    width: 50%;
    margin-bottom: 0;
  }
}

.member-cta__bnr {
  width: 100%;
}

.main--member .history-area {
  padding: 5px 15px 5px 5px;
  margin-left: -5px;
  border: none;
}

table.retail {
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

table.retail thead {
  border-bottom: 1px solid #dcdcdc;
}

.retail th,
.retail td {
  border: none !important;
  font-weight: 700;
}

.retail tbody {
  background: #fff;
}

.retail tbody tr:nth-child(odd) {
  background: #fff;
}

.retail tbody tr:nth-child(even) {
  background: #fafafa;
}

.invoice-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-bottom: 5px;
  color: #777;
  font-weight: 700;
  @media screen and (min-width: 768px) {
    margin-bottom: 20px;
    gap: 5px 20px;
  }
}

#history_head {
  margin-bottom: 0;
}

.retail {
  margin-bottom: 50px;
}

#history_head thead,
#history_head tbody .order_head_value {
  display: none;
}

#history_head td.retail {
  border: none;
}

.retail .cartrownum {
  width: 45px;
}

.retail .quantity {
  width: 50px;
}

.retail .price,
.retail .subtotal {
  width: 75px;
}

.retail th:nth-of-type(2),
.retail td:nth-of-type(2) {
  display: none;
}

#history_head td.retail a {
  font-weight: 700;
  background: #fff;
  color: var(--main-primary-color);
  padding: 3px 20px;
}

#history_head td.retail a.invoice-sent-button {
  background: none;
  color: var(--main-primary-color);
  text-decoration: underline;
  padding: 0;
  font-size: 15px;
}

#history_head td,
.retail th,
.retail td {
  line-height: 2.2em;
}

.link-update {
  width: 100%;
  font-size: 13px;
  text-decoration: underline;
  color: var(--main-primary-color);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.link-update:hover {
  opacity: 0.7;
}

.noreceipt {
  cursor: not-allowed;
  width: 140px;
  border-radius: 50px;
  line-height: 1.4;
  background: #ccc;
  border: 1px solid #dcdcdc;
  font-size: 11px;
  font-weight: 700;
  color: #777;
  text-align: center;
  @media screen and (min-width: 768px) {
    font-size: 14px;
    width: 170px;
  }
}

  #loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    line-height: 100vh;
    z-index: 9999;
  }

  .spinner {
    position: absolute;
    top: calc(50% - 80px);
    left: 50%;
    transform: translate(-50%, -50%);
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid var(--item-primary-color);
    /* Blue */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
  }

  #loading-overlay .notice {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }

  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }


  #js-tab {
    display: flex;
    /* justify-content: center; */
    margin: 20px auto 0;
    padding: 20px 0;
  }

  #js-tab li {
    font-size: 3.1vw;
    width: 25%;
    text-align: center;
  }

  #js-tab li div {
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    cursor: pointer;
  }

  #js-tab li div::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #D0d0d0;
    transition: 0.3s;
  }

  #js-tab li div.active{
    color: var(--item-primary-color);
  }

  #js-tab li div.active::after {
    background: var(--item-primary-color);
    height: 8px;
  }

  #js-tab-content {
    padding: 10px;
    margin: 0 -10px;
    overflow: hidden;
  }

  .tab-panel {
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .tab-panel.active {
    pointer-events: visible;
    visibility: visible;
    opacity: 1;
    height: auto;
  }

  .tab-panel .card--l {
    @media screen and (min-width: 768px) {
      align-items: normal;
    }
  }

  .tab-panel .card--l .card__thumbnail {
    @media screen and (min-width: 768px) {
      width: 20%;
      margin-bottom: 0;
    }
  }

  .tab-panel .card--l .card__content {
    @media screen and (min-width: 768px) {
      width: 80%;
      display: flex;
      flex-direction: column;
    }
  }

  .tab-panel .card--l .card__info {
    @media screen and (min-width: 768px) {
      margin-top: auto;
      display: flex;
      align-items: flex-end;
    }
  }

  .tab-panel .card__history {
    p {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text-card-info-color);
      @media screen and (min-width: 768px) {
        font-size: 16px;
      }
    }
    span {
      display: inline-block;
      color: #333;
      width: 90px;
      padding-right: 20px;
    }
  }

  .tab-panel .card__link {
    width: auto;
    @media screen and (min-width: 768px) {
      width: 200px;
    }
  }




  .contents__submitarea {
    display: flex;
    flex-direction: column;
    margin-left: auto;
  }

  .link-survey {
    cursor: pointer;
    background: #eee;
    color: var(--item-primary-color);
    font-weight: 700;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 12px;
    transition: all 0.3s ease;
  }

  .link-survey:hover {
    background: var(--item-primary-color);
    color: #f9f9f9;
  }

  .link-survey--disabled {
    background: #b3b3b3;
    color: #fff;
    pointer-events: none;
  }

  .btn-survey {
    margin-right: 10px;
  }

  .btn-submit {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-download {
    font-size: 13px;
  }

  .btn-submit:hover {
    opacity: 0.7;
  }

  .form-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 0;
  }

  .form-container__info {
    font-size: 15px;
    font-weight: 700;
    margin-right: 30px;
    color: var(--item-primary-color);
  }

  .form-container__inner {
    max-width: 294px;
    width: 100%;
  }

  .form-container__title {
    font-size: 22px;
  }

  .modal {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal.is-active,
  .message-modal.is-active {
    pointer-events: visible;
    visibility: visible;
    opacity: 1;
    z-index: 100;
    background: rgba(0, 0, 0, 0.2);
  }

  .modal__inner {
    position: relative;
    max-width: 100%;
    width: 90%;
  }

  .modal-close,
  .message-modal__close {
    position: absolute;
    top: 20px;
    right: 35px;
    cursor: pointer;
  }

  /* .modal-close::before,
  .modal-close::after,
  .message-modal__close::before,
  .message-modal__close::after {
    position: absolute;
    content: '';
    width: 25px;
    height: 5px;
    background: #333;
  }

  .modal-close::before,
  .message-modal__close::before {
    transform: rotate(45deg);
  }

  .modal-close::after,
  .message-modal__close::after {
    transform: rotate(-45deg);
  } */

  .message-modal {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .message-modal__inner {
    position: relative;
    max-width: 500px;
    width: 90%;
    margin-top: 100px;
  }

  .message-modal__inner p {
    font-size: 13px;
  }

  .message-modal__panel {
    background: #fff;
    padding: 40px 20px;
    border-radius: 5px;
    list-style: none;
  }

  .newmember-form,
  .invoice-sent-form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  .newmember-form__title,
  .invoice-sent-form__title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }

  .newmember-form__submit,
  .invoice-sent-form__submit {
    cursor: pointer;
    color: var(--item-primary-color);
    border: 1px solid var(--item-primary-color);
    background: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    padding: 10px 5px;
    margin: 10px auto 0;
    border-radius: 50px;
    font-size: 12px;
    transition: all 0.3s ease;
  }

  .newmember-form__submit:disabled,
  .invoice-sent-form__submit:disabled {
    pointer-events: none !important;
    opacity: 0.5;
  }

  .newmember-form form,
  .invoice-sent-form form {
    background: #ddd;
    padding: 25px 15px;
    max-height: 400px;
    overflow-y: scroll;
  }

  .invoice-sent-form form {
    max-height: 440px;
  }

  .input_outer {
    padding: 15px 0 5px;
    border-bottom: 2px solid #aaa;
  }

  .input_outer:nth-of-type(2) {
    border-top: 2px solid #aaa;
  }

  .input_group {
    display: flex;
    margin-bottom: 10px;
  }

  .input_wrapper {
    display: flex;
    align-items: center;
  }

  .input_wrapper>.input_title {
    flex-shrink: 0;
    width: 120px;
    margin-bottom: 10px;
  }

  .input_wrapper .input_group {
    width: calc((100% - 120px) / 2);
  }

  .input_wrapper .input_group .input_title {
    width: 30px;
  }

  .input_wrapper .input_group .input_area {
    width: calc(100% - 30px);
  }

  .input_title {
    width: 120px;
  }

  .input_area {
    width: calc(100% - 120px);
  }

  .input_area input {
    width: 100%;
    max-width: 400px;
    padding: 4px 10px;
    border: none;
  }

  .link-add {
    cursor: pointer;
    background: #eee;
    color: var(--item-primary-color);
    font-weight: 700;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    transition: all 0.3s ease;
  }

  .link-add:hover {
    background: var(--item-primary-color);
    color: #f9f9f9;
  }

  .currency_code {
    display: none;
  }

  .aleft.productname a {
    pointer-events: none;
  }

  .aleft.productname .redownload_link {
    display: none;
  }

  @media (min-width: 768px) {
    #js-tab li {
      font-size: 15px;
    }

    #js-tab li div br {
      display: none;
    }

    .contents__submitarea {
      min-width: 294px;
    }

    .form-container__title {
      width: 100%;
      display: block;
    }

    .form-container {
      display: flex;
      flex-wrap: wrap;
    }

    .modal__inner {
      width: 550px;
    }

  }

  @media (min-width: 1024px) {
    #js-tab {
      margin: 30px auto 0;
      padding: 30px 0px 50px;
    }

    .contents__submitarea {
      min-width: 294px;
    }
  }

  #usces_history {
    display: none;
  }

.contentInfo {
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  @media screen and (min-width: 768px) {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
  }
}

.content__title {
  background: #000;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  @media screen and (min-width: 768px) {
    margin-bottom: 40px;
  }
  h2 {
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 700;
    @media screen and (min-width: 768px) {
      font-size: 22px;
    }
  }
}

.contentInfo__date {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 15px;
  p {
    white-space: nowrap;
    font-weight: 700;
    background: #fff;
    border-radius: 30px;
    padding: 5px 20px;
    font-size: 18px;
    color: var(--main-primary-color);
  }
  p:not(:last-child) {
    margin-bottom: 10px;
  }
  span {
    display: inline-block;
    font-size: 14px;
    color: #333;
    width: 70px;
    margin-right: 15px;
  }
}

.contentInfo__chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
  padding: 5px 20px;
}

.contentInfo__chapter-all {
  display: flex;
  justify-content: center;
  flex-direction: column;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.contentInfo__chapter-completed {
  display: flex;
  align-items: center;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.contentInfo__chapter-unattended {
  display: flex;
  align-items: center;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.contentInfo__chapter-title {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  min-width: 60px;
}

.contentInfo__chapter-number {
  font-size: 34px;
  font-weight: 700;
  small {
    padding-left: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #888;
  }
}

.contentInfo__detail {
  @media screen and (min-width: 768px) {
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    border-left: 1px solid #ccc;
    flex-grow: 1;
  }
  ul {
    display: none;
    @media screen and (min-width: 768px) {
      display: block;
    }
  }
  li {
    color: #888;
    font-size: 12px;
    line-height: 1.8;
    span {
      padding-left: 20px;
    }
  }
}

.contentInfo__detail > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  @media screen and (min-width: 768px) {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
  }
  .btn {
    width: 145px;
    font-size: 12px;
    @media screen and (min-width: 768px) {
      width: 175px;
      font-size: 14px;
    }
  }
}


  /* テーブルコントロール */
  .table-controls {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #e9ecef;
  }

  .table-controls__row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  /* 検索ボックス */
   .table-controls__row .search-box {
    position: relative;
    max-width: 300px;
    width: 100%;
  }

  .table-controls__row .search-input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    /* border: 2px solid #ddd; */
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
  }

  .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
  }

  /* フィルターグループ */
  .filter-group {
    display: flex;
    gap: 8px;
    white-space: nowrap;
  }

  .filter-group label {
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    gap: 8px;
  }

  /* カスタムチェックボックス */
  .filter-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
  }

  .filter-group input[type="checkbox"]:hover {
    border-color: #B00000;
    box-shadow: 0 0 0 2px rgba(176, 0, 0, 0.1);
  }

  .filter-group input[type="checkbox"]:focus {
    outline: none;
    border-color: #B00000;
    box-shadow: 0 0 0 3px rgba(176, 0, 0, 0.2);
  }

  .filter-group input[type="checkbox"]:checked {
    background-color: #B00000;
    border-color: #B00000;
  }

  .filter-group input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
  }

  .filter-select {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    min-width: 120px;
    max-width: 100%;
    transition: border-color 0.3s ease;
  }

  .filter-select:focus {
    outline: none;
    border-color: #B00000;
  }

  /* テーブル情報 */
  .table-info {
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }

  /* ソート可能テーブル共通 */
  .sortable-table th.sortable,
  .sortable-user-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
  }

  .sortable-table th.sortable:hover,
  .sortable-user-table th.sortable:hover {
    background-color: #ffe6e6;
  }

  .sortable-table th.sortable.active,
  .sortable-user-table th.sortable.active {
    background-color: #ffcccc;
    color: #B00000;
  }

  /* ソートインジケーターの縦並び修正 */
  /* ソートインジケーターの縦並び修正 */
  .sort-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
  }

  .sort-arrow {
    display: block;
    font-size: 8px;
    opacity: 0.3;
    transition: opacity 0.2s ease;
    line-height: 1;
    height: 8px;
  }

  /* 上下の矢印の間隔調整 - 5px間隔 */
  .sort-arrow.sort-asc {
    margin-bottom: 2.5px;
  }

  .sort-arrow.sort-desc {
    margin-top: 2.5px;
  }

  /* ホバー時の表示 */
  .sortable:hover .sort-arrow {
    opacity: 0.6;
  }

  /* アクティブ時の表示 */
  .sortable.active .sort-arrow.active {
    opacity: 1;
    color: #B00000;
    font-weight: bold;
  }

  .sortable.active .sort-arrow:not(.active) {
    opacity: 0.2;
  }

  /* テーブルヘッダーの調整 */
  .sortable-table th.sortable,
  .sortable-user-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
    white-space: nowrap;
  }

  /* より小さい矢印のオプション（必要に応じて使用） */
  .sort-indicator.compact .sort-arrow {
    font-size: 6px;
    height: 6px;
  }

  .sort-indicator.compact .sort-arrow.sort-asc {
    margin-bottom: 2px;
  }

  .sort-indicator.compact .sort-arrow.sort-desc {
    margin-top: 2px;
  }

  /* 矢印の文字を変更したい場合のオプション */
  .sort-indicator.triangle .sort-arrow.sort-asc::before {
    content: '▲';
  }

  .sort-indicator.triangle .sort-arrow.sort-desc::before {
    content: '▼';
  }

  .sort-indicator.triangle .sort-arrow {
    font-size: 10px;
  }

  /* さらにコンパクトな表示オプション */
  .sort-indicator.minimal {
    margin-left: 4px;
  }

  .sort-indicator.minimal .sort-arrow {
    font-size: 7px;
    height: 7px;
  }

  .sort-indicator.minimal .sort-arrow.sort-asc {
    margin-bottom: 1.5px;
  }

  .sort-indicator.minimal .sort-arrow.sort-desc {
    margin-top: 1.5px;
  }

  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .sort-indicator {
      margin-left: 4px;
    }

    .sort-arrow {
      font-size: 7px;
      height: 7px;
    }

    .sort-arrow.sort-asc {
      margin-bottom: 1.5px;
    }

    .sort-arrow.sort-desc {
      margin-top: 1.5px;
    }
  }

  .panel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.btn-change-name {
  width: 100px;
}

.btn--tertiary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn--tertiary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal.is-active {
  display: flex;
}

.modal__inner {
  width: 90%;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.modal__header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal__title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.modal__content {
  max-height: 60vh;
  overflow-y: auto;
}

.modal__content-inner {
  padding: 24px;
}

.modal__footer {
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.2s;
}

.setting-item:hover {
  border-color: #d1d5db;
}

.setting-item--recommended {
  border-color: #3b82f6;
  background: #f8faff;
}

.setting-item__content {
  width: 100%;
}

.setting-item__label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
  gap: 16px;
}

.setting-item__info {
  flex: 1;
}

.setting-item__name {
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.recommended-badge {
  background: #3b82f6;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
}

.admin-only-badge {
  background: #f59e0b;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
}

.setting-item__note {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 0;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-switch__slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch__input:checked + .toggle-switch__slider {
  background-color: #3b82f6;
}

.toggle-switch__input:checked + .toggle-switch__slider:before {
  transform: translateX(24px);
}

@media (max-width: 640px) {
  .modal__inner {
    width: 95%;
    max-height: 90vh;
  }

  .modal__footer {
    flex-direction: column;
  }

  .modal__footer .btn {
    width: 100%;
  }
}





            /* タブスタイル */
            .registration-tabs {
              display: flex;
              border-bottom: 2px solid #e0e0e0;
              margin-bottom: 30px;
            }

            .tab-button {
              background: none;
              border: none;
              padding: 15px 30px;
              cursor: pointer;
              font-size: 16px;
              font-weight: 500;
              color: #666;
              border-bottom: 3px solid transparent;
              transition: all 0.3s ease;
            }

            .tab-button.active {
              color: #B00000;
              border-bottom-color: #B00000;
              background-color: #f8f9fa;
            }

            .tab-button:hover {
              background-color: #f5f5f5;
            }

            .tab-content {
              display: none;
            }

            .tab-content.active {
              display: block;
            }

            /* CSV関連スタイル */
            .csv-upload-section {
              max-width: 1200px;
            }

            .csv-format-info {
              margin-bottom: 30px;
            }

            .csv-format-table {
              background: #fff;
              width: 100%;
              /* border-collapse: collapse; */
              margin-top: 15px;
            }

            .csv-format-table th,
            .csv-format-table td {
              border: 1px solid #ddd;
              padding: 12px;
              text-align: left;
            }

            .csv-format-table th {
              background-color: #f5f5f5;
              font-weight: 600;
            }

             .csv-format-table td strong {
               font-weight: 700;
               color: var(--main-primary-color)
             }

            .csv-upload-form .form-group {
              justify-content: start;
              gap: 20px;
            }

            .csv-preview-section {
              background: var(--bg-primary-color);
              padding: 20px;
              border-radius: 20px;
              margin: 40px 0;
            }

            .csv-preview-table {
              width: 100%;
              border-collapse: collapse;
              background: white;
            }

            .csv-preview-table th,
            .csv-preview-table td {
              border: 1px solid #ddd;
              padding: 10px;
              text-align: left;
              font-size: 14px;
            }

            .csv-preview-table th {
              background-color: #e9ecef;
              font-weight: 600;
            }

            .csv-preview-actions {
              display: flex;
              gap: 30px;
              align-items: center;
            }

            .form-help {
              display: block;
              margin-top: 5px;
              color: #666;
              font-size: 14px;
            }


            .loading {
              opacity: 0.7;
              pointer-events: none;
            }

            /* CSV一括登録の追加CSS（wc_member_page.phpのstyleタグ内に追加） */

            /* バリデーション結果のスタイル */
            .csv-preview-table tr.valid {
              background-color: #f8f9fa;
            }

            .csv-preview-table tr.invalid {
              background-color: #fff5f5;
              color: #e53e3e;
            }

            .csv-preview-table tr.invalid td {
              border-color: #fed7d7;
            }

            /* プログレスバー */
            .upload-progress {
              margin: 20px 0;
              display: none;
            }

            .progress-bar {
              width: 100%;
              height: 20px;
              background-color: #e0e0e0;
              border-radius: 10px;
              overflow: hidden;
            }

            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #007cba, #005a87);
              width: 0%;
              transition: width 0.3s ease;
              border-radius: 10px;
            }

            .progress-text {
              text-align: center;
              margin-top: 5px;
              font-size: 14px;
              color: #666;
            }


            /* エラー表示 */
            .csv-errors {
              background: #fff5f5;
              border: 1px solid #fed7d7;
              border-radius: 8px;
              padding: 15px;
              margin: 20px 0;
              max-height: 200px;
              overflow-y: auto;
            }

            .csv-errors h4 {
              color: #e53e3e;
              margin: 0 0 10px 0;
            }

            .csv-errors ul {
              margin: 0;
              padding-left: 20px;
            }

            .csv-errors li {
              color: #e53e3e;
              margin: 5px 0;
              font-size: 14px;
            }

            /* ファイルドロップエリア */
            .file-drop-area {
              border-radius: 10px;
              padding: 20px;
              background: #f8f9fa;
              transition: all 0.3s ease;
              cursor: pointer;
              position: relative;
              background-color: var(--bg-primary-color);
            }

            .file-drop-area:hover {
              background: #e9ecef;
              border-color: #005a87;
            }

            .file-drop-area.dragover {
              background: #e3f2fd;
              border-color: #1976d2;
              border-style: solid;
            }

            .file-drop-area input[type="file"] {
              position: absolute;
              left: -9999px;
            }

            .file-drop-area-inner {
              border: 2px dashed var(--main-primary-color);
              border-radius: 10px;
              padding: 40px 20px;
              text-align: center;
            }


            .drop-message {
              font-size: 16px;
              margin: 10px 0;
            }

            .drop-icon {
              font-size: 48px;
              color: #007cba;
              margin-bottom: 10px;
            }

            /* 統計情報表示 */
            .csv-stats {
              display: flex;
              gap: 20px;
              margin: 20px 0;
              flex-wrap: wrap;
            }

            .stat-item {
              background: #f8f9fa;
              padding: 15px;
              border-radius: 8px;
              text-align: center;
              flex: 1;
              min-width: 150px;
            }

            .stat-number {
              font-size: 24px;
              font-weight: bold;
              color: #007cba;
              display: block;
            }

            .stat-label {
              font-size: 14px;
              color: #666;
              margin-top: 5px;
            }

            /* レスポンシブ対応 */
            @media (max-width: 768px) {
              .registration-tabs {
                flex-direction: column;
              }

              .tab-button {
                width: 100%;
                text-align: center;
              }

              .csv-format-table {
                font-size: 12px;
              }

              .csv-format-table th,
              .csv-format-table td {
                padding: 8px 4px;
              }

              .csv-preview-table {
                font-size: 12px;
              }

              .csv-stats {
                flex-direction: column;
              }

              .stat-item {
                min-width: auto;
              }
            }

            /* ローディングアニメーション */
            .loading-spinner {
              display: inline-block;
              width: 20px;
              height: 20px;
              border: 3px solid #f3f3f3;
              border-top: 3px solid #007cba;
              border-radius: 50%;
              animation: spin 1s linear infinite;
              margin-right: 10px;
            }

            @keyframes spin {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }

            /* アラート用スタイル */
            .alert {
              padding: 15px;
              margin: 20px 0;
              border: 1px solid transparent;
              border-radius: 8px;
            }

            .alert-warning {
              color: #856404;
              background-color: #fff3cd;
              border-color: #ffeaa7;
            }

            .alert-success {
              color: #155724;
              background-color: #d4edda;
              border-color: #c3e6cb;
            }

            .alert-danger {
              color: #721c24;
              background-color: #f8d7da;
              border-color: #f5c6cb;
            }

            /* ツールチップ */
            .tooltip {
              position: relative;
              display: inline-block;
              cursor: help;
            }

            .tooltip .tooltiptext {
              visibility: hidden;
              width: 200px;
              background-color: #333;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 8px;
              position: absolute;
              z-index: 1;
              bottom: 125%;
              left: 50%;
              margin-left: -100px;
              font-size: 12px;
              opacity: 0;
              transition: opacity 0.3s;
            }

            .tooltip:hover .tooltiptext {
              visibility: visible;
              opacity: 1;
            }

            /* CSV形式ヘルプの改善 */
            .csv-format-help {
              background: #e3f2fd;
              border-left: 4px solid #1976d2;
              padding: 15px;
              margin: 20px 0;
            }

            .csv-format-help h4 {
              color: #1976d2;
              margin: 0 0 10px 0;
            }

            .csv-format-help ul {
              margin: 10px 0;
              padding-left: 20px;
            }

            .csv-format-help li {
              margin: 5px 0;
              color: #424242;
            }

            /* ボタンのホバー効果改善 */
            .btn {
              transition: all 0.3s ease;
              position: relative;
            }

            .btn:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

            .btn:active {
              transform: translateY(0);
            }


            /* ファイルサイズ表示 */
            .file-info {
              background: #f8f9fa;
              padding: 10px;
              border-radius: 4px;
              margin: 10px 0;
              font-size: 14px;
              color: #666;
            }

            .file-size {
              font-weight: bold;
              color: #007cba;
            }

            /* 区切り線 */
            .section-divider {
              border: none;
              height: 2px;
              background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
              margin: 30px 0;
            }



/* 設定用CSS */
             .settings-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .settings-modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .settings-modal-header {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .settings-modal-title {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
        }

        .settings-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
        }

        .settings-modal-body {
            padding: 20px;
        }

        /* タブナビゲーション */
        .settings-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .settings-tab {
            padding: 10px 20px;
            background: #f5f5f5;
            border: none;
            cursor: pointer;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            margin-right: 2px;
        }

        .settings-tab.active {
            background: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
        }

        .settings-tab-content {
            display: none;
        }

        .settings-tab-content.active {
            display: block;
        }

        /* 設定セクション */
        .settings-section {
            margin-bottom: 30px;
        }

        .settings-section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

        /* 追加フォーム */
        .add-item-form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            align-items: center;
        }

        .add-item-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .add-item-btn {
            padding: 8px 16px;
            background: #007cba;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .add-item-btn:hover {
            background: #005a87;
        }

        /* アイテムリスト */
        .settings-items-list {
            border: 1px solid #e5e5e5;
            border-radius: 4px;
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #e5e5e5;
        }

        .settings-item:last-child {
            border-bottom: none;
        }

        .settings-item-name {
            flex: 1;
            font-size: 14px;
        }

        .settings-item-actions {
            display: flex;
            gap: 8px;
        }

        .edit-btn, .delete-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .edit-btn {
            background: #f0f0f0;
            color: #333;
        }

        .edit-btn:hover {
            background: #e0e0e0;
        }

        .delete-btn {
            background: #dc3545;
            color: white;
        }

        .delete-btn:hover {
            background: #c82333;
        }

        /* 編集モード */
        .settings-item.editing {
            background: #f8f9fa;
        }

        .edit-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid #007cba;
            border-radius: 3px;
            font-size: 14px;
        }

        .save-btn, .cancel-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .save-btn {
            background: #28a745;
            color: white;
        }

        .save-btn:hover {
            background: #218838;
        }

        .cancel-btn {
            background: #6c757d;
            color: white;
        }

        .cancel-btn:hover {
            background: #5a6268;
        }

        /* メッセージ */
        .settings-message {
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .settings-message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .settings-message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* 空リスト */
        .empty-list {
            text-align: center;
            padding: 40px 20px;
            color: #666;
            font-style: italic;
        }

        /* ローディング */
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

         /* チェックボックスグループのスタイル */
   .checkbox-group {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkbox-item:hover {
    background-color: #f5f5f5;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.checkbox-item span {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.checkbox-group .no-options {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin: 10px 0;
}

/* チェックボックスのカスタムスタイル（オプション） */
.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007cba;
}

/* 3カラムレイアウト（項目が多い場合） */
@media (min-width: 768px) {
    .checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (min-width: 1024px) {
    .checkbox-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 選択数表示（オプション） */
.checkbox-count {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

    .no-options {
        color: #666;
        font-style: italic;
        font-size: 14px;
        text-align: center;
        padding: 20px 10px;
    }

    .no-options button {
        background: none;
        border: none;
        color: #007cba;
        text-decoration: underline;
        cursor: pointer;
        font-size: inherit;
    }

    .no-options button:hover {
        color: #005a87;
    }

    /* 設定コントロールボタン */
    .settings-control {
        margin: 20px 0;
        text-align: right;
    }

    .settings-open-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        color: #495057;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;
    }

    .settings-open-btn:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .settings-open-btn svg {
        width: 16px;
        height: 16px;
    }

    /* フォームヘルプテキスト */
    .form-help {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #6c757d;
    }

    .form-help button {
        background: none;
        border: none;
        color: #007cba;
        text-decoration: underline;
        cursor: pointer;
        font-size: inherit;
    }

    .form-help button:hover {
        color: #005a87;
    }

    /* 複数選択可能項目の視覚的区別 */
    .form-group:has(.checkbox-group) .form-group__title::after {
        content: "（複数選択可）";
        font-size: 12px;
        color: #6c757d;
        font-weight: normal;
        margin-left: 6px;
    }

    /* セレクトボックスのスタイル調整 */
    .form-group__input[multiple] {
        min-height: 120px;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .checkbox-group {
            max-height: 150px;
        }

        .settings-control {
            text-align: center;
        }

        .settings-open-btn {
            width: 100%;
            justify-content: center;
        }
    }
/* ===================================================
  * Member Page End
==================================================== */


/* ===================================================
  * Login Page
==================================================== */
/* 新しいログインページのスタイルを適用するまでの一時的な引き継ぎスタイル */
/*---- cart_reset.css ---*/

#wc_login {

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
	background: #f7f7f7;
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	color: #686868;
	padding: 14px 12px;
	width: 100%;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
	background-color: #fff;
	border-color: #007acc;
	color: #1a1a1a;
	outline: 0;
}

button, button[disabled]:hover, button[disabled]:focus, input[type="button"], input[type="button"][disabled]:hover, input[type="button"][disabled]:focus, input[type="reset"], input[type="reset"][disabled]:hover, input[type="reset"][disabled]:focus, input[type="submit"], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus {
  background: #1a1a1a;
  border: 0;
  border-radius: 2px;
  color: #fff;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: 0.046875em;
  line-height: 1;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
}



/*---- header_explanation ---*/
div.header_explanation {
	margin: 0;
	padding:0;
}

/*---- footer_explanation ---*/
div.footer_explanation {
	margin-top: 1.42857em;
}

.loginbox,
#wc_member .loginbox {
	padding: .714286em 2.142856em;
	text-align: left;
}
.loginbox label,
#wc_member .loginbox label {
	line-height: 180%;
	width:100%;
}
.loginbox input,
#wc_memebr.login .loginbox input {
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
}
.loginbox input.loginmail,
.loginbox input.loginpass,
#wc_member .loginbox input.loginmail,
#wc_member .loginbox input.loginpass {
	width: 100%;
	margin-bottom: .714286em;
	border: 1px solid #ccc;
  font-size: 17px;
}
.loginbox .submit {
	padding: 20px 0 10px;
}
.loginbox #member_login,
#wc_member .loginbox #member_login {
	color: #fff;
	background-color: #ff8c00;
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
  font-size: 16px;
  padding: 20px;
}
.loginbox #member_login:hover,
#wc_member .loginbox #member_login:hover {
	background-color: #ffa500;
}
.loginbox .new-entry,
#wc_member .loginbox .new-entry {
	margin: 10px 0;
	padding: 20px;
	background-color: #efefef;
}
.loginbox .new-entry #nav,
#wc_member .loginbox .new-entry #nav {
	margin-top: .833338em;
	text-align: center;
}
.loginbox .new-entry #nav a,
#wc_member .loginbox .new-entry #nav a {
	display: inline-block;
	color: #fff;
	padding: .714286em 1.42857em;
	background-color: #ff8c00;
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
}
.loginbox .new-entry #nav a:hover,
#wc_member .loginbox .new-entry #nav a:hover {
	background-color: #ffa500;
	text-decoration: none;
}
#wc_member .loginbox a {
	padding: 0;
	background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
	border-radius: 0;
}
#wc_member .loginbox a:hover {
	background: none;
	text-decoration: underline;
}
.footer_explanation,
#wc_member .footer_explanation {
	clear: both;
}
.liwpp_area,
#wc_member .liwpp_area {
	text-align: center;
}

@media screen and (min-width: 38.75em) {
  .loginbox,
	#wc_changepassword .loginbox,
	#wc_lostmemberpassword .loginbox {
		margin: 0 auto;
		padding: .714286em 2.14285em;
		font-size: 1em;
	}
	.loginbox .submit,
	#wc_lostmemberpassword #nav a {
		font-size: 1em;
	}
}

@media screen and (min-width: 62.5em) {
  /*--- wc_login  ---*/
	.loginbox .new-entry #nav a,
	#wc_member .loginbox .new-entry #nav a,
	#wc_lostmemberpassword #member_login,
	#wc_lostmemberpassword #nav a,
	#wc_newcompletion #memberpages p a,
	#wc_lostcompletion #memberpages p a,
	#wc_changepasscompletion #memberpages p a,
	#wc_newcompletion .send a,
	#wc_lostcompletion .send input,
	#wc_lostcompletion .send a,
	#wc_changepasscompletion .send a {
		padding: 1.071428em 2.14286em;
	}
}

}

/* 新しいログインページのスタイルを適用するまでの一時的な引き継ぎスタイル */
/* ===================================================
  * Login Page End
==================================================== */

/* ===================================================
* LMS
==================================================== */
/* テーブルを横スクロール対応 */
.member-table-container {
  position: relative;
}

.member-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  border-radius: 10px;
}

.member-table-scroll .member-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content !important;
  min-width: 100%;
  table-layout: auto;
  overflow: auto;
}

/* 固定列：アイコン（1列目） */
.member-table-scroll .member-table th:first-child,
.member-table-scroll .member-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff; /* 背景色を追加 */
}

/* 固定列：名前（2列目） */
.member-table-scroll .member-table th:nth-child(2),
.member-table-scroll .member-table td:nth-child(2) {
  position: sticky;
  left: 90px; /* 1列目の幅に応じて調整 */
  z-index: 3;
  background: #fff; /* 背景色を追加 */
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

/* 固定列：最終列（操作列） */
.member-table-scroll .member-table th:last-child,
.member-table-scroll .member-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: 1px solid #ddd;
  background: #fff;
  box-shadow: -2px 0 2px rgba(0,0,0,0.1);
}

.member-table-scroll .member-table th:first-child,
.member-table-scroll .member-table th:nth-child(2),
.member-table-scroll .member-table th:last-child {
  background: var(--bg-primary-color);
}



/* ヘッダー行のz-indexを高く設定 */
.member-table thead th:first-child {
  z-index: 6;
  background: var(--bg-primary-color);
}
.member-table thead th:nth-child(2) {
  z-index: 5;
  background: var(--bg-primary-color);
}
.member-table thead th:last-child {
  z-index: 4;
  background: var(--bg-primary-color);
}


.member-table-scroll::-webkit-scrollbar {
  height: 8px;
}


  .member-detail {
    position: relative;
  }

  .member-detail-icon {
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 30px;
    font-size: 20px;
  }

  .member-detail-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 120px;
    height: 80px;
    top: 0px;
    right: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: all 0.3s ease;
  }

  .member-detail-info.is-active {
    transform: translateY(40px);
    opacity: 1;
    pointer-events: visible;
  }

  tr:last-child .member-detail-info.is-active {
    transform: translateY(-40px);
    top: auto;
    bottom: 0;
  }

  .member-detail-info .btn {
    margin: 3px 0;
    padding: 6px 12px;
    font-size: 12px;
    min-width: 80px;
  }

  tr:has(.member-detail-info.is-active) {
  position: relative;
  z-index: 50;
}


.member-table-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.member-table {
  width: 100%;
  border-radius: 10px !important;
  font-size: 14px;
  /* overflow: hidden; */
}

.member-table thead {
  background-color: var(--bg-primary-color);
  color:#a184d3;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.member-table tbody tr {
  background: #fff;
  border-bottom: 3px solid #f9f9f9;
  border-left: 3px solid #f9f9f9;
  border-right: 3px solid #f9f9f9;
}


.member-table th,
.member-table td {
  padding: 10px 15px;
  font-weight: bold;
}

.member-table .action {
  display: flex;
  align-items: center;
}

.member-table .action .btn {
  padding: 5px 12px;
  margin: 5px 10px;
}

.member-table {
  width: 100%;
  margin-bottom: 20px;
}

.member-table__head {
  background: var(--main-primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.member-table__head th {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}
.member-table__head th:first-child {
  text-align: left;
}
.member-table__head th:last-child {
  text-align: right;
}
.member-table__body {
  background: #fff;
  font-size: 14px;
}
.member-table__body td {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}
.member-table__body td:first-child {
  text-align: left;
}
.member-table__body td:last-child {
  text-align: right;
}
.member-table__body tr:nth-child(odd) {
  background: #f9f9f9;
}
.member-table__body tr:nth-child(even) {
  background: #fff;
}
.member-table__body tr:hover {
  background: #f0f0f0;
}
.member-table__body tr.is-active {
  background: var(--main-primary-color);
  color: #fff;
}
.member-table__body tr.is-active:hover {
  background: var(--main-primary-color);
  color: #fff;
}

.member-registration-form {
  margin: 0 auto;
}

.member-registration-form .form-group {
  margin-bottom: 20px;
  @media screen and (min-width: 768px) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 20px;
  }
}

.member-registration-form .form-group__secret {
  margin: 50px 0 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  font-size: 16px;
  font-weight: 700;
}

.member-registration-form .form-group__title {
  flex-shrink: 0;
  width: 150px;
}

.member-registration-form .form-help {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
  @media screen and (min-width: 768px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
  }
}

.form-group__name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 40px;
  border: none !important;
  color: var(--main-primary-color);
  background: var(--bg-primary-color);
}

.form-group__note {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}

.form-group__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  @media screen and (min-width: 768px) {
    margin-bottom: 0;
    width: 170px;
    text-align: right;
    padding-right: 20px;
  }
}

.form-group__input {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  @media screen and (min-width: 768px) {
    width: calc(100% - 170px);
    padding: 15px;
    font-size: 16px;
  }
  &::placeholder,
  &:-ms-input-placeholder {
    color: #eee;
    opacity: 1;
  }
}

.btn--submit {
  border: none;
  width: 200px;
  margin: 0 auto;
  span {
    position: relative;
    padding-right: 10px;
    &::after {
      content: '';
      background-image: url(../images/pages/btn_arrow_r.png);
      background-repeat: no-repeat;
      background-size: cover;
      width: 11px;
      height: 13px;
      position: absolute;
      right: 0px;
      top: calc(50% - 1px);
      transform: translate(100%, -50%) ;
    }
  }
}

.member-registration-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.member-registration-form .form-note {
  width: 100%;
  text-align: center;
}


.member-registration-form .form-submit {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 40px;
  padding-top: 20px;
}

.question-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-number {
  font-weight: 700;
  color: var(--main-primary-color);
  background: var(--bg-primary-color);
  font-size: 20px;
  padding: 2px 10px;
  border-radius: 5px;
}

.question-body {
  border-radius: 20px;
  background: #edebff49;
  padding: 30px;
}

.sm-question-item {
  background: #fff;
  margin-bottom: 20px;
}

/* 固定質問のスタイル */
.fixed-questions-notice {
  position: relative;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  padding-left: 25px;
}

.fixed-questions-notice::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/common/icon-subtitle-info.svg) no-repeat center center/contain;
}

.fixed-question {
  /* background: #f8f9fa; */
  position: relative;
}

.fixed-question::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 249, 250, 0.3);
  pointer-events: none;
  border-radius: 8px;
}

.fixed-badge {
  background: #6c757d;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.fixed-question input[readonly],
.fixed-question textarea[readonly],
.fixed-question select[disabled] {
  background-color: #e9ecef;
  color: #495057;
  cursor: not-allowed;
  opacity: 0.8;
}

.fixed-question input[readonly]:focus,
.fixed-question textarea[readonly]:focus {
  outline: none;
  border-color: #ced4da;
  box-shadow: none;
}

/* 追加質問の区切り線 */
.additional-questions-divider {
  text-align: center;
  margin: 30px 0 20px;
  position: relative;
}

.additional-questions-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #dee2e6;
}

.additional-questions-divider span {
  background: white;
  padding: 0 20px;
  position: relative;
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
}

/* .info-note {
  background: #e3f2fd;
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid #2196f3;
  margin-top: 10px;
}

.info-note i {
  color: #2196f3;
  margin-right: 5px;
} */

.empty-state,
.info-message {
  text-align: center;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* ボタンの無効状態 */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--large {
  padding: 12px 30px;
  font-size: 16px;
}

.msg--success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.msg--error {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

/* ホバー時のスタイル調整 */
.fixed-question:hover {
  box-shadow: none;
  background: #f8f9fa;
}


.sm-question-item {
 /* background: #eee; */
 margin-bottom: 50px;
}

.btn--form {
  outline: none;
  cursor: pointer;
  border: 1px solid var(--main-primary-color);
}

.section-survey-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-survey {
  width: calc(50% - 10px);
  padding: 20px;
  background: #fff;
  border-radius: 20px;
}

.section-survey__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid #F2F2F2;
}

.section-survey__result {
  background: #FBFBFF;
  border-radius: 20px;
}

.chart-caption--all {
  border-top: 1px solid #ccc;
  width: 300px;
  .chart-caption__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    .key {
      padding-right: 20px;
      color: #888;
    }
  }
}

.pie-chart-container {
  max-width: 600px;
  margin: 0 auto;
}

.member-panel__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  max-width: 500px;
  span {
    padding: 0 20px;
  }
}

.member-panel__icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 60px;
  overflow: hidden;
}

.member-panel__icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.member-panel__empty {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 20px;
  .btn {
    margin: 30px auto;
  }
}

.course-creation-form__title {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

@media screen and (min-width: 768px) {
  .course-creation-form__title {
    display: inline-block;
    margin-left: 20px;
    width: calc(100% - 85px);
  }
}

.course-creation-form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.sortable__list {
  list-style: none;
  padding: 0;
}

.sortable__item {
  margin: 5px 0;
  background: #f7f7f7;
  padding: 8px;
  cursor: move;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.course-creation-form {
  max-width: 800px;
  margin: 0 auto;
}

.course-creation-form__group {
  margin-bottom: 40px;
}


/* ダッシュボード */
/* ============================================
 受講管理ダッシュボード用CSS
 ============================================ */

/* ベーススタイル */
:root {
  --lms-red: #D32F2F;
  --lms-red-light: #FFEBEE;
  --lms-blue: #2196F3;
  --lms-green: #4CAF50;
  --lms-orange: #FF9800;
  --lms-yellow-light: #FFFDE7;
  --lms-orange-light: #FFF3E0;
  --lms-gray-bg: #F5F5F5;
  --lms-gray-border: #E0E0E0;
}

.dashboard-container {
  background: var(--lms-gray-bg);
  min-height: 100vh;
  font-family: 'Noto Sans JP', sans-serif;
}

.dashboard-header {
  background: white;
  border-top: 4px solid var(--main-primary-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.dashboard-title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-title-icon {
  color: var(--main-primary-color);
  font-size: 2rem;
}

/* タブナビゲーション */
.dashboard-tabs {
  border-bottom: 2px solid var(--lms-gray-border);
  /* margin-bottom: 2rem; */
}

.dashboard-tabs__nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2rem;
}

.dashboard-tabs__item {
  position: relative;
  padding: 10px 40px;
  cursor: pointer;
  border-bottom: 8px solid transparent;
  color: #070707;
  font-weight: 700;
  transition: all 0.3s ease;
}


.dashboard-tabs__item span {
  position: relative;
  padding-left: 24px;
  pointer-events: none;
}

.dashboard-tabs__item span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: url(../images/common/icon-title-primary.svg) no-repeat center center/contain;
}

.dashboard-tabs__item--history span::before {
  background: url(../images/common/icon-tab-history.svg) no-repeat center center/contain;
}

.dashboard-tabs__item--content span::before {
  background: url(../images/common/icon-tab-content.svg) no-repeat center center/contain;
}

.dashboard-tabs__item--book span::before {
  background: url(../images/common/icon-tab-book.svg) no-repeat center center/contain;
}

.dashboard-tabs__item--status span::before {
  background: url(../images/common/icon-tab-status.svg) no-repeat center center/contain;
}

.dashboard-tabs__item:hover {
  color: #333;
}

.dashboard-tabs__item.is-active {
  color: var(--main-primary-color);
  border-bottom-color: var(--main-primary-color);
  font-weight: 600;
}

.dashboard-tabs__content {
  display: none;
}

.dashboard-tabs__content.is-active {
  display: block;
}

/* フィルターバー */
.filter-bar {
  background: var(--main--gradient-color);
  color: #fff;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
  margin: 0 -25px 25px;
  display: flex;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: calc(100% - 185px);
}

.filter-group {
  width: calc(100% / 4 - 10px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-weight: 500;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.filter-select, .filter-input {
  padding: 0.75rem;
  border: 2px solid var(--lms-gray-border);
  border-radius: 6px;
  font-size: 12px;
  transition: border-color 0.3s ease;
}

.filter-select:focus, .filter-input:focus {
  outline: none;
  border-color: var(--main-primary-color);
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.filter-logic {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.logic-toggle {
  display: flex;
  background: #f0f0f0;
  border-radius: 6px;
  padding: 2px;
}

.logic-btn {
  padding: 2px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.logic-btn.active {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: var(--main-primary-color);
}

.filter-buttons {
  display: flex;
  gap: 10px;
  .btn {
    width: 50%;
    padding: 2px 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
  }

  .btn--secondary {
    background: #f5f5f5;
    color: #333;
  }

  .btn--secondary:hover {
    background: #e0e0e0;
  }

  .btn--small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}



/* アラートカード */
.alert-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.alert-card {
  position: relative;
  aspect-ratio: 16/9;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  aspect-ratio: 3 / 1;
}

.alert-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  opacity: 1;
}

.alert-card--danger {
   background: url(../images/common/dashboard-alart-card-01.svg) no-repeat center center/cover;
}

.alert-card--warning {
   background: url(../images/common/dashboard-alart-card-02.svg) no-repeat center center/cover;
}

.alert-card--info {
 background: url(../images/common/dashboard-alart-card-03.svg) no-repeat center center/cover;
}

.alert-card__number {
  position: absolute;
  bottom: 5%;
  right: 57%;
  text-align: right;
  font-size: 3vw;
  font-weight: 700;
}

.alert-card-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);

  padding: 10px 14px;
  background-color: #333;
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%) translateY(5px);

  /* 前面に表示 */
  z-index: 1000;
  pointer-events: none;

  /* 影を追加 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ツールチップの三角形 */
.alert-card-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #333;
}

/* ホバー時にツールチップを表示 */
.alert-card:hover .alert-card-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}




/* KPIサマリー */
.kpi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.kpi-card {
  background: white;
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid #cfcfcf;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.kpi-card__title {
  margin: 0;
  font-size: 15px;
  color: #676767;
  font-weight: 500;
  width: 100%;
}

.kpi-card__icon {
  width: 55px;
  margin: 0;
}

.kpi-card__value {
  font-size: 3vw;
  font-weight: bold;
  color: var(--main-primary-color);
  margin: 0.25rem 0;
}

.kpi-card__value .txt--s {
  font-size: 0.5em;
}

.kpi-card__meta {
  font-size: 0.75rem;
  color: #666;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-bar__fill {
  height: 100%;
  background: var(--main-primary-color);
  transition: width 0.3s ease;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.trend-indicator--up {
  color: var(--lms-green);
}

.trend-indicator--down {
  color: var(--main-primary-color);
}

/* メインコンテンツエリア */
.dashboard-main-content {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* 受講状況分析 */
.learning-status__header {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5rem;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.status-chart {
  position: relative;
  border: 1px solid #dbdbdb;
  border-radius: 20px;
}

.status-chart .chart-container {
  max-height: 200px;
  padding: 0px;
}

.chart-container {
  position: relative;
  height: 250px;
  border-radius: 6px;
  padding: 15px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.progress-analysis {
  background: #FBFBFF;
  padding: 25px;
  border-radius: 20px;
}

.progress-analysis__title {
  position: relative;
  padding-left: 35px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #CFCFCF;
}

.progress-analysis__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background: url(../images/common/icon-subtitle-search.svg) no-repeat center center/contain;
}

.overall-progress__label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px;
}

.overall-progress__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.overall-progress__value {
  font-size: 40px;
  font-weight: bold;
  color: var(--main-primary-color);
}

.overall-progress__value small {
  font-size: 24px;
}

.chapter-progress {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chapter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.chapter-name {
  /* flex: 1; */
  display: none;
}

.chapter-value {
  font-weight: 600;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.chapter-bar {
  /* width: 100px; */
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.chapter-bar__fill {
  height: 100%;
  background: var(--lms-orange);
}


.section-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.department-table,
.department-survey-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.department-table tr:hover,
.department-survey-table tr:hover {
  background: var(--bg-primary-color);
}

.department-table th,
.department-survey-table th{
  white-space: nowrap;
}

.overdue-count {
  color: var(--main-primary-color);
  font-weight: 600;
}

.follow-up-section {
  margin-bottom: 30px;
}

.follow-up-section:last-child {
  margin-bottom: 0;
}

.follow-up .icon-info {
  cursor: pointer;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  vertical-align: middle;
}

.follow-up .tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  font-weight: normal;
  white-space: nowrap;
  border-radius: 4px;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;

  z-index: 10;

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
  }
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
}


.follow-up-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 3px solid #f9f9f9;
}

.follow-up-title {
  position: relative;
  font-weight: 700;
  color: #777;
  padding-left: 30px;
}

.follow-up-title::before {
  content: "";
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  background: url(../images/common/icon-dashboard-caution.svg) no-repeat center center/contain;
}

.user-list,
.non-respondents-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  max-height: 300px;
  overflow-y: scroll;
}

.user-list-item,
.non-respondent-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 3px solid #f9f9f9;
}

.user-list-item strong,
.non-respondent-item .user-name {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
}

.user-list .no-users {
  padding: 20px 0;
  font-weight: 700;
}

.user-info h5 {
  margin: 0;
  font-weight: 600;
  color: #333;
}

.user-info p {
  margin: 0.25rem 0 0 0;
  font-size: 0.75rem;
  color: #666;
}

.user-action {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.user-action:hover {
  color: var(--main-primary-color);
  background: var(--lms-red-light);
}

.empty-state {
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 1rem;
}

.survey-analysis-default {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.progress-detail {
  grid-column: span 2;
}

.progress-detail__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.progress-detail__content {
  flex: 1;
}


/* テスト結果分析 */
.test-analysis {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.test-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.test-chart {
  text-align: center;
}

.test-stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-weight: 600;
  color: #666;
}

.stat-value {
  font-weight: bold;
  color: var(--lms-blue);
}

.stat-meta {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
}

/* アンケート分析 */


.distribution-chart-section h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid #D0D0D0;
}
/* アンケート結果コンテナ全体 */

.survey-results-container {
  display: flex;
  gap: 25px;
}

.survey-results-main {
  width: 70%;
}

.survey-results-main .section-member__heading {
  justify-content: start;
  gap: 20px;
}

.survey-results-info {
  width: 30%;
}

.survey-non-respondents {
  margin-bottom: 20px;
}

.department-survey-management {
}

/* 2段目右: 質問別結果 */
.survey-question-results {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 回答率表示 */
.survey-response-rate {
  display: flex;
  align-items: center;
  gap: 15px;
}

.survey-response-icon {
  width: 55px;
  margin: 0;
}

.survey-response-title {
  font-size: 16px;
}

.response-rate-display {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.survey-overall {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}

.survey-overall-rating {
  display: flex;
  flex-wrap: wrap;
  width: 265px;
}

.overall-rating-display {
  text-align: center;
  background: var(--main--gradient-color);
  color: #fff;
  padding: 30px 50px;
  border-radius: 20px;
  width: 265px;
}

.rating-score {
  font-size: 30px;
  font-weight: bold;
}

.rating-score strong {
  font-size: 48px;
  width: 84px;
}

.rating-details {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.rate-percentage {
  flex-shrink: 0;
  font-size: 40px;
  font-weight: bold;
  color: var(--main-primary-color);
  width: 130px;
}

.rate-details {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.survey-count-info {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  margin-top: 15px;
}

.info-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.survey-overall-chart  {
  width: calc(100% - 265px);
}

/* 未回答者リスト */
.non-respondents-header {
  margin-bottom: 15px;
  text-align: right;
}


/* 質問結果アイテム */
.all-questions-wrapper {
  background: #FBFBFF;
  border-radius: 10px;
  padding: 20px;
}

.question-result-item {
  margin-bottom: 20px;
}

.question-result-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.question-result-index {
  font-size: 20px;
  font-weight: bold;
  color: var(--main-primary-color);
  background: var(--bg-primary-color);
  padding: 8px 10px;
  border-radius: 5px;
  margin-bottom: -1px;
}

.question-result-title {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 2px solid #D0D0D0;
}

.question-result-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.score-display {
  color: var(--main-primary-color);
  font-weight: 700;
}

.score-value {
  font-size: 40px;
}

.score-suffix {
  font-size: 20px;
}

.question-toggle-btn {
  width: 100%;
  padding: 10px;
  margin: 15px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  color: var(--main-primary-color);
}

.toggle-arrow {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.toggle-arrow.toggle-arrow-up {
  transform: rotate(180deg) ;
}

/* テキスト回答エリア */
.text-responses {
  margin-top: 15px;
}

.text-responses > div {
  background: white !important;
}

/* トグルボタン */
.survey-list-toggle {
  margin-top: 20px;
}

.toggle-buttons {
  display: flex;
  gap: 10px;
}

.toggle-btn {
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

.toggle-btn.active {
  color: var(--main-primary-color)
}

.toggle-content {
  padding: 20px 0;
}

.toggle-content .no-data {
  text-align: center;
  color: #999;
  padding: 40px;
}

/* スクロールバーのスタイル */
.survey-question-results::-webkit-scrollbar,
.non-respondents-list::-webkit-scrollbar {
  width: 8px;
}

.survey-question-results::-webkit-scrollbar-track,
.non-respondents-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.survey-question-results::-webkit-scrollbar-thumb,
.non-respondents-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.survey-question-results::-webkit-scrollbar-thumb:hover,
.non-respondents-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.survey-response-rate,
.survey-overall-rating,
.survey-non-respondents,
.department-survey-management,
.survey-question-results,
.survey-list-toggle {
  animation: fadeIn 0.5s ease-out;
}




/* 個人ステータス */
.individual-status {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.status-table th:hover {
  background: var(--bg-primary-color);
}

.status-table th.active {
  background: var(--bg-danger-color);
  color: var(--main-primary-color);
}

.status-table tr:hover {
  background: var(--bg-primary-color);
}

.sortable .sort-indicator {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.5;
}

.sortable.active .sort-indicator {
  opacity: 1;
}

/* 時系列チャート */

/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal.is-active {
  opacity: 1;
  visibility: visible;
}

.page-template-uscesmember .modal__content {
  background: white;
  border-radius: 8px;
  /* max-width: 800px; */
  /* width: 90%; */
  /* max-height: 80vh; */
  /* max-height: 350px; */
  overflow-y: auto;
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.15); */
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--lms-gray-border);
}

.modal__title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.modal__close:hover {
  background: #f0f0f0;
  color: #333;
}

.modal__body {
  padding: 1.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

.modal__input-group {
  padding: 10px 25px;
}

.modal__input-group input,
.modal__input-group select,
.modal__input-group textarea {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--lms-gray-border);
}

/* アンケート */
.survey-count-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.survey-count-info .info-text {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.95;
}

.non-respondent-item .unanswered-count {
  color: #ff5722;
  font-weight: 600;
  margin-left: auto;
}

.survey-question-results,
.survey-list-toggle {
  transition: opacity 0.3s ease;
}

.survey-question-results[style*="none"],
.survey-list-toggle[style*="none"] {
  opacity: 0;
  pointer-events: none;
}

/* ボタン */

/* レスポンシブ */
@media (max-width: 768px) {
  .dashboard-main-content {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .test-content {
    grid-template-columns: 1fr;
  }
/*
  .filter-row {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    justify-content: stretch;
  }

  .filter-actions .btn {
    flex: 1;
  } */

  .alert-cards {
    grid-template-columns: 1fr;
  }

  .kpi-summary {
    grid-template-columns: 1fr;
  }
}

/* 個人ステータステーブル用スタイル */
.individual-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.individual-row:hover {
  background-color: #f5f5f5;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.last-login {
  color: #666;
  font-size: 0.75rem;
}

.department-badge,
.position-badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.position-badge {
  background-color: #fff3e0;
  color: #f57c00;
}

.course-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.total-count {
  font-weight: 600;
  font-size: 1.1rem;
}

.completed-info {
  color: #4caf50;
  font-size: 0.75rem;
}

.completion-display,
.progress-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-small {
  flex: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.progress-bar-small .progress-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
  background: var(--main-primary-color);
}

.percentage {
  font-weight: 500;
  min-width: 35px;
  text-align: right;
  font-size: 0.875rem;
}

/* 個人ステータスサマリー */
.individual-status-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e9ecef;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.summary-stat {
  text-align: center;
}

.summary-stat .stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.summary-stat .stat-label {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
}

/* 検索バー */
.individual-search-bar {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.search-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-input-group {
  position: relative;
  flex: 1;
}

.search-input {
  position: relative;
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}

.search-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.search-box {
  position: relative;
}

.search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}

.search-clear-btn:hover {
  background-color: #f5f5f5;
  color: #666;
}

.search-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.search-option input[type="checkbox"] {
  margin: 0;
}

/* エクスポート機能 */
.export-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.export-controls .btn {
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

/* ユーザー詳細モーダル用スタイル */
.user-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.user-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.user-basic-info h4,
.user-stats h4,
.user-courses h4 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-table td:first-child {
  font-weight: 500;
  color: #666;
  width: 80px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-card {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.stat-card.completed {
  background-color: #e8f5e8;
  border-color: #4caf50;
}

.stat-card.in-progress {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

.stat-card.not-started {
  background-color: #f5f5f5;
  border-color: #9e9e9e;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
}

.courses-table-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.courses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.courses-table th {
  background-color: #f8f9fa;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.courses-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.course-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-name {
  font-weight: 500;
}

.course-type {
  color: #666;
  font-size: 0.75rem;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  min-width: 60px;
}

.status-completed {
  background-color: #e8f5e8;
  color: #2e7d32;
}

.status-in-progress {
  background-color: #e3f2fd;
  color: #1565c0;
}

.status-not-started {
  background-color: #f5f5f5;
  color: #616161;
}

.status-overdue {
  background-color: #ffebee;
  color: #c62828;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-mini {
  width: 80px;
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-mini .progress-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
  min-width: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .user-summary {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.75rem 0.5rem;
  }

  .stat-number {
    font-size: 1.25rem;
  }

  .courses-table-container {
    max-height: 250px;
  }

  .search-controls {
    flex-direction: column;
  }

  .search-options {
    justify-content: center;
  }

  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .export-controls {
    justify-content: center;
  }
}

/* ソートインジケーター強調 */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  background-color: #f5f5f5;
}

.sort-indicator {
  color: #666;
  font-size: 0.75rem;
  margin-left: 4px;
}

/* フィルター状態の表示 */
.filter-applied {
  position: relative;
  border-color: #2196f3 !important;
  background-color: #f3f8ff;
}

.filter-applied::after {
  content: '●';
  color: #2196f3;
  font-size: 0.5rem;
  position: absolute;
  top: 4px;
  right: 4px;
}

/* 空状態 */
.empty-individual-status {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
}

.empty-individual-status h3 {
  margin-bottom: 0.5rem;
  color: #999;
}

.empty-individual-status p {
  margin-bottom: 1.5rem;
}

/* ローディング状態 */
.loading-individual {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #2196f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* テーブルのスクロールバー */
.courses-table-container::-webkit-scrollbar {
  width: 6px;
}

.courses-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.courses-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.courses-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* アニメーション効果 */
.individual-row {
  transition: all 0.2s ease;
}

.progress-bar__fill {
  transition: width 0.5s ease-in-out;
}

.status-badge {
  transition: transform 0.2s ease;
}

.individual-row:hover .status-badge {
  transform: scale(1.05);
}

/* プリント用スタイル */
@media print {
  .individual-search-bar,
  .export-controls,
  .individual-row {
    cursor: default;
  }

  .individual-row:hover {
    background-color: transparent;
  }

  .progress-bar-small,
  .progress-bar-mini {
    border: 1px solid #ccc;
  }
}/* 個人ステータステーブル用スタイル */
.individual-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.individual-row:hover {
  background-color: #f5f5f5;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.last-login {
  color: #666;
  font-size: 0.75rem;
}

.department-badge,
.position-badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e3f2fd;
  color: #1976d2;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.position-badge {
  background-color: #fff3e0;
  color: #f57c00;
}

.course-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.total-count {
  font-weight: 600;
  font-size: 1.1rem;
}

.completed-info {
  color: #4caf50;
  font-size: 0.75rem;
}

.completion-display,
.progress-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-small {
  flex: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.progress-bar-small .progress-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
}

.percentage {
  font-weight: 500;
  min-width: 35px;
  text-align: right;
  font-size: 0.875rem;
}

/* ユーザー詳細モーダル用スタイル */
.user-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.user-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.user-basic-info h4,
.user-stats h4,
.user-courses h4 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-table td:first-child {
  font-weight: 500;
  color: #666;
  width: 80px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-card {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.stat-card.completed {
  background-color: #e8f5e8;
  border-color: #4caf50;
}

.stat-card.in-progress {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

.stat-card.not-started {
  background-color: #f5f5f5;
  border-color: #9e9e9e;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
}

.courses-table-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.courses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.courses-table th {
  background-color: #f8f9fa;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.courses-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.course-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.course-name {
  font-weight: 500;
}

.course-type {
  color: #666;
  font-size: 0.75rem;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  min-width: 60px;
}

.status-completed {
  background-color: #e8f5e8;
  color: #2e7d32;
}

.status-in-progress {
  background-color: #e3f2fd;
  color: #1565c0;
}

.status-not-started {
  background-color: #f5f5f5;
  color: #616161;
}

.status-overdue {
  background-color: #ffebee;
  color: #c62828;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-mini {
  width: 80px;
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-mini .progress-bar__fill {
  height: 100%;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: #666;
  min-width: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .user-summary {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.75rem 0.5rem;
  }

  .stat-number {
    font-size: 1.25rem;
  }

  .courses-table-container {
    max-height: 250px;
  }
}

/* ソートインジケーター強調 */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  background-color: #f5f5f5;
}

.sort-indicator {
  color: #666;
  font-size: 0.75rem;
  margin-left: 4px;
}

/* フィルター状態の表示 */
.filter-applied {
  position: relative;
}

.filter-applied::after {
  content: '●';
  color: #2196f3;
  font-size: 0.5rem;
  position: absolute;
  top: 4px;
  right: 4px;
}

/* 空状態 */
.empty-individual-status {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
}

.empty-individual-status h3 {
  margin-bottom: 0.5rem;
  color: #999;
}

.empty-individual-status p {
  margin-bottom: 1.5rem;
}

/* ローディング状態 */
.loading-individual {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #2196f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* メンバーページ */
/* 基本スタイル */

  .page-template-uscesmember td,
  .page-template-uscesmember th {
    /* text-align: center; */
    text-align: left;
    vertical-align: middle;
    max-width: 250px;
  }

  .member-tab {
    margin-bottom: 20px;
  }

  .member-tab__list {
      display: flex;
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
      border-bottom: 2px solid #f0f0f0;
  }

  .member-tab__panel {
      display: none;
  }

  .member-tab__panel.is-active {
      display: block;
  }

  /* トースト通知スタイル */
  .toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
  }

  .toast {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .toast.show {
    transform: translateX(0);
    opacity: 1;
  }

  .toast.success {
    border-left: 4px solid #28a745;
  }

  .toast.error {
    border-left: 4px solid #dc3545;
  }

  .toast.info {
    border-left: 4px solid #17a2b8;
  }

  .toast.warning {
    border-left: 4px solid #ffc107;
  }

  .toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .toast-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
  }

  .toast-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .toast-close:hover {
    color: #333;
  }

  .toast-message {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
  }

  .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #007bff;
    transition: width linear;
  }

  .toast.success .toast-progress {
    background: #28a745;
  }

  .toast.error .toast-progress {
    background: #dc3545;
  }

  .toast.warning .toast-progress {
    background: #ffc107;
  }

  /* ローディング状態 */
  .loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
  }

  .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #B00000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* メッセージスタイル */
  .message {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    border-left: 4px solid;
  }

  .message.success {
    background-color: #d4edda;
    border-left-color: #28a745;
    color: #155724;
  }

  .message.error {
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
  }

  .message.info {
    background-color: #cce7ff;
    border-left-color: #007bff;
    color: #004085;
  }

  /* 進捗表示 */
  .status-count {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
  }

  /* .status-unwatched {
    background: #f8f9fa;
    color: #6c757d;
  }

  .status-in-progress {
    background: #fff3cd;
    color: #856404;
  }

  .status-completed {
    background: #d4edda;
    color: #155724;
  }

  .status-expired {
    background: #f8d7da;
    color: #721c24;
  } */

  /* サムネイル関連 */
  .thumbnail-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .current-thumbnail img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
  }

  .thumbnail-placeholder {
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    border-radius: 8px;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
  }

  .form-group__input[type="file"] {
    padding: 8px;
    border: 2px dashed #ddd;
    background: #f9f9f9;
    border-radius: 4px;
  }

  .form-group__input[type="file"]:focus {
    border-color: #B00000;
    background: #fff;
  }

  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .member-table {
      font-size: 12px;
    }

    .member-panel__icon {
      width: 30px;
      height: 30px;
    }

    .toast-container {
      top: 10px;
      right: 10px;
      left: 10px;
      max-width: none;
    }
  }


/* トースト */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  max-width: 400px;
}

.toast {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  margin-bottom: 12px;
  min-width: 300px;
  position: relative;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  overflow: hidden;
  border-left: 4px solid;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.removing {
  transform: translateX(100%);
  opacity: 0;
}

.toast--success {
  border-left-color: #10b981;
}

.toast--error {
  border-left-color: #ef4444;
}

.toast--warning {
  border-left-color: #f59e0b;
}

.toast--info {
  border-left-color: #3b82f6;
}

.toast__content {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 12px;
}

.toast__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.toast--success .toast__icon {
  color: #10b981;
}

.toast--error .toast__icon {
  color: #ef4444;
}

.toast--warning .toast__icon {
  color: #f59e0b;
}

.toast--info .toast__icon {
  color: #3b82f6;
}

.toast__message {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  word-break: break-word;
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.toast__close:hover {
  color: #6b7280;
  background: #f3f4f6;
}

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(59,130,246,0.3), rgba(59,130,246,0.8));
  animation: progress linear forwards;
  transform-origin: left;
}

.toast--success .toast__progress {
  background: linear-gradient(90deg, rgba(16,185,129,0.3), rgba(16,185,129,0.8));
}

.toast--error .toast__progress {
  background: linear-gradient(90deg, rgba(239,68,68,0.3), rgba(239,68,68,0.8));
}

.toast--warning .toast__progress {
  background: linear-gradient(90deg, rgba(245,158,11,0.3), rgba(245,158,11,0.8));
}

@keyframes progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 640px) {
  .toast-container {
    left: 16px;
    right: 16px;
    top: 16px;
    max-width: none;
  }

  .toast {
    min-width: auto;
  }
}


/* 城山さん追加分 */

.stat-card .stat-label::before{
  content: "";
  position: absolute;
  top: -3px;
  left: 10px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
 }
  .icon--participants{
    &::before {
      background: url(../images/common/icon-dashboard-test-participants.svg) no-repeat center center/contain;
      border: none;
    }
  }
  .icon--average-score{
    &::before {
      background: url(../images/common/icon-dashboard-test-average-score.svg) no-repeat center center/contain;
      border: none;
    }
  }
  .icon--max-score{
    &::before {
      background: url(../images/common/icon-dashboard-test-max-score.svg) no-repeat center center/contain;
      border: none;
    }
  }
  .icon--min-score{
    &::before {
      background: url(../images/common/icon-dashboard-test-min-score.svg) no-repeat center center/contain;
      border: none;
    }
  }

.icon--inquiry{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    top: 14px;
    left: 10px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background: url(../images/common/icon-dashboard-test-inquiry.svg) no-repeat center center/contain;
    border: none;
  }
}

.evaluation-label{
  position: relative;
  padding-left: 20px;
  text-align: center;

  &::before{
    content: "";
    position: absolute;
    top: -3px;
    left: -8px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background: url(../images/common/icon-dashboard-test-main-score.svg) no-repeat center center/contain;
    border: none;
  }
}

.score-graph{
  position: relative;

  &::before{
    content: "";
    position: absolute;
    top: -3px;
    left: -10px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background: url(../images/common/icon-dashboard-test-score-histogram.svg) no-repeat center center/contain;
    border: none;
  }
}



/* ===================================================
* 学習コンテンツ管理ページ *
==================================================== */
.content-management  {
  [data-tooltip] {
    position: relative;
    cursor: default;
  }

  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 130px;
    bottom: 100%;
    right: 0;
    transform: translateY(-8px);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  [data-tooltip]:hover::after {
    opacity: 1;
  }

  #loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  #loading-overlay .spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform-origin: center;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* 進捗表示用CSS */
  .progress-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
  }

  .progress-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
  }

  .progress-bar-container {
    margin-bottom: 15px;
  }

  .progress-bar {
    position: relative;
    width: 100%;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 12px;
    position: relative;
  }

  .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .progress-text {
    /* position: absolute; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #333;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  }

  .progress-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #666;
  }

  .progress-status {
    font-weight: 500;
  }

  .progress-size {
    font-size: 13px;
    color: #888;
  }

  .upload-warnings {
    margin-top: 15px;
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
  }

  .upload-warnings p {
    margin: 0 0 8px 0;
    color: #856404;
    font-size: 14px;
  }

  .upload-warnings ul {
    margin: 0;
    padding-left: 20px;
    color: #856404;
  }

  .upload-warnings li {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .error-message {
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
  }

  .error-content h4 {
    margin: 0 0 8px 0;
    color: #721c24;
  }

  .error-content p {
    margin: 0 0 12px 0;
    color: #721c24;
    font-size: 14px;
  }

  .file-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    font-size: 13px;
  }

  .file-size {
    color: #666;
    font-weight: 500;
  }

  .help-text {
    color: #666;
    font-size: 12px;
    margin-top: 4px;
    display: block;
  }

  .btn-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-spinner::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* ファイル入力のスタイリング */
  input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 2px dashed #ddd;
    border-radius: 6px;
    background: #fafafa;
    transition: border-color 0.3s ease;
  }

  input[type="file"]:hover {
    border-color: #B00000;
    background: #fff5f5;
  }

  /* アップロード中のモーダル状態 */
  .modal.uploading .modal__close {
    opacity: 0.5;
    pointer-events: none;
  }

  .modal.uploading .modal__header::after {
    content: '（アップロード中 - ページを閉じないでください）';
    color: #B00000;
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
  }
}

.modal--assignment {
  .modal__inner {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    background: #fff;
  }

  .modal__header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
  }

  .modal__title {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding-left: 35px;
  }

  .modal__title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 30px;
    width: 30px;
    background: url(../images/common/icon-subtitle-content-check.svg) no-repeat center center/contain;
    transform: translateY(-50%);
  }

  .modal__name {
    font-size: 16px;
  }

  .modal__content {
    overflow-y: visible;
    padding: 0 20px;
    max-height: none;
    min-height: auto;
  }

  .modal__control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #EDEBFF33;
    padding: 5px 20px;
    border-radius: 20px;
  }

  .purchase-limit-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
  }

  .info-label,
  .info-note {
    font-size: 14px;
    color: #a4a4a4;
  }

  .info-box-purchase {
    margin-right: 30px;
  }

  .info-value {
    font-weight: 700;
    font-size: 20px;
  }

  .info-value .number {
    color: var(--main-primary-color);
    font-weight: 700;
    font-size: 34px;
    padding: 0 10px 0 20px;
  }

  .info-box {
    border: 1px solid #CFCFCF;
    background: #fff;
    border-radius: 10px;
    padding: 5px 30px 5px 10px;
  }

  .info-box .info-value {
    font-size: 16px;
  }

  .info-box .info-value .number {
    font-size: 24px;
  }

  .deadline-settings-section {
    padding: 5px;
    font-size: 16px;
    font-weight: 700;
  }

  .deadline-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .user-lists-container {
    padding: 30px 0;
    display: flex;
    gap: 20px;
  }

  .enhanced-panel {
    flex: 1;
    border: 1px solid #DBDBDB;
    border-radius: 20px;
    background-color: #fff;
    background: #D2D2D233;
    padding: 20px;
    width: calc((100% - 95px) / 2);
  }

  .search-container {
    position: relative;
    margin-bottom: 20px;
  }

  .modal-user-search {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #DBDBDB;
    border-radius: 50px;
    font-size: 14px;
  }

  .group-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
  }

  .group-filter {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .group-filter span {
    color: #2B2C40;
    font-size: 14px;
    flex-shrink: 0;
  }

  .group-filter-select,
  .department-filter-select {
    padding: 10px 15px;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
  }

  .filter-action-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .filter-action-btns .select-all-visible-btn,
  .filter-action-btns .reset-filters-btn {
    display: inline-block;
    background: transparent;
    border: none;
    color: var(--main-primary-color);
    cursor: pointer;
    padding: 0;
  }

  .available-user-list-outer {
    overflow-y: scroll;
    height: 230px;
  }

  .available-users-list {
    background: #D2D2D233;
    border-radius: 15px;
    padding: 15px;
  }

  .assigned-users-panel {
    border: 1px solid var(--main-primary-color);
    background: #EDEBFF33;
  }

  .available-users-panel {
    border: 1px solid #DBDBDB;
  }

  .assigned-users-panel-title {
    color: var(--main-primary-color);
    font-size: 20px;
  }

  .assigned-statistics {
    display: flex;
    color: var(--main-primary-color);
    font-weight: 700;
  }

  .assigned-statistics .clear-all-btn {
    cursor: pointer;
    background: transparent;
    border: none;
    font-weight: 700;
    color: var(--main-primary-color);
    transition: opacity 0.3s ease;
  }

  .assigned-statistics .clear-all-btn:hover {
    opacity: 0.8;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .assignment-user-list-outer {
    overflow-y: scroll;
    height: 330px;
  }

  .user-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .user-item:hover {
    background-color: #f0f0fc;
  }

  .user-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .user-checkbox {
    border: 1px solid #DBDBDB;
  }

  .user-thumbnail {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .user-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
  }

  .user-name {
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
  }

  .user-main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
  }

  .user-groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }

  .group-tag {
    background-color: #f7f6ff;
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
  }

  /* .group-tag.no-group {
    background-color: #999;
  } */

  .assignment-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
    font-weight: 700;
    align-items: center;
  }

  .detail-item,
  .deadline-display {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .deadline-edit-btn {
    border: 2px solid var(--main-primary-color);
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: url(../images/common/icon-title-edit.svg) no-repeat center center/contain;
  }

  .transfer-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .transfer-btn-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
  }

  .transfer-btn-text {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--main-primary-color);
  }

  .transfer-btn.btn--disabled {
     background: transparent;
     border: none;
  }

  .transfer-btn.btn--disabled img {
    margin: 0;
  }

  .transfer-btn.btn--disabled img{
    opacity: 0.4;
    cursor: not-allowed;
  }

  .assignment-summary {
    font-size: 10px;
  }

  .deadline-input-container {
    margin-top: 8px;
  }

  .deadline-edit-input,
  .viewing-deadline-input {
    border: 1px solid #CFCFCF;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
  }

  .deadline-save-btn,
  .deadline-cancel-btn {
    margin-left: 5px;
    width: 50px;
    padding: 0;
    border-radius: 10px;
  }

  .assignment-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    background: #eee;
    font-size: 12px;
    padding: 2px 8px;
    font-weight: 700;
    border-radius: 999px;
  }

  .modal__footer {
    border-top: 0;
    padding: 0 20px 20px;
  }

  .btn--submit {
    margin-right: 0;
  }
}

/* メンバー詳細ページ */
.member-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.member-info-wrapper,
.content-info-wrapper {
  .dashboard-top {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
  }

  .member-info {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
  }

  .member-info__main {
    padding: 30px;
  }

  .member-info__main-top {
    text-align: center;
  }

  .member-info__thumbnail {
    position: relative;
    margin: 0 auto 30px;
    max-width: 100px;
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }

  .member-info__thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .member-info__name {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .member-info__list {
    margin-bottom: 40px;
  }

  .member-info__item,
  .member-info__list li {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .member-info__detail {
    background: var(--bg-primary-color);
    padding: 30px;
  }

  .member-info__title {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-primary-color);
    margin-bottom: 20px;
  }


  .member-info__title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../images/common/icon-subtitle-member.svg) no-repeat center center/contain;
    transform: translateY(-50%);
  }

 .gauge-container {
    position: relative;
    width: 50%;
    /* 半径×2 */
    /* height: 180px; */
    /* 幅の半分＝半円の高さ */
    flex-shrink: 0;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    padding: 20px;
  }

  .gauge-container canvas {
    display: block;
    /* width: 100% !important; */
  }

  .gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

  .gauge-text .percent {
    font-weight: bold;
    color: #333;
    line-height: 1;
  }

  .gauge-text .label {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
  }

.status-cards {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  gap: 15px;
  margin-right: -15px;
}

.status-card {
  width: calc(50% - 15px);
  border-radius: 20px;
  border: 1px solid #DBDBDB;
  align-items: center;
}

.dashboard-top .number {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 4px;
  padding-right: 5px;
}
}


@media screen and (min-width: 768px) {
  .member-info-wrapper {
    .member-info {
      width: calc(30% - 30px);
      order: 1;
    }
    .member-info-progress {
      width: 70%;
      order: 0;
    }
  }
}