@charset "UTF-8";
/*　カレンダー　*/
.calendar-page {}
body.calendar-edit .calendar-page {
  padding: 30px 10px 120px;
}
body.calendar-edit-detail .calendar-page {
  padding: 50px 10px 120px;
  flex: 1;
}
.calendar-page .wrap {
  width: 100%;
  max-width: 800px;
}
.calendar-page .page-ttl {
  display: inline-block;
}
.calendar-page .list-page_ttl h2 {
  padding: 0;
  margin: 0 0 0.8em;
}
.calendar-page .wrap:has(div.tab_content) {
  background: none;
}
.calendar-page .tab_content>.page-ttl h2 {
  border: none;
  padding: 12px 0;
}
.calendar-page h3 {
  color: var(--primary-btn-text-color);
  margin: 0.8em 0 0.4em;
}
.calendar-page .tab_list {
  justify-content: flex-end;
  margin-top: -50px;
}
.calendar-page .tab_item {
  width: auto;
  min-width: 16%;
  border-radius: 5px 5px 0 0 !important;
  margin-left: 5px;
  padding: 0 8px;
}
.calendar-page .section-body {
  padding: 0;
}
.calendar-page .content_wrap .content {
  padding: 10px;
}
.calendar-page .content_wrap .section-header {
  padding: 0 0 10px;
  margin-top: 10px;
}
.calender-page .content_wrap .section-footer {
  filter: drop-shadow(0px 2px 0px var(--attention-shadow-color));
}
.calendar-page .content_wrap .section-footer .btn {
  margin: 4px 0;
}
.calendar-page .content_wrap .section-footer .btn-sm {
  padding: 0.8rem 1.6rem;
  font-size: 1em;
}
.calendar-page .content_wrap .section-footer .btn i {
  margin-right: 0;
}
.calendar-page .content_wrap .section-footer .btn+.btn {
  margin-left: 0;
}
.calendar-page .btn-round {
  border-radius: 5px;
}
.calendar-page .content_wrap .btn-sm.btn-round.btn-shadow:focus,
.calendar-page .content_wrap .btn-sm.btn-round.btn-shadow:focus:active,
.calendar-page .content_wrap .btn-sm.btn-round.btn-shadow:active,
.calendar-page .content_wrap .btn-sm.btn-round.btn-shadow:hover {
  box-shadow: none;
  transform: translateY(6px);
  transition: all 0.2s ease;
}
.calendar {
  background-color: white;
  width: 100%;
  table-layout: fixed;
}
.calendar th {
  background-color: #e2eef0;
  color: #0b2944;
  border: 1px solid #1e1e1e;
  font-size: 0.75rem;
  text-align: center;
}
.calendar tr.calendar-date th {
  background-color: white;
  padding: 1em 0;
}
.calendar td {
  border: 1px solid #1e1e1e;
  vertical-align: top;
  height: 100%;
  position: relative;
}
.calendar td a {
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  width: 100%;
  /* height: calc(60vh / 5); */
  padding: 0;
  min-height: 100px;
}
/* .calendar td a:hover {
  background-color: #53A6C535;
} */
.calendar td:hover {
  -webkit-transition: all 0.5s;
  background-color: #53a6c535;
}
.calendar td .form-checkbox {
  text-align: center;
}
.subject {
  flex-grow: 1;
  padding: 5px;
}
.subject .subject-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  gap: 4px;
  padding-top: 4px;
  padding-bottom: 30px;
}
.subject .mwform-checkbox-field-text+span {
  text-align: left;
  padding-left: 40px;
}
.subject span .subject span.day {
  display: block;
  margin: 0 auto;
}
.subject span.day-test {
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
  background-color: rgba(var(--important-color-rgb), 0.75);
  color: #7b1e1e;
  font-weight: 600;
  padding: 0;
  display: block;
}
.subject .subject-area .break {
  grid-column: 1 / -1;
  grid-template-columns: repeat(1, 1fr);
}
.subject .subject-area .allFinish {
  background-color: rgba(var(--neutral-color-rgb), 1);
  border: none;
  color: #fff;
  display: block;
  text-align: center;
}
.calendar td.on {
  background-color: rgba(var(--attention-color-rgb), 0.15);
  border: 2px solid rgba(var(--attention-color-rgb), 1);
  color: rgba(var(--important-color-rgb), 1);
  position: relative;
}
.calendar td.on .subject span.day {
  color: rgba(var(--important-color-rgb), 1);
}
.calendar.weekly td.event-name.break.on {
  background-color: rgba(255, 110, 64, 0.15);
  color: rgba(255, 110, 64, 1);
  border: 2px solid rgba(255, 110, 64, 1);
  position: relative;
}
.calendar.monthly td {}
.calendar.weekly td {
  height: 50vh;
}
.calendar.weekly td a {
  padding: 2px;
}
.day {
  color: #6c6c6c;
  font-size: 0.75rem;
  padding: 5px;
}
.month {
  color: #a1a1a1;
  display: block;
  font-size: 0.875rem;
}
.month+.day {
  font-size: 1rem;
  font-weight: 600;
}
.month.off,
.day.off {
  color: #b0bec5;
}
.total-tasks {
  text-align: center;
  width: 100%;
  height: fit-content;
  padding: 2px;
  margin-top: auto;
  color: white;
  position: absolute;
  bottom: 0;
}
.modal-calendar_list .event-name.s-test p>a {
  color: white;
}
.event-name {
  width: 100%;
  text-align: center;
}
.event-name.p-test,
.event-name.roundup {
  color: rgba(var(--important-color-rgb), 1);
  background: repeating-linear-gradient(-45deg,
      rgba(var(--important-color-rgb), 0.15),
      rgba(var(--important-color-rgb), 0.3) 5px,
      rgba(var(--important-color-rgb), 0.15) 5px,
      rgba(var(--important-color-rgb), 0.3) 10px);
  border: 1px solid rgba(var(--important-color-rgb), 1);
}
.event-name.p-test a,
.event-name.roundup a {
  color: rgba(var(--important-color-rgb), 1);
}
.event-name.break {
  background-color: rgba(var(--neutral-color-rgb), 1);
  color: #fff;
  display: block;
  text-align: center;
}
.event-name.learnedOverlay::after,
.week-subjects_list li.japanese>ul li.learnedOverlay::after {
  font-size: 1.2em;
}
.event-name.japanese.learnedOverlay {
  background-color: rgba(var(--japanese-color-rgb), 0.6);
  position: relative;
}
.event-name.japanese.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event-name.arithmetic.learnedOverlay {
  background-color: rgba(var(--arithmetic-color-rgb), 0.6);
  position: relative;
}
.event-name.arithmetic.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event-name.english.learnedOverlay {
  background-color: rgba(var(--english-color-rgb), 0.6);
  position: relative;
}
.event-name.english.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event-name.science.learnedOverlay {
  background-color: rgba(var(--science-color-rgb), 0.6);
  position: relative;
}
.event-name.science.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event-name.socialstudies.learnedOverlay {
  background-color: rgba(var(--socialstudies-color-rgb), 0.6);
  position: relative;
}
.event-name.socialstudies.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event-name.othersubjects.learnedOverlay {
  background-color: rgba(var(--othersubjects-color-rgb), 0.6);
  position: relative;
}
.event-name.othersubjects.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.calendar.weekly .event-name.break {
  position: relative;
  white-space: nowrap;
  border-radius: 0;
  writing-mode: vertical-rl;
  font-size: 1rem;
}
.calendar.weekly .event-name.break span {
  display: inline;
  position: absolute;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.calendar-page .section-footer {
  margin: 0.8em 0;
  box-shadow: 0px -8px 20px -12px rgba(var(--primary-color-rgb), 0.5);
  padding-top: 10px;
}
.calendar-page .message-area {
  margin-top: 0;
}
/* 日別モーダル */
.modal-calendar .modal-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: none;
}
.modal-calendar .modal-header a {
  display: block;
  width: 40px;
}
.modal-calendar .modal-header a>i {
  color: #9ab5b2;
  font-size: 48px;
}
.modal-calendar .modal-body {
  text-align: left;
  max-height: calc(90svh - 40vh);
}
/* スケジュールの編集 */
.explanation {
  background-color: rgba(255, 110, 64, 0.15);
  color: rgba(255, 110, 64, 1);
  padding: 0.4em;
  margin-bottom: 0.4em;
}
.calendar-edit .btn-center {
  margin-bottom: 1.6em;
}
.calendar-edit .btn-center .btn {
  box-shadow: 0px 4px 0px 0px var(--border-primary-shadow-color);
  transition: all 0.2s ease;
  width: 100%;
  line-height: 1.2em;
  margin-left: 0;
  margin-top: 1em;
  padding: 0.8em 0.4em;
}
.calendar .form-checkbox input[type="checkbox"]+span {
  padding: 0;
}
.calendar .form-checkbox input[type="checkbox"]+span::before {
  width: 40px;
  height: 40px;
  left: inherit;
  margin: 0 auto;
  position: inherit;
}
.calendar .form-checkbox input[type="checkbox"]+span::after {
  border-right: 8px solid rgba(var(--attention-color-rgb), 1);
  border-bottom: 8px solid rgba(var(--attention-color-rgb), 1);
}
.calendar .form-checkbox input[type="checkbox"]+span::after {
  content: "";
  display: block;
  height: 24px;
  transform: rotate(45deg);
  width: 16px;
  bottom: 4px;
  left: 12px;
}
.calendar .form-checkbox:has(input[type="checkbox"]:disabled) {
  border: inherit;
  background-color: inherit;
}
.edit-item {
  margin-bottom: 0.8em;
}
.edit-item .form-checkbox input[type="checkbox"]+span {
  padding: 0 1em 0 40px;
}
.edit-item .form-checkbox.selectset input[type="checkbox"]+span {
  padding: 1em 1em 1em 40px;
}
.edit-item.row {
  column-gap: 8px;
  align-items: center;
}
.edit-item .btn {
  box-shadow: 0px 4px 0px 0px var(--border-primary-shadow-color);
  transition: all 0.2s ease;
  width: 100%;
  line-height: 1.2em;
  margin-left: 0;
  margin-top: 1em;
  padding: 0.8em 0.4em;
}
.user .calendar-page .content:has(.weekly) .section-header>.row>div:first-child .selectbox select {
  /* font-size: 14px; */
  font-size: 12px;
  min-width: 230px;
}
.calendar-page .btn-center .btn {
  width: 100%;
  line-height: 2em;
}
@media screen and (max-width: 768px) {
  body.calendar-edit .calendar-page,
  body.calendar-edit-detail .calendar-page {
    padding-bottom: 80px;
  }
  body.calendar-edit footer {
    height: 80px;
  }
  .calendar-edit footer div.footer-btn-area div.btn {
    margin-top: 5px;
  }
}
@media screen and (max-width: 414px) {
  .calendar-page .content_wrap .content {
    padding: 5px;
  }
  .calendar-page .content_wrap .section-footer .btn {
    padding: 0.8rem 0.3rem;
    font-size: 13px;
    margin: 4px 0;
  }
  .subject .subject-area {
    gap: 3px;
  }
  .event-name {
    font-size: 10px;
  }
  /* .calendar.weekly td {
    height: 40vh;
  }
  .subject span {
    width: 45%;
  } */
}
/*  やったよカレンダー */
.sugoroku-calendar-page .list-page_ttl h2 {
  padding: 0;
  margin: 0 0 0.8em;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.sugoroku-calendar-page section.section-header {
  background: none;
}
.sugoroku-calendar-page .row {
  justify-content: space-around;
}
.sugoroku-calendar-page .section-body {
  padding: 0 10px;
}
/* .monthly .subject span.event-end-name:nth-of-type(n + 5) {
  display: none;
}
.monthly .subject span.event-end-name:nth-of-type(n + 5)~.omit {
  display: block;
} */
.event-end-name {
  border-radius: 4px;
  padding: 0;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
}
#modal-day1 .event-end-name {
  border-radius: 10px;
}
.event-end-name.japanese {
  border: 1px solid var(--japanese-color);
  background-color: var(--japanese-color);
}
.event-end-name.japanese a {
  color: #fff;
}
.event-end-name.arithmetic {
  border: 1px solid var(--arithmetic-color);
  background-color: var(--arithmetic-color);
}
.event-end-name.arithmetic a {
  color: #fff;
}
.event-end-name.science {
  border: 1px solid var(--science-color);
  background-color: var(--science-color);
}
.event-end-name.science a {
  color: #fff;
}
.event-end-name.socialstudies {
  border: 1px solid var(--socialstudies-color);
  background-color: var(--socialstudies-color);
}
.event-end-name.socialstudies a {
  color: #fff;
}
.event-end-name.english {
  border: 1px solid var(--english-color);
  background-color: var(--english-color);
}
.event-end-name.english a {
  color: #fff;
}
.event-end-name.othersubjects {
  border: 1px solid var(--othersubjects-color);
  background-color: var(--othersubjects-color);
}
.event-end-name.othersubjects a {
  color: #fff;
}
.event-end-name.s-test {
  background-color: #f1577c;
  border: 1px solid #f1577c;
  color: white;
}
.event-end-name.s-test a {
  color: #fff;
}
.event-end-name.p-test,
.event-end-name.roundup {
  color: rgba(var(--important-color-rgb), 1);
  background: repeating-linear-gradient(-45deg,
      rgba(var(--important-color-rgb), 0.15),
      rgba(var(--important-color-rgb), 0.3) 5px,
      rgba(var(--important-color-rgb), 0.15) 5px,
      rgba(var(--important-color-rgb), 0.3) 10px);
  border: 1px solid rgba(var(--important-color-rgb), 1);
}
.event-end-name.p-test a,
.event-end-name.roundup a {
  color: rgba(var(--important-color-rgb), 1);
}
.event-end-name.break {
  background-color: #a1a1a1;
  color: #fff;
}
.calendar.weekly .event-end-name.break {
  border-radius: 0;
  writing-mode: vertical-rl;
  font-size: 1rem;
  border: none;
}
.event-name.s-test.learnedOverlay,
.event-name.p-test.learnedOverlay,
.event-name.roundup.learnedOverlay {
  position: relative;
}
.event-name.s-test.learnedOverlay::before,
.event-name.p-test.learnedOverlay::before,
.event-name.roundup.learnedOverlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(132, 132, 132, 0.7);
  mix-blend-mode: multiply;
  z-index: 1;
}
.event-name.s-test.learnedOverlay::after,
.event-name.p-test.learnedOverlay::after,
.event-name.roundup.learnedOverlay::after {
  font-family: "Font Awesome 6 Free";
  content: "\f00c";
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.event-name.learnedCheck h4::before {
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  padding: 0;
  margin-right: 4px;
  font-weight: bold;
}
.event-name.japanese.learnedCheck h4::before {
  color: rgba(var(--japanese-color-rgb), 1);
}
.event-name.arithmetic.learnedCheck h4::before {
  color: rgba(var(--arithmetic-color-rgb), 1);
}
.event-name.science.learnedCheck h4::before {
  color: rgba(var(--science-color-rgb), 1);
}
.event-name.english.learnedCheck h4::before {
  color: rgba(var(--english-color-rgb), 1);
}
.event-name.socialstudies.learnedCheck h4::before {
  color: rgba(var(--socialstudies-color-rgb), 1);
}
.event-name.p-test.learnedCheck h4:before,
.event-name.roundup.learnedCheck h4:before {
  color: rgba(var(--important-color-rgb), 1);
}
.event-name.s-test.learnedCheck h4:before {
  color: #fff;
}
.sugoroku-calendar-page .calendar {
  height: 70vh;
}
table.calendar .monthly .subject span.event-end-name {
  border-radius: 4px;
}
.bg-test div.content3 .section-footer a.btn-single-long {
  margin: 16px 0;
}
summary.japanese,
.accordion-header.japanese {
  color: rgba(var(--japanese-color-rgb), 1);
}
summary.arithmetic,
.accordion-header.arithmetic {
  color: rgba(var(--arithmetic-color-rgb), 1);
}
summary.english,
.accordion-header.english {
  color: rgba(var(--english-color-rgb), 1);
}
summary.science,
.accordion-header.science {
  color: rgba(var(--science-color-rgb), 1);
}
summary.socialstudies,
.accordion-header.socialstudies {
  color: rgba(var(--socialstudies-color-rgb), 1);
}
summary.othersubjects {
  color: rgba(var(--othersubjects-color-rgb), 1);
}
div.box-attention.bg-attention {
  background-color: rgba(var(--attention-color-rgb), 0.15);
  padding: 8px 0;
}
div.box-attention.bg-attention div {
  color: rgba(var(--important-color-rgb), 1);
  max-width: 820px;
  margin: 0 auto;
}
div.box-make-schedule p:has(a.txt-neutral) {
  margin-top: 8px;
  text-align: right;
}
section.section-body.fix-calendar_wrap {
  padding: 0 8px;
}
.content_wrap:has(.fix-calendar_footer) {
  position: relative;
  height: 100%;
}
.calendar-page .section-footer.fix-calendar_footer {
  width: 100%;
  box-shadow: 0px -8px 20px -12px rgba(var(--primary-color-rgb), 0.5);
  padding: 1.6em 0;
  margin: 1.6em 0 0;
  position: sticky;
  background: #fff;
  z-index: 10 !important;
  bottom: 0;
  left: 0;
}