:root {
  --sub-green: #569ec7; /* Dark Sea Green, RGB: (125, 178, 144) */
  --bg-color: #ffffff; /* rgba(255, 255, 255, 1)  */
  --black: #242424;
  --black-hover: #333333;
  --bg-gray: #E5E5E5;
}

/* General tags */

html {
  scroll-padding-top: 90px;
}

body, #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-color);
}

body {
  font-family: elvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;
  line-height: 1.75rem;
}

h1,
h2,
h3 {
  color: var(--black);
  font-weight: 600;
  line-height: 1.5;
}
h4,
h5,
h6 {
  color: var(--black);
  font-weight: 400;
  line-height: 1.5;
}

@media screen and (max-width: 576px) {
  html{font-size: 62.5%;} /*10px相当*/
  body{
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
  h1,.h1{font-size: 2.4rem;}
  h2,.h2{font-size: 2.2rem;}
  h3,.h3{font-size: 2.0rem;}
  h4,.h4{font-size: 2.0rem;}
  h5,.h5{font-size: 1.8rem;}
  h6,.h6{font-size: 1.6rem;}
  p{font-size: 1.4rem;}
  th{font-size: 1.4rem;}
  td{font-size: 1.4rem;}
}

p {
  color: var(--black);
}

a {
  text-decoration: none;
  color: inherit;
  word-break: break-word;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

p a {
  text-decoration: none;
  color: #166c9d;
}

p a:hover {
  text-decoration: underline;
  color: #166c9d;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0px;
}

input::-webkit-date-and-time-value {
  text-align: left;
}

/* Bootstrap custom */
.text-primary {
  color: tomato !important;
}

.text-blue {
  color: #4682B4;
}

.table-responsive th, .table-responsive-xs th, .table-responsive-sm th, .table-responsive-md th, .table-responsive-lg th, .table-responsive-xl th {
  white-space: nowrap;
}

@media screen and (max-width: 576px) {
  .form-select {
    font-size: inherit;
  }
  .form-floating>.form-control, .form-floating>.form-select {
    height: inherit;
  }
  .form-floating>.form-select {
    padding-top: 1.825rem;
  }
}

.smaller {
  font-size: .75em;
}

.col-24 {
  flex: 0 0 auto;
  width: 20%;
}

@media (min-width: 992px) {
  .col-lg-24 {
    flex: 0 0 auto;
    width: 20%;
  }
}

.bg-pink {
  background-color: rgb(246, 182, 194);
}

.tooltip-inner {
  background-color: lightblue;
  color:black;
}
.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: lightblue !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: lightblue !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: lightblue !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: lightblue !important;
}

.tooltip-lg {
  background-color: lightblue;
  color:black;
  padding: 0.5em;
  margin: 0.5em;
}

.btn-xl {
  text-transform: uppercase;
  padding: 1.3rem 2.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

.text-gray {
  color: silver;
}

.bg-black {
  background-color: #000 !important;
}

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

.rounded-4 {
    border-radius: 20px !important;
}

.rounded-pill {
  border-radius: 5rem;
}


/* Authentication */
.asteriskField {
  display: none;
}

.invalid-feedback p {
  color: #dc3545;
}

legend.form-label {
  font-size: initial;
}

#id_password_helptext, #hint_id_password {
  display: none;
}

#form_create_profile_role #div_id_special .form-check,
#form_create_profile_role #div_id_desires .form-check {
  display: inline-block !important;
  margin-right: 1rem;
}

/* Base */
.navbar-custom {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(255,255,255,0.9);
  border-bottom: 0.5px gray solid;
}

.navbar-custom .navbar-brand {
  color: var(--black);
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
}

.navbar-custom .navbar-brand:focus, .navbar-custom .navbar-brand:hover {
  color: var(--black-hover);
}

.navbar-custom .navbar-nav .nav-item .nav-link {
  color: var(--black);
  text-transform: uppercase;
  font-size: 1.0rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
}

.nav-link {
  color: inherit;
}

.page_setting .nav-pills .nav-link:hover {
  color: inherit;
  background-color: lightgray;
}

.page_setting .nav-pills .nav-link:focus {
  color: lightgray;
}

.page_setting .nav-pills .nav-link.active {
  background-color: black;
}

.page_setting .nav-pills .nav-link.active:hover {
  color: white;
  background-color: gray;
}

.page_setting .nav-pills .nav-link.active:focus {
  color: gray;
}

.nav-notification {
  position: relative;
}

.nav-notification span {
  font-size: 100%;
  position: absolute;
  color: orange;
  top: -5px;
  left: calc(100% - 10px);
  width:  20px;
  height: 20px;
  letter-spacing: 0;
  border-radius: 50%;
}

.navbar-nav > li > .dropdown-menu > .dropdown-item {
  font-size: 0.9rem;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  background-color: gray;
  border-color: gray;
}

@media screen and (max-width: 576px) {
  .navbar-custom .navbar-brand{font-size: 1.6rem;}
  .navbar-custom .navbar-nav .nav-item .nav-link {
    font-size: 1.4rem;
  }
  .navbar-nav > li > .dropdown-menu > .dropdown-item {
    font-size: 1.4rem;
  }
  .dropdown-menu {
    font-size:  1.4rem;
  }
  .form-control, .form-select {
    font-size:  1.4rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  legend.form-label {
    font-size: 1.4rem !important;
  }
  .btn {
    font-size: 1.3rem;
    padding: 0.6rem;
  }
  .toast{font-size:  1.3rem;}
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    left: -3rem;
  }
}

/* Static Page */
/* About */
.about section h2 {
  position: relative;
  padding-bottom: 0.25rem;
  margin-bottom: 1.5rem;
  color: #1e293b;
}
.about section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 3px;
  background-color: #2563eb;
  border-radius: 3px;
}

.about ul.list-group.list-group-flush li {
  border: none;
  background-color: aliceblue;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-weight: 500;
  color: #1e293b;
  box-shadow: 0 4px 8px rgb(37 99 235 / 0.2);
  transition: box-shadow 0.3s ease;
}
.about ul.list-group.list-group-flush li:hover {
  box-shadow: 0 8px 20px rgb(37 99 235 / 0.4);
}

.about  .card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(100 116 139 / 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgb(37 99 235 / 0.4);
}
.about .card-title {
  color: #1e293b;
  font-weight: 600;
}
.about .card-text {
  color: #475569;
}

/* Info */
.company-info-table td:first-child{
  text-align: right;
  padding-right: 3rem;
}
.company-info-table td:2nd-child{
  padding-left: 2rem;
}

.lift:hover {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
.lift {
  -webkit-transition: -webkit-transform 150ms linear;
  transition: -webkit-transform 150ms linear;
  transition: transform 150ms linear;
  transition: transform 150ms linear, -webkit-transform 150ms linear;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.card-faq {
  border-radius: 10px;
}

.card-faq svg {
  position: absolute;
  right: 1rem;
}

.card-faq:hover{
  box-shadow: 0 0.125rem 0.625rem rgb(0 0 0 / 5%);
}

.card-faq:hover .accordion-panel-title>*, .card-faq[aria-expanded=true] .accordion-panel-title>*{
  color: var(--sub-green);
}

.card-faq:hover svg path, .card-faq[aria-expanded=true] svg path {
  fill: var(--sub-green);
}

.card-faq[aria-expanded=true] svg {
  transform: rotateZ(135deg);
}
.card-faq svg {
  transition: transform .5s ease;
}

header.masthead {
  position: relative;
  overflow: hidden;
  height: 30rem;
}

header.masthead .masthead-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: calc(5rem + 36px);
  padding-bottom: 7rem;

  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}

header.masthead .masthead-image01 {
  background-image: url("../img/top_image-01.dde245a8e485.jpg");
}

header.masthead .masthead-image02 {
  background-image: url("../img/top_image-02.f2276a6f627a.jpg");
}

header.masthead .masthead-image03 {
  background-image: url("../img/top_image-03.7bf339fd6317.jpg");
}

header.masthead.masthead-slick .slick-dots {
  bottom: 2rem;
}

header.masthead.masthead-slick .slick-dots li button:before {
  font-size: 10px;
  line-height: 10px;
}

header.masthead .masthead-content {
  z-index: 1;
  position: relative;
}

header.masthead .masthead-content .masthead-heading {
  font-size: 4rem;
  color: white;
  text-shadow:#000 0px 0px 6px;
}

header.masthead .masthead-content .masthead-subheading {
  font-size: 2rem;
  color: white;
  text-shadow:#000 0px 0px 6px;
}

header.masthead .masthead-content .masthead-heading-kana {
  font-size: 1.8rem;
  color: white;
  text-shadow:#000 0px 0px 6px;
}

@media (min-width: 992px) {
  header.masthead .masthead-cover {
    padding-top: calc(7rem + 55px);
    padding-bottom: 10rem;
  }
  header.masthead .masthead-content .masthead-heading {
    font-size: 5rem;
  }
}

.messages {
  top: 80;
  right: 10;
  z-index: 1000;
}

@media screen and (max-width: 576px) {
  .messages {
    top: 55;
  }
}

.top-img {
  max-height: 350px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Register forms */
.disabled-like {
  background-color: #e9ecef;
}

/* Note list */
.note-partial-eyecatch {
  max-height: 200px;
}

.note-partial-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Note */
@media (min-width: 992px) {
  .sticky-lg-top {
    top: 6rem;
  }
}

.table-of-contents {
  font-size: 0.875rem;
  gap: 0.25rem;
  overflow: auto;
  text-decoration: none;
}

.table-of-contents > div {
  border-radius: 0.25rem;
  padding-left: calc(0.875rem * (var(--level) - 1));
  transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.table-of-contents a {
  color: var(--black);
  display: flex;
  gap: 0.25rem;
  text-decoration: none;
}

.note-eyecatch {
  width: 100%;
  margin-bottom: 1rem;
  height: auto;
  overflow: hidden;
}

.note-eyecatch img {
  object-fit: cover;
  width: 100%;
}

.question_choices ol {
  padding-left: 0;
}

.question_choices ol li {
  list-style-position: inside;
}

.question_choices {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout:none;
}

.question_choices {
  margin-top: 10px;
}

.question_choices input[type=checkbox] {   
  display: none;    
}

.question_choices label {
  width: 100%;
  line-height: 2.3rem;
  border-radius: 20px;
  border: lightgray 1px solid;
  padding-left: 1.25rem;
  position: relative;
}

.question_choices input:checked + label {
  /*background: steelblue;*/
  color: steelblue;
  border: steelblue 1px solid;
}

.question_choices label.correct-true.result-true {
  color: steelblue;
  border: steelblue 1px solid;
}

.question_choices label.correct-true.result-true::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: steelblue;
  position: absolute;
  right: 15px;
  top: 0;
}

.question_choices label.correct-false.result-false {
  color: crimson;
  border: crimson 1px solid;
}

.question_choices label.correct-false.result-false::after {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: crimson;
  position: absolute;
  right: 17px;
  top: 0;
}

.question_choices label.correct-true.result-false::after {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: crimson;
  position: absolute;
  right: 15px;
  top: 0;
}

.explanation.result-true {
  color: steelblue;
}

.explanation.result-false {
  color: crimson;
}

.free-fadeout {
  position: relative;
}

.free-fadeout::after {
  content: '';
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.note-style h3 {
  font-size: 1.6rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

.note-style h4 {
  font-size: 1.4rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

.note-style h5 {
  font-size: 1.3rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

.note-style p, .note-style pre {
  margin-bottom: 2rem;
}

.note-style a {
  text-decoration: none;
  color: #166c9d;
}

.note-style a:hover {
  text-decoration: underline;
  color: #166c9d;
}

.note-style img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

.note-style pre {
  border-radius: 4px;
  padding: 0;
  border: 1px solid #6B6B6B;
  background: #F9F9F9;
}

.note-style ul {
  list-style: disc;
  padding: 0 1rem;
  margin: 1.25rem 1rem 1.25rem 0.4rem;
}

.note-style ol {
  list-style: auto;
  padding: 0 1rem;
  margin: 1.25rem 1rem 1.25rem 0.4rem;
}

.note-style ul li p, .note-style ol li p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.note-style pre code {
  display: block;
  padding: 32px;
  font-size: 0.9rem;
}

@media screen and (max-width: 576px) {
  .table-of-contents {
    font-size: 1.2rem;
    line-height: 2.4rem;
  }

  .note-style h3 {
    font-size: 1.8rem;
    font-weight: 600;
  }

  .note-style h4 {
    font-size: 1.6rem;
    font-weight: 600;
  }

  .note-style h5 {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .note-style p, .note-style pre, .note-style img {
    font-size: 1.4rem;
  }

  .note-style pre code {
    font-size: 1.2rem;
  }
}

/* Note Edit */
.edit-area textarea[name=title], .edit-area textarea[name=title]:focus {
  border: none;
  outline: none;
  font-size: 1.7rem;
  box-shadow: none;
  padding: 0;
  field-sizing: content;
  resize: none;
}

/* Edit Note Option */
.tagsinput {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.tagsinput .tag {
  background: gray;
  color: black;
}

.tagsinput .tag .tag-remove:after, .tagsinput .tag .tag-remove:before {
  background: black;
}

/* Edit Note Question */
.question-list i.drag-handle {
  cursor: grab;
}

.question-list .sortable-drag i.drag-handle {
  cursor: grabbing;
}

.question_preview label li.choice-correct {
  color: steelblue;
}

.question_preview label li.choice-correct::after {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: steelblue;
  position: absolute;
  right: 15px;
  top: 0;
}

.question_preview label li.choice-incorrect::after {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: crimson;
  position: absolute;
  right: 17px;
  top: 0;
}

/* Hospitals */
@media (min-width: 768px) {
  .nav-search {
/*    position: -webkit-sticky;
    position: sticky;*/
    top: 5rem;
    display: block !important;
/*    height: calc(100vh - 7rem);*/
    padding-left: 0.25rem;
    margin-left: -0.25rem;
  }
}

.remove-button {
  color: silver;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.filter-select {
  background-color: #fff;
  border: 1px solid #ced4da;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
}

.table-wrapper {
  overflow-y: scroll;
}

.table-wrapper th {
  position: sticky;
  left: 0;
}

.card-sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 6rem;
  z-index: 100;
}

.blurred_text {
  min-width: 100%;
}

.over_blurred_text {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -55%);
  -webkit-transform: translate(-50%, -55%);
  -ms-transform: translate(-50%, -55%);
}

/* New Review Post */
.tagsinput {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.tagsinput .tag {
  background: gray;
  color: black;
}

.tagsinput .tag .tag-remove:after, .tagsinput .tag .tag-remove:before {
  background: black;
}

/* Legal  */
.legal-table {
  color: var(--black);
}

footer {
    margin-top: auto;
}

.my-div-style {
  margin-top:6rem;
}

.pagination .page-link {
  border: none;
  border-radius: 5px;
  color: gray;
}

.pagination .page-item.active .page-link {
  background-color: var(--sub-green);
  border-color: var(--sub-green);
}