:root {
    --primary-100: #E4851B;
    --primary-200: #eba350;
    --primary-300: #F4972E ;  /* 新規カラー */
    --primary-400: #FFB218 ;  /* 新規カラー */
    --primary-500: #f4982e40; /* labelカラー */
    --primary-600: #FFB21840; /* labelカラー */
    --primary-700: #22A682;   /* Successカラー */
    --primary-800: #D3D3D3;   /* NotSuccessカラー */
    --primary-900: #D9DCE3;   /* NotTagカラー */
    --search     : #ced3dd;   /* searchカラー */
    --public     : #22A682;   /* publicカラー */
    --private    : #E8A82B;   /* privateカラー */
    --delete     : #E44040;   /* deleteカラー */
    --create     : #3984DD;   /* createカラー */
    --public-op  : #22A68238; /* publicカラー */
    --private-op : #E8A82B38; /* privateカラー */
    --delete-op  : #E4404038; /* deleteカラー */
    --create-op  : #3b84de38; /* createカラー */
  }

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  background-color: #F7F7F7;
  color: #000;
  font-size: 17px;
  font-family: 'Noto Sans JP', 'Roboto', sans-serif;
  letter-spacing: 0.05em;
  overflow-y: visible;
  overflow-x: hidden;
}

.headline {
  padding:0;
  background: repeating-linear-gradient(135deg, var(--primary-200) 0px, var(--primary-200) 1px, var(--primary-100) 0px, var(--primary-100) 10px);
  border-color: var(--primary-100);
  color: #f7f7f7;
}

.btn_errortext {
  visibility: hidden;
}

ul {
  list-style: none;
}

.header_logo {
  background-color: transparent;
  width: 245px;
  height: auto;
}

.login_logo {
  width: 75px;
  height: auto;
}

.pencil_icon {
  width: 20px;
  height: auto;
}

.container {
  flex: 1;
  transition: all 0.5s ease-in-out;
}

footer {
  background-color: var(--primary-100);
  color: white;
  font-size: 14px;
}

.navbar {
  background-color: var(--primary-100);
  /* width: 100%; */
}


.open-button {
  border: none;
  cursor: pointer;
}

.chat_box {
  max-height: 45vh;
  min-height: 10vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* textarea {
  height: 12vh;
  resize: none;
} */

.note-editor-chat {
  height: 130px;
  resize: none;
  overflow-y: scroll;
}

.note-editing-area-chat {
  line-height: 1.0;
}

.edit-mode-text {
  cursor: pointer;
  background-color: #4bbd00;
  color: #fff;
  text-align: center;
  font-size: 12px;

  &:hover {
    background-color: #338000;
    opacity: 0.7;
  }
}

/* The popup chat - hidden by default */
.chat_container {
  position: fixed;
  bottom: 0;
  right: 0px;
  border: 4px solid orange;
  border-radius: 1rem;
  background-color: whitesmoke;
  z-index: 9;
  max-width: 600px;
  max-height: 600px;
}

.chat_container .chat_summary {
  border: 2px solid gray;
  border-radius: 1rem;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 360px;
  min-height: 240px;
  background-color: rgb(255, 243, 222);
}

.chat_container .chat_textarea {
  border: 2px solid gray;
  border-radius: 0.5rem;
  display: flex;
  max-height: 240px;
}

.chat_container .chat_member_admin{
  max-width: 80%;
  border-radius: 1rem;
}

.chat_container .chat_member_participant{
  display: inline-block;
  max-width: 80%;
  border-radius: 1rem;
  display: flex;
  flex-direction: row-reverse;
}

.chat_container .chat_message{
  display: inline-block;
  width: 80%;
  border-radius: 1rem;
}

/* Add styles to the form container */
.form-container {
  max-width: 35rem;
  max-height: 600px;
  padding: 10px;
  background-color: whitesmoke;
}

.form-container .chat{
  max-height: 320px;
  overflow-y: scroll;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 30px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #b22222;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  color: #b22222;
  border: solid 2px #b22222;
  background-color: white;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  font-size: medium;
  font-weight: bold;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--primary-100);
  background-color: azure;
  width: fit-content;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: grey;
  /* background-color: azure;
  width: fit-content; */
}

.dropdown-item {
  color: var(--primary-100);
  font-size: medium;
  font-weight: bold;

}

.dropdown-item:hover, .dropdown-item:focus {
  color: grey;
  /* background-color: var(--primary-100); */
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  background-color: var(--primary-100);
}

.btn_red {
  background-color: #b22222;
  color: white;
  padding: 15px;
  font-weight: bold;
  font-size: 1rem;
}

.btn_red:hover {
  opacity: 0.8;
  color: white;
}

.btn_green {
  background-color: var(--primary-100);
  color: white;
  padding: 15px;
  font-weight: bold;
  font-size: 1rem;
}

.btn_green:hover {
  opacity: 0.8;
  color: white;
}

.btn_white_red {
  color: #b22222;
  border: solid 2px #b22222;
  padding: 15px;
  font-weight: bold;
  font-size: 1rem;
}

.btn_white_red:hover {
  opacity: 0.8;
  color: #b22222;
}

.modal_btn_red {
  background-color: #b22222;
  color: white;
  width: 130px;
  height: 48px;
  font-size: 1rem;
}

.modal_btn_red:hover {
  opacity: 0.8;
  color: white;
}

.modal_btn_white_red {
  color: #b22222;
  border: solid 1px #b22222;
  width: 130px;
  height: 48px;
  font-size: 1rem;
}

.modal_btn_white_red:hover {
  opacity: 0.8;
  color: #b22222;
}

.small_btn_orange {
  background-color: var(--primary-100);
  color: white;
  width: 120px;
  font-weight: bold;
}

.small_btn_white_orange {
  border: solid 2px var(--primary-100);
  color: var(--primary-100);
  width: 100px;
  font-weight: bold;
}

.dropdown-menu[data-bs-popper] {
  top: 116%;
  left: -22px;
  margin-top: 0.125rem;
}

.title_circle {
  color: var(--primary-100);
  padding-right: 0px;
  font-size: 20px;
}

.answer_box {
  width: 150px;
}

.answer_box_japanese {
    width: 250px;
}

.form-check-input:checked {
  background-color: #b22222;
  border-color: #b22222;
}

.btn-check:checked+.btn-outline-warning, .btn-check:active+.btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
  color: #F7F7F7;
  background-color: var(--primary-100);
  border-color: var(--primary-100);
}

.btn-outline-warning {
  color: var(--primary-100);
  border-color: var(--primary-100);
}

.btn-outline-warning:hover {
  color: #F7F7F7;
  background-color: var(--primary-100);
  border-color: var(--primary-100);
}

.btn-check:checked+.btn-outline-primary, .btn-check:active+.btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  color: #F7F7F7;
  background-color: #069A8E;
  border-color: #069A8E;
}

.btn-outline-primary {
  color: #069A8E;
  border-color: #069A8E;
}

.btn-outline-primary:hover {
  color: #F7F7F7;
  background-color: #069A8E;
  border-color: #069A8E;
}

.horizontal_scroll {
  overflow-x: visible;
  flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex;
}

.horizontal_scroll>li {
  min-width: 250px;
  margin-bottom: 15px;
}

.horizontal_scroll>li:not(:last-child) {
  margin-right: 15px;
  min-width: 250px;
}

/* マウスオンする要素とツールチップを横並びにする */
.c-tooltip {
  display: inline-block;
  position: relative;
}

/* ツールチップの設定 */
.c-tooltip::after {
  -webkit-transition: all 0.2s;
  opacity: 0;
  position: absolute;
  transition: all 0.2s;
  visibility: hidden;
  z-index: 11;
}

/* ツールチップ吹き出しの本体 */
.c-tooltip::after {
  -webkit-transform: translateY(-50%);
  border-radius: 3px;
  color: #fff;
  content: attr(data-tooltip); /* ここでdata-tooltipの内容を呼び出しているよ */
  display: block;
  font-size: 24px;
  font-weight: 600;
  left: 50%;
  padding: 5px 10px;
  top: 45%;
  width:calc(100% - (10px * 2));
  transform: translate(-50%,-50%);
  pointer-events: none;
  text-align: center;
}

[tooltip]:hover + .title_link {
  filter: brightness(50%);
}

/* マウスオンしたときのカーソルの設定 */
.c-tooltip:hover {
  cursor: pointer;
}

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

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

::-webkit-scrollbar {
  width: 10px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #fff;
  border-left: solid 1px #ececec;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #ccc;
}

.category_border {
  border-bottom: var(--primary-100) solid 3px;
}

.title_link {
  text-decoration: none;
  padding: 0;
  transition: filter 0.5s ease; /* アニメーション時間とタイミング関数を指定 */
}

.title_link:hover {
  filter: brightness(50%);
}

.module_link {
  background-color: var(--primary-100);
  border-radius: 5px;
  color: #F7F7F7;
  padding: 15px 0;
  font-size: 16px;
}

.module_link_new {
  background-color: #6e6e6e;
  border-radius: 5px;
  color: #F7F7F7;
  padding: 15px 0;
  font-size: 16px;
}

.module_link_delete {
  background-color: var(--delete) ;
  border-radius: 5px;
  color: #F7F7F7;
  padding: 15px 0;
  font-size: 16px;
}

.news_icon {
  font-size: 25px;
  cursor: pointer;
  color: #fff;
}

.news_icon:hover {
  color: grey;
}

.title_block {
  background-color: white;
  border-radius: 3px;
  border: solid 1px gainsboro;
  position: relative;
}

.title_img_wrap {
  height: 150px;
  /* max-width: 182px; */
}

.title_img {
  height: 100%;
  width: 100%;
}

.title_text {
  color: #6e6e6e;
  text-align: center;
  font-size: 16px;
  padding: 5px 0;
  font-weight: bold;
  max-width: auto;
  max-height: 35px;
}

.chat_link {
  position: relative;
}

.chat_badge {
  background-color: #b22222;
  color: #F7F7F7;
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: -3px;
}

.admin_chat_badge {
  background-color: #b22222;
  color: #F7F7F7;
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: -3px;
}

.login_panel {
  background-color: white;
  border-radius: 10px;
  width: 40%;
  margin: 0 auto;
  font-size: 16px;
}

.promotion_panel {
  background-color: white;
  border-radius: 10px;
  width: 50%;
  margin: 0 auto;
  font-size: 16px;
}

.pass_remind_link {
  font-size: 14px;
  color: skyblue;
}

.user_icon {
  color: #F7F7F7;
  background-color: #6e6e6e;
  font-size: 50px;
  border-radius: 50%;
}

.mypage_separate {
  border-right: solid 1px silver;
}

.rank_box {
  border-radius: 7px;
  background-color: white;
  box-shadow: 2px 2px 4px silver;
  min-width: 100% ;
  margin-bottom: 24px ;
  height: 116px ;
}

.rank_box:last-child {
  margin-bottom: 0 ;
}

@media screen and (min-width: 768px) {
  .rank_box {
    min-width: 200px;
    margin-right: 50px;
    margin-bottom: 0 ;
  }

  .rank_box:last-child {
    margin-top: 24px ;
  }
}

@media screen and (min-width: 1200px) {
  .rank_box:last-child {
    margin-top: 0 ;
  }
}

.mypage_title_circle {
  color: var(--primary-100);
  padding-right: 8px;
  font-size: 17px;
}

.mypage_btn {
  padding: 5px 15px;
  width: 160px;
  white-space: nowrap;
}

.correction_badge {
  background-color: #F7F7F7;
  padding: 4px 1px 4px 4px;
  color: #069A8E;
  font-size: 20px;
  position: absolute;
  top: -9px;
  right: 3px;
  border-radius: 5px;

}

.correction_new_badge {
  background-color: #F7F7F7;
  padding: 4px 1px 4px 4px;
  color: #b22222;
  font-size: 20px;
  position: absolute;
  top: -9px;
  right: 3px;
  border-radius: 5px;
}

.correction_badge_top {
  background-color: #F7F7F7;
  padding: 4px 1px 4px 4px;
  color: #0000ff;
  font-size: 27px;
  position: absolute;
  top: 0px;
  right: 3px;
  border-radius: 3px;
}

.correction_new_badge_top {
  background-color: #F7F7F7;
  padding: 4px 1px 4px 4px;
  color: #b22222;
  font-size: 25px;
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 3px;
  z-index: 100;
}

.correction_comp_badge_top {
  background-color: #F7F7F7;
  padding: 4px 1px 4px 4px;
  color: #069A8E;
  font-size: 25px;
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 3px;
  z-index: 100;
}

.correction_syntax_correct_check {
  background-color: #E9ECEF;
  color: #069A8E;
  font-size: 25px;
  position: absolute;
}

.correction_syntax_correct_xmark {
  background-color: #E9ECEF;
  color: #b22222;
  font-size: 25px;
  position: absolute;
}


@media screen and (max-width: 768px) {
  .login_panel {
    width: 90%;
  }

  .promotion_panel {
    width: 90%;
  }
}

.p_content {
  min-width: 200px;
  white-space: nowrap;
  overflow-x: scroll;
}

.p_content2 * {
  overflow-wrap: break-word;
  font-family: 'Noto Sans JP';
  font-size: 17px;
  white-space: pre-wrap;
}

.p_content3 {
  max-width: 100%;
  word-break: break-all;
  white-space: pre-wrap;
}

.p_content3 > p {
  margin: 0;
}

.p_content4 {
  overflow-wrap: break-word;
  font-family: 'Noto Sans JP';
  font-size: 17px;
  white-space: pre-wrap;
}

.p_content_file {
  color: #E8E8E8;
}

.p_content_file:hover {
  color: #E8E8E8;
}

.p_content_participant_file {
  color: #6e6e6e;
}

.p_content_participant_file:hover {
  color: #6e6e6e;
}

.card-block * {
  white-space: pre-wrap;
}

.tag_update_time {
  font-size: 12px;
}

.tag_name {
  font-weight: bold;
}

/* ボイスレコーダー */
.recorder_button_start {
  display: inline-block;
  text-decoration: none;
  color: gray;/*アイコン色*/
  width: 80px;
  height: 80px;
  line-height: 80px;
  /* font-size: 40px; */
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border: solid 2px #b5b5b5;
}

.recorder_button_recording {
  display: inline-block;
  text-decoration: none;
  color: red;/*アイコン色*/
  width: 80px;
  height: 80px;
  line-height: 70px;
  /* font-size: 40px; */
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  word-break: break-all;
  animation: blinkBorder 1s ease infinite alternate;;
}

@keyframes blinkBorder {
  0% {
    border: 6px solid #cc2200;
  }
  100% {
    border: 6px solid #efefef;
  }
}

.recorder_button_start i {
  line-height: 80px;
}
.recorder_button_start:active {
  /*押したとき*/
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}

.correct_list_select {
  max-height: 36px;
  padding: 0px;
}

.correct_list_col {
  padding-top: 2px;
}

.chat-content {
  position: relative;
  margin-bottom: 30px;
}

.chat_participant {
  background-color: #E8E8E8;
  width: auto;
}

.chat_admin {
  background-color: #4082ED;
  color: white;
  width: auto;
}

.chat_admin_tools {
  position: absolute;
  top: 100%;
  height: fit-content;
  width: fit-content;
  padding: 0.25% 0.25%;
  border: solid rgb(224, 224, 224) 1px;
  border-radius: 0 0 0.25rem 0.25rem;
  font-size: 14px;

  .chat-admin-tools-edit, .chat-admin-tools-delete {
    cursor: pointer;

    &:hover {
      background-color: #ddd;
      opacity: 0.7;
    }
  }
}

.chat_admin_tag {
  text-align: right;
  transform: translateX(30px);
}

.chat_participant_tag {
  transform: translateX(-30px);
}

/** * You can compile this by https://www.sassmeister.com with * * - dart-sass v1.18.0 */
.diff-wrapper.diff {
  background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em);
  border-collapse: collapse;
  border-spacing: 0;
  border: 0px solid black;
  color: black;
  empty-cells: show;
  font-size: 14px;
  font-family: 'Meiryo UI', 'Noto Sans JP', sans-serif;
  width: 100%;
  word-break: break-all;
}
.diff-wrapper.diff th {
  font-weight: 700;
}
.diff-wrapper.diff td {
  vertical-align: baseline;
}
.diff-wrapper.diff td, .diff-wrapper.diff th {
  border-collapse: separate;
  border: none;
  padding: 1px 2px;
  background: #fff;
}
.diff-wrapper.diff td:empty:after, .diff-wrapper.diff th:empty:after {
  content: " ";
  visibility: hidden;
}
.diff-wrapper.diff td a, .diff-wrapper.diff th a {
  color: #000;
  cursor: inherit;
  pointer-events: none;
}
.diff-wrapper.diff thead th {
  background: #a6a6a6;
  border-bottom: 1px solid black;
  padding: 4px;
  text-align: left;
}
.diff-wrapper.diff tbody.skipped {
  border-top: 1px solid black;
}
.diff-wrapper.diff tbody.skipped td, .diff-wrapper.diff tbody.skipped th {
  display: none;
}
.diff-wrapper.diff tbody th {
  background: #cccccc;
  border-right: 1px solid black;
  text-align: right;
  vertical-align: top;
  width: 4em;
}
.diff-wrapper.diff tbody th.sign {
  background: #fff;
  border-right: none;
  padding: 1px 0;
  text-align: left;
  width: 4em;
}
.diff-wrapper.diff tbody th.sign.del {
  color: red;
}
.diff-wrapper.diff tbody th.sign.ins {
  color: green;
}
.diff-wrapper.diff.diff-html {
  white-space: pre-wrap;
}
.diff-wrapper.diff.diff-html.diff-combined .change.change-rep .rep {
  white-space: normal;
}
.diff-wrapper.diff.diff-html .change.change-eq .old, .diff-wrapper.diff.diff-html .change.change-eq .new {
  background: #fff;
}
.diff-wrapper.diff.diff-html .change .old {
  /* background: #fbe1e1;  */
  padding-bottom: 30px;
  padding-top: 10px;

}
.diff-wrapper.diff.diff-html .change .new {
  /* background: #e1fbe1;  */
  padding-top: 10px;
  padding-bottom: 10px;
}
.diff-wrapper.diff.diff-html .change .rep {
  background: #fef6d9;
}
.diff-wrapper.diff.diff-html .change .old.none, .diff-wrapper.diff.diff-html .change .new.none, .diff-wrapper.diff.diff-html .change .rep.none {
  background: transparent; cursor: not-allowed;
}
.diff-wrapper.diff.diff-html .change ins, .diff-wrapper.diff.diff-html .change del {
  font-weight: bold; text-decoration: none;
}
.diff-wrapper.diff.diff-html .change ins {
  background: #94f094;
}
.diff-wrapper.diff.diff-html .change del {
  background: #f09494;
}

.note-editable {
  font-family: 'Noto Sans JP', sans-serif;
}

.success-icon {
    color: #59df00;
}

.error-icon {
    color: #cf2300;
}

.pre-wrap {
    white-space: pre-wrap;
}
.overflow-wrap{
    overflow-wrap: break-word;
}

.break-box {
  page-break-before: always ;
}

/** Top画面契約日数 **/
.contract_end_box {
  width: 100% ;
  margin: 24px 0 16px ;
  padding: 14px ;
  display: flex ;
  border-radius: 8px ;
  background: #FFF ;
}

.contract_end_title,
.contract_end_days_text,
.remainin_days_text {
  font-size: 14px ;
  font-weight: 600 ;
}

.contract_end_title {
  position: relative ;
  padding-right: 24px ;
  height: auto ;
  white-space: nowrap ;
  padding-left: 16px;
}

.contract_end_title::before {
  content: "" ;
  position: absolute ;
  top: 12px ;
  right: 0 ;
  width: 4px ;
  height: 60% ;
  border-radius: 2px;
  background-color: var(--primary-300);
}

@media screen and (min-width: 992px) {
  .contract_end_box {
    padding: 8px ;
  }
  
  .contract_end_title,
  .contract_end_days_text,
  .remainin_days_text {
    font-size: 20px ;
    display: flex ;
    align-items: center;
    padding-right: 24px;
    height: 48px;
  }
}

.remainin_corect_end_box {
  width: 100%;
  display: flex;
  padding-left: 24px;
}

.contract_end_days_text {
  font-size: 20px;
}

.remaining_days_text_style {
  font-size: 32px;
  color: var(--primary-100);
  padding-bottom: 8px;
}
/* 
/
/
///// NEWS /////
/
/
*/
.news {
  width: 100% ;
}

.news_wrapper {
  width: 100% ;
  display: flex ;
  flex-direction: column ;
  margin-top: 56px ;
}

.section_title_box,
.section_main_box {
  width: 100% ;
}

.section_title_box_wrapper {
  width: 100% ;
  margin-bottom: 16px ;
  position: relative ;
}

.section_title_box_wrapper::before {
  content: "" ;
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  width: 100% ;
  height: 4px ;
  border-radius: 2px ;
  background-color: var(--primary-300) ;
}

.section_title {
  width: 100% ;
  font-size: 14px ;
  padding-bottom: 16px ;
  margin-bottom: 0 ;
  text-align: center ;
  font-weight: bold;
}

.section_main_box {
  display: flex ;
  justify-content: flex-start ;
  flex-direction: column ;
  flex-wrap: wrap ;
  width: 100% ;
  height: auto ;
}

/* Newsの中身 */
.notice_box {
  max-width: 100% ;
  padding: 24px ;
  background-color: #FFFFFF ;
  border-radius: 4px ;
  transition: all 0.5s ease-in-out;
}

.notice_box:nth-child(n+2) {
  margin-top: 24px ;
}

.notice_box:hover,
.day_box:hover {
  box-shadow: #bea17d3d 0px 7px 29px 0px;
  transition: all 0.2s ease-in-out;
}

.notice_date {
  font-size: 12px ;
  margin-bottom: 8px ;
}

.notice_title {
  font-size: 18px ;
  margin-bottom: 16px ;
  color: var(--primary-300);
  font-weight: 600 ;
}

.notice_text {
  font-size: 14px ;
}

/* news 2分割レイアウト */
@media screen and (min-width: 992px) {
  .section_main_box {
    flex-direction: row ;
  }

  /* 1分割レイアウトのリセット */
  .notice_box:nth-child(n+2) {
  margin-top: 0 ;
  }

  /* newsとnewsの間の余白 : 24px */
  .notice_box {
    max-width: calc((100% - 24px) / 2) ;
    margin-right: 24px ;
  }

  .notice_box:nth-child(2n) {
    margin-right: 0 ;
  }

  .notice_box:nth-child(n+3) {
    margin-top: 24px ;
  }

  .section_title_box_wrapper {
    max-width: 23%;
    margin-bottom: 24px ;
  }

  .section_title {
    font-size: 20px ;
  }

}

/* news 3分割レイアウト */
@media screen and (min-width: 1200px) {
  /* 2分割レイアウトのリセット */
  .notice_box:nth-child(2n) {
    margin-right: 24px ;
  }

  .notice_box:nth-child(n+3) {
    margin-top: 0 ;
  }

  /* newsとnewsの間の余白 : 48px( = 24px * 2 ) */
  .notice_box {
    max-width: calc((100% - 48px) / 3) ;
    margin-right: 24px ;
  }

  .notice_box:nth-child(3n) {
    margin-right: 0 ;
  }

  .notice_box:nth-child(n+4) {
    margin-top: 24px ;
  }
}
/* 
/
/
///// WEEKS /////
/
/
*/
.weeks {
  width: 100% ;
}

.weeks_wrapper,
.lessons_wrapper,
.old_weeks_wrapper {
  width: 100% ;
  display: flex ;
  flex-direction: column ;
  margin: 24px 0 ;
}

.week_box {
  width: 100% ;
  height: 100% ;
  margin-bottom: 24px ;
}

.week_box:last-child {
  margin-bottom: 0 ;
}

.week_box > .section_main_box {
  justify-content: flex-start ;
}

.day_box {
  width: 100% ;
  height: 100% ;
  padding: 8px ;
  background-color: #FFFFFF ;
  border-radius: 8px ;
  margin: 0 24px 24px 0 ;
  transition: all 0.5s ease-in-out;
}

.day_box:nth-child(4n) {
  margin: 0 0 24px 0 ;
}

.day_box_wrapper {
  width: 100% ;
  height: 100% ;
  text-decoration: none ;
}

.day_image_box {
  margin-bottom: 12px ;
  width: 100% ;
  height: 100% ;
}

.day_image {
  width: 100% ;
  height: 100% ;
  max-height: 144px ;
  object-fit: cover ;
  border-radius: 8px ;
}

.day_title_box {
  width: 100% ;
  height: 24px ;
  display: flex ;
  flex-direction: row ;
  align-items: baseline ;
}

.day_icon_box {
  margin-left: 8px ;
  height: 24px ;
}

.day_icon_box > .fa-check {
  color: #22A682 ;
}

.day_icon_box > .fa-circle-exclamation {
  color: #F42E2E ;
}

.day_title_text {
  margin-left: 10px ;
  color: #000000 ;
  font-size: 14px ;
  font-weight: 600 ;
}

/* 2分割レイアウト */
@media screen and (min-width: 992px) {
  .day_box {
      width: calc((100% - 24px) / 2) ; /* day_box間の余白 = 24px */
  }
  
  .day_box:nth-child(2n) {
    margin-right: 0 ;
  }
  
  .day_image {
    max-height: 200px ;
  }
  
  .weeks_wrapper,
  .lessons_wrapper,
  .old_weeks_wrapper {
    margin: 56px 0;
  }
}

/* 4分割レイアウト */
@media screen and (min-width: 1200px) {
  .day_box {
    width: calc((100% - 72px) / 4) ; /* day_box間の余白 = 72px (24px * 3 ) */
  }
  
  .day_box:nth-child(2n) {
    margin-right: 24px ;
  }
  
  .day_box:nth-child(4n) {
    margin-right: 0 ;
  }
  
  .day_image {
    max-height: 182px ;
  }

}
/* 
/
/
///// 学習状況ページへ遷移するボタン /////
/
/
*/
.rank_box_history {
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
}

.rank_text {
  text-decoration: none ;
  color: #000 ;
}

.rank_text:hover {
  color: #E4851B ;
  font-weight: 600 ;
}
/* 
/
/
///// label /////
/
/
*/
.tab_input {
  display: none ;
}

.label_box {
  width: 100% ;
  display: flex ;
  justify-content: space-between ;
  margin-top: 56px ;
  margin-bottom: 24px ;
}

.tab_item {
  width: calc( (100% - 16px) / 2 );
  font-size: 14px;
  padding: 8px 24px;
  border: solid 2px #DBDBDB ;
  color: #DBDBDB ;
  margin-right: 16px ;
  border-radius: 6px ;
  text-align: center ;
}

.tab_item:last-child {
  margin-right: 0 ;
}

#total:checked ~ .total_text {
  border: solid 2px #ffffff00 ;
  font-weight: 600 ;
  background-color: var(--primary-500) ;
  color: var(--primary-300) ;
}

#lesson:checked ~ .lesson_text {
  border: solid 2px #ffffff00 ;
  font-weight: 600 ;
  background-color: var(--primary-600) ;
  color: var(--primary-400) ;
}

#old_weeks:checked ~ .old_weeks_text {
  border: solid 2px #ffffff00 ;
  font-weight: 600 ;
  background-color: #3b84de38;
  color: #3984DD;

}

@media screen and (min-width: 992px) {
  .label_box {
    justify-content: flex-start ;
  }

  .tab_item {
    width: auto ;
    font-size: 17px;
    padding: 12px 32px;
  }
}
/* 
/
/
///// history_table /////
/
/
*/

/* 全体進捗とレッスンの表示・非表示 */
.weeks_container,
.lessons_container,
.old_weeks_container {
  display: none ;
}
.label_box:has(#total:checked) ~ .weeks_container {
  display: block ;
}
.label_box:has(#total:checked) ~ .lessons_container {
  display: none ;
}
.label_box:has(#total:checked) ~ .old_weeks_container {
  display: none ;
}

.label_box:has(#lesson:checked) ~ .lessons_container {
  display: block ;
}
.label_box:has(#lesson:checked) ~ .weeks_container {
  display: none ;
}
.label_box:has(#lesson:checked) ~ .old_weeks_container {
  display: none ;
}

.label_box:has(#old_weeks:checked) ~ .old_weeks_container {
  display: block ;
}
.label_box:has(#old_weeks:checked) ~ .weeks_container {
  display: none ;
}
.label_box:has(#old_weeks:checked) ~ .lessons_container {
  display: none ;
}
  
.week_table {
  width: 100% ;
  margin-bottom: 56px ;
}

.week_column_box {
  display: flex ;
  align-items: center ;
  width: 100% ;
  height: 24px ;
}

.week_column_wrapper,
.days_box {
  padding: 0 20px ;
  width: 100% ;
  display: flex ;
  flex-direction: row ;
  justify-content: space-between;
}

.days_box {
  padding: 8px 20px ;
  background-color: #FFFFFF ;
  border-radius: 4px ;
  margin-bottom: 16px ;
  transition: all 0.5s ease-in-out;
}

.days_box:last-child {
  margin-bottom: 0 ;
}

.days_box:hover {
  box-shadow: rgba(190, 161, 125, 0.24) 0px 7px 29px 0px;
  transition: all 0.2s ease-in-out;
}

.week_column_list,
.module_text {
  font-size: 12px ;
  width: 13%  ;
  font-weight: 600 ;
  color: #DBDBDB ;
  text-align: center ;
}

.week_column_list {
  font-size: 7px ;
}

@media screen and (min-width: 992px) {
  .week_column_wrapper {
    padding: 0 32px ;
  }

  .days_box {
    padding: 16px 32px ;
  }

  .week_column_box {
    height: 56px ;
  }

  .week_column_list,
  .module_text {
    font-size: 16px ;
    width: 13%  ;
  }
}
/* 
/
/
///// button /////
/
/
*/
.module_text {    
  display:flex;
  align-items: center;
  justify-content: center;
}

.module_text:first-child,
.module_text:last-child {
  justify-content: flex-start ;
}

.week_column_list:last-child {
  margin-right: 0 ;
}

.column_day,
.day_text {
  text-align: left ;
  width: 48px ;
}

.day_text {
  color: #434343 ;
}

.day_button_box,
.about_button {
  width: 26px ;
}

.week_mainBox {
  margin-bottom: 16px ;
  width: 100% ;
}

.module_button {
  width: 32px ;
  height: 32px ;
  padding: 9px ;
  border-radius: 8px ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  text-decoration: none ;
  transition: all 0.2s ease-in-out;
}

.module_button.submit {
  background-color: var(--primary-700) ;
}
.module_button.no_submit {
  background-color: var(--primary-800) ;
}

/* hoverアクション */
.module_button.submit:hover {
  box-shadow: #2abd6548 0px 7px 29px 0px;
}
.module_button.no_submit:hover {
  box-shadow: #666a6338 0px 7px 29px 0px;
}

.button_text,
.button_icon {
  color: #FFFFFF ;
}

.button_icon {
  font-size: 18px ;
}

.button_text {
  display: none ;
  font-size: 15px ;
}

/* （・・・）ボタン */
.about_button {
  position: relative ;
  display: flex ;
  justify-content: center ;
}

.about_icon,
.about_button::before,
.about_button::after {
  content: "" ;
  position: relative ;
  top: 0 ;
  bottom: 0 ;
  margin: auto 0 ;
  width: 5px ;
  height: 5px ;
  border-radius: 2.5px ;
  background-color: #d9d9d9 ;
}

.about_icon {
  margin: 0 3px ;
}

.about_button::before {
  left: 0 ;
}

.about_button::after {
  right: 0 ;
}

.not_button {
  background-color: transparent;
}

.not_button::before,
.not_button::after,
.not_button > .about_icon {
  background-color: transparent;
}

@media screen and (min-width: 992px) {
  .column_day, 
  .day_text {
    width: 160px ;
  }

  .module_button {
    width: 100% ;
    height: auto ;
    max-width: 128px ;
    padding: 12px 20px ;
    justify-content: space-between;
  }

  .button_text {
    display: block ;
  }

  .button_icon {
    font-size: 22px ;
}
}
/* 
/
/
///// lesson /////
/
/
*/
.lessons_wrapper > .section_title_box > .section_title_box_wrapper::before {
  background-color: var(--primary-400);
}

.lesson_table {
  width: 100% ;
}

.lesson_table_wrapper {
  width: 100% ;
  display: flex ;
  flex-direction: row ;
  flex-wrap: wrap ;
  margin: 8px 0 24px ;
}

.lesson_box {
  display: flex ;
  flex-direction: row ;
  justify-content: space-between ;
  text-decoration: none ;
  width: 100% ;
  height: 56px ;
  padding: 8px 20px ;
  background-color: #FFFFFF;
  border-radius: 8px ;
  border: solid 4px var(--primary-400) ;
  margin-bottom: 16px ;
  transition: all 0.2s ease-in-out;
}

/* hoverアクション */
.lesson_box:hover {
  box-shadow: #e2a72746 0px 7px 29px 0px;
}
.lesson_box.num_lesson:hover {
  box-shadow: #666a6338 0px 7px 29px 0px;
}

.num_lesson {
  border: solid 4px var(--primary-800) ;
}

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

.lesson_box_icon {
  color: var(--primary-400) ;
  font-size: 28px ;
  margin-right: 24px ;
}

.num_lesson > .lesson_text_box > .lesson_box_icon {
  color: var(--primary-800) ;
}

.lesson_box_text {
  color: #434343 ;
  font-weight: 600 ;
  font-size: 16px ;
}

/* 2分割レイアウト */
@media screen and (min-width: 768px) {
  .lesson_box {
    max-width: calc( (100% - 40px) / 2 ) ;
    margin-right: 40px ;
  }

  .lesson_box:nth-child(2n) {
    margin-right: 0 ;
  }
}

/* 3分割レイアウト */
@media screen and (min-width: 992px) {
  .lesson_box {
    max-width: calc( (100% - (40px * 2)) / 3 ) ;
    margin-right: 40px ;
    height: 80px ;
    padding: 20px 16px ;
    margin-bottom: 24px ;
  }

  .lesson_box:nth-child(2n) {
    margin-right: 40px ;
  }

  .lesson_box:nth-child(3n) {
    margin-right: 0 ;
  }

  .lesson_table_wrapper {
    margin: 56px 0 ;
  }

  .lesson_box_text {
    font-size: 18px ;
  }
}

/* 4分割レイアウト */
@media screen and (min-width: 1200px) {
  .lesson_box {
    max-width: calc( (100% - (40px * 3)) / 4 ) ;
    margin-right: 40px ;
  }

  .lesson_box:nth-child(2n) {
    margin-right: 40px ;
  }

  .lesson_box:nth-child(3n) {
    margin-right: 40px ;
  }

  .lesson_box:nth-child(4n) {
    margin-right: 0 ;
  }
}
/* 
/
/
///// 受講者名（管理者側のみ） /////
/
/
*/
.participant_name_box {
  width: 100% ;
  margin: 24px 0 16px ;
  padding: 14px ;
  display: flex ;
  border-radius: 8px ;
  background: #FFF ;
}

.participant_name_title,
.participant_name_text {
  font-size: 14px ;
  font-weight: 600 ;
}

.participant_name_title {
  position: relative ;
  padding-right: 24px ;
  height: auto ;
}

.participant_name_text {
  padding-left: 24px ;
}

.participant_name_title::before {
  content: "" ;
  position: absolute ;
  top: 0 ;
  right: 0 ;
  width: 4px ;
  height: 100% ;
  border-radius: 2px;
  background-color: var(--primary-300);
}

@media screen and (min-width: 992px) {
  .participant_name_box {
    padding: 24px ;
  }

  .participant_name_title,
  .participant_name_text {
    font-size: 20px ;
  }
}
/* モジュール画面 */
/* 
/
/
///// モジュールタグ選択 /////
/
*/
.module_tag_select_section {
  width: 100% ;
  margin: 56px 0 ;
}
/*
///// 検索条件 /////
/
/
*/
.module_search_section {
  width: 100% ;
}

.module_search_wrapper {
  width: 100% ;
  margin: 56px 0 ;
}

.search_filter_contents {
  width: 100% ;
}

.search_filter_wrapper {
  width: 100% ;
  display: flex ;
  flex-direction: column ;
  justify-content: center;
}

.search_filter_box {
  margin-bottom: 12px ;
  position: relative ;
}
.search_filter_box:last-child {
  margin-bottom: 0 ;
}

.search_filter_title {
  margin-bottom: 4px ;
  font-size: 12px ;
  font-weight: 600 ;
  color: var(--primary-300);
}

.clear_title {
  opacity: 0 ;
}

.search_input_box {
  display: flex ;
  align-items: center ;
  padding: 11px ;
  border-radius: 6px ;
  border: solid 2px var(--search) ;
  background-color: #FFF ;
}

.search_input_icon {
  margin-right: 12px ;
  font-size: 16px ;
  color: var(--search);
}

.search_input_text {
  padding: 2px 0 ;
  border: none ;
  font-size: 15px ;
  font-weight: 400 ;
  background: none ;
  outline: none;
  user-select: none ;
  /* width: 全体幅 - (検索アイコン + 余白) */
  width: calc(100% - (16.85px + 12px)) ;
}

.search_input_text::placeholder {
  color: var(--search);
}

.search_input_text.level_text {
  color: var(--search) ;
}

.search_level_all {
  display: none ;
  position: absolute ;
  top: 80px ;
  left: 0 ;
  width: 100% ;
  z-index: 999 ;
  animation: levelList 0.5s ease-in-out ;
}

.search_level_all_wrapper {
  padding: 24px 24px 18px 24px ; /* padding-bottom : (24px - 6px) ; */
  min-width: 680px ;
  width: 100% ;
  height: 100% ;
  background-color: #FFF ;
  border-radius: 6px ;
  box-shadow:inset 0 3 0 6px #cccccc40 ;
  display: flex ;
  flex-wrap: wrap ;
  /* animation: levelList 0.5s ease-in-out ; */
}

@keyframes levelList {
  0% {
    opacity: 0 ;
  }
  
  99.9%,
  to {
    opacity: 1 ;
  }
}

.search_level_all_wrapper > .search_level {
  margin-bottom: 6px ;
}

/* level */
.search_level_checked {
  /* width: 全体幅 - (検索アイコン + 余白 + [>]アイコン) */
  width: calc(100% - (16.85px + 12px + 15.63px)) ;
  height: 28px ;
}

.search_level_checked_wrapper {
  width: 100% ;
  height: 100% ;
  display: flex ;
  flex-direction: row ;
  overflow-x: scroll;
  overflow: scroll ;
}

.search_level_checked_wrapper::-webkit-scrollbar {
  display:none ;
}

.search_level {
  padding: 6px 12px ;
  border-radius: 4px ;
  margin-right: 8px ;
  background-color: var(--search);
}

.search_level_tag {
  display: none ;
}

.search_level:has(.search_level_tag:checked),
.level_checked {
  background-color: var(--primary-500);
}

.search_level_tag:checked ~ label > .level_tag,
.level_checked > label > .level_tag {
  color: var(--primary-300) ;
}

.search_level_result {
  margin-bottom: 8px ;
  background-color: var(--primary-500);
}

.search_level_result > .level_tag {
  color: var(--primary-300) ;
}



.level_tag {
  margin: 0 ;
  display: flex ;
  flex-direction: row ;
  align-items: baseline ;
  font-size: 10px ;
  font-weight: 600 ;
  color: #FFF ;
  white-space: nowrap ;
}

.level_tag > i {
  margin-right: 4px ;
}

.size_change_level_tag {
  font-size: 16px;
}

/* level_togle */
#level_about_button {
  display: none ;
}

#level_about_button:checked ~ .search_level_all {
  display: block ;
}

.search_about_button {
  display: flex ;
  flex-direction: row ;
  align-items: center ;
  justify-content: space-between ;
  width: 100% ;
}

/* icon [>] */
.icon_arrow {
  display: inline-block ;
  vertical-align: middle ;
  color: var(--search) ;
  line-height: 1 ;
  position: relative ;
  width: 0.65em ;
  height: 0.65em ;
  margin-right: 2px ;
  transform-origin: 50% 50% ;
  transform : rotate(-45deg) ;
  transition: transform 0.3s ease;
}

.icon_arrow::before,
.icon_arrow::after {
  content: '';
  position: absolute;
  background: var(--search) ;
  border-radius: 0.18em;
}

.icon_arrow::before {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.18em;
}

.icon_arrow::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.18em;
}

.search_input_tag {
  display: none ;
}

.search_tag_public,
.search_tag_private,
.search_tag_delete {
  display: flex ;
  flex-direction: row ;
  align-items: center ;
  border-radius: 14px ;
  padding: 6px 12px ;
  font-weight: 600 ;
  font-size: 10px ;
  color: #FFF ;
  background-color: var(--primary-900) ;
  margin-right: 12px ;
  white-space: nowrap ;
}

.search_tag_delete {
  margin-right: 0 ;
}

.search_tag_public > i,
.search_tag_private > i,
.search_tag_delete > i {
  margin-right: 4px ;
}

#public_check_1:checked ~ .search_tag_public {
  background-color: var(--public) ;
}
#public_check_0:checked ~ .search_tag_private {
  background-color: var(--private);
}
#public_check_2:checked ~ .search_tag_delete {
  background-color: var(--delete);
}

.clear_btn {
  padding: 14px 0 ;
  border: none ;
  border-radius: 6px ;
  font-size: 15px;
  font-weight: 600 ;
  background-color: var(--primary-500);
  color: var(--primary-300);
  width: 100% ;
  transition: all 0.2s ease-in ;
}

.clear_btn:hover {
  background-color: #f4982e52 ;
}

@media screen and (min-width: 992px) {
  .search_filter_box {
    margin-bottom: 0 ;
    margin-right: 16px ;
  }

  .search_filter_box:last-child {
    margin-right: 0 ;
  }

  .module_search_title_box > .section_title_box_wrapper {
    max-width: 100% ;
  }

  .module_search_title_box > .section_title_box_wrapper > .section_title {
    text-align: left ;
    padding-left: 18px ;
  }

  .search_filter_wrapper {
    flex-direction: row ;
    justify-content: left ;
    width: 100% ;
  }

  .clear_btn {
    padding: 14px 32px ;
  }

  /* 検索bar 幅設定 */
  .search_filter_week_box {
    max-width: 232px ;
  }
  .search_filter_day_box {
    max-width: 232px ;
  }
  .search_filter_public_box {
    max-width: 232px ;
  }
  .search_filter_clear_box {
    max-width: 120px ;
  }
  
  .search_input_box {
    width: 100% ;
  }
  .search_input_text {
    /* 幅(100% - icon幅 - 余白) */
    width: calc(100% - 16.85px - 12px) ;
  }
  .search_level_checked {
    width: 144px ;
  }
}

@media screen and (min-width: 1200px) {
  .search_level_checked {
    width: 185px ;
  }
}
@media screen and (min-width: 1400px) {
  .search_level_checked {
    width: 365px ;
  }
}
/* 
/
/
///// 検索結果 /////
/
/
*/
.module_filter_section {
  width: 100% ;
  height: 100% ;
}

.module_filter_wrapper {
  width: 100% ;
  height: 100% ;
}

/* Weekタイトル */
.module_week_box {
  height: auto ;
}

.module_week_title_box > .week_title_box_wrapper {
  display: flex ;
  justify-content: space-between ;
  padding: 0 0px ;
  max-width: fit-content ;
  align-items: center ;
}

.module_week_title {
  min-width: 160px ;
  text-align: left ;
  margin-right: 16px ;
  font-size: 16px;
}

.module_week_title > span {
  margin-right: 8px;
  color: var(--primary-300);
}

/* icon */
.module_week_icon_box {
  display: flex ;
  align-items: center ;
  padding-bottom: 16px ;
  height: calc( 28px + 16px ) ;
}

/* パブリックアイコン */
.module_week_delete,
.module_week_public,
.module_week_private,
.module_week_create {
  padding: 6px 16px ;
  font-size: 12px ;
  font-weight: 600 ;
  text-align: center ;
  text-decoration: none ;
  white-space: nowrap ;
  border-radius: 4px ;
}

.module_week_delete {
  color: var(--delete) ;
  background-color: var(--delete-op) ;
}

.module_week_public {
  color: var(--public) ;
  background-color: var(--public-op) ;
}

.module_week_private {
  color: var(--private) ;
  background-color: var(--private-op) ;
}

.module_week_create {
  color: var(--create) ;
  background-color: var(--create-op) ;
}

/* 編集アイコン */
.module_week_edit {
  margin-left: 12px ;
  width: 28px ; /* 14px(中身) + 7px(余白) * 2 */
  height: 28px ;
}

.module_week_edit_box {
  display: block ;
  width: 100% ;
  height: 100% ;
  padding: 7px ;
  border-radius: 4px ;
  background-color: var(--search) ;
  color: #FFF ;
  text-decoration: none ;
}

.module_week_edit_box > i {
  width: 14px ;
  height: 14px ;
  font-size: 12px ;
  text-align: center ;
}

.module_week_edit_box:hover {
  background-color: #b2b4b9 ;
  color: #FFF ;
}

/* 選択済コースタグ */
.module_level_box {
  width: 100% ;
}

.module_level_wrapper {
  width: fit-content ;
  min-width: 30%;
  max-width: 80% ;
  display: flex ;
  flex-direction: row ;
  flex-wrap: wrap ;
  margin-bottom: 24px ;
  position: relative ;
}

.module_level_wrapper::before {
  content: "" ;
  position: absolute ;
  bottom: -8px ;
  left: 0 ;
  width: 100% ;
  height: 4px ;
  border-radius: 2px ;
  background-color: var(--primary-300) ;
}

/* day */
.module_day_box > .day_box > .day_box_wrapper > .day_title_box {
  display: flex ;
  justify-content: space-between ;
  height: 100% ;
}

/* 新規week */
.week_new_box > .section_title_box_wrapper {
  display: flex ;
  align-items: center ;
  background-color: #FFF ;
  padding: 16px 32px ;
  border-radius: 4px ;
  text-decoration: none ;
  transition: all .3s ease-in-out;
}

.week_new_box > .section_title_box_wrapper:hover {
  box-shadow: rgba(190, 161, 125, 0.24) 0px 7px 29px 0px;
  transition: all 0.2s ease-in-out;
}

.week_new_box > .section_title_box_wrapper::before {
  display: none ;
}

.week_new_box > .section_title_box_wrapper > .module_week_title,
.week_new_box > .section_title_box_wrapper > .module_week_icon_box {
  padding: 0 ;
}

.week_new_box > .section_title_box_wrapper > .module_week_title {
  text-decoration: none ;
  color: #000 ;
}

@media screen and (min-width: 992px) {
  .module_week_title_box > .section_title_box_wrapper {
    max-width: fit-content ;
  }

  .week_new_box > .section_title_box_wrapper {
    max-width: 100% ;
  }
}

.contract_input_tag {
    display: none;
}

.search_tag_contract,
.contract_tag_delete {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 14px;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.search_tag_contract {
    background-color: var(--public) ;
}

.contract_tag_delete {
    background-color: var(--delete) ;
}

/* チェックが外れているときのスタイル */
.contract_input_tag:not(:checked) + .search_tag_contract,
.contract_input_tag:not(:checked) + .contract_tag_delete {
    background-color: var(--primary-900); /* 背景色 */
    color: #fff; /* 文字色 */
}

.form-control,
.form-select {
    height: 38px; /* 高さを揃える */
    padding: 6px 12px; /* パディングを揃える */
    font-size: 16px; /* フォントサイズを揃える */
    line-height: 24px; /* 行の高さを揃える */
    border-radius: 6px; /* 角の丸みを揃える */
}

.memo_size {
  height: 256px;
}

.table th, 
.table td {
    vertical-align: unset; /* vertical-alignプロパティを無効化 */
}

#loading-overlay::after {
  content: "";
  display: block;
  margin: 20px auto;
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top: 5px solid #d33;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.note-content {
    white-space: pre-wrap;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 6px;
}

/* PDF出力制御 */
@page {
  size: A4;
  margin: 15mm;
}
@media print {
  html, body {
    -webkit-print-color-adjust: exact; /* 背景/色の補正 */
    print-color-adjust: exact;
  }

  /* 行間・折返し・禁則の“にじみ”を抑える */
  body {
    line-height: 1.4;
    letter-spacing: 0;
    word-spacing: 0;
    text-rendering: optimizeLegibility; 
  }

  /* 禁則・折返しの制御（英語/日本語混在時のズレ対策） */
  p, li {
    hyphens: none;
    overflow-wrap: break-word;
    widows: 2; orphans: 2;
  }

  /* 表や段落のページ分割を明示 */
  .section, .block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* --- 印刷時の枠線を明示的に有効化 --- */
@media print {
  /* 差分テーブル：セル全面に罫線を明示 */
  .diff-wrapper.diff {
    border: 1px solid #000 !important;
    border-collapse: collapse !important;
    background: #fff !important;
  }
  .diff-wrapper.diff td,
  .diff-wrapper.diff th {
    border: 1px solid #000 !important;   /* 強制出力 */
    padding: 2px 4px;                     /* 印刷時の視認性を少し上げる */
    background: #fff !important;
  }

  /* タイトルブロックなどの枠を確実に出したい場合 */
  .title_block {
    border: 1px solid #000 !important;
    background: #fff !important;
  }

  /* 本文全体を囲む場合（任意／Blade側で .print-box を付与） */
  .print-box {
    border: 1px solid #000 !important;
    padding: 8mm !important;
    background: #fff !important;
  }
  
  .section, .block {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}