/* application.scss */
/* Zen Maru Gothic */
@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/zen-maru-gothic-v19-japanese_latin-regular-58395f895293b2782f9ec7b10d702562b3b14e5349a13849dfafb8cfdb8f9e56.woff2) format("woff2");
}

@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/zen-maru-gothic-v19-japanese_latin-500-5b116504686f730805926de92e185ec8cf79b681d66bdaff704aabe827937455.woff2) format("woff2");
}

@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/zen-maru-gothic-v19-japanese_latin-700-05b928e9fef5eea04626a399a49bf7d5f7ca8ff91e245883088d572b13800a49.woff2) format("woff2");
}

/* Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/roboto-v49-latin-regular-e44c11f4834bdd4d6b6da7b8ee5eaebc8acb41250cd6bce5cc82ea8262140eaa.woff2) format("woff2");
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/roboto-v49-latin-700-2bef6bc763635f137e6b49fc7d01d0d1f74e55413d92a21ce76c9c92c3457150.woff2) format("woff2");
}

@font-face {
  font-family: 'slick';
  src: url(/assets/slick-0af25e4193a0c3240553ca2abc85cea9167c0601bc5e3c0a417bca5f7a6e3870.woff2) format("woff2"), url(/assets/slick-26726bac4060abb1226e6ceebc1336e84930fe7a7af1b3895a109d067f5b5dcc.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 670px) {
  /* line 1, app/assets/stylesheets/shared/_video.scss */
  .video_modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
  }
}

@media (max-width: 670px) {
  /* line 1, app/assets/stylesheets/shared/_video.scss */
  .video_modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
  }
}

@media (min-width: 670px) {
  /* line 25, app/assets/stylesheets/shared/_video.scss */
  .video_modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 10px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    box-sizing: border-box;
  }
}

@media (max-width: 670px) {
  /* line 25, app/assets/stylesheets/shared/_video.scss */
  .video_modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* line 52, app/assets/stylesheets/shared/_video.scss */
.instagram-video {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 60, app/assets/stylesheets/shared/_video.scss */
.instagram-video iframe {
  width: 100vw;
  height: 100vh;
  border: none;
  aspect-ratio: auto;
}

/* line 67, app/assets/stylesheets/shared/_video.scss */
.video_modal .close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  border-radius: 4px;
  line-height: 1;
}

/* ALL Document CSS */
@media (min-width: 670px) {
  /* line 11, app/assets/stylesheets/application.scss */
  html,
body {
    width: 100%;
    /*max-width: 100vw;*/
    /*margin: 0;*/
    margin: 0 calc(50% - 335px);
    padding: 0;
    overflow-x: hidden;
  }
}

@media (max-width: 670px) {
  /* line 25, app/assets/stylesheets/application.scss */
  html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
}

/* line 36, app/assets/stylesheets/application.scss */
html {
  scroll-padding-top: 80px;
}

/* line 40, app/assets/stylesheets/application.scss */
.scroll_section {
  scroll-padding-top: 50px;
}

/* line 44, app/assets/stylesheets/application.scss */
body {
  margin: 0;
  /* font-family: "Noto Sans JP"; */
  /*max-width: 100%;*/
  /*max-width: 100vw;*/
  font-family: 'Roboto', sans-serif;
  /*-webkit-font-smoothing: antialiased;
  /* Chrome, Safari */
  /*-moz-osx-font-smoothing: grayscale;
  /* Firefox on macOS */
  font-size: 15px;
  overflow-x: hidden;
  color: #666666;
  background: #F2F2F2;
}

/* line 70, app/assets/stylesheets/application.scss */
body.mobile {
  font-family: 'Zen Maru Gothic', sans-serif;
  /*max-width: 490px;
  max-width: 100%;*/
  /*max-width: 100vw;*/
  /*width: 100%;*/
  /*width: 422px; */
  margin: 0 auto;
}

/* line 85, app/assets/stylesheets/application.scss */
.bg_white body {
  background: #fff;
}

/* line 89, app/assets/stylesheets/application.scss */
.centered-text {
  text-align: center !important;
}

/* line 93, app/assets/stylesheets/application.scss */
.font-med {
  font-size: 20px;
}

/* line 97, app/assets/stylesheets/application.scss */
.font-small-med {
  font-size: 16;
}

/* line 101, app/assets/stylesheets/application.scss */
.bold-text {
  font-weight: bold;
}

/* line 105, app/assets/stylesheets/application.scss */
.dark-blue {
  color: #0058aa;
}

/* line 109, app/assets/stylesheets/application.scss */
.top-margin-20 {
  margin-top: 20px;
}

/* line 113, app/assets/stylesheets/application.scss */
.top-margin-40 {
  margin-top: 40px;
}

/* line 117, app/assets/stylesheets/application.scss */
.bottom-margin-40 {
  margin-bottom: 40px;
}

/* line 121, app/assets/stylesheets/application.scss */
.container {
  padding: 74px 0 0;
  box-sizing: border-box;
  background: #fff;
  max-width: 100vw;
  width: 670px;
}

@media (max-width: 670px) {
  /* line 121, app/assets/stylesheets/application.scss */
  .container {
    width: 100%;
    padding: 63px 0 0;
  }
}

/* line 137, app/assets/stylesheets/application.scss */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  max-width: 100vw;
  width: 100%;
  padding-bottom: 50px;
  width: 670px;
}

@media (max-width: 670px) {
  /* line 137, app/assets/stylesheets/application.scss */
  .section {
    width: 100%;
  }
}

/* line 153, app/assets/stylesheets/application.scss */
.tab_input {
  display: none;
}

/* line 157, app/assets/stylesheets/application.scss */
.error_message {
  color: red;
}

/* line 161, app/assets/stylesheets/application.scss */
.edit-link {
  color: #00B4DE;
  /* Customize the color */
  text-decoration: underline;
}

/* line 168, app/assets/stylesheets/application.scss */
.edit-link:hover {
  color: #2A709B;
  /* Customize hover color */
}

/* line 182, app/assets/stylesheets/application.scss */
.bg_white {
  background: #fff;
}

/* line 186, app/assets/stylesheets/application.scss */
.bg_blue {
  background: #00B4DE;
}

/* line 190, app/assets/stylesheets/application.scss */
.flash_wrapper {
  text-align: center;
  color: #666;
  position: absolute;
  top: 64px;
  z-index: 9;
  max-width: 670px;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
}

/* line 201, app/assets/stylesheets/application.scss */
.flash {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}

/* line 207, app/assets/stylesheets/application.scss */
.flash_notice {
  background-color: #d4edda;
  color: #155724;
}

/* line 212, app/assets/stylesheets/application.scss */
.flash_alert {
  background-color: #f8d7da;
  color: #721c24;
}

/* line 217, app/assets/stylesheets/application.scss */
.flash_error {
  background-color: #f8d7da;
  color: #721c24;
}

/* line 222, app/assets/stylesheets/application.scss */
.flash {
  transition: opacity 0.5s ease;
}

/* HEADER SCSS */
@media (max-width: 670px) {
  /* line 230, app/assets/stylesheets/application.scss */
  header {
    font-family: 'Roboto', sans-serif;
    /*padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #fff;*/
    box-sizing: border-box;
    background: #00B4DE;
    position: fixed;
    top: 0;
    /*left: 50%;
    transform: translate(-50%, 0);
    */
    z-index: 10;
    width: 100%;
    /*max-width: inherit;
    /*max-width: 100%;*/
    max-width: 100%;
  }
}

@media (min-width: 670px) {
  /* line 251, app/assets/stylesheets/application.scss */
  header {
    font-family: 'Roboto', sans-serif;
    /*padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #fff;*/
    box-sizing: border-box;
    background: #00B4DE;
    position: fixed;
    top: 0;
    /*left: 50%;
    transform: translate(-50%, 0);
    */
    z-index: 10;
    width: 100%;
    /*max-width: inherit;*/
    /*max-width: 100%;*/
    max-width: 670px;
  }
}

/* line 272, app/assets/stylesheets/application.scss */
.header container {
  width: 75%;
}

/* line 276, app/assets/stylesheets/application.scss */
.header_menu_container {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* line 282, app/assets/stylesheets/application.scss */
.header_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  max-height: 77px;
  max-width: 80%;
  margin: 0 auto;
}

@media (max-width: 670px) {
  /* line 282, app/assets/stylesheets/application.scss */
  .header_wrapper {
    margin: 0 10px;
    max-width: 90%;
  }
}

/* line 297, app/assets/stylesheets/application.scss */
.header_logo_wrapper {
  /*width: 20%;*/
}

/* line 302, app/assets/stylesheets/application.scss */
.header_menu_image_wrapper {
  max-width: 70px;
}

/* line 306, app/assets/stylesheets/application.scss */
.header_menu_image_wrapper img {
  max-width: 100%;
  width: 30%;
}

/* line 311, app/assets/stylesheets/application.scss */
.header_logo_wrapper img {
  max-height: 100%;
  width: 100%;
  height: 100%;
}

@media (max-width: 670px) {
  /* line 311, app/assets/stylesheets/application.scss */
  .header_logo_wrapper img {
    width: 100px;
    margin-right: 10px;
  }
}

/* line 322, app/assets/stylesheets/application.scss */
.header_list_wrapper {
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
}

/* line 330, app/assets/stylesheets/application.scss */
.header_list_logout_wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 336, app/assets/stylesheets/application.scss */
.header_list_keep_wrapper a {
  text-decoration: none;
  color: #666;
  box-sizing: border-box;
  border-radius: 13px;
}

/* line 343, app/assets/stylesheets/application.scss */
.header_admin_logout_wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* line 349, app/assets/stylesheets/application.scss */
.header_admin_logout_wrapper a {
  text-decoration: none;
  color: #666;
  position: relative;
  outline: none;
}

/* line 356, app/assets/stylesheets/application.scss */
.header_login_button_group {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}

/* line 363, app/assets/stylesheets/application.scss */
.header_login_button_group li {
  text-align: center;
}

/* line 367, app/assets/stylesheets/application.scss */
.keijiban_link_button_group {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 18px;
}

/* line 375, app/assets/stylesheets/application.scss */
.keijiban_link_button_group li {
  text-align: center;
}

/* line 379, app/assets/stylesheets/application.scss */
.keijiban_link_button {
  text-decoration: none;
}

/* line 383, app/assets/stylesheets/application.scss */
.custom_login_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  margin-right: 10px;
  max-height: 50%;
}

@media (max-width: 670px) {
  /* line 383, app/assets/stylesheets/application.scss */
  .custom_login_button {
    width: 40px;
  }
}

/* line 397, app/assets/stylesheets/application.scss */
.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* line 403, app/assets/stylesheets/application.scss */
.icon-button img {
  margin-top: 5px;
  max-height: 30px;
  margin-bottom: 5px;
}

/* line 409, app/assets/stylesheets/application.scss */
.login_text {
  color: white;
  font-size: 10px;
}

/* line 414, app/assets/stylesheets/application.scss */
.header_list_chat_wrapper a,
.header_list_notification_wrapper a {
  display: flex;
  /*flex-direction: row;*/
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  position: relative;
}

/* line 426, app/assets/stylesheets/application.scss */
.header_list_chat_wrapper,
.header_list_notification_wrapper,
.header_list_keep_wrapper {
  margin-right: 8px;
}

/* line 432, app/assets/stylesheets/application.scss */
.header_list_chat_wrapper:last-child {
  margin-right: 0;
}

/* line 436, app/assets/stylesheets/application.scss */
.header_list_keep_number {
  margin: 0;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/* line 445, app/assets/stylesheets/application.scss */
.header_list_menu_inner:hover {
  cursor: pointer;
}

/* line 449, app/assets/stylesheets/application.scss */
.header_list_img_wrapper {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 670px) {
  /* line 449, app/assets/stylesheets/application.scss */
  .header_list_img_wrapper {
    width: 43px;
    margin-top: 10px;
  }
}

/* line 461, app/assets/stylesheets/application.scss */
.header_list_img_wrapper img {
  max-width: 25px;
  max-height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 670px) {
  /* line 461, app/assets/stylesheets/application.scss */
  .header_list_img_wrapper img {
    max-width: 35px;
    max-height: 35px;
  }
}

/* line 477, app/assets/stylesheets/application.scss */
.header_list_icon_wrapper {
  margin: 0 0 0 auto;
  height: 45px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 90;
  border-left: 1px solid #fff;
  padding-left: 10px;
}

/* line 489, app/assets/stylesheets/application.scss */
.header_list_icon_wrapper span,
.header_list_icon_wrapper span:before,
.header_list_icon_wrapper span:after {
  content: '';
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 3px;
  background-color: #fff;
  position: absolute;
}

/* line 501, app/assets/stylesheets/application.scss */
.header_list_icon_wrapper span::before {
  bottom: 7px;
}

/* line 505, app/assets/stylesheets/application.scss */
.header_list_icon_wrapper span::after {
  top: 7px;
}

/* line 509, app/assets/stylesheets/application.scss */
.header_list_wrapper li {
  text-align: center;
  list-style: none;
  margin-bottom: 10px;
}

/* line 515, app/assets/stylesheets/application.scss */
.header_list_txt_wrapper {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}

/* line 522, app/assets/stylesheets/application.scss */
.header_menu_wrapper {
  background: #fff;
  /*border-radius: 15px;*/
  width: 60%;
  position: absolute;
  top: 0;
  right: -13%;
  text-align: left;
  /*padding: 20px;
  */
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: none;
  z-index: 10;
}

@media (max-width: 670px) {
  /* line 542, app/assets/stylesheets/application.scss */
  .header_menu_wrapper {
    top: -17%;
    right: -6%;
  }
}

/* line 548, app/assets/stylesheets/application.scss */
.header_menu_midashi_wrapper {
  position: relative;
  /* Make this the positioning context */
}

/* line 553, app/assets/stylesheets/application.scss */
.header_menu_midashi_close {
  width: 50px;
  height: 50px;
  position: absolute;
  /* Absolutely position the close button inside */
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* Make sure it stays above */
}

@media (max-width: 670px) {
  /* line 553, app/assets/stylesheets/application.scss */
  .header_menu_midashi_close {
    top: 10px;
  }
}

/* line 571, app/assets/stylesheets/application.scss */
.header_close_btn {
  width: 100%;
  height: auto;
}

/* line 576, app/assets/stylesheets/application.scss */
.header_menu_midashi_close:hover {
  cursor: pointer;
}

/* line 580, app/assets/stylesheets/application.scss */
.header_menu_midashi_close span:last-child {
  font-size: 25px;
  font-weight: bold;
}

/* Style the menu list */
/* line 587, app/assets/stylesheets/application.scss */
.popup_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 10%;
}

/* Style each menu item */
/* line 595, app/assets/stylesheets/application.scss */
.popup_menu_list li {
  border-bottom: 1px solid lightblue;
  margin-left: 2%;
  /* Light blue separator */
}

/* line 601, app/assets/stylesheets/application.scss */
.popup_menu_list li:last-child {
  border-bottom: none;
  /* Remove border from last item */
}

/* Style the menu links */
/* line 607, app/assets/stylesheets/application.scss */
.popup_menu_link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
  padding: 12px;
  font-size: 16px;
}

/* Style the bullet points */
/* line 617, app/assets/stylesheets/application.scss */
.popup_menu_bullet {
  width: 15px;
  height: 15px;
  background-color: orange;
  border-radius: 50%;
  margin-right: 10px;
}

/* line 625, app/assets/stylesheets/application.scss */
.header_menu_item_wrapper {
  font-size: 0;
  background: rgba(0, 180, 222, 0.12);
  border-radius: 15px;
  border: 1px solid #fff;
  box-sizing: border-box;
  margin-top: 10px;
}

/* line 634, app/assets/stylesheets/application.scss */
.header_menu_item {
  display: inline-block;
  text-align: center;
  width: 50%;
  box-sizing: border-box;
  border-bottom: 1px solid #fff;
  vertical-align: middle;
}

/* line 643, app/assets/stylesheets/application.scss */
.header_menu_item_comming_soon {
  position: relative;
}

/* line 647, app/assets/stylesheets/application.scss */
.header_comming_soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 15px;
}

/* line 658, app/assets/stylesheets/application.scss */
.header_menu_item_comming_soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 15px 0 0;
}

/* line 669, app/assets/stylesheets/application.scss */
.header_menu_item:nth-child(2n) {
  border-left: 1px solid #fff;
}

/* line 673, app/assets/stylesheets/application.scss */
.header_menu_item:nth-last-child(1),
.header_menu_item:nth-last-child(2) {
  border-bottom: none;
}

/* line 678, app/assets/stylesheets/application.scss */
.header_menu_item_txt {
  margin: 5px 0 0;
  font-size: 13px;
}

/* line 683, app/assets/stylesheets/application.scss */
.header_menu_item_txt span {
  display: block;
}

/* line 687, app/assets/stylesheets/application.scss */
.header_menu_item a {
  text-decoration: none;
  color: #666;
  padding: 15px 0;
  display: inline-block;
  width: 100%;
}

/* line 695, app/assets/stylesheets/application.scss */
.header_menu_item_img_wrapper {
  height: 30px;
}

/* line 699, app/assets/stylesheets/application.scss */
.header_menu_item_img_wrapper img {
  height: 100%;
}

/* line 703, app/assets/stylesheets/application.scss */
.header_menu_cta_wrapper {
  width: 100%;
  height: 130px;
  margin-top: 20px;
}

/* line 709, app/assets/stylesheets/application.scss */
.header_menu_cta_wrapper a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 715, app/assets/stylesheets/application.scss */
.header_menu_list_wrapper {
  background: rgba(0, 180, 222, 0.12);
  border-radius: 15px;
  margin-top: 20px;
  box-sizing: border-box;
}

/* line 722, app/assets/stylesheets/application.scss */
.header_menu_list_item {
  position: relative;
}

/* line 726, app/assets/stylesheets/application.scss */
.header_menu_list_item:nth-child(2) {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

/* line 731, app/assets/stylesheets/application.scss */
.header_menu_list_item a {
  padding: 10px 0 10px 10px;
  display: inline-block;
  text-decoration: none;
  color: #666;
  width: 100%;
  box-sizing: border-box;
}

/* line 740, app/assets/stylesheets/application.scss */
.header_menu_list_item::before,
.header_menu_list_item::after {
  content: "";
  position: absolute;
  right: 20px;
  border-top: 4px solid #00B4DE;
  width: 10px;
}

/* line 749, app/assets/stylesheets/application.scss */
.header_menu_list_item::before {
  top: 45%;
  transform: rotate(45deg);
}

/* line 754, app/assets/stylesheets/application.scss */
.header_menu_list_item::after {
  top: 55%;
  transform: rotate(-45deg);
}

/*.header_notification_wrapper {}*/
/* line 761, app/assets/stylesheets/application.scss */
.header_notification_wrapper::before {
  content: "";
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  height: 100%;
}

/* line 770, app/assets/stylesheets/application.scss */
.header_notification_wrapper {
  text-align: left;
  position: absolute;
  top: 55px;
  right: 0;
  background: #fff;
  z-index: 11;
  border: 1px solid #bdbdbd;
  border-radius: 15px;
  width: 300px;
  display: none;
}

/* line 783, app/assets/stylesheets/application.scss */
.header_notification_inner::before {
  content: "";
  position: absolute;
  top: -30px;
  /*right: 130px;*/
  right: 150px;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #bdbdbd;
}

/* line 794, app/assets/stylesheets/application.scss */
.header_notification_inner::after {
  content: "";
  position: absolute;
  top: -25px;
  /*right: 132px;*/
  right: 152px;
  margin-left: -15px;
  border: 13px solid transparent;
  border-bottom: 12px solid #fff;
}

/* line 805, app/assets/stylesheets/application.scss */
.header_notification_item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* line 811, app/assets/stylesheets/application.scss */
.header_user_notification_inner.header_notification_inner::before {
  /*right: 99px;*/
  /*right: 178px;*/
  right: 128px;
}

/* line 817, app/assets/stylesheets/application.scss */
.header_user_notification_inner.header_notification_inner::after {
  /*right: 101px;*/
  /*right: 180px;*/
  right: 130px;
}

/* line 823, app/assets/stylesheets/application.scss */
.header_notification_title {
  margin: 0;
  font-weight: bold;
  /*border-bottom: 5px solid #00B4DE;*/
  padding: 10px 20px 10px;
  flex: 7;
}

/* line 831, app/assets/stylesheets/application.scss */
.header_notification_list_wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

/* line 838, app/assets/stylesheets/application.scss */
.header_notification_list_wrapper li {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
}

/* line 845, app/assets/stylesheets/application.scss */
.header_notification_list_wrapper li a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: row;
}

/* line 852, app/assets/stylesheets/application.scss */
.header_notification_img_wrapper {
  width: 10%;
  display: flex;
}

/* line 857, app/assets/stylesheets/application.scss */
.header_notification_img_wrapper img {
  width: 100%;
}

/* line 861, app/assets/stylesheets/application.scss */
.header_notification_right_wrapper {
  width: 85%;
  margin-left: 5%;
}

/* line 866, app/assets/stylesheets/application.scss */
.header_notification_right_classification_wrapper {
  margin: 0;
  font-size: 13px;
  color: #bdbdbd;
}

/* line 872, app/assets/stylesheets/application.scss */
.header_notification_right_message_wrapper {
  margin: 0;
}

/* line 876, app/assets/stylesheets/application.scss */
.header_notification_right_date_wrapper {
  margin: 0;
  font-size: 13px;
  color: #bdbdbd;
}

/* line 882, app/assets/stylesheets/application.scss */
.header_notification_list_centering_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* line 890, app/assets/stylesheets/application.scss */
.header_notification_all_link_wrapper a {
  text-align: center;
  padding: 15px 20px;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  /*color: #00B4DE;*/
  color: white;
  background-color: #00B4DE;
  border-radius: 15px;
}

/* line 902, app/assets/stylesheets/application.scss */
.header_notification_title_wrapper {
  width: 240px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Aligns the title and button vertically */
  padding: 10px 20px;
  border-bottom: 5px solid #00B4DE;
  margin-left: 10px;
}

/* line 914, app/assets/stylesheets/application.scss */
.close_notification {
  /*position: absolute;
  top: 10px;
  right: 10px;*/
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #000;
  flex: 1;
}

/* line 926, app/assets/stylesheets/application.scss */
.close_notification img {
  width: 20px;
  /* Adjust size of your close icon */
  height: 20px;
}

/* line 932, app/assets/stylesheets/application.scss */
.header_list_img_wrapper {
  position: relative;
}

/* line 936, app/assets/stylesheets/application.scss */
.notification-badge {
  position: absolute;
  top: -5px;
  right: 20px;
  min-width: 10px;
  height: 10px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: 2px solid white;
}

/* COMMON SCSS */
/* Pagination styles */
/* line 958, app/assets/stylesheets/application.scss */
.pagination {
  text-align: center;
  margin-top: 20px;
  /*font-family: 'Noto Sans JP', sans-serif;*/
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #333;
}

/* line 966, app/assets/stylesheets/application.scss */
.pagination .page-link {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  color: #007bff;
  text-decoration: none;
}

/* line 976, app/assets/stylesheets/application.scss */
.pagination .page-link:hover {
  background-color: #e9ecef;
  border-color: #007bff;
}

/* line 981, app/assets/stylesheets/application.scss */
.pagination .page-link.current {
  background-color: #007bff;
  color: white;
  pointer-events: none;
}

/* FOOTER SCSS */
/* line 991, app/assets/stylesheets/application.scss */
.top_redirect_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: white;
  background-color: 00B4DE;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

/* line 1003, app/assets/stylesheets/application.scss */
footer {
  background: #00B4DE;
  /*padding: 35px 0 20px;*/
  padding: 0 0 20px;
  max-width: 670px;
}

/* line 1010, app/assets/stylesheets/application.scss */
.footer_wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  width: 90%;
  margin: 0 auto;
}

/* line 1018, app/assets/stylesheets/application.scss */
.footer_link_list {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* line 1024, app/assets/stylesheets/application.scss */
.footer_link_list a {
  color: white;
  text-decoration: none;
  font-size: 12px;
}

/* line 1030, app/assets/stylesheets/application.scss */
.footer_link_list a:not(:last-child)::after {
  content: "\00a0|\00a0";
  color: white;
}

@media (max-width: 670px) {
  /* line 1036, app/assets/stylesheets/application.scss */
  .footer_wrapper {
    width: 95%;
  }
  /* line 1040, app/assets/stylesheets/application.scss */
  .footer_link_list a {
    font-size: 9px;
  }
}

/* line 1045, app/assets/stylesheets/application.scss */
.footer_text {
  font-size: 13px;
  text-align: center;
  margin: 20px 0 0;
  color: #fff;
}

/* COMMON SCSS */
/* APPLICATION MODAL */
/* line 1058, app/assets/stylesheets/application.scss */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

/* line 1073, app/assets/stylesheets/application.scss */
.job_modal {
  position: fixed;
  left: 0;
  width: 100%;
  height: 60%;
  background: rgba(0, 0, 0, 0.5);
  /* Dark overlay */
  backdrop-filter: blur(8px);
  /* Blur effect */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Push to bottom */
  z-index: 1000;
}

/* Fullscreen backdrop with blur effect */
@media (max-width: 670px) {
  /* line 1093, app/assets/stylesheets/application.scss */
  .job_modal {
    padding-top: 70% !important;
  }
}

/* Modal box taking up bottom 50% */
/* line 1102, app/assets/stylesheets/application.scss */
.modal-content {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 20px 20px 0 0;
  /* Rounded top corners */
  border: 2px solid #00B4DE;
  padding: 20px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  animation: slideUp 0.3s ease-out;
  position: relative;
}

/* line 1119, app/assets/stylesheets/application.scss */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Slide-up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Close button (X) */
/* line 1139, app/assets/stylesheets/application.scss */
.close-button {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  color: #766d6d;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* line 1149, app/assets/stylesheets/application.scss */
.close-button:hover {
  color: #f96161;
  /* Turns red on hover */
}

/* Prevent scrolling when modal is open */
/* line 1155, app/assets/stylesheets/application.scss */
.modal-open {
  overflow: hidden;
}

/* Titles */
/* line 1160, app/assets/stylesheets/application.scss */
.modal_title {
  font-size: 16px;
  color: #00B4DE;
  margin-bottom: 10px;
  margin-top: 30px;
}

/* line 1167, app/assets/stylesheets/application.scss */
.modal_subtitle {
  font-size: 12px;
  color: #766d6d;
  margin-bottom: 30px;
}