@charset "utf-8";

html {
  font-size: 16px!important;
}
body {
    font-family: 'Nunito Sans', 'Noto Sans JP', sans-serif;
    background-color: #fdfbf7;
}
.sidebar-icon {
    font-size: 22px;
    color: #0ea5e9; 
    transition: transform 0.2s ease;
}
.nav-item:hover .sidebar-icon {
    transform: scale(1.1);
}
.calendar-cell {
    height: 100px;
    vertical-align: top;
    overflow: hidden;
    transition: background-color 0.2s;
}
.calendar-cell-inner {
    height: 100%;
    overflow-y: auto;
}
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.progress-dot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* タブのギザギザデザイン */
.tab-zigzag-active::after,
.tab-zigzag-inactive::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-size: 12px 8px;
    background-repeat: repeat-x;
}

.tab-zigzag-active::after {
    background-image: 
        linear-gradient(135deg, #ffffff 25%, transparent 25%),
        linear-gradient(225deg, #ffffff 25%, transparent 25%);
    background-position: 0 0, 6px 0;
}

.tab-zigzag-inactive::after {
    background-image: 
        linear-gradient(135deg, rgba(125, 211, 252, 0.6) 25%, transparent 25%),
        linear-gradient(225deg, rgba(125, 211, 252, 0.6) 25%, transparent 25%);
    background-position: 0 0, 6px 0;
}

/* ダークモード対応 */
.dark .tab-zigzag-active::after {
    background-image: 
        linear-gradient(135deg, #475569 25%, transparent 25%),
        linear-gradient(225deg, #475569 25%, transparent 25%);
}

.dark .tab-zigzag-inactive::after {
    background-image: 
        linear-gradient(135deg, #374151 25%, transparent 25%),
        linear-gradient(225deg, #374151 25%, transparent 25%);
}

.mypage-layout {
  margin: 0;
  line-height: inherit;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(253 251 247 / var(--tw-bg-opacity, 1));
  font-family: Nunito Sans, Noto Sans JP, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}



/* ====================
  main
=======================*/
.main-layout {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 80rem;
  flex-grow: 1;
  flex-direction: column;
  gap: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 640px) {
  .main-layout {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .main-layout {
    padding-left: 2rem;
    padding-right: 2rem;
    flex-direction: row;
  }
}


/* ======================= */
.main {
  flex: 1 1 0%;
  min-width: 0px;
}
.main-layout :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
.main-layout a:hover {
  text-decoration: none;
}
.main-layout p {
  margin: 0;
}

.notices-section {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.notices-section > h3 {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.notices-section > h3 .material-symbols-outlined {
  margin-right: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.notices-list-wrap {
  max-height: 8rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.notices-list {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.notices-list li {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.notices-list li .dotte {
  margin-right: 0.5rem;
  display: flex;
  height: 1.5rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.notices-list li .dotte span {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  line-height: 1;
  font-size: 10px;
}
.notices-list li .text {
  line-height: 1.5rem;
}
.notices-list li + li {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.notices-list li:hover {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}

.tab-section {
  overflow: hidden;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.tab-header {
  background-image: linear-gradient(to right, #f0f9ff, #fff);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 0px;
  padding-top: 0.75rem;
}
.tab-header .flex {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
}
.tab-header .tab-item {
  display: flex;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-color: rgb(229 231 235 / 0.6);
  --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.tab-header .tab-item.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.tab-header .tab-item .material-symbols-outlined {
  font-size: 22px;
}
.tab-contents {
  padding: 1.5rem;
}
.tab-content.hidden {
  display: none;
}
#content-learning .learn-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-width: 1px;
  border-color: transparent;
}
#content-learning .learn-item:hover {
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
  background-color: rgb(240 249 255 / 0.5);
}
@media (min-width: 768px) {
  #content-learning .learn-item {
    flex-direction: row;
    align-items: center;
  }
}
#content-learning .learn-item + .learn-item {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.learn-text {
  display: flex;
  flex-grow: 1;
  align-items: flex-start;
  gap: 0.75rem;
}
.learn-num {
  margin-top: 0.125rem;
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.learn-text {
  font-family: Nunito Sans, Noto Sans JP, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.learn-level {
  display: flex;
  min-width: 120px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  border-left-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .learn-level {
    border-left-width: 1px;
  }
}
.learn-progress {
  margin-bottom: 0.25rem;
  display: flex;
  gap: 0.375rem;
}
.learn-progress .progress-dot {
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 9999px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.level1 .learn-progress .progress-dot:first-child {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.level2 .learn-progress .progress-dot:first-child,
.level2 .learn-progress .progress-dot:nth-child(2) {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.level3 .learn-progress .progress-dot:first-child,
.level3 .learn-progress .progress-dot:nth-child(2),
.level3 .learn-progress .progress-dot:nth-child(3) {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.learn-progress-txt {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.level3 .learn-progress-txt {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

#content-notes .content-notes-inner {
  max-height: 400px;
  overflow-y: auto;
}
#content-notes .notes-list-item {
  display: block;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#content-notes .notes-list-item:hover {
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
  background-color: rgb(240 249 255 / 0.5);
}
#content-notes .notes-list-item .item-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
#content-notes .notes-list-item .item-img {
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
#content-notes .notes-list-item .item-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#content-notes .notes-list-item .flex-grow {
  flex-grow: 1;
}
#content-notes .notes-list-item h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#content-notes .notes-list-item .item-date {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
#content-notes .notes-list-item .item-date.flex {
  display: flex;
}
#content-notes .notes-list-item .item-date.flex .favorite {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
#content-notes .notes-list-item .item-date.flex .favorite .material-symbols-outlined {
  margin-right: 0.125rem;
  font-size: 14px;
}
#content-notes .notes-list-item .icon {
  margin-top: 0.125rem;
  flex-shrink: 0;
  font-size: 20px;
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
#content-notes .notes-list-item + .notes-list-item {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.dashboad-grid {
  display: grid;
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  gap: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .dashboad-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.user-status {
  display: flex;
  height: fit-content;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
  .user-status {
    grid-column: span 4 / span 4;
  }
}
.user-statu-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.user-statu-head {
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.user-statu-head .label {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.user-statu-head .point {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.user-statu-head .point span {
  margin-left: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.user-statu-body .row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.user-statu-body .row-item:not(:last-child) {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
  margin-bottom: 12px;
}
.user-statu-body .row-item-ttl {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.user-statu-body .plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.user-statu-body .plan img {
  margin-bottom: 0.125rem;
  border-radius: 0.25rem;
}
.booking-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booking-bar-wrap .text {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.booking-bar-wrap .booking-bar {
  height: 0.5rem;
  width: 5rem;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.booking-bar-wrap .booking-bar .bar {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
  border-radius: 9999px;
  height: 100%;
}
.booking-bar-wrap .booking-bar.--1 .bar {
  width: 20%;
}
.booking-bar-wrap .booking-bar.--2 .bar {
  width: 40%;
}
.booking-bar-wrap .booking-bar.--3 .bar {
  width: 60%;
}
.booking-bar-wrap .booking-bar.--4 .bar {
  width: 80%;
}
.booking-bar-wrap .booking-bar.--5 .bar {
  width: 100%;
}
.user-statu-body .ex-date {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.user-statu-body .current-time {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
  border-radius: 0.25rem;
}
.user-statu-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 0.5rem;
}
.user-statu-foot .join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.user-statu-foot .join-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.user-statu-foot .material-symbols-outlined {
  font-size: 18px;
}
.user-statu-foot .edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.user-statu-foot .edit-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
@media (min-width: 1024px) {
  .lesson-list-section {
    grid-column: span 8 / span 8;
  }
}
.lesson-list-inner {
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.lesson-today {
  margin-bottom: 1.5rem;
}
.lesson-today h3 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.lesson-today h3 .material-symbols-outlined {
  margin-right: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.lesson-today-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
  background-image: linear-gradient(to right, #f0f9ff, #fff);
  padding: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.lesson-today-item + .lesson-today-item {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.lesson-today-item .flex {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.lesson-today-img {
  height: 4rem;
  width: 4rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.lesson-today-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-today-ttl {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.lesson-today-teacher {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.lesson-today-teacher a {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1))!important;
}
.lesson-today-btn {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(14 165 233 / 0.2);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.lesson-today-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.lesson-upcoming h3 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.9;
}
.lesson-upcoming h3 .material-symbols-outlined {
  margin-right: 0.5rem;
}
.lesson-upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.lesson-upcoming-item:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.lesson-upcoming-item + .lesson-upcoming-item {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.lesson-upcoming-item .flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lesson-upcoming-img {
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.lesson-upcoming-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-upcoming-ttl {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.lesson-upcoming-ttl a {
  --tw-text-opacity: 1;
}
.lesson-upcoming-teacher {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.lesson-upcoming-teacher a {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1))!important;
}
.lesson-upcoming-btn {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(14 165 233 / 0.2);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.lesson-upcoming-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}

.quick-section {
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.quick-section > h3 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.quick-section > h3 .material-symbols-outlined {
  margin-right: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.quick-favo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.quick-favo-item {
  display: flex;
  min-width: 130px;
  flex-grow: 1;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (min-width: 768px) {
  .quick-favo-item {
    flex-grow: 0;
  }
}
.quick-favo-item:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.quick-favo-img {
  margin-bottom: 0.75rem;
  height: 4rem;
  width: 4rem;
  overflow: hidden;
  border-radius: 9999px;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.quick-favo-item:hover .quick-favo-img {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: 0 0 0 2px rgb(56 189 248);
  box-shadow: 0px 0px 0px 2px #fff, 0 0 0 4px rgb(56, 189, 248), 0 0 #000, 0 0 #000;
}
.quick-favo-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.quick-favo-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.quick-favo-btn {
  margin-top: 0.75rem;
  width: 100%;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.quick-favo-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.nav-btns {
  display: flex;
  gap: 1rem;
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.nav-btns.--bottom {
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .nav-btns.--bottom a {
    flex: none;
    min-width: 180px;
    width: auto;
  }
}
@media (min-width: 1024px) {
  .nav-btns.--sp {
    display: none;
  }
}
.nav-btns .btn {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  white-space: normal;
  text-align: left;
}
.nav-btns .btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.nav-btns .btn.primary-btn {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.nav-btns .btn.primary-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.nav-btns .btn.accent-btn {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.nav-btns .btn.accent-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.nav-btns .btn .material-symbols-outlined {
  font-size: 28px;
}

.lesson-calendar {
  border-radius: 12px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
@media (min-width: 640px) {
  .lesson-calendar {
    padding: 1.5rem;
  }
}
.lesson-calendar-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 640px) {
  .lesson-calendar-head {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 768px) {
  .lesson-calendar-head {
    align-items: center;
    flex-direction: row;
  }
}
.lesson-calendar-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.lesson-calendar-head h2 span {
  height: 2rem;
  width: 0.375rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
}
.lesson-calendar-head p {
  margin-left: 1rem;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.lesson-calendar-month {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lesson-calendar-month h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.lesson-calendar-month h3 span {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.lesson-calendar-toggle {
  display: flex;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
}
.lesson-calendar-toggle .arrow {
  border-radius: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  display: flex;
  align-items: center;
  padding: 6px 0.25rem;
}
.lesson-calendar-toggle .arrow:hover {
  background: #fff;
}
.lesson-calendar-toggle .text {
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.lesson-calendar-toggle .text:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.lesson-calendar-table {
  overflow: hidden;
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.lesson-calendar-table > table {
  table-layout: fixed;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.lesson-calendar-table > table thead tr {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.lesson-calendar-table > table thead tr th {
  width: 14.28%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  text-align: center;
}
.lesson-calendar-table > table thead tr th.sun {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table thead tr th.sat {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
  .lesson-calendar-table > table thead tr th {
    font-size: 1rem;
    line-height: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
.lesson-calendar-table > table tbody td {
  padding: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  position: relative;
  height: 100px;
  vertical-align: baseline;
  transition: background-color 0.2s;
}
.lesson-calendar-table > table tbody td:hover {
  background-color: #f8fafc;
}
@media (min-width: 640px) {
  .lesson-calendar-table > table tbody td {
    padding: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
.lesson-calendar-table > table tbody td .date {
}
.lesson-calendar-table > table tbody td.red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.sat {
  background-color: rgb(240 249 255 / 0.3);
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.sun {
  background-color: rgb(254 242 242 / 0.3);
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.lesson-calendar-table > table tbody td.sun:hover,
.lesson-calendar-table > table tbody td.sat:hover,
.lesson-calendar-table > table tbody .today:hover {
  background-color: #f8fafc;
}
.lesson-calendar-table > table tbody td:is(.last-month, .next-month) {
  background-color: #fafafa;
}
.lesson-calendar-table > table tbody td:is(.last-month, .next-month) .date {
  opacity: 0.5;
}
.lesson-calendar-table > table tbody td + td {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.lesson-calendar-table > table tbody tr + tr {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
/* .lesson-calendar-table > table tbody td .holiday {
  display: none;
  margin-left: 0.25rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  vertical-align: middle;
  font-size: 10px;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
} */
.lesson-calendar-table > table tbody td.holiday .date {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
.lesson-calendar-table > table tbody td.holiday::after {
  content: "holiday";
  margin-left: 0.25rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  padding: 0.1rem 0.25rem;
  vertical-align: middle;
  font-size: 10px;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  line-height: 1.4;
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
}
@media (min-width: 640px) {
  .lesson-calendar-table > table tbody td .holiday,
  .lesson-calendar-table > table tbody td.holiday::after {
    display: inline;
  }
}
.lesson-calendar-table > table tbody td .koma {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.3rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  padding-left: 0.1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 13px;
  line-height: 1.25;
  --tw-text-opacity: 1;
  background-color: #2f63bb;
  border: 1px solid rgb(56 189 248 / 0.2);
  font-weight: 400;
  color: #ffffff;
  font-family: Meiryo, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Helvetica Neue", Helvetica, sans-serif;
}
.lesson-calendar-table > table tbody td .koma.end {
  background-color: rgb(196 197 197);
  border-color: transparent;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  cursor: pointer;
}
@media (min-width: 640px) {
  .lesson-calendar-table > table tbody td .koma {
    margin-top: 0.2rem;
  }
}
.day-schedule .wrap.--blue {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  background-color: rgb(56 189 248 / 0.1);
  border-color: rgb(56 189 248 / 0.2);
  border-width: 1px;
}
.lesson-calendar-table > table tbody td .koma + .koma{
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
@media (min-width: 1280px) {
  .day-schedule .wrap {
    gap: 0.25rem;
    align-items: baseline;
    flex-wrap: wrap;
    flex-direction: row;
  }
}
.day-schedule .wrap .time {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}
@media (min-width: 640px) {
  .day-schedule .wrap .time {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
.day-schedule .wrap .user {
  word-break: break-all;
  font-size: 10px;
  line-height: 1.25;
}
@media (min-width: 640px) {
  .day-schedule .wrap .user {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
.lesson-calendar-table > table tbody .today {
  position: relative;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  box-shadow: inset 0 0 0 0 #000, inset 0 0 0 2px rgb(245 158 11 / 0.5), 0 0 #000, 0 0 #000;
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.lesson-calendar-table > table tbody .today::after {
  content: "Today";
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
  padding: 0 0.375rem;
  font-size: 12px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  line-height: 1.4;
  display: none;
}
@media (min-width: 640px) {
  .lesson-calendar-table > table tbody .today .today-icon {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .lesson-calendar-table > table tbody .today::after {
    display: inline;
  }
}

.rule-section {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
@media (min-width: 768px) {
  .rule-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rule-item {
  border-radius: 12px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.rule-item > h3 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.rule-item > h3 > span {
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-right: 0.75rem;
}
.rule-item > h3 > span.bg-green {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.rule-item > h3 > span.bg-red {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.rule-item > h3 > span .material-symbols-outlined {
  font-size: 24px;
}
.rule-list {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.rule-list li {
  display: flex;
  align-items: start;
}
.rule-list li + li {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.rule-list li .part {
  margin-right: 0.5rem;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.rule-list li .part .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.rule-list li .part .dot {
  padding-top: 0.125rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.rule-list li .text {
  line-height: 1.5rem;
}
.rule-list li.last {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  padding-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

/* ==================
  Buy Points
====================*/
:root {
  --japatalk-blue: #59b8e8;
  --japatalk-bg: #fdfcf9;
  --japatalk-border: #E2E8F0;
  --japatalk-text-muted: #64748B;
  --japatalk-warm-accent: #FFB74D;
}

.point-layout {
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5rem;
}
.point-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.point-head h1 {
  margin-bottom: 1rem;
  /* white-space: nowrap; */
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.point-head h1 p {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
#plan-change {
  scroll-margin-top: 115px;
}
.point-container {
  margin-bottom: 2.5rem;
  border-bottom-right-radius: 28px;
  border-bottom-left-radius: 28px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-width: 4px;
  --tw-border-opacity: 1;
  border-top-color: rgb(89 184 232 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 2rem 1.2rem;
  --tw-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.point-container.--last {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .point-container {
    padding: 3rem;
  }
}
h2.point-title {
  margin-bottom: 2.5rem;
  text-align: center;
  font-weight: 700;
  --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    font-size: 1.5rem;
    line-height: 2rem;
}
.points-grid {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .points-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .points-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.points-grid-item {
  position: relative;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  border-radius: 24px;
  padding: 1.5rem;
  transition: all 0.3s ease-in-out;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  border-width: 1px;
}
.points-grid-item:hover {
  --tw-border-opacity: 1;
  border-color: rgb(89 184 232 / var(--tw-border-opacity, 1));
}
.selected-plan {
  border-color: var(--japatalk-blue) !important;
  background-color: #f0faff !important;
  box-shadow: 0 8px 20px rgba(89, 184, 232, 0.15) !important;
  border-width: 2px !important;
}
.points-grid-item .input-radio {
  height: 1rem;
  width: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(79 195 247 / var(--tw-text-opacity, 1));
}
.points-grid-item .radio-text {
  text-align: center;
}
.points-grid-item .radio-text .point {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(79 195 247 / var(--tw-text-opacity, 1));
  white-space: nowrap;
}
.points-grid-item .radio-text .price {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
input[type="radio"]:focus, input[type="radio"]:checked, input[type="radio"]:active {
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-offset-width: 0px !important;
  --tw-ring-width: 0px !important;
  --tw-ring-color: transparent !important;
}
[type='checkbox']:checked, [type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='radio']:checked {
  background: currentColor url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2226%22%20height%3D%2226%22%20rx%3D%2213%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / 6px auto;
}
.points-list {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.3rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.points-list.mb {
  margin-bottom: 2.5rem;
}
.point-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.point-list-item .icon {
  font-weight: 400;
  font-family: "Font Awesome 6 Free";
  margin-top: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(79 195 247 / var(--tw-text-opacity, 1));
}
.point-list-item + .point-list-item {
  margin-top: 8px;
}
.points-note {
  margin-bottom: 2.5rem;
  border-radius: 24px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}
.heading-text {
  margin-bottom: 0.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.points-note .text {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.3rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.points-note .text .font-bold {
  font-weight: 700;
}
.pyment-container {
  margin-bottom: 2.5rem;
}
.pyment-ttl {
  margin-bottom: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.pyment-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .pyment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .pyment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.points-grid-item .grid-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.points-grid-item .grid-flex span {
  font-weight: 500;
}
.points-grid-item .img-flex {
  display: flex;
  gap: 0.375rem;
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.points-grid-item .img-flex img {
  width: 140px;
  margin-top: 6px;
}
.paypal-img {
  width: 90px;
  margin-top: 6px;
}
.img-square {
  height: 1rem;
  width: auto;
}
.img-square.opacity-70 {
  opacity: 0.7;
}
.points-grid-item .bank-icon {
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.point-container-bottom {
  text-align: center;
}
.point-container-bottom .btn {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(89 184 232 / var(--tw-bg-opacity, 1));
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 20px rgba(89, 184, 232, 0.25);
  --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  display: inline-block;
}
.point-container-bottom .btn:hover {
  opacity: 0.9;
}
.point-container-bottom i {
  margin-left: 0.25rem;
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1rem;
}

.plans-grid {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .plans-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.plans-grid-item {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition: all 0.3s ease-in-out;
}
.plans-grid-item:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.plan-img {
  padding: 0.75rem;
  display: flex;
  justify-content: center;
}
.plan-img img {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 0.5rem;
}
.plan-name {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: none;
}
.plan-name.trial {
  --tw-text-opacity: 1;
  color: rgb(47 133 90 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(198 246 213 / var(--tw-bg-opacity, 1));
}
.plan-name.light {
  --tw-bg-opacity: 1;
  background-color: rgb(144 205 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(44 82 130 / var(--tw-text-opacity, 1));
}
.plan-name.basic {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(79 195 247 / var(--tw-bg-opacity, 1));
}
.plan-name.popular {
  --tw-text-opacity: 1;
  color: rgb(123 52 30 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(251 211 141 / var(--tw-bg-opacity, 1));
}
.plan-name.gold {
  --tw-text-opacity: 1;
  color: rgb(116 66 16 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 191 / var(--tw-bg-opacity, 1));
}
.plan-name.diamond {
  --tw-text-opacity: 1;
  color: rgb(42 67 101 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(195 218 254 / var(--tw-bg-opacity, 1));
}
.plan-name.jplan {
  --tw-text-opacity: 1;
  color: rgb(130 39 39 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 215 / var(--tw-bg-opacity, 1));
}
.plan-name.intensive {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(26 32 44 / var(--tw-bg-opacity, 1));
}
.plan-detail {
  flex-grow: 1;
  padding: 1.25rem;
  text-align: center;
}
.plan-input {
  margin: 0 0 1rem!important;
  height: 1rem;
  width: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(89 184 232 / var(--tw-text-opacity, 1));
}
.plan-detail .heading {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  text-transform: uppercase;
  font-size: 0.9rem;
  line-height: 1rem;
  margin-bottom: 0.25rem;
}
.plan-detail .point {
  --tw-text-opacity: 1;
  color: rgb(89 184 232 / var(--tw-text-opacity, 1));
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem;
}
.plan-detail .price {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
.plan-detail .sub-heading {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.plan-detail .number {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.plan-detail .number.mb {
  margin-bottom: 0.5rem;
}
.pyment-grid2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .pyment-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
h3.point-title {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
.point-container .content-text {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  margin-bottom: 2rem;
}
.point-container .black-btn {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  width: fit-content;
}
.point-container .black-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.recruit {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 10px;
}

.recruit li {
    list-style: none;
}

/* =====================
  level up list
======================*/
.levelup-layout {
  display: flex;
  min-height: 800px;
  flex-direction: column;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.levelup-head {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.levelup-head h1 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.levelup-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.levelup-top h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}
.levelup-top-check {
  display: flex;
  gap: 2px;
  background-color: #f1f3f5;
  padding: 4px;
  border-radius: 6px;
  align-items: center;
  box-sizing: border-box;
}
.levelup-top-check small {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  margin-right: 4px;
  margin-left: 4px;
  white-space: nowrap;
}
.levelup-top-check label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  height: 32px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  margin: 0;
  white-space: nowrap;
}
.levelup-top-check label:not(:has(input:checked)) {
  color: #6c757d;
  border: 1px solid #ced4da;
  background-color: #fff;
}
.levelup-top-check input[type="radio"] {
  display: none !important;
}
.levelup-top-check label:not(:has(input:checked)):hover {
  background-color: #f8f9fa;
  color: #333;
  border-color: #adb5bd;
}
.levelup-top-check label:has(input:checked) {
  color: #fff !important;
  background-color: #007bff !important;
  font-weight: 600;
  border: 1px solid #007bff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (max-width: 576px) {
  .levelup-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .levelup-top-check {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    background-color: transparent;
    padding: 0;
  }
  .levelup-top-check small {
    width: 100%;
    margin: 0 0 4px 0;
  }
  .levelup-top-check label {
    flex: 1;
    text-align: center;
  }
}
.levelup-table tbody tr.is-hide td {
  background-color: transparent !important;
}
.levelup-table tbody tr.is-hide {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
.levelup-table.is-lang-ja thead th.js-en-column {
  color: transparent !important;
}
.levelup-table.is-lang-ja tbody td.js-en-column > * {
  display: none !important;
}
.course-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 0.25rem;
}
@media (min-width: 640px) {
  .course-list {
    overflow-x: auto;
    gap: 0.5rem;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .levelup-table.is-lang-ja thead th.ja-column {
    min-width: 450px;
  }
  .levelup-table.is-lang-ja thead th.js-en-column,
  .levelup-table.is-lang-ja tbody td.js-en-column {
    display: none;
  }
}
.course-list-inner {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
@media (min-width: 640px) {
  .course-list-inner {
    padding-bottom: 0px;
    width: auto;
  }
}
.course-item {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(100 116 139)!important;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  text-decoration: none;
}
.course-item:hover {
  color: rgb(14 165 233)!important;
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.course-item:focus {
  text-decoration: none;
}
.course-item:focus-visible {
  outline: none;
}
.course-item.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255)!important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.course-add {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 9999px;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.course-add:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.course-add .material-symbols-rounded {
  font-size: 1.45rem;
  line-height: 1.65rem;
}
.levelup-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  background-color: rgb(249 250 251 / 0.5);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (min-width: 640px) {
  .levelup-progress {
    flex-direction: row;
  }
}
.progress-wrap {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem; 
}
@media (min-width: 640px) {
  .progress-wrap {
    width: auto;
  }
}
.progress-flex {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.progress-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.prosress-bar-wrap {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
}
.levelup-progress .progress-bar {
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: rgb(229 231 235);
  box-shadow: none;
}
@media (min-width: 640px) {
  .levelup-progress .progress-bar {
    width: 8rem;
  }
}
.levelup-progress .progress-bar .bar {
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.progress-text {
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.levelup-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  /* width: 100%; */
}
@media (min-width: 640px) {
  .levelup-toolbar {
    width: auto;
    justify-content: flex-end;
  }
}
.history-btns {
  display: flex;
  gap: 0.3rem;
}
.history-btns .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: 9999px;
}
.history-btns .btn:hover {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.history-btns .btn:disabled {
  pointer-events: none;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.levelup-btns {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .levelup-btns {
    width: auto;
  }
}
.levelup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(51 65 85 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
@media (min-width: 640px) {
  .levelup-btn {
    flex: none;
  }
}
.levelup-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.levelup-btn span {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.levelup-btn.import span {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.levelup-btn.export span {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.levelup-section {
  flex: 1 1 0%;
  overflow-x: auto;
  background-color: rgb(249 250 251 / 0.5);
  padding: 1rem;
}
@media (min-width: 640px) {
  .levelup-section {
    background-color: transparent;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
}
.levelup-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
@media (min-width: 640px) {
  .levelup-table tbody {
    height: 100%;
  }
}
.levelup-table thead tr {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.levelup-table thead tr th {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
}
.levelup-table thead tr th.w-16 {
  width: 4rem;
  text-align: center;
}
.levelup-table thead tr th.w-200 {
  width: 4rem;
}
.levelup-table thead tr th.w-16 {
  width: 4rem;
}
.levelup-table thead tr th.w-16 {
  width: 4rem;
}
.min-w-200 {
  min-width: 200px;
}
.min-w-250 {
  min-width: 250px;
}
.min-w-140 {
  min-width: 140px;
  text-align: center;
}
.levelup-table tbody {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.levelup-table tbody tr {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: context-menu;
}
.levelup-table tbody tr:hover,
.levelup-table tbody tr.is-pointer {
  background-color: rgb(239 246 255 / 0.5);
}
.levelup-table tbody tr + tr {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.levelup-table tbody tr:hover {
  background-color: rgb(239 246 255 / 0.5);
}
.levelup-table tbody tr td:not(:nth-last-child(-n + 2)) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.levelup-table tbody tr td:nth-last-child(2) {
  text-align: right;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.levelup-table tbody tr td.text-right {
  text-align: right;
}
.levelup-table tbody tr td.num {
  text-align: center;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
  .mobile-progress-section {
    display: none;
  }
}
.levelup-table tbody tr td .sentence-jp {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.levelup-table tbody tr td .sentence-jp .main {
  font-family: Noto Sans JP, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
.levelup-table tbody tr td .sentence-jp .sub {
  font-family: Noto Sans JP, sans-serif;
  font-size: 12px;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  opacity: 0.8;
}
.levelup-table tbody tr.is-hide {
  background-color: #f9fafb;
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border: 1px dashed #e2e8f0;
  box-shadow: none;
  padding: 10px 16px;
}
.levelup-table tbody tr.is-hide td {
  padding: 0!important;
}
.levelup-table tbody tr.is-hide td.num {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0!important;
}
.levelup-table tbody tr.is-hide td > div {
  display: none;
}
.levelup-table tbody tr.is-hide .mobile-progress-section {
  margin: 0;
  border-top: 0!important;
}
.levelup-table tbody tr.is-hide td:nth-of-type(6) {
  top: 8px;
}
@media (min-width: 768px) {
  .levelup-table tbody tr.is-hide .more-btn {
    margin-top: 5px;
  }
}
.sentence-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.sentence-tag div {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 700;
  font-family: Inter, sans-serif;
}
.sentence-tag .bg-blue {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.sentence-tag .bg-purple {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.sentence-tag .bg-green {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.sentence-en {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.sentence-en-sub {
  font-size: 12px;
  font-family: Noto Sans JP, sans-serif;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  opacity: 0.8;
  margin-top: 12px!important;
}
.levelup-table tbody tr td.center-cell {
  text-align: center;
  vertical-align: middle;
}
.levelup-table tbody tr td .progress-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.levelup-table tbody tr td .progress-cell.opacity-70 {
  opacity: 0.7;
}
.progress-cell .icons {
  display: flex;
  gap: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}

.progress-cell .icons span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgb(209 213 219);
  margin: 0 2px;
  position: relative;
}
.progress-cell .icons.--blue span {
  cursor: pointer;
}
.progress-cell.level-1 .icons span:nth-child(1),
.progress-cell.level-2 .icons span:nth-child(-n+2),
.progress-cell.level-3 .icons span:nth-child(-n+3) {
  background: rgb(14 165 233);
}
.progress-cell .icons.--blue span:hover {
  cursor: pointer;
}
.progress-cell-text {
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.progress-cell .icons.--check span::after,
.m-progress-item .icons.--check span::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  top: 3px;
  left: 2px;
  z-index: 2;
}
.progress-cell.teacher-1 .icons span:nth-child(1),
.progress-cell.teacher-2 .icons span:nth-child(-n+2),
.progress-cell.teacher-3 .icons span:nth-child(-n+3) {
  background: rgb(22 163 74);
  border-color: rgb(22 163 74);
}

.m-progress-item .icons.--blue span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgb(209 213 219);
}
.m-progress-item.level-1 .icons span:nth-child(1),
.m-progress-item.level-2 .icons span:nth-child(-n+2),
.m-progress-item.level-3 .icons span:nth-child(-n+3) {
  background: rgb(14 165 233);
  border-color: rgb(14 165 233);
}


.levelup-table tbody td.mobile-progress-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0!important;
}
.m-progress-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
}
.m-progress-item .label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.m-progress-item .label .material-symbols-rounded {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.m-progress-item .icons {
  margin-top: 0.25rem;
  display: flex;
  gap: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.m-progress-item .icons.--check span {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(209 213 219);
  border-radius: 50%;
}
.m-progress-item.teacher-1 .icons span:nth-child(1),
.m-progress-item.teacher-2 .icons span:nth-child(-n+2),
.m-progress-item.teacher-3 .icons span:nth-child(-n+3) {
  background: rgb(22 163 74);
  border-color: rgb(22 163 74);
}
.m-progress-item .text {
  font-size: 12px;
  margin-top: 0.125rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.levelup-table tbody tr td .more-btn {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  padding: 4px 0;
}
@media (min-width: 768px) {
  .levelup-table tbody tr td .more-btn {
    opacity: 0;
  }
  .levelup-table tbody tr:hover td .more-btn {
    opacity: 1;
  }
  .levelup-table tbody td.mobile-progress-section {
    display: none;
  }
  .sentence-en {
    max-width: 225px;  
  }
}
@media (max-width: 767px) {
  .levelup-table, 
  .levelup-table :is(tbody, th, td, tr){
      display: block;
  }
  .levelup-table tbody tr td:not(:nth-last-child(-n + 2)) {
    padding: 0;
  }
  .levelup-table thead {
    display: none;
  }
  .levelup-table tbody tr {
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 1rem;
    position: relative;
  }
  .levelup-table tbody td {
    border: none!important;
    position: relative;
    padding: 0.5rem 0 !important;
    text-align: left !important;
    width: 100%;
    display: block;
  }
  .levelup-table tbody tr td:nth-of-type(1) {
    text-align: left !important;
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 0.5rem;
    font-weight: bold;
    border-bottom: 1px solid #f1f5f9!important;
    padding-bottom: 0.5rem !important;
  }
  .levelup-table tbody tr td:nth-of-type(1)::before {
    content: "No. ";
    margin-right: 2px;
    font-weight: normal;
    color: #94a3b8;
  }
  .levelup-table tbody tr td.center-cell {
    display: none !important;
  }
  .levelup-table tbody tr:not(.is-new-row) td:has(.more-btn) {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: auto;
    padding: 0 !important;
    display: block !important;
    border-bottom: none!important;
  }
  .levelup-table tbody tr.is-hide:not(.is-new-row) td:has(.more-btn) {
    top: 0.25rem;
  }
}
.sortable-drag {
  box-shadow: none !important;
  transform: none !important;
}

/* import */
.import-section {
  position: fixed;
  inset: 0px;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background-color: rgb(17 24 39 / 0.6);
  padding: 1rem;
  backdrop-filter: blur(4px);
  transition-duration: 200ms;
  display: none;
}
.import-section.is-open {
  display: flex;
}
.import-modal {
  position: relative;
  width: 100%;
  max-width: 30rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  background-color: rgb(249 250 251 / 0.5);
  padding: 0.5rem 0.8rem;
}
.import-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.import-head h2 span {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.import-close-btn {
  border-radius: 9999px;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-close-btn:hover {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.import-close-btn span {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.import-body {
  padding: 1rem;
  position: relative;
}
.import-grid {
  display: grid;
  /* gap: 1.5rem;  */
  /* grid-template-columns: 1fr 1fr;  */
}
.preview-drawer-class {
  max-height: 100%;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .import-modal {
    max-width: 42rem;
  }
  .import-head {
    padding: 1rem 1.5rem;
  }
  .import-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 50px;
  }
  .import-body {
    padding: 1.5rem 1.5rem 1rem;
  }
}
.import-ttl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.import-ttl h3 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.import-lib-icon {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
  padding: 3px 6px;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.import-lib-icon span {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.import-select-list {
  max-height: 160px;
  overflow-y: auto;
  padding-right: 0.25rem;
  margin-top: 16px;
}
.import-select-item {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-select-item:hover {
  background-color: rgb(239 246 255 / 0.5);
  border-color: rgb(14 165 233 / 0.3);
}
.import-select-item + .import-select-item {
  margin-top: 8px;
}
.import-select-item .txt-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.import-select-item .txt-row input[type="radio"] {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  border-radius: 100%;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.import-select-item .txt-row .txt {
  flex: 1 1 0%;
}
.import-select-item .txt-row .txt div {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-select-item:hover .txt-row .txt div {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.import-select-item .preview {
  display: flex;
  align-items: center;
}
.import-select-item .preview button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-select-item .preview button:hover {
  -tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.import-select-item:hover .preview button {
  opacity: 1;
}
.import-select-item .preview button span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.upload-block {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgb(226 232 240);
}
.import-upload-icon {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
  padding: 3px 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
  border-radius: 0.5rem;
}
.import-upload-icon span {
  font-size: 1.25rem;
  line-height: 1.75rem;
  vertical-align: middle;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.upload-file-block {
  display: flex;
  flex: 1 1 0%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  background-color: rgb(249 250 251 / 0.5);
  padding: 10px 10px 15px;
  text-align: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.upload-file-block:hover,
.upload-file-block.is-selected {
  background-color: rgb(239 246 255 / 0.3);
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.upload-file-block .upload-input {
  display: none;
}
.upload-file-icon {
  margin-bottom: 7px;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.upload-file-block:hover .upload-file-icon,
.upload-file-block.is-selected .upload-file-icon  {
  transform: scale(1.1);
}
.upload-file-icon span {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.upload-file-block:hover .upload-file-icon span,
.upload-file-block.is-selected .upload-file-icon span {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.upload-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.upload-file-block:hover .upload-text,
.upload-file-block.is-selected .upload-text {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.upload-text-sub {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.25rem;
}
.download-file-btn {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  font-size: 10px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-top: 2px;
}
.download-file-btn:hover {
  text-decoration: underline;
}
.download-file-btn .flex {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.download-file-btn .flex .material-symbols-rounded {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.preview-drawer-class {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 20;
  width: 50%;
  border-left-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.preview-drawer-class.translate-x-full {
  transform: translateX(100%)
}
.preview-drawer-class > .flex {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.preview-drawer-class .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  background-color: rgb(249 250 251 / 0.5);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.preview-drawer-class .head h3 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.preview-drawer-class .head p {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.125rem;
}
.prev-clode-btn {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.prev-clode-btn:hover {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.prev-clode-btn span {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.preview-drawer-class .body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.25rem;
}
.preview-drawer-class .prev-item {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}
.preview-drawer-class .prev-item .ja {
  font-family: Noto Sans JP, sans-serif;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.preview-drawer-class .prev-item .en {
  font-size: 0.75rem;
  line-height: 1rem;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.preview-drawer-class .prev-item + .prev-item {
  margin-top: 16px;
}
.preview-drawer-class .body .more {
  margin-top: 16px;
  text-align: center;
  padding-top: 0.5rem;
}
.preview-drawer-class .body .more p {
  font-size: 10px;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.use-btn-wrap {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
.use-btn {
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.use-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.import-foot {
  position: relative;
  z-index: 30;
  /* justify-content: flex-end; */
  justify-content: space-between;
  gap: 0.75rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 0.7rem 1rem;
  display: none;
}
.import-cancel-btn {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-cancel-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.import-modal .import-btn {
  margin-top: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
  padding:  0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.import-foot .import-btn .material-symbols-rounded {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.import-foot .import-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.context-menu {
  position: fixed;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  min-width: 120px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  z-index: 9999;
}
.context-menu li {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
}
.context-menu li:hover {
  background: #f3f3f3;
}
[data-editable="true"].is-editing {
  outline: 2px solid #c3c3c3;
  border-radius: 4px;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .import-foot {
    display: flex;
  }
  .import-select-list {
    max-height: 220px;
  }
  .import-select-item .preview button {
    opacity: 0;
  }
  .upload-block {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    position: relative;
  }
  .upload-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25px;
    width: 1px;
    height: 100%;
    background: rgb(226 232 240);
  }
  .import-modal .import-btn {
    margin-top: 10px;
  }
}

/* ====================
  notes list
======================*/
.note-list-head {
  margin-bottom: 32px;
}
.note-list-head h1 {
  font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    color: rgb(24 28 34);
}
.note-filter {
  margin-bottom: 3rem;
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  border-top-width: 2px;
  border-color: rgb(59 130 246);
  background-color: rgb(241 243 252);
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.note-search {
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}

.note-filter .grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-end;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .note-filter .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .note-search {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.5rem;
  }
}
.note-filter .grid .label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(112 119 132);
  text-align: left;
}
.note-filter .grid .input-wrap {
  position: relative;
}
.note-filter .grid .icon {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  color: rgb(112 119 132);
}
.note-filter .grid .input {
  width: 100%;
  border-radius: 0.75rem;
  border-style: none;
  background-color: rgb(226 232 240);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2.5rem;
  font-size: 16px;
  line-height: 1.25rem;
}
.note-filter .grid .input:focus {
  outline: 2px solid rgb(0 94 165 / 0.2);
}
.note-filter .grid .input::placeholder {
  color: #aaa;
}

.note-filter .favorite-toggle {
  display: flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
}
.note-filter .favorite-toggle .toggle-btn {
  position: relative;
}
.note-filter .favorite-toggle .toggle-btn .checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.note-filter .favorite-toggle .toggle-btn .bg {
  height: 1.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  background-color: rgb(224 226 235);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.note-filter .favorite-toggle .toggle-btn .dot {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.note-filter .favorite-toggle .toggle-btn .checkbox:checked + .bg {
  background-color: rgb(0 94 165);
}
.note-filter .favorite-toggle .toggle-btn .checkbox:checked + .bg + .dot {
  transform: translateX(1rem);
}
.note-filter .favorite-toggle .text {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.note-filter .favorite-toggle:hover .text {
  color: rgb(24 28 34);
}
.note-filter .tag-block {
  margin-top: 1.5rem;
  border-top-width: 1px;
  border-color: rgb(192 199 213 / 0.3);
  padding-top: 1.5rem;
}
.note-filter .tag-block .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.note-filter .tag-block .tag-list .tag {
  border-radius: 9999px;
  background-color: rgb(255 255 255);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: rgb(64 71 82);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.note-filter .tag-block .tag-list .tag:hover {
  background-color: rgb(0 94 165 / 0.1);
}
.note-filter .tag-block .tag-list .tag.is-current {
  background-color: rgb(0 94 165);
  color: rgb(255 255 255);
}

.note-filter-btn {
  background-color: rgb(255 255 255);
  color: rgb(0 94 165);
  padding: 10px;
  border-radius: 99px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  transition: all .4s ease;
}
.note-filter-btn .material-symbols-outlined {
  font-size: 20px;
}
.note-filter-btn:hover {
  opacity: 0.7;
}
@media (min-width: 768px) {
  .note-filter-btn {
    width: 100px;
    font-size: 14px;
    gap: 0 2px;
  }
}

.notes-grid {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
@media (min-width: 768px) {
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .notes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.notes-grid .note-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: rgb(255 255 255);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.notes-grid .note-item:hover {
  transform: translateY(-4px);
}
.notes-grid .note-item .img-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.notes-grid .note-item .img-link img {
  height: 100%;
      width: 100%;
      object-fit: cover;
      transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
.notes-grid .note-item:hover .img-link img {
  transform: scale(1.05);
}
.notes-grid .note-item .img-link .no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(229 232 241);
  aspect-ratio: 16 / 9;
}
.notes-grid .note-item .img-link .no-img .material-symbols-outlined {
  color: rgb(112 119 132);
}
.notes-grid .note-item .text {
  padding: 1.5rem;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
}
.notes-grid .note-item .text .tags {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.notes-grid .note-item .text .tags .tag {
  border-radius: 0.375rem;
  background-color: rgb(179 209 253);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(59 89 127);
}
.notes-grid .note-item .text .ttl {
  display: block;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.notes-grid .note-item:hover .text .ttl h2 {
  color: rgb(0 94 165);
}
.notes-grid .note-item .text .ttl h2 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: #333;
}
.notes-grid .note-item .text .detail {
  flex: 1 1 0%;
}
.notes-grid .note-item .text .detail p {
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(64 71 82);
  overflow-wrap: break-word;
}
.notes-grid .note-item .text .detail .more {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: flex-end;
}
.notes-grid .note-item .text .detail .more a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: rgb(0 94 165);
}
.notes-grid .note-item .text .detail .more a:hover {
  text-decoration: underline;
}
.notes-grid .note-item .text .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  border-color: rgb(235 238 246);
  padding-top: 1.5rem;
}
.notes-grid .note-item .text .bottom .author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.notes-grid .note-item .text .bottom .author img {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
}
.notes-grid .note-item .text .bottom .author-name {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}
.notes-grid .note-item .text .bottom .date {
  font-size: 10px;
  color: rgb(112 119 132);
}
.notes-grid .note-item .text .bottom .favorite {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: rgb(112 119 132);
}
.notes-grid .note-item .text .bottom .favorite .number {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.note-list-layout .custom-pagination {
  margin: 64px 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.note-list-layout .custom-pagination .page-btn {
  display: flex;
  cursor: pointer;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: rgb(235 238 246);
  color: rgb(24 28 34);
  font-weight: 700;
}
.note-list-layout .custom-pagination .page-btn.active {
  background: rgb(0 94 165);
  color: #fff;
}
.note-list-layout .custom-pagination .page-btn.disabled {
  background: transparent;
  color: rgb(148 163 184);
  width: auto;
  padding: 0 5px;
}
.note-list-layout .custom-pagination .page-btn:is(.prev, .next) {
  background: rgb(235 238 246)!important;
}

/* ====================
  sensei note
======================*/
.sensei-entry {
  position: relative;
  width: 100%;
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  background-color: rgb(255 255 255);
  padding: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {
  .sensei-entry {
    padding: 2rem;
  }
}
@media (min-width: 768px) {
  .sensei-entry {
    padding: 2.5rem;
  }
}
.sensei-entry .top-line {
  position: absolute;
  top: -3px;
  left: 0px;
  height: 3px;
  width: 100%;
  background-color: rgb(56 189 248);
}
.sensei-entry-head {
  margin-bottom: 1.5rem;
  border-bottom-width: 1px;
  border-color: rgb(241 245 249);
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .sensei-entry-head {
    margin-bottom: 2rem;
  }
}
.sensei-entry-head .author {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .sensei-entry-head .author {
    margin-bottom: 1.5rem;
    flex-direction: row;
    align-items: center;
  }
}
.sensei-entry-head .author .author-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
}
.sensei-entry-head .author .author-link .img-wrap {
  aspect-ratio: 1 / 1;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  overflow: hidden;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(19 127 236 / var(--tw-ring-opacity, 1));
}
.sensei-entry-head .author .author-link .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sensei-entry-head .author .author-link:hover .img-wrap {
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgb(19 127 236 / 1);
}
.sensei-entry-head .author .author-link .author-name {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sensei-entry-head .author .author-link:hover .author-name {
  color: rgb(19 127 236);
}
.sensei-entry-head .entry-title {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 640px) {
  .sensei-entry-head .entry-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
@media (min-width: 768px) {
  .sensei-entry-head .entry-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.entry-favorite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.entry-favorite .favorite-btn {
  position: relative;
  margin-left: -0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: rgb(71 85 105);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-favorite .favorite-btn:hover {
  background-color: rgb(248 250 252);
}
.entry-favorite .favorite-btn .icon {
  background-color: rgb(244 63 94);
  width: 18px;
  height: 18px;
  mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22m480-120-58-52q-101-91-167-157T150-447.5Q111-500%2095.5-544T80-634q0-94%2063-157t157-63q52%200%2099%2022t81%2062q34-40%2081-62t99-22q94%200%20157%2063t63%20157q0%2046-15.5%2090T810-447.5Q771-395%20705-329T538-172l-58%2052Zm0-108q96-86%20158-147.5t98-107q36-45.5%2050-81t14-70.5q0-60-40-100t-100-40q-47%200-87%2026.5T518-680h-76q-15-41-55-67.5T300-774q-60%200-100%2040t-40%20100q0%2035%2014%2070.5t50%2081q36%2045.5%2098%20107T480-228Zm0-273Z%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / contain;
}
.entry-favorite .favorite-btn.is-active .icon {
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22m480-120-58-52q-101-91-167-157T150-447.5Q111-500%2095.5-544T80-634q0-94%2063-157t157-63q52%200%2099%2022t81%2062q34-40%2081-62t99-22q94%200%20157%2063t63%20157q0%2046-15.5%2090T810-447.5Q771-395%20705-329T538-172l-58%2052Z%22%2F%3E%3C%2Fsvg%3E');
}
.entry-favorite .favorite-btn .text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.entry-favorite .favorite-btn .thank {
  position: absolute;
  top: -2rem;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, 2px);
  white-space: nowrap;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(255 228 230);
  background-color: rgb(255 255 255);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: rgb(244 63 94);
  opacity: 0;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  z-index: 2;
}
.entry-favorite .favorite-btn.is-animation .thank {
  opacity: 1;
  transform: translate(-50%, 0);
}
.entry-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(100 116 139);
}

.entry-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .entry-categories {
    margin-top: 1.25rem;
  }
}
.entry-categories a {
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(233 213 255);
  background-color: rgb(243 232 255);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: rgb(126 34 206);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-categories a:hover {
  background-color: rgb(233 213 255);
}

.sensei-entry-body {
  font-size: 1rem;
  line-height: 1.625;
}
.sensei-entry .sensei-entry-body > * + * {
  margin-top: 24px;
}
.sensei-entry-body .wp-block-image {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
}
@media (min-width: 640px) {
  .sensei-entry-body {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sensei-entry-body .wp-block-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
.sensei-entry-body .wp-block-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.sensei-entry-body h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
@media (min-width: 640px) {
  .sensei-entry-body h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.sensei-entry-body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}
.sensei-entry-body ul li + li {
  margin-top: 8px;
}
@media (min-width: 640px) {
  .sensei-entry-body ul {
      padding-left: 1.5rem;
  }
}
.sensei-entry-body blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-left-width: 4px;
  border-color: rgb(19 127 236);
  background-color: rgb(19 127 236 / 0.05);
  padding: 1rem;
}
.sensei-entry-body blockquote p {
  font-weight: 500;
  color: rgb(30 41 59);
}


.entry-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  border-color: rgb(241 245 249);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .entry-buttons {
    gap: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.entry-buttons .btn-item {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(226 232 240);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 500;
  color: rgb(71 85 105);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (min-width: 640px) {
  .entry-buttons .btn-item {
    flex: none;
  }
}
.entry-buttons .btn-item:hover {
  background-color: rgb(248 250 252);
}

.entry-buttons .favorite-btn .icon {
  width: 24px;
  height: 24px;
  background-color: rgb(244 63 94);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22m480-120-58-52q-101-91-167-157T150-447.5Q111-500%2095.5-544T80-634q0-94%2063-157t157-63q52%200%2099%2022t81%2062q34-40%2081-62t99-22q94%200%20157%2063t63%20157q0%2046-15.5%2090T810-447.5Q771-395%20705-329T538-172l-58%2052Zm0-108q96-86%20158-147.5t98-107q36-45.5%2050-81t14-70.5q0-60-40-100t-100-40q-47%200-87%2026.5T518-680h-76q-15-41-55-67.5T300-774q-60%200-100%2040t-40%20100q0%2035%2014%2070.5t50%2081q36%2045.5%2098%20107T480-228Zm0-273Z%22%2F%3E%3C%2Fsvg%3E')
        no-repeat center center / contain;
}
.entry-buttons .favorite-btn.is-active .icon {
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22m480-120-58-52q-101-91-167-157T150-447.5Q111-500%2095.5-544T80-634q0-94%2063-157t157-63q52%200%2099%2022t81%2062q34-40%2081-62t99-22q94%200%20157%2063t63%20157q0%2046-15.5%2090T810-447.5Q771-395%20705-329T538-172l-58%2052Z%22%2F%3E%3C%2Fsvg%3E');
}
.entry-buttons .favorite-btn:hover .icon {
  transform: scale(1.25);
}
.entry-buttons .favorite-btn .text {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@media (min-width: 640px) {
  .entry-buttons .favorite-btn .text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.entry-buttons .favorite-btn .thank {
  pointer-events: none;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translate(-50%, 2px);
  white-space: nowrap;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: rgb(255 228 230);
  background-color: rgb(255 255 255);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: rgb(244 63 94);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  opacity: 0;
}
.entry-buttons .favorite-btn.is-animation .thank {
  opacity: 1;
  transform: translate(-50%, -2px);
}
.entry-buttons .share-btn .material-symbols-outlined {
  color: rgb(148 163 184);
}
.entry-buttons .share-btn .text {
  font-size: 0.875rem;
  line-height: 1.25rem;   
}
@media (min-width: 640px) {
  .entry-buttons .share-btn .text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.share-group.is-open .share-btn {
  background-color: rgb(248 250 252);
}

.share-group {
  position: relative;
}
.share-contents {
  position: absolute;
  z-index: 1;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  width: 180px;
  border-radius: 10px;
  top: 55px;
  right: 0;
  display: none;
}
.share-group.is-open .share-contents {
  display: block;
}
.share-list {
  margin: 0;
  padding: 8px 0;
}
.share-list + .share-list {
  border-top: 1px solid #ccc;
}
.share-list li .share-link {
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 0 12px;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
}
.share-list li .share-link:hover {
  background: #f5f5f5;
}
.share-list li .share-link:focus {
  text-decoration: none;
}
.share-list li .share-link::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
}
.share-list li .share-link.--link::before {
  mask: url("/images/sns/link-icon.svg") no-repeat center center / 14px auto;
  background: #878787;
}
.share-list li .share-link.--x::before {
  mask: url("/images/sns/x-icon.svg") no-repeat center center / 16px auto;
  background: #000;
}
.share-list li .share-link.--line::before {
  background: #04C755 url("/images/sns/line-icon.png") no-repeat center center / 16px auto;
  border-radius: 50%;
}
.share-list li .share-link.--facebook::before {
  mask: url("/images/sns/facebook-icon.png") no-repeat center center / 16px auto;
  background: #1877f2;
}
.share-list li .share-link.--threads::before {
  mask: url("/images/sns/threads-icon.png") no-repeat center center / 12px auto;
  background: #000;
}
.share-list li .share-link span {
  font-size: 13px;
  white-space: nowrap;
  color: #333;
}

.entry-author {
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(241 245 249);
  background-color: rgb(246 247 248);
  padding: 1.25rem;
  text-align: center;
}
@media (min-width: 640px) {
  .entry-author {
    text-align: left;
    padding: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
  }
  .share-contents {
    right: auto;
    left: 0;
  }
}
@media (min-width: 768px) {
  .entry-author {
    padding: 2rem;
  }
}
.entry-author h4 {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}
@media (min-width: 640px) {
  .entry-author h4 {
    margin-bottom: 1.5rem;
  }
}
.entry-author-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .entry-author-contents {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
.author-img-link {
  display: block;
  aspect-ratio: 1 / 1;
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(19 127 236 / var(--tw-ring-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  overflow: hidden;
}
.author-img-link:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgb(19 127 236 / 1), 0 0 0 calc(2px + 0px) rgb(19 127 236 / 1), 0 0 #0000;
}
.author-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 640px) {
  .author-img-link {
    width: 7rem;
    height: 7rem;
  }
}
.entry-author .author-text {
  width: 100%;
  flex: 1 1 0%;
}
.entry-author .author-text h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.entry-author .author-text h3 a {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-author .author-text h3 a:hover {
  color: rgb(19 127 236);
}
@media (min-width: 640px) {
  .entry-author .author-text h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
.entry-author .author-text .detail {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(71 85 105);
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .entry-author .author-text .detail {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.entry-author .author-btns {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .entry-author .author-btns {
    flex-direction: row;
    justify-content: flex-start;
  }
}
.entry-author .author-btns > span {
  display: block;
  width: 100%;
}
.entry-author .book-link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgb(14 165 233);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 700;
  color: rgb(255 255 255);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-author .author-btns .material-symbols-outlined {
  font-size: 20px;
}
.entry-author .book-link:hover {
  background-color: rgb(2 132 199);
}
@media (min-width: 640px) {
  .entry-author .author-btns a {
    width: auto;
    white-space: nowrap;
    font-size: 14px;
    padding: 12px 10px;
    gap: 5px;
  }
}
@media (min-width: 1024px) {
  .entry-author .author-btns a {
    padding: 12px 24px;
    font-size: 16px;
    gap: 8px;
  }
}
.entry-author .favorite-link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(186 230 253);
  background-color: rgb(240 249 255);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 700;
  color: rgb(2 132 199);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-author .favorite-link:hover {
  background-color: rgb(224 242 254);
}
.entry-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom-width: 1px;
  border-color: rgb(241 245 249);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .entry-pagination {
    gap: 1rem;
    align-items: flex-start;
    flex-direction: row;
    height: 90px;
    display: block;
  }
}
.entry-pagination > a {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  font-weight: 700;
  color: rgb(19 127 236);
}
@media (min-width: 640px) {
  .entry-pagination > a {
    max-width: 45%;
  }
  .entry-pagination > a.prev {
    align-items: flex-start;
    text-align: left;
    float: left;
  }
  .entry-pagination > a.next {
    text-align: right;
    align-items: flex-end;
    float: right;
  }
}
.entry-pagination .arrow-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entry-pagination .arrow-wrap .material-symbols-outlined {
  font-size: 20px;
  color: rgb(56 189 248);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-pagination > a.prev:hover .material-symbols-outlined {
  transform: translate(-0.25rem, -0.25rem);
}
.entry-pagination > a.next:hover .material-symbols-outlined {
  transform: translate(0.25rem, -0.25rem);
}
.entry-pagination > a .text {
  font-size: 0.75rem;
    line-height: 1rem;
    display: block;
    color: rgb(100 116 139);
    text-decoration-line: none;
}
@media (min-width: 640px) {
  .entry-pagination > a.prev .text {
    margin-left: 1.75rem;
  }
  .entry-pagination > a.next .text {
    margin-right: 1.75rem;
  }
}
.entry-pagination > a:hover .text {
  text-decoration-line: underline;
}
.entry-back {
  margin-bottom: 1rem;
  margin-top: 2rem;
  display: flex;
  width: 100%;
  justify-content: center;
}
.entry-back a {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(226 232 240);
  background-color: rgb(255 255 255);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: rgb(51 65 85);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (min-width: 640px) {
  .entry-back a {
    width: auto;
  }
}
.entry-back a:hover {
  background-color: rgb(248 250 252);
}
.entry-back a .material-symbols-outlined {
  font-size: 20px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.entry-back a:hover .material-symbols-outlined {
  transform: translateX(-0.25rem);
}
/* ==========================================================
     新規追加行のボタンレイアウト（スマートな縦並びデザイン）
     ========================================================== */
  .row-actions-wrap {
    display: flex;
    flex-direction: column; /* 完全に縦並びにする */
    gap: 6px;               /* ボタン同士の上下のすき間 */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 90px;        /* ボタンが潰れないように最小幅を確保 */
    padding: 4px 0;
  }
  .row-actions-wrap:has(.more-btn) {
    min-width: auto;
  }

  /* ボタンの共通基本スタイル */
  .row-save-btn,
  .row-cancel-btn {
    color: #ffffff;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    max-width: 100px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.1s ease;
  }

  .row-save-btn:active,
  .row-cancel-btn:active {
    transform: scale(0.96); /* タップ・クリック時に少し凹むエフェクト */
  }

  /* アイコンサイズを文字と綺麗に同期 */
  .row-save-btn .material-symbols-rounded,
  .row-cancel-btn .material-symbols-rounded {
    font-size: 16px;
  }

  /* Addボタン（青） */
  .row-save-btn {
    background-color: #007bff; 
  }
  .row-save-btn:hover {
    background-color: #2563eb;
  }

  /* Cancelボタン（赤） */
  .row-cancel-btn {
    background-color: #f44e4e;
  }
  .row-cancel-btn:hover {
    background-color: #de3737;
  }

  /* モバイル環境（スマホ画面）での最適化 */
  @media (max-width: 767px) {
    /* スマホのカード型UIのときは、逆に押しやすさを最優先して横並びや全幅にする場合 */
    /* td:has(.row-actions-wrap) {
      display: block !important;
      position: static !important;
      width: 100% !important;
      padding: 10px 12px !important;
      box-sizing: border-box;
      border-top: 1px solid #e5e7eb;
    } */

    .row-actions-wrap {
      flex-direction: row; /* スマホでは横並びにして押しやすく */
      justify-content: space-between;
      gap: 8px;
      padding: 0;
    }

    .row-save-btn,
    .row-cancel-btn {
      max-width: none;
      padding: 10px 0;
      font-size: 14px;
    }
  }
.levelup-table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden;
}

.levelup-table {
    width: 100%;
    margin-bottom: 0 !important;
}

.levelup-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-size: 13px;
}

.levelup-table td {
    padding: 14px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.levelup-table tbody tr:hover {
    background-color: #f8fafc;
}

.col-id {
    width: 70px;
    text-align: center;
}

.col-student {
    width: 130px;
    text-align: center;
}

.col-teacher {
    width: 240px;
}

.lvl-id-badge {
    font-weight: 700;
    color: #64748b;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.sentence-ja {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.sentence-en {
    color: #64748b;
    font-style: italic;
    font-size: 13px;
}

.badge-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.bg-not-started { background-color: #f1f5f9; color: #64748b; }
.bg-roleplay    { background-color: #e0f2fe; color: #0369a1; }
.bg-mix-match   { background-color: #fef3c7; color: #b45309; }
.bg-like-pro    { background-color: #dcfce7; color: #15803d; }

.modern-radio-group {
    display: inline-flex;
    gap: 6px;
}

.modern-radio-label {
    position: relative;
    display: inline-block;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600 !important;
    color: #64748b;
    font-size: 12px;
    transition: all 0.15s ease-in-out;
    margin: 0 !important;
    user-select: none;
}

.modern-radio-label:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.modern-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.modern-radio-label:has(input[type="radio"]:checked) {
    background: #3b82f6;
    border-color: #2563eb;
    color: #ffffff;
}

.no-data-message {
    padding: 20px;
    text-align: center;
    color: #64748b;
}

.detail-pad {
  padding-left: 0rem;
  padding-right: 0rem;
}