.activity-wrapper {
  font-size: 0.85em;
  color: #4f5b66;
  display: flex;
  padding: 8px;
}

.activity-wrapper-phone {
  font-size: 0.85em;
  color: #4f5b66;
  overflow: hidden;
  padding: 8px;
}

.activity-time-container {
  padding-top: 2px;
  padding-bottom: 24px;
  min-width: 125px;
}

.activity-icon-container {
  padding: 1px;
  border-radius: 30px;
  background-color: #a8b4be;
}

.icon-center {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: rotate(0deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.colibri-activity-line {
  height: 100%;
  width: 2px;
  background-color: #a8b4be;
  margin-left: auto;
  margin-right: auto;
}

.colibri-activity-line-phone {
  height: 100%;
  width: 1px;
  background-color: #a8b4be;
  margin-left: auto;
  margin-right: auto;
}

.activity-datetime {
  color: #4f5b66;
  display: inline-block;
  max-width: 180px;
  padding: 2px 8px 2px 0;
}

.activity-admin-badge {
  font-size: 0.65em;
  vertical-align: middle;
}

.activity-body {
  margin-left: 10px;
  padding-top: 4px;
  padding-bottom: 24px;
  width: 100%;
}

.activity-body-phone {
  margin-left: 10px;
  padding-bottom: 30px;
  width: 100%;
  font-size: 0.9rem;
}

.activity-background-gray {
  background-color: #f5f7fa;
  padding: 8px;
  margin-top: 4px;
  border-radius: 0.125rem;
}

.activity-important-fields {
  font-weight: bold;
}

.activity-important-fields::before {
  content: " ";
}

.activity-important-fields::after {
  content: " ";
}

.activity-before-update-state {
  color: #aaa;
}

#activity-filter {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 8px;
}
#toggle-appointment-and-completion-report {
    display:flex;
    justify-content:space-around;
    font-size:1.4em;
    color:#697580;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.appointment-menu-toggle-item {
    padding-left: 20px;
    padding-right: 20px;
}

.appointment-menu-toggle-item:hover {
    cursor:pointer;
    color: #4F5B66;
    border-bottom:3px solid #828E99;
}

.appointment-menu-toggle-item.item-selected {
    border-bottom: 3px solid #7AD5DE;
}

.calendar-draggable {
    display:flex;
    margin: 8px 0px 0px 0px;
    padding:8px 7px 8px 7px;
    font-size: 0.95em;
    border-radius:4px;
    background-color:#EFF2F5;
}

.calendar-draggable:hover {
    cursor: grab;
}

td.edit-requested-appointment-row > td {
    padding-top:8px;
    padding-bottom:8px;
}


#resource-details-wrapper.mitei-wrapper,#resource-details-wrapper.mitei-wrapper > #resource-details-block {
    height:100%;
}

#draggable-container {
    height: calc(100% - 32px);
    overflow-y: auto;
}

#transportation-form-body {
    display:flex;
    flex-direction:column;
}

#color-select-container {
    width: 230px;
}
#admin_page_content {
  position: fixed;
  left: 240px;
  top: 0;
  width: calc(100vw - 240px);
  height: 100vh;
  z-index: -20;
}

#admin_page_head {
  padding-top: 12px;
  border-bottom: 2px solid #eee;
}

#admin_page_title {
  margin-left: 5px;
  padding-left: 12px;
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 15px;
}

.coli-data-menu-link {
  display: block;
}

.coli-data-menu-link:hover {
  background-color: #fcfcff;
}

.coli-data-menu-item {
  border-bottom: 1px solid #ccc;
  padding: 3px;
}

.coli-data-menu-item.selected {
  background-color: #fcfcff;
}

#admin_page_body {
  background-color: #f0f1f3;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

#admin_page_tab_container {
  margin-top: 15px;
  display: flex;
  margin-bottom: -1px;
}

.admin-page-tab {
  color: #505d6f;
  width: 130px;
  text-align: left;
  padding: 5px;
}

.admin-page-tab.selected {
  border-bottom: 2px solid #505d6f;
}

.admin-data-block {
  display: flex;
  width: calc(100% - 150px);
  height: 350px;
}

.admin-data-container {
  margin: 8px;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}

.admin-divider {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 10px;
  margin-top: 0.5rem;
}

.admin-width-40 {
  width: calc(40% - 16px);
}

.admin-width-50 {
  width: calc(50% - 16px);
}

.admin-width-60 {
  width: calc(60% - 16px);
}

.admin-data-header {
  padding-bottom: 2px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  height: 31px;
}

.admin-data-content {
  overflow-y: auto;
  height: 293px;
}

.nav_top_item {
  color: #505d6f;
  font-size: 1em;
  margin: 5px;
}

.coli_admin_link {
  display: inline-block;
}

.fa-admin-left-nav {
  font-size: 17px;
}

.fa-admin-left-nav-sm {
  font-size: 14px;
}

.step-circle { 
  width: 32px; 
  height: 32px;
 }
.mb-assessment-container {
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
}

.mb-assessment-header {
  display: flex;
  justify-content: space-between;
  line-height: 32px;
}

.mb-document-title {
  color: #5f6368;
  font-size: 1.05em;
}

.mb-assessment-body {
  border-top: 1px solid #ccc;
}

.mb-assessment-content {
  background-color: #defcfc;
  margin-top: 4px;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9em;
}

.mb-document-divider {
  text-align: center;
  font-size: 11px;
  margin-top: 5px;
}

.red-text {
  color: #ed2939;
}

.edit-btn-min-width {
  min-width: 64px;
}

.document-container {
  min-height: 500px;
}

.mb-assessment-container:last-child {
  margin-bottom: 90px;
}
.teikyohyo-container {
    margin: 5px;
    padding: 5px;
    border: 0.5px solid #ccc;
}

.teikyohyo_title {
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.care-manager-corporation-header {
    padding: 6px 0px 6px 0px;
	border-bottom: 0.5px solid #dee2e6;
}

.care-manager-corporation-header:hover {
    cursor: pointer;
}

.toggle-arrow-left {
    margin-right: 5px;
}
/* button styling */

button.btn-primary {
  background-color: #eaedf0 !important;
  border-color: #eaedf0 !important;
  color: #4f5b66 !important;
}

button.btn-primary:hover {
  background-color: #d9dee3 !important;
  border-color: #d9dee3 !important;
  color: #4f5b66 !important;
}
.comment-container {
  width: 100%;
}

.commentor-and-thread-container {
  width: 45px;
}

.commenter-top-thread {
  height: 26px;
  width: 22.5px;
  border-right: 1px solid #ccc;
  color: transparent;
}

.commenter-bottom-thread {
  height: calc(100% - 50px);
  width: 22.5px;
  border-right: 1px solid #ccc;
  color: transparent;
}

.comment-head {
  height: 18px;
  line-height: 15px;
}

.comment-body {
  width: calc(100% - 49px);
}

.coli-edited-label {
  margin-left: -10px;
}
.toggleable-subsection-title:hover {
  cursor: pointer;
}

#medical_report_form .blue-background-form {
  border-bottom: 1px solid #e8e8e8;
}

.glyphicon.completion-report-glyphicon {
  font-size: 0.7em;
  cursor: pointer;
  margin-left: 4px;
}

.report-checkmark {
  color: #42b97c;
}

#completion-reports-container {
  width: 100%;
  margin-left: 15px;
}

.report-field-label {
  min-width: 54px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .report-field-label {
    display: block;
    margin-bottom: 0.25rem;
  }
}

.report-prefilled-item {
  color: black;
}

.shortcut-label-prefix::after {
  content: "：";
}

.colibri-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

.colibri-horizontal-menu-container {
  display: flex;
  border-bottom: 3px solid #dee2e6;
  justify-content: space-between;
}

.colibri-horizontal-menu-item {
  font-size: 1.3em;
  text-align: center;
  color: #97a0a8;
  line-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.colibri-horizontal-menu-item.attendance-menu {
  min-width: 75px;
}

.colibri-horizontal-menu-item.item-selected {
  border-bottom: 2px solid #606e7c;
  color: #606e7c;

  /* make the bottom border the full width of the parent container if only one option can be selected */
  &:only-child {
    width: 100%;
  }
}

.colibri-horizontal-menu-item:hover {
  cursor: pointer;
  color: #606e7c;
}

#japanese-query-date {
  font-size: 1.3em;
  text-align: center;
  color: #212529;
}

.completion-report-message-body {
  background-color: #defcfc;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

.completion-report-message-body > p {
  margin-bottom: 3px;
}

.completion-report-notification {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 0.5px solid #ccc;
  line-height: 24px;
}

.report-comparison-attribute {
  color: black;
}

.report-comparison-details {
  color: #5f6368;
}

.report-comparison-item-separator {
  width: 50px;
  height: 8px;
  border-bottom: 1px solid #85929e;
  margin-bottom: 8px;
}

.care-instructions {
  color: #606e7c !important;
}

table.reportable-details-table > tbody > tr > td {
  padding: 0px 15px 0px 0px;
  font-size: 1em;
}

.toggle-down {
  float: left;
  margin-right: 4px;
}

.report-flag {
  width: 11px;
  height: 13px;
  display: inline-block;
  border-radius: 2px;
  margin-bottom: -1.5px;
}

.report-flag-text {
  margin-bottom: 2px;
  font-weight: bold;
}

.nurse-ping-flag {
  background-color: #ff9090;
}

.changed-service-type-flag {
  background-color: #adf7b6;
}

.changed-from-report-template-flag {
  background-color: #fbc32d;
}

.spot-appointment-flag {
  background-color: #7ad5de;
}

.edit-requested-appointment-flag {
  background-image: repeating-linear-gradient(
    45deg,
    #c8f6df,
    #c8f6df 5px,
    #99e6bf 5px,
    #99e6bf 10px
  ) !important;
}

.changed-datetime-flag {
  background-color: #a9abff;
}

input.colibri-input[readonly="readonly"] {
  background-color: #f0f0f0 !important;
}

#desktop-reports-index-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid #ddd;
  margin-bottom: 5px;
}

#reports-header {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 5px 5px 0px;
  display: flex;
  justify-content: space-between;
}

#reports-filters {
  display: flex;
  grid-gap: 5px;
  gap: 5px;
  vertical-align: bottom;
}

#appointments-and-instructions {
  width: 65%;
  padding: 6px;
}

#recent-information-container {
  width: 35%;
  padding-top: 6px;
}

.report-warnings {
  width: 45%;
}

.report-detailed-items {
  width: 55%;
}

.vital-header {
  width: 55px;
}

.item-header {
  margin-bottom: 3px;
}

.thread-item-images-container {
  display: flex;
}

.thread-report-icon-badge {
  margin-top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #eff1f1;
  text-align: center;
  vertical-align: middle;
  padding-top: 4px;
}

.entry-button {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  margin-bottom: 60px;
}

.start-form-info {
  padding-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}

.form-info-title {
  color: #828e99;
  margin-bottom: 4px;
}

.form-info-body {
  font-size: 0.9em;
}

.reportable-description {
  padding-bottom: 4px;
  border-bottom: 1px dotted #ccc;
  font-size: 0.9em;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.horizontal-scrollable-menu {
  display: flex;
  grid-gap: 5px;
  gap: 5px;
  white-space: nowrap;
  overflow-x: scroll;
  padding-bottom: 7px;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.horizontal-scrollable-menu ::-webkit-scrollbar {
  display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
}

@media screen and (orientation: portrait) {
  .colibri-horizontal-menu-container {
    max-width: 100%;
  }

  .colibri-horizontal-menu-item {
    font-size: 1.2em;
    text-align: center;
    color: #97a0a8;
    line-height: 44px;
    padding-left: 0;
    padding-right: 0;
  }

  .colibri-horizontal-menu-item.sp-attendance-menu {
    min-width: 65px;
  }
}
#contact-form-background {
  padding-top: 80px;
  padding-bottom: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #e7f6ff;
}

#colibri-contact-form-container {
  width: 100%;
  max-width: 450px;
  background-color: white;
  padding: 20px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

#contact-form-image-container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
}

#colibri-contact-form-title {
  color: #1b263b;
  text-align: center;
  font-size: 1.6em;
  margin-bottom: 20px;
}

#call-colibri {
  display: none;
}

@media screen and (orientation: portrait) {
  #colibri-contact-form-container {
    padding: 20px 20px 20px 20px;
  }

  #colibri-contact-form-title {
    font-size: 1.6em;
    margin-bottom: 20px;
  }
}
@media screen and (orientation: landscape) and (min-width: 900px) and (max-width: 950px) {
    .nav-tablet-hidden {
        display: none !important;
    }
}
#dashboard-plannings-container {
    background-color: #606E7C;
	border: 0.5px solid #606E7C;
	display: flex;
	flex-direction: column;
    height: 100%;
	width: 180px;
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	overflow-x: hidden;
	padding-top: 60px;
}

#new-planning-container {
    margin-bottom: 7px;
	margin-left: 7px;
}

#dashboard-plannings-list {
	height: 45%;
    overflow-y: auto;
}

#colibri-dashboard-container {
	margin-left: 60px;
	margin-top: 10px;
	margin-bottom: 120px;
}



.colibri-dashboard-container-row {
	width: 100%;
	height: 50vh;
	display: flex;
}

.colibri-dashboard-container-row-large {
	width: 100%;
	height: 70vh;
	display: flex;
}

.colibri-dashboard-big-container {
	height: 90vh;
	width: 100%;
	display: flex;
}

.colibri-dashboard-subcontainer {
	background-color: white;
	margin: 5px;
	padding: 4px;
	border: 0.5px solid #ccc;
	border-radius: 4px;
	flex: 1 1;
	width: calc(100% - 10px);
}

.colibri-dashboard-subcontainer-no-width {
	background-color: white;
	margin: 5px;
	padding: 4px;
	border: 0.5px solid #ccc;
	border-radius: 4px;
}

.subcontainer-column-full-height {
	height: calc(100% - 15px);
}

.subcontainer-column-half-height {
	height:calc(50% - 10px);
}

.colibri-dashboard-container-column-large {
	height: 100%;
	width: 55%;
}

.colibri-dashboard-container-column-narrow {
	height: 100%;
	width: 45%;
}

.colibri-subcontainer-body {
	height: calc(100% - 37px);
	overflow-y: auto;
	overflow-x: auto;
}

.colibri-subcontainer-body-with-footer {
	overflow-y: auto;
	overflow-x: auto;
}

.colibri-subcontainer-footer {
	margin-top: 7px;
}

.colibri-subcontainer-header {
	border-bottom: 0.5px solid #ccc;
	padding-bottom: 4px;
	height: 33px;
}

.unseen-activity-count {
	font-size: 0.9em;
	color: #4F4F4F;
}

#extended-daily-summary-title-container {
	display: flex;
	margin: 5px;
	margin-top: 30px;
}

.post-clickable:hover {
	cursor: pointer;
}

.activity_header {
	display: none;
}

@media print {
	#extended-daily-summary-container {
		height: auto !important;
		overflow: visible !important;
	}
}

@media screen and (orientation: portrait) and (min-width: 760px) {
	.colibri-dashboard-big-container {
		height: auto;
		flex-direction: column-reverse;
	}

	.colibri-dashboard-container-column-large {
		width: 100%;
		height: 90vh;
	}

	.colibri-dashboard-container-column-narrow {
		width: 100%;
		height: 45vh;
	}
}
.colibri-devise-form {
  width: 470px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 40px;
  background-color: #fff;
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 15px;
  padding-bottom: 35px;
  border-radius: 3px;
  border: 1px solid #ddd;
}

.remember-me {
  color: #aaa;
  font-size: 1em;
}

#colibri-devise-links {
  margin-top: 15px;
}

.colibri-devise-title {
  font-size: 2.2em;
  line-height: 1em;
  color: #4f5b66;
  text-align: center;
  padding: 20px;
}

.colibri-form-label {
  color: #85919c;
}

.colibri-sm-label {
  font-size: 0.9em;
}

.colibri-form-label-dark {
  color: #4f5b66;
  font-size: 1em;
}

.colibri-form-label-dark-md {
  color: #586571;
  font-size: 1em;
}

.colibri-form-label-xtra-dark {
  color: #49545e;
  font-size: 1em;
}

.colibri-form-options-label {
  color: #4f5b66;
}

#account-update-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  background-color: #fff;
  border: 0.5px solid #aaa;
  min-height: 700px;
  margin-top: 20px;
  margin-bottom: 50px;
}

#account-update-menu {
  width: 200px;
  border-right: 0.5px solid #aaa;
}

.account-menu-selected {
  color: black;
}

.account-menu-item:hover {
  cursor: pointer;
  color: black;
}

.account-menu-item {
  border-bottom: 0.5px solid #aaa;
  color: #4f5b66;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

#account-update-body {
  width: 100%;
}

.user-clickable-row:hover {
  cursor: pointer;
}
.colibri-input {
  border: 1px solid rgb(190, 189, 189);
  border-radius: 4px;
  padding: 1px 4px 1px 4px;
  text-align: right;
  color: black;
  background-color: white;
}

.colibri-input.input-text-left {
  text-align: left;
}

.colibri-input.additional-padding {
  padding: 3px 6px 3px 6px;
}

.service-code-select {
  height: 30px;
  width: 301.5px;
}

.colibri-form-inner-subsection-title {
  color: #1b263b;
  font-weight: 600;
  font-size: 18px;
}

.colibri-form-label-new {
  color: #1b263b;
  font-weight: 600;
  font-size: 16px;
}

.transparent-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.delete-subform {
  position: absolute;
  color: #1b263b;
  width: 16.25px;
  height: 18.75px;
  opacity: 1;
  right: 1.88px;
  top: 1.88px;
}

.select-readonly {
  pointer-events: none;
  opacity: 0.5;
}

.selectized-color-select-item {
  width: calc(100% - 6px);
}

.field-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #e9ecef;
  pointer-events: none;
}

.selectize-color-preview {
  height: 7px;
  width: 50px;
  border-radius: 25px;
}

/* Selectize measures its input width via a hidden shadow element, which can
   return 0 for CJK characters when fonts haven't loaded yet (e.g. inside a
   Bootstrap modal before shown.bs.modal fires). A min-width prevents the
   placeholder from being clipped and text from overflowing off the left edge. */
.selectize-input > input {
  min-width: 8em !important;
}
@media screen and (orientation: landscape) and (max-width: 960px), screen and (orientation: portrait) and (max-width: 743px) {
  body {
    overflow: hidden;
  }

  .mobile-only-display {
    display: block !important;
  }

  .hide-on-all-devices {
    display: none !important;
  }

  .modal-body,
  .modal-footer {
    padding: 15px !important;
  }

  .smartphone-no-display {
    display: none !important;
  }

  .activity_large_header {
    background-color: #2b384e;
  }

  .activity_subheader {
    background-color: #2b384e;
    display: flex;
    height: 35px;
    line-height: 35px;
    color: white;
  }

  .colibri-homepage-subsection-title {
    font-size: 1.9em;
  }

  .activity_subtitle {
    font-size: 1.3em;
    color: #4f5d66;
    border-bottom: 0.5px solid rgb(215, 215, 215);
    display: flex;
    justify-content: space-between;
  }

  .toggleable_activity {
    display: none;
  }

  .activity_subcontainer {
    padding: 4px;
    margin-top: 5px;
  }

  .activity_subcontainer > p {
    margin-bottom: 0px;
  }

  .activity_subheader_item {
    flex-grow: 1;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
  }

  .activity_body.activity_body_fixed_height {
    height: calc(100vh - 143px);
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .activity_simple_format > p {
    margin-bottom: 5px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .activity_subheader_item.activity_subheader_item_selected {
    color: white;
    border-bottom: 3px solid white;
  }

  .activity_subheader.report-reference-tabs {
    position: sticky;
    top: 0;
    z-index: 998;
    height: 44px;
    line-height: 44px;
    font-size: 1.05em;
  }

  .phone_activity_container.activity_with_planning_menu {
    z-index: 5;
  }

  .phone_activity_container.with_bottom_action_bar {
    display: flex;
    flex-direction: column;
  }

  .phone_activity_container.with_bottom_action_bar > * {
    flex-shrink: 0;
  }

  .phone_activity_container.with_bottom_action_bar .activity_body {
    padding-bottom: 0;
  }

  .activity_bottom_action_bar {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    z-index: 999;
    padding: 10px 12px calc(10px + max(0px, env(safe-area-inset-bottom, 0px)));
    background-color: white;
    border-top: 0.5px solid rgb(215, 215, 215);
  }

  .activity_bottom_action_bar > .btn {
    flex: 1 1;
    min-height: 44px;
    line-height: 30px;
  }

  p.colibri-list-subtitle {
    margin-bottom: 0px;
    margin-left: 15px;
    padding-top: 5px;
    color: #2b384e;
    font-size: 0.9em;
  }

  p.colibri-fc-list-body {
    margin: 0px 0px 4px 15px;
    margin-left: 15px;
    background-color: white;
    opacity: 1;
    padding: 4px 6px 4px 6px;
    border: 0.4px solid #2b384e;
    border-radius: 3px;
  }

  div.fc-list.fc-listDay-view.fc-view {
    border: none !important;
  }

  div.fc-list-day-cushion.fc-cell-shaded {
    background-color: transparent;
    padding: 2px 14px 2px 14px;
  }

  #index-container {
    width: 100% !important;
    margin: 0px !important;
    padding: 0px 3px 60px 3px;
  }

  #post-lookup-container {
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: 0.3px solid #ccc;
  }

  .colibri-subcontainer-title.subcontainer-no-display {
    display: none;
  }

  #lookup-button-container {
    margin-bottom: 10px;
  }

  div.fc-list-empty-wrap2 {
    display: block !important;
  }

  #planning-container {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .fc-toolbar.fc-header-toolbar {
    width: calc(100% + 6px);
    margin-top: 3px;
    margin-left: -3px;
    padding-left: 3px;
    padding-right: 3px;
    margin-bottom: 3px;
  }

  #posts-index-container {
    margin-bottom: 80px;
  }

  #index-table-container {
    margin-bottom: 80px;
  }

  #account-edit-body {
    padding: 0px;
  }

  /* flash layouts */

  .alert {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 7px;
    padding-bottom: 8px;
    border-radius: 0px !important;
  }

  /* General fullcalendar layouts */

  .fc-event-title.title-responsive {
    font-size: 1.1em;
    color: black;
  }

  .fc-event > .fc-event-main {
    overflow: hidden !important;
  }

  .fc-event > .fc-event-main > .fc-event-main-frame {
    overflow: hidden !important;
  }

  .fc-event-main-frame > .fc-event-title-container {
    overflow: hidden !important;
  }

  .fc-event {
    overflow: hidden !important;
  }

  .fc-event-time.fc-time-responsive {
    font-size: 0.7em;
    color: black;
    font-weight: normal;
    display: block;
  }

  /* Completion Reports layouts */

  .completion-report-container {
    padding: 5px;
    margin-top: 5px;
  }

  .completion-report-message-heading {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
  }

  .completion-report-comment {
    border-top: 1px solid #2b384e;
    padding-top: 5px;
  }

  .completion-report-action {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid #ccc;
  }

  .completion-report-tasks {
    margin-bottom: 8px;
  }

  #desktop-reports-index-header {
    display: none;
  }

  #japanese-query-date {
    font-size: 1.3em;
    text-align: center;
    color: #212529;
    line-height: unset;
  }

  #more-planning-menu-items {
    position: fixed;
    background-color: #fdfdfd;
    z-index: 10000;
    border: 0.5px solid #ccc;
    border-radius: 6px;
  }

  li.planning-menu-items {
    background-color: transparent;
  }

  li.planning-menu-items.planning-menu-selected {
    color: #626669;
    background-color: transparent;
  }

  li.planning-menu-items:hover,
  li.planning-menu-items.colibri-clickable-link:hover {
    background-color: transparent !important;
    color: #626669;
  }

  li.planning-menu-items:focus {
    background-color: transparent !important;
    color: #626669;
  }

  .planning-menu-items.planning-menu-selected {
    border: none !important;
  }

  .desktop-margin-top {
    margin-top: 0px;
  }

  #planning-header-container.mb-no-box-shadow {
    box-shadow: none;
  }

  /* The phone title bar has a fixed height: truncate long patient/office names instead of wrapping out of it */
  #payable-title-wrapper .pc-shift-page-header-title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Same for the phone header of the patient/office pages (#detail-planning-title): let the title take the remaining width next to the hamburger, then truncate */
  #planning-nurse-information {
    flex: 1 1 auto;
    min-width: 0;
  }

  #planning-nurse-information #payable-menu {
    flex-shrink: 0;
  }

  #planning-nurse-information .planning-resource-module-title,
  #planning-nurse-information > .pc-shift-page-header-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* plannings#show / #master: the calendar sets the name as plain text inside the title div */
  #planning-nurse-information > .pc-shift-page-header-title {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .planning-resource-module-title #resource-name-wrapper {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fixed-height activity header (e.g. patients#edit / nurses#edit): keep the title on one line next to the back button */
  .activity_back_button {
    flex-shrink: 0;
  }

  .activity_title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #toggle-patients-nurses-wrapper {
    margin-top: 15px;
  }

  /* List View */

  .fc-list.fc-view {
    border: none;
  }

  .fc-list-day-text {
    font-weight: bold;
  }

  .fc-list-day-cushion.fc-cell-shaded {
    padding-bottom: 2px;
    padding-top: 0px;
    background-color: white;
  }

  .fc-list-empty {
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  .fc-list-day.fc-day,
  .fc-list-day.fc-day.colibri-listday-no-events {
    width: 100%;
    background-color: white;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 2px 14px 2px 14px;
    text-align: left;
    font-weight: bold;
  }

  .colibri-no-events-text {
    width: 100%;
    background-color: white;
    text-align: center;
  }

  .fc-button.fc-button-primary {
    background-color: #fbfdfb;
    border-color: #fbfdfb;
    color: rgb(115, 120, 124);
    border: 0.5px solid rgb(161, 171, 180);
  }

  .fa.fa-edit.coli-bottom-menu-icon {
    margin-left: 5px;
  }

  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background-color: rgb(161, 171, 180);
    border-color: rgb(161, 171, 180);
  }

  .fc-button-primary:disabled {
    display: none !important;
  }

  .fc-view-harness {
    overflow-x: scroll;
  }

  .colibri-resourceview-title,
  h2.fc-toolbar-title {
    color: black;
    font-weight: bold;
    font-size: 1em !important;
  }

  table.activity-details-table > tbody > tr > td,
  table.activity-details-table > tbody > tr > td > p {
    font-size: 1em;
    vertical-align: top;
    padding-bottom: 3px;
    margin-bottom: 0;
  }

  li.planning-menu-items {
    line-height: 18px !important;
  }

  /* css for contact form */

  #call-colibri {
    display: inline;
  }

  /* css for mode of transportation */

  .colibri-radio-item {
    width: 100%;
    line-height: 45px;
    margin-bottom: 10px;
    padding: 6px 10px 6px 10px;
    background-color: #eff1f1;
    border: 2px solid #eff1f1;
    border-radius: 4px;
  }

  .colibri-radio-item-content {
    display: flex;
  }

  .colibri-radio-item.radio-selected {
    background-color: #e0fdec;
    border: 2px solid #6bcd93;
  }

  .colibri-radio-label {
    width: calc(100% - 91px);
    color: #4f5b66;
    padding-left: 15px;
    font-size: 1.3em;
  }

  #transportation-form-container {
    flex-grow: 1;
  }

  .colibri-radio-checkmark {
    width: 45px;
  }

  .colibri-radio.glyphicon {
    font-size: 16px;
  }

  #attendance-menu-icon {
    padding-bottom: 0px !important;
  }

  /* Users settings layout */

  #colibri-presentation-text {
    text-align: center;
  }

  #phone-action-container {
    position: fixed;
    right: 15px;
    bottom: 145px;
    z-index: 15;
    background-color: #fafafa;
    border-radius: 4px;
    padding: 8px 12px 8px 12px;
    box-shadow: 0px 1px 2px #ccc;
  }

  #phone-reflect-button-wrapper {
    display: block !important;
    position: fixed;
    right: 15px;
    z-index: 14;
  }

  #phone-reflect-button {
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    color: #748493;
    box-shadow: 0px 1px 2px #ccc;
  }

  .phone-action-icon {
    line-height: 60px;
    font-size: 1.5em;
  }

  .resource-accordion-content {
    max-height: none !important;
  }

  .max-height-fit-content-mobile-only {
    max-height: fit-content !important;
  }

  .max-height-0-mobile-only {
    max-height: 0 !important;
  }

  .care-instructions-date-nav-spacer {
    color: white;
    font-size: 3px;
    width: 60px;
  }

  #care_instructions_query_date {
    border: none;
    font-size: 0.1em;
    width: 20px;
    color: white;
  }

  #date-picker-button .fa-calendar {
    font-size: 17px;
  }
}

@media screen and (orientation: portrait) and (max-width: 743px) {
  #planning-container {
    padding-bottom: 80px;
  }
}
/* app-wise css rules */

a {
  text-decoration: none !important;
}

#remote_container {
  width: 100vw;
  overflow-x: hidden;
}

.btn-sm-fixed-height {
  height: 33.5px;
}

/* Image-related styles */

.colibri-play-icon {
  position: absolute;
  left: 34px;
  top: 27px;
  opacity: 0.9;
}

.file-names-container {
  margin-left: 12px;
  font-size: 14px;
  color: #4f5b66;
  line-height: 30px;
  overflow-x: hidden;
  width: calc(100% - 157px);
}

.report-image {
  margin: 5px 5px 0px 0px;
}

.unpreviewable-video {
  height: 80px;
  width: 80px;
  background-color: #ccc;
}

.unpreviewable-video:hover {
  background-color: #ccc;
}

.report-video {
  position: relative;
  display: inline-block;
}

.report-pictures-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.report-picture-container {
  margin-bottom: 5px;
  margin-right: 5px;
}

.photo-preview-container {
  height: 62px;
  width: 62px;
  border-radius: 62px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

#placeholder-patient-image {
  width: 62px;
  height: 62px;
  border-radius: 62px;
  background-color: #7ad5de;
  color: white;
  font-size: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#patient-thumb {
  border-radius: 62px;
  border: 1px solid #ccc;
}

.patient-name-bubble {
  width: 62px;
  height: 62px;
  border-radius: 62px;
  background-color: #7ad5de;
  color: white;
  font-size: 1.3em;
  vertical-align: middle;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  vertical-align: middle;
}

.colibri-photo {
  max-width: 100%;
  max-height: 100%;
}

input[type="file"]::file-selector-button {
  background-color: #eaecec;
  border: 2px solid #eaecec;
  color: #5f6368;
  border-radius: 4px;
}

input[type="file"]::file-selector-button:hover {
  background-color: #e2e4e4;
  border: 2px solid #e2e4e4;
  color: #5f6368;
  cursor: pointer;
}

/* Bootstrap 5 adjustments */
input.form-check-input {
  border: 1.5px solid #bbb;
}

input.form-check-input {
  border: 1.5px solid #bbb;
}

.coli-cyan-checkbox.form-check-input:checked {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.coli-green-checkbox.form-check-input:checked {
  background-color: #2ea649 !important;
  border-color: #2ea649 !important;
}

.coli-green-checkbox.form-check-input:focus {
  box-shadow: 0 0 3px 3px rgba(40, 167, 69, 0.8);
  border-color: #2ea649 !important;
}

.modal {
  overflow-y: auto !important;
}

.btn.btn-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: white;
}

.btn.btn-info:hover {
  background-color: #138496 !important;
  border-color: #138496 !important;
  color: white !important;
}

.btn.btn-info:active {
  background-color: #138496 !important;
  border-color: #138496 !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgb(11 172 204 / 50%);
}

.btn.btn-info:focus {
  background-color: #138496 !important;
  border-color: #138496 !important;
  color: white !important;
}

.btn.btn-info:disabled {
  color: white !important;
}

.btn.btn-outline-info {
  background-color: transparent;
  border-color: #17a2b8;
  color: #17a2b8;
}

.btn.btn-outline-info:hover {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: white !important;
}

.form-check-input.input-success:checked {
  background-color: #2ea649;
  border-color: #2ea649;
  color: white;
}

.badge.bg-success {
  background-color: #2ea649 !important;
  border-color: #2ea649;
}

.btn.btn-success {
  background-color: #2ea649;
  border-color: #2ea649;
  color: white;
}

.btn.btn-success:hover {
  background-color: #299040 !important;
  border-color: #299040 !important;
  color: white !important;
}

.btn.btn-success:active {
  background-color: #299040 !important;
  border-color: #299040 !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgb(72 180 97 / 50%);
}

.btn.btn-success:focus {
  background-color: #299040 !important;
  border-color: #299040 !important;
  color: white !important;
}

table.table > thead,
table.table > thead > tr,
table.table > thead > tr > th {
  border-bottom: 2px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
}

table.table > thead > tr > th,
table.table > tbody > tr > td,
table.table > tbody > tr > th {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.popover-head,
.popover-header {
  padding: 6px 8px 6px 8px !important;
}

.popover-body {
  padding: 6px 8px 6px 8px !important;
}

/*  */

.glyphicon.glyphicon-cog:hover,
.glyphicon.glyphicon-home:hover,
.glyphicon.glyphicon-calendar:hover {
  color: white !important;
}

.glyphicon.glyphicon-calendar.glyphicon-no-hover-style:hover {
  color: inherit;
}

.button:focus,
.btn:focus {
  outline: none !important;
  box-shadow: none;
}

.coli-clickable-row:hover {
  cursor: pointer;
}

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: inherit;
  pointer-events: none;
  animation: ripple-shadow 0s forwards;
  -webkit-animation: ripple-shadow 0s forwards;
}

.rippleWave {
  backface-visibility: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.45;
  animation: ripple 1s forwards;
  -webkit-animation: ripple 1s forwards;
}

.stick-to-top {
  position: fixed !important;
  top: 20px;
}

.recent-reports-container {
  border-top: 0.5px solid #eee;
  padding-top: 4px;
}

html.touch *:hover {
  pointer-events: none !important;
  all: unset !important;
}

tr.clickable-row:hover {
  background-color: #eff1f1 !important;
}

/* Pagy styles */

.page-item.active > a.page-link {
  color: #354553 !important;
  background-color: #dee2e6 !important;
  border-color: #dee2e6 !important;
}

.page-link {
  color: #354553 !important;
}

/* Colibri forms */

.clickable-switch {
  width: 30px;
  height: 17px;
  border-radius: 17px;
  padding-top: 2px;
  margin-top: 5px;
}

.clickable-switch.switch-on {
  background-color: #17a2b8;
}

.clickable-switch.switch-off {
  background-color: #ccc;
}

.clickable-switch-slider {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background-color: white;
}

.clickable-switch-slider.switch-on {
  margin-left: 15px;
}

.clickable-switch-slider.switch-off {
  margin-left: 2px;
}

.colibri-form-info {
  background-color: #ecfdfd;
  color: #046985;
  border: 1px solid #17a2b8;
  font-size: 0.9em;
  padding: 6px;
}

.colibri-form-info.inline-info {
  display: inline;
}

.coli-text-info {
  color: #17a2b8;
}

.colibri-form-secondary {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #5f6368;
  color: #5f6368;
  font-size: 0.9em;
  border-radius: 4px;
  padding: 6px;
}

.colibri-form-warning {
  background-color: #fdf2a0;
  color: #6d6109;
  border: 1px solid #6d6109;
  font-size: 0.9em;
  padding: 6px;
}

.colibri-form-success {
  background-color: #e6facc;
  color: #476b43;
  border: 1px solid #476b43;
  font-size: 0.9em;
  padding: 6px;
}

.colibri-form-success.inline-success {
  display: inline;
}

.report-prefilled-pill {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  font-size: 0.78em;
  border-radius: 12px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
}

.colibri-form-alert {
  background-color: #fdb5bd;
  border: 1px solid #c2838a;
  color: #531e24;
  font-size: 0.9em;
  padding: 6px;
}

#admin-corporation-name-container {
  position: fixed;
  z-index: 2000;
  font-size: 0.9em;
  top: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 5px 17px;
  background-color: #e6facc;
  color: #476b43;
  border-radius: 4px;
}

#admin-corporation-name-container:hover {
  cursor: pointer;
}

#attendance-menu-icon {
  padding-bottom: 15px;
}

.mobile-only-display {
  display: none;
}

.hide-on-all-devices {
  display: none !important;
}

.ipad-no-flex {
  display: flex;
}

.ipad-only-display,
.badge.ipad-only-display {
  display: none !important;
}

.colibri-filter-btn-sm {
  border-radius: 14px;
  height: 28px;
  padding: 3px 9px 3px 9px;
  border: 1px solid transparent;
  line-height: 20px;
  font-size: 0.9em;
}

.colibri-filter-btn-sm.icon-filter {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.colibri-thread-line {
  height: 100%;
  width: 2px;
  background-color: #eff1f1;
  margin-left: auto;
  margin-right: auto;
}

.colibri-thread-icon-container {
  margin-top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #eff1f1;
  text-align: center;
  vertical-align: middle;
  padding-top: 6px;
}

.medical-reports-label {
  width: 160px;
}

.filter-selected.fc-button.fc-button-primary {
  background-color: #d5d5d5 !important;
}

.video-play-button {
  margin-left: -48px;
  margin-right: 32px;
  opacity: 0.85;
  width: 16px;
}

.video-play-button:hover {
  cursor: pointer;
}

.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #7ad5de;
  transition:
    width 120ms ease-out,
    opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: red;
}

input[type="file"][data-direct-upload-url][disabled] {
  display: none;
}

.colibri-yellow-warning {
  color: rgb(255, 223, 92);
  font-size: 11px;
}

.bg-warning-dark {
  background-color: #f29f23;
}

.coli-ripple:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
  visibility: hidden;
  z-index: 2;
}

.coli-ripple:not(:active):before {
  animation: colibri-ripple 0.4s cubic-bezier(0, 0, 0.2, 1);
  transition: visibility 0.4s step-end;
}

.coli-ripple:active:before {
  visibility: visible;
}

.anim-scale-in {
  animation-name: scale-in;
  animation-duration: 0.15s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

@keyframes colibri-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }

  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

@keyframes ripple {
  to {
    transform: scale(24);
    opacity: 0;
  }
}

@keyframes ripple-shadow {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  20% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

textarea {
  field-sizing: content;
  min-height: 4em !important;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-0 {
  flex: 0 1;
}

.flex-1 {
  flex: 1 1;
}

.audio-player-wrapper {
  padding: 4px 6px;
  background: #f8f9fa;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.audio-player-sm {
  height: 32px;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.hidden {
  display: none;
}

.show-more-link {
  color: #17a2b8;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;
  margin-top: 0.5rem;
  transition: color 0.2s;
}

.show-more-link:hover {
  color: #17a2b8;
  text-decoration: underline;
}

.calendar-filter-button {
  cursor: pointer;
}

.calendar-filter-button-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mobile-dropdown-menu {
  position: fixed;
  display: none;
  padding: 5px 8px;
  min-width: 80px;
  height: 85px;
  border: 1px solid #ccc;
  background-color: #fbfdfb;
  z-index: 50;
  border-radius: 3px;
}

.mobile-dropdown-menu-wide {
  max-width: 120px;
}

.mobile-dropdown-menu-tall {
  height: 110px;
}

.mobile-dropdown-menu .dropdown-item {
  color: rgb(115, 120, 124);
}

.recording-dot {
  width: 10px;
  height: 10px;
  background: #dc3545;
  border-radius: 50%;
  animation: pulse-dot 1s infinite;
  display: inline-block;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}
.generating-report-post-body-container {
  background-color: #f5f7fa;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.generating-report-spinner {
  width: 2rem;
  height: 2rem;
  animation-duration: 2s;
}

.btn-new-meeting-recording {
  color: white !important;
}

.btn-new-meeting-recording i {
  color: white;
  font-size: 12px;
}

.record-btn--recording {
  background-color: #ff9190 !important;
}

.record-btn-icon {
  color: white;
  font-size: 32px;
}
.refine-dropdown {
  position: relative;
  display: inline-block;
}

/* Button */
.refine-dropdown .dropdown-toggle {
  min-width: 100px; /* keeps width stable */
  text-align: center;
}

/* Bootstrap-like info button */
.btn-info {
  background-color: #0dcaf0;
  border: 1px solid #0dcaf0;
  color: #000;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.btn-info:hover {
  background-color: #31d2f2;
  border-color: #31d2f2;
  color: #000;
}

/* Dropdown menu */
.refine-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* Dropdown options */
.refine-dropdown .dropdown-menu .option {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #212529;
  white-space: nowrap;
}

.refine-dropdown .dropdown-menu .option:hover {
  background-color: #e9f7fb;
}

/* Skeleton loader for care instructions */
.skeleton-line {
  height: 1em;
  background-color: #97e4e4;
  margin-bottom: 0.5em;
  border-radius: 4px;
  animation: blink 1.5s infinite ease-in-out;
}

.skeleton-line-for-button {
  height: 24px;
  width: 100px;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.pc-shift-page-header-title {
  /* No fixed width/height: long patient/office names must wrap inside the header instead of overflowing onto the tabs below */
  min-height: 24px;
  opacity: 1;
  top: -0.5px;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: rgba(27, 38, 59, 1);
  margin-left: 1rem;
}

#pc-shift-page-tabs {
  padding-left: 25px;
}

.pc-shift-page-tabs {
  width: 1140px;
  height: 80px;
  justify-content: space-between;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

.pc-shift-page-tabs-inner {
  width: 1092px;
  height: 48px;
  grid-gap: 16px;
  gap: 16px;
  display: flex;
  border-bottom-width: 1px;
}

.pc-shift-page-tab-item,
.pc-shift-page-tab-item-non-link {
  width: 140px;
  height: 48px;
  min-width: fit-content;
  padding-right: 24px;
  padding-left: 24px;
  text-align: center;
  color: rgba(79, 91, 102, 1);
  cursor: pointer;
  font-weight: 300;
  font-size: 20px;
  align-items: center;
  line-height: 48px;
}

.tab-item-selected {
  border-bottom: 2px solid rgba(168, 180, 190, 1);
}

.no-shadow {
  box-shadow: none !important;
}

#coli-main-frame.with-top-border-pc-only,
#smartphone-planning-wrapper.with-top-border {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#planning-header-container.no-bottom-margin {
  margin-bottom: 0px !important;
}

.selectize-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#contract-thread-container {
  width: 100%;
  overflow: hidden;
}

#nursing-home-report-data-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#nursing-home-graphs-wrapper {
  padding: 15px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.nursing-home-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 15px;
  gap: 15px;
  width: 100%;
}

@media (max-width: 900px) {
  .nursing-home-charts-grid {
    grid-template-columns: 1fr;
  }
}

.nursing-home-chart-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  min-width: 0;
  max-width: 100%;
}

.nursing-home-chart-header {
  padding: 10px 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.nursing-home-chart-header i {
  margin-right: 8px;
  color: #7ad5de;
}

.nursing-home-chart-body {
  padding: 15px;
  position: relative;
  height: 200px;
  width: 100%;
  box-sizing: border-box;
}

.nursing-home-chart-body > div {
  width: 100% !important;
  height: 100% !important;
}

.nursing-home-chart-body canvas {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
}

/* Payable report cards - content-width, not grid-constrained */
.payable-body .nursing-home-chart-card {
  width: 100%;
}

.nursing-home-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.nursing-home-empty-state .fa {
  font-size: 40px;
  margin-bottom: 10px;
}

.external-users-info {
  color: #606e7c;
  border-bottom: 1px solid #eff1f1;
}

.patients-list-collapsed {
  margin-bottom: 25px;
}

.patients-index {
  margin-left: 0;
}
.address-section {
  margin-bottom: 2rem;
}

.section-title {
  font-weight: 800;
  border-left: 6px solid cyan;
  padding-left: 0.75rem;
}

.table-nurse th {
  background-color: #f8f9fa;
}
.table-nurse th:nth-child(2),
.table-nurse th:nth-child(3),
.table-nurse td:nth-child(2),
.table-nurse td:nth-child(3) {
  width: 90px;
}

.nurse-location-toggle .btn {
  width: 50px;
  font-size: 0.85rem;
  padding: 0;
  text-align: center;
}

.custom-tabs {
  border-bottom: 2px solid #dee2e6 !important; /* grey line below all tabs */
  margin-bottom: 1rem;
}

.custom-tabs .nav-link {
  color: #000;
  background-color: transparent;
  border: none !important; /* Override Bootstrap borders */
  border-bottom: 2px solid transparent !important;
  font-weight: 500;
  position: relative;
  margin-bottom: -2px; /* Pull tab down to overlap with container border */
}

/* Active tab - interrupts the bottom line */
.custom-tabs .nav-link.active {
  color: #138496;
  border-bottom: 2px solid #138496 !important;
  background-color: white;
  font-weight: 600;
}

/* Hover effect for non-active tabs */
.custom-tabs .nav-link:hover {
  color: #138496;
}

.transport-select {
  min-height: 32px;
}

.service-select-wrapper {
  position: relative;

  .service-select {
    min-height: 42px;
    cursor: pointer;

    font-size: 0 !important;

    option {
      font-size: 1rem;
      padding: 8px 12px;

      &:checked {
        background: #138496 !important;
        color: white !important;
        font-weight: 500;
      }
    }

    &:focus {
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
  }

  .custom-overlay {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #595e64;
    font-size: 1rem;

    &.has-selection {
      color: #212529;
      font-weight: 500;
    }
  }
}
.circle-icon {
  background-color: #35a3d4;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  color: white;
  line-height: 25px;
}

.entry-door-button {
  display: block;
  width: 80px;
  height: 80px;
  color: white;
  background-color: #ccc;
  border: none;
  border-radius: 50px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 80px;
  font-weight: bold;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.19),
    0 3px 3px rgba(0, 0, 0, 0.23);
  margin: 0 auto 40px;
  cursor: pointer;
}

.entry-door-button-ready {
  background-color: #ff9090;
}

.map-row-hidden {
  display: none;
}

.routing-map {
  height: 400px;
}

.routing-maps-container {
  display: flex;
  grid-gap: 15px;
  gap: 15px;
}

.routing-map-all {
  flex: 1 1;
  height: 500px;
}

.nurse-filter-panel {
  width: 250px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  height: 500px;
  overflow-y: auto;
}

.nurse-filter-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

/* Routing analysis table - column widths */
.col-nurse-name {
  width: 14%;
}
.col-appointments {
  width: 8%;
}
.col-service-time {
  width: 12%;
}
.col-time-range {
  width: 14%;
}
.col-transport {
  width: 5%;
}
.col-travel-time {
  width: 10%;
}
.col-avg-travel {
  width: 10%;
}
.col-distance {
  width: 10%;
}
.col-map-btn {
  width: 6%;
}

/* Routing analysis table - 2-row header styles */
.routing-analysis-table thead .header-category-row th {
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle;
}

.routing-analysis-table thead .header-detail-row th {
  vertical-align: middle;
}

.routing-analysis-table .header-category {
  background-color: #f8f9fa;
}

.routing-analysis-table .cell-bordered {
  border-right: 2px solid #dee2e6;
}

/* Routing map styles */
.map-row-hidden {
  display: none;
}

/* Button spacing */
.btn-action-spacing {
  margin-bottom: 10px;
  margin-right: 4px;
}

/* Hidden button state */
.btn-hidden {
  display: none;
}

/* Icon sizing */
.icon-list-size {
  font-size: 17px;
}

.icon-details-size {
  display: inline-block;
  font-size: 17px;
  margin-bottom: -2px;
}

.icon-report-size {
  font-size: 17px;
}

.colibri-processing {
  background: linear-gradient(
    90deg,
    #c8f6df 0%,
    #99e6bf 25%,
    #7dd8a8 50%,
    #99e6bf 75%,
    #c8f6df 100%
  );
  background-size: 200% 100%;
  animation: gradient-cycle 3s ease-in-out infinite;
}

@keyframes gradient-cycle {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Alternative: stripe movement animation */
.colibri-processing-stripe {
  background: repeating-linear-gradient(
    45deg,
    #b8e6cf,
    #b8e6cf 10px,
    #99e6bf 10px,
    #99e6bf 20px
  );
  background-size: 28.28px 28.28px; /* sqrt(2) * stripe-width for seamless movement */
  animation: stripe-move 0.8s linear infinite;
}

@keyframes stripe-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28.28px 0;
  }
}

.table-striped-2 tbody tr:nth-child(4n + 1),
.table-striped-2 tbody tr:nth-child(4n + 2) {
  --bs-table-bg: rgba(0, 0, 0, 0.05);
}

.table-striped-2 tbody tr:nth-child(4n + 3),
.table-striped-2 tbody tr:nth-child(4n + 4) {
  --bs-table-bg: transparent;
}

/* Routing Map Styles */
.nurse-checkbox-wrapper {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.nurse-checkbox {
  cursor: pointer;
}

.nurse-checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  flex: 1 1;
}

.nurse-color-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  display: inline-block;
}

.nurse-name {
  font-size: 14px;
}

.routing-map-popup {
  width: 220px;
}

.home-marker-icon,
.numbered-marker-icon {
  background: transparent;
  border: none;
}

/* Prescription document upload styles */
.prescription-upload-container {
  background-color: #d9dee3;
  border-radius: 8px;
  border: 1px dashed #dee2e672;
}

.prescription-upload-icon {
  font-size: 2rem;
  color: #6c757d;
}

.prescription-upload-title {
  color: #495057;
}

.prescription-upload-subtitle {
  font-size: 0.7rem;
}

.prescription-upload-warning {
  font-size: 0.75rem;
  color: #dc3545 !important;
}

.prescription-upload-file-info {
  background-color: #e9ecef;
  border-radius: 4px;
}

.prescription-upload-progress {
  height: 4px;
}

.prescription-upload-close-btn {
  padding: 0.5rem;
}

.cursor-pointer {
  cursor: pointer;
}

/* Medical device switch styling */
.medical-device-switch {
  width: 2.5em !important;
  height: 1.25em !important;
  cursor: pointer;
}

.medical-device-switch:checked {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.medical-device-switch-label {
  font-size: 0.875rem;
  color: #333;
  min-width: 1.5em;
}

/* Psychiatry switch styling */
.psychiatry-switch {
  width: 2.5em !important;
  height: 1.25em !important;
  cursor: pointer;
}

.psychiatry-switch:checked {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.psychiatry-switch-label {
  font-size: 0.875rem;
  color: #333;
  min-width: 2.5em;
}

/* Nursing prescription form modal scrollable content with sticky footer */
#new_nursing_prescription .modal-content,
#edit_nursing_prescription .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#nursing_prescription_form {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

#nursing_prescription_form .modal-footer {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  z-index: 10;
  padding: 1rem;
  flex-shrink: 0;
}

#nursing_prescription_form #submit-nursing-prescription-form:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Document Viewer for Nursing Prescriptions */

/* When both modals are shown side by side */
.modal-with-document-viewer {
  z-index: 1055;
  pointer-events: none;
}

.modal-with-document-viewer .modal-dialog {
  margin-left: 1%;
  margin-right: auto;
  max-width: 58%;
  pointer-events: auto;
  transition:
    margin 0.3s ease,
    max-width 0.3s ease;
}

.document-viewer-modal {
  z-index: 1056;
  pointer-events: none;
}

.document-viewer-modal .modal-dialog {
  margin-left: auto;
  margin-right: 1%;
  max-width: 39%;
  height: calc(100vh - 3.5rem);
  pointer-events: auto;
}

.document-viewer-modal .modal-content {
  height: 100%;
  max-height: calc(100vh - 3.5rem);
}

.document-viewer-modal .modal-body {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.document-viewer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.document-viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
  flex-shrink: 0;
}

.document-viewer-controls .btn {
  padding: 4px 8px;
}

#document-zoom-level {
  min-width: 50px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.document-viewer-content {
  flex: 1 1;
  overflow: auto;
  position: relative;
  background-color: #e9ecef;
}

.document-frame {
  width: 100%;
  height: 100%;
  border: none;
}

.document-image-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  cursor: grab;
  padding: 16px;
  box-sizing: border-box;
}

.document-image-container:active {
  cursor: grabbing;
}

.document-image {
  max-width: none;
  transition: transform 0.1s ease-out;
  display: block;
}

.document-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
}

.document-unsupported i {
  font-size: 48px;
  margin-bottom: 16px;
}

.document-unsupported p {
  margin-bottom: 16px;
}

/* Responsive adjustments for side-by-side modals */
@media (max-width: 1200px) {
  .modal-with-document-viewer .modal-dialog {
    max-width: 58%;
    margin-left: 1%;
  }

  .document-viewer-modal .modal-dialog {
    max-width: 39%;
    margin-right: 1%;
  }
}

@media (max-width: 991px) {
  .modal-with-document-viewer,
  .document-viewer-modal {
    pointer-events: auto;
  }

  .modal-with-document-viewer .modal-dialog {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .document-viewer-modal .modal-dialog {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-height: 80vh;
  }
}

/* 指示書 shown beside the medical report form */
.report-prescriptions-caption {
  color: #828e99;
  font-size: 0.9em;
  margin-bottom: 8px;
}

.report-prescription-card {
  border: 1px solid #d5dde3;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: white;
}

.report-prescription-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  background-color: #defcfc;
  color: #034b5f;
}

.report-prescription-card-special {
  border-color: #f3c77a;
}

.report-prescription-card-special .report-prescription-card-header {
  background-color: #fff4e0;
  color: #7a4100;
}

.report-prescription-card-title {
  font-weight: bold;
}

.report-prescription-card-meta {
  font-size: 0.85em;
}

.report-prescription-card-body {
  padding: 4px 12px 12px;
}

.report-prescription-item {
  padding: 8px 0;
  border-bottom: 1px dotted #ccc;
}

.report-prescription-item:last-child {
  border-bottom: none;
}

.report-prescription-item-label {
  color: #697580;
  font-size: 0.85em;
}

.report-prescription-item-value {
  white-space: pre-line;
}

.document-viewer-modal .report-prescriptions-panel-body {
  overflow-y: auto;
  display: block;
  background-color: #f4f6f8;
}

/* Tablet portrait: the 指示書 are a tab of the report modal instead of a side panel (see initReportPrescriptionsPanel) */
.nav.report-reference-modal-tabs {
  display: none;
}

.report-prescriptions-tab-pane {
  padding: 16px 20px;
  background-color: #f4f6f8;
}

@media (max-width: 1079.98px) {
  .nav.report-reference-modal-tabs {
    display: flex;
  }

  .btn.report-prescriptions-toggle {
    display: none;
  }

  .modal-with-report-tabs .modal-dialog {
    max-width: min(800px, calc(100% - 2rem));
  }
}

.message-container {
  display: flex;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.colibri-radio-item {
  width: 100%;
  line-height: 45px;
  margin-bottom: 10px;
  padding: 6px 10px 6px 10px;
  background-color: #eff1f1;
  border: 2px solid #eff1f1;
  border-radius: 4px;
  cursor: pointer;
}

.colibri-radio-item-content {
  display: flex;
}

.colibri-radio-item.radio-selected {
  background-color: #e0fdec;
  border: 2px solid #6bcd93;
}

.colibri-radio-label {
  width: calc(100% - 91px);
  color: #4f5b66;
  padding-left: 15px;
  font-size: 1.3em;
  line-height: 45px;
}

.colibri-radio-checkmark {
  width: 45px;
}

.colibri-radio.glyphicon {
  font-size: 16px;
}

/* Batch upload styles */
.batch-upload-dropzone {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f8f9fa;
}

.batch-upload-dropzone:hover {
  border-color: #17a2b8;
  background-color: #f0f9fa;
}

.batch-upload-dropzone.dropzone-active {
  border-color: #17a2b8;
  background-color: #e7f7f9;
  border-style: solid;
}

.batch-upload-dropzone .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.batch-file-list {
  max-height: 300px;
  overflow-y: auto;
}

.batch-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background-color: #fff;
  transition: all 0.2s ease;
}

.batch-file-item .file-info {
  display: flex;
  align-items: center;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1;
}

.batch-file-item .file-icon {
  font-size: 1.5rem;
  color: #6c757d;
  flex-shrink: 0;
}

.batch-file-item .file-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.batch-file-item .file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.batch-file-item .file-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.batch-file-item.uploading,
.batch-file-item.parsing {
  background-color: #fff3cd;
  border-color: #ffc107;
}

.batch-file-item.uploading .file-status,
.batch-file-item.parsing .file-status {
  color: #856404;
}

.batch-file-item.completed {
  background-color: #d4edda;
  border-color: #28a745;
}

.batch-file-item.completed .file-status {
  color: #155724;
}

.batch-file-item.completed .file-icon {
  color: #28a745;
}

.batch-file-item.failed {
  background-color: #f8d7da;
  border-color: #dc3545;
}

.batch-file-item.failed .file-status {
  color: #721c24;
}

.batch-file-item.failed .file-icon {
  color: #dc3545;
}

/* Small variants for multi-dropzone layout */
.batch-upload-dropzone-small {
  padding: 1rem;
  min-height: 80px;
}

.batch-upload-dropzone-small .dropzone-content {
  grid-gap: 0.25rem;
  gap: 0.25rem;
}

.batch-file-list-small {
  max-height: 200px;
  overflow-y: auto;
}

.batch-file-item-small {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

.batch-file-item-small .file-icon {
  font-size: 1.25rem;
}

.batch-file-item-small .file-info {
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.batch-file-item-small .file-name {
  font-size: 0.875rem;
}

.prescription-type-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  height: 100%;
}

.routing-map-fixed-height {
  height: 500px;
}

.min-width-140 {
  min-width: 140px;
}

.scroll-to-top-button {
  position: fixed;
  z-index: 6;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  bottom: 30px;
  right: 30px;
  color: white;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.19),
    0 3px 3px rgba(0, 0, 0, 0.23);
}

.scroll-to-top-button:hover {
  background: #3a434c;
}

.scroll-to-top-button .fa-arrow-up {
  font-size: 18px;
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

/* ── Meeting Recording Form ─────────────────────────────── */

.meeting-section-label {
  font-size: 1.6rem;
}

.meeting-recording-box {
  border: 3px solid #ff9190;
  border-radius: 15px;
  padding: 20px;
  background-color: white;
}

.meeting-record-btn {
  width: 80px;
  height: 80px;
  background-color: #ff9190;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.meeting-record-btn i {
  color: white;
  font-size: 32px;
}

.meeting-recording-center {
  min-height: 80px;
}

.meeting-recording-instructions {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

#waveform-container {
  width: 100%;
  height: 60px;
}

#recording-timer-display {
  text-align: center;
  margin-right: 20px;
  flex-shrink: 0;
}

#timer-status-text {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

#timer-display {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.meeting-illustration {
  flex-shrink: 0;
}

.meeting-illustration img {
  height: 80px;
  width: auto;
}

.meeting-upload-label {
  cursor: pointer;
  color: #555;
  font-size: 14px;
}

.meeting-upload-label .fa-upload {
  font-size: 13px;
}

.meeting-upload-text {
  text-decoration: underline;
}

.meeting-upload-box {
  border: 3px solid #90b8ff;
  border-radius: 15px;
  padding: 20px;
  background-color: white;
}

.meeting-upload-icon {
  width: 60px;
  height: 60px;
  background-color: #90b8ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.meeting-upload-icon i {
  color: white;
  font-size: 24px;
}

.meeting-upload-filename {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.meeting-upload-progress {
  height: 6px;
}

.meeting-upload-progress-text {
  color: #888;
}

.prompt-key-select {
  width: 250px;
}

.prompt-version-label {
  font-size: 0.85rem;
}

.prompt-appointment-id-input {
  max-width: 120px;
}

.prompt-monospace-textarea {
  font-size: 12px;
  resize: vertical;
}

.prompt-output-display {
  white-space: pre-wrap;
  font-size: 14px;
  min-height: 80px;
}

.attendance-delete-icon {
  color: white;
  font-size: 16px;
}

.attendance-delete-icon-sm {
  color: white;
  font-size: 12px;
}

.text-bronze {
  color: #b8860b;
}

.wished-slot-pattern-card {
  flex: 1 1 260px;
  max-width: 300px;
}

.wished-slot-patterns-grid-stacked > .wished-slot-pattern-card {
  flex: 0 0 auto;
  max-width: 500px;
}

.wished-slot-patterns-grid-stacked-narrow > .wished-slot-pattern-card {
  flex: 0 0 auto;
  max-width: 400px;
}

#planning-options.wished-slot-patterns-wide-page {
  max-width: none;
}

#color-select-for-modal-selectized {
  position: absolute;
  left: -100000px;
}

.admin-panel-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.admin-panel-card-header {
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 8px;
}

.admin-section-bar {
  padding-bottom: 2px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  height: 31px;
}

.col-id {
  width: 50px;
}

.admin-back-btn {
  margin-top: -2px;
}

/* Improve routes (移動を減らす) tab */
.improve-routes-sidebar {
  min-width: 200px;
}

.improve-routes-nurse-name {
  min-width: 120px;
}

.improve-routes-appt-time {
  min-width: 110px;
}

.improve-routes-comparison-map {
  height: 350px;
}

.improve-routes-stat-box {
  background: #f0f2f4;
  border: 1px solid #d5d9de;
}

.improve-routes-stat-box-success {
  background: #f0faf5;
}

.improve-routes-nurse-card {
  border: 1px solid #d5d9de;
}

.improve-routes-nurse-card-header {
  background: #f0f2f4;
  border-bottom: 1px solid #d5d9de;
}

.improve-routes-appt-removed {
  background: #fff5f5;
  border: 1px solid #f5c6cb;
}

.improve-routes-appt-added {
  background: #f0faf5;
  border: 1px solid #b7dfcc;
}

.badge-xs {
  font-size: 10px;
}

.improve-routes-clickable-row {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.drag-drop-comparison-card-after {
  background-color: #edf7f9;
  border-color: #b8dde4;
  color: #8ba3a9;
}

.drag-drop-comparison-card-after-title {
  color: #17a2b8;
}

.drag-drop-comparison-changed-value {
  color: #000;
  font-weight: bold;
}


.text-pre-wrap {
  white-space: pre-wrap;
}

/* PDF recipient autofill tags (計画書の日付と送信先) */
.recipient-autofill-card {
  background-color: #edf7f9;
  border: 1px solid #b8dde4;
  border-radius: 8px;
  padding: 10px 12px;
}

.recipient-autofill-title {
  color: #046985;
  font-size: 0.85em;
  font-weight: bold;
}

.recipient-tag {
  background-color: #fff;
  border: 1px solid #b8dde4;
  border-radius: 19px;
  color: #046985;
  font-size: 0.85em;
  padding: 4px 12px;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.recipient-tag:hover {
  background-color: #e7f7f9;
  border-color: #17a2b8;
}

.recipient-tag.recipient-tag-active {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}

/* Compact 看護記録 summary: a separator between category rows, checked fields as outlined chips,
   vitals as tiles. Layout and type come from Bootstrap utilities in the markup. */
.report-summary-row + .report-summary-row {
  border-top: 1px solid #e6eaed;
}

.report-summary-chip {
  background-color: #fff;
  border: 1px solid #b9c4cc;
  border-radius: 4px;
  font-size: 14px;
  overflow-wrap: anywhere;
  padding: 2px 8px;
}

.report-vitals-cell {
  background-color: #f4f7f8;
  min-width: 64px;
}

/* 測定不可 */
.report-vitals-value-alert {
  color: #8a4b0f;
}

/* 看護記録 rows of the 記録 lists (offices#reports_summary, patient_office_contracts#show) on desktop:
   サービス情報 (fixed share), 援助内容 (vitals only) and 特記事項 (category summary) share the rest,
   アクション is as narrow as its buttons. 実施記録 rows keep the column widths of patients.css. */
.report-columns-compact {
  grid-column-gap: 12px;
  column-gap: 12px;
}

.report-columns-compact .reportable-information {
  width: 20%;
  flex-shrink: 0;
}

.report-columns-compact .report-items {
  width: auto;
  flex: 0.8 1;
  min-width: 0;
}

.report-columns-compact .report-body {
  width: auto;
  flex: 1.4 1;
  min-width: 0;
}

/* Fits the 110px buttons (編集, 再提出依頼…) and the thread-block padding */
.report-columns-compact .report-action {
  width: 116px;
  flex: 0 0 auto;
}


/* Header of the 看護記録 list: the original table look, laid out like the report rows under it.
   The row padding mirrors .contract-thread-item + .thread-item-body (margin, border, padding),
   the cell padding mirrors .thread-block, and the borders sit on the row only so they run unbroken. */
table.table.report-columns-header-table,
table.table.report-columns-header-table > thead {
  display: block;
}

table.table.report-columns-header-table > thead {
  border: none !important;
}

table.table.report-columns-header-table > thead > tr {
  display: flex;
  padding-left: 24px;
  padding-right: 33px;
}

table.table.report-columns-header-table > thead > tr > th {
  border: none !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}
@media screen and (min-width: 743px) and (max-width: 1032px) {
  #colibri-nav-container {
    margin-left: 15px !important;
  }

  #top-subsection {
    margin-bottom: -60px !important;
    padding-top: 100px !important;
  }

  .ipad-no-display {
    display: none !important;
  }

  .ipad-only-display,
  .ipad-only-display.post-edit {
    display: block !important;
  }

  .dropdown-menu.ipad-only-display {
    display: none !important;
  }

  .dropdown-menu.ipad-only-display.show {
    display: block !important;
  }

  #payable-container.no-resources-width {
    width: calc(100vw - 58px) !important;
    left: 58px;
  }

  #detail-container.no-resources-width {
    max-width: calc(100vw - 55px) !important;
    width: calc(100vw - 55px) !important;
  }

  #planning-header {
    display: block !important;
  }

  #nurse_filter_wrapper {
    margin-left: 0px !important;
    margin-top: -13px;
    margin-bottom: 7px;
  }

  #reports-header {
    display: flex;
    flex-direction: column-reverse;
  }

  #completion-reports-query-date-container {
    width: 100%;
    display: flex;
    justify-content: end;
  }

  #reports-filters {
    margin-top: 10px;
  }

  #appointments-and-instructions {
    width: 100%;
  }

  #recent-information-container {
    display: none !important;
  }

  .thread-item-body {
    display: block !important;
  }

  .reportable-information,
  .post-information {
    width: 100% !important;
  }

  .report-items,
  .post-readmarks {
    width: 100% !important;
  }

  .report-body,
  .post-content {
    width: 100% !important;
  }

  .report-action,
  .post-action {
    width: 100% !important;
  }

  .reportable-info-block,
  .post-info-block {
    display: flex;
  }

  .post-information,
  .reportable-info-container {
    display: flex;
    border-bottom: 1px solid #eff1f1;
  }

  .post-content,
  .report-body {
    margin-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eff1f1;
    margin-bottom: 3px;
  }

  .post-action,
  .report-action {
    text-align: right;
  }

  .reportable-second-nurse-information {
    display: none !important;
  }

  .ipad-no-flex {
    display: block !important;
  }

  .report-warnings {
    width: 100%;
  }

  .report-detailed-items {
    width: 100%;
  }

  /* fullCalendar layouts */

  .fc-list.fc-view.fc-listDay-view {
    border-color: transparent !important;
  }

  .fc-list-day.fc-day {
    display: none !important;
  }

  .colibri-fc-list {
    border-radius: 6px;
    background-color: #eff2f5;
    padding: 8px;
    margin-top: 6px;
  }

  .colibri-fc-list-time {
    font-size: 0.8em;
  }

  .colibri-fc-list-body {
    margin-left: 15px;
    margin-bottom: 0px;
    padding: 4px 6px;
    background-color: white;
    border: 0.5px solid #2b384e;
    border-radius: 4px;
  }

  .colibri-fc-list-title {
    color: black;
  }

  .colibri-list-subtitle {
    margin-bottom: 0px;
    margin-left: 15px;
    font-size: 0.8em;
  }

  .fc-list-empty {
    height: auto !important;
    background-color: white !important;
    padding-top: 6px;
    border-top: 1px solid #eff1f1;
  }

  .activity_subtitle {
    font-size: 1.3em;
    color: #4f5d66;
    border-bottom: 0.5px dotted #ddd;
    display: flex;
    justify-content: space-between;
  }

  .toggleable_activity {
    display: none;
  }

  .activity_subcontainer {
    padding: 4px 0px;
    margin-top: 5px;
  }

  .activity_subcontainer > p {
    margin-bottom: 0px;
  }

  .coli-report-container {
    margin-bottom: 6px;
  }

  .coli-report-header {
    display: flex;
    justify-content: space-between;
  }

  .coli-report-publisher {
    font-size: 0.85em;
  }

  .coli-report-published-at {
    font-size: 0.85em;
  }

  .coli-report-body {
    background-color: #defcfc;
    padding: 3px 8px 3px 8px;
    border-radius: 3px;
  }

  .details-table-cell > p {
    margin-bottom: 0px;
  }
  .details-table-cell > p {
    margin-bottom: 0px;
  }

  .pc-shift-page-tabs-inner {
    grid-gap: 10px;
    gap: 10px;
  }

  /* hardcoded value works well here because of lack of notches/dynamic islands etc */
  .padding-top-adjusted-for-system-bars-tablet-only {
    padding-top: 30px !important;
  }
}
#vital-recheck-fields {
  border-top: 1px solid #ddd;
}
.align-right {
  float: right;
}

#payable-container {
  position: fixed;
  margin-left: 298px;
  height: 100vh;
  overflow-y: scroll;
  width: calc(100vw - 298px);
  overflow-x: hidden;
  margin-bottom: 50px;
}

#payable-dashboard {
  min-width: 150px;
}

#chart-and-details-container {
  height: 125px;
  border-left: 0.5px #ccc solid;
  padding-left: 10px;
}

.payable-body {
  padding-bottom: 40px;
  padding-left: 7px;
  padding-right: 7px;
}

p.payable-dashboard-line {
  margin-bottom: 5px;
}

.payable-dashboard-important {
  font-weight: bold;
  font-size: 1.3em;
}

.payable-dashboard-text-container {
  margin-left: 10px;
}

#payable-charts {
  display: flex;
  margin-bottom: 20px;
}

#toggle-patients-nurses {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7px;
}

#payable-download-button {
  margin-left: auto;
  margin-right: 0;
}

#payable-table-commands {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid #eaecec;
  margin-bottom: 7px;
}

.sunday-holiday-provided-service {
  color: #ff304f !important;
}

.saturday-provided-service {
  color: #118df0 !important;
}

.cancelled-provided-service {
  text-align: center;
  font-size: 1.15em;
  padding-bottom: 2px;
  padding-top: 2px;
  background-image: repeating-linear-gradient(
    45deg,
    #ffbfbf,
    #ffbfbf 5px,
    #ff8484 5px,
    #ff8484 10px
  ) !important;
}

.edit-requested-provided-service {
  text-align: center;
  font-size: 1.15em;
  padding-bottom: 2px;
  padding-top: 2px;
  background-image: repeating-linear-gradient(
    45deg,
    #c8f6df,
    #c8f6df 5px,
    #99e6bf 5px,
    #99e6bf 10px
  );
}

#chosen_custom_email_days_chosen {
  width: 120px !important;
}

#nurse-details-button {
  margin-left: 10px;
}

.planning-nurse-module-title {
  min-width: 100px;
}

.planning-nurse-module-title:hover {
  cursor: pointer;
}

#resource-details-panel {
  background-color: white;
  position: fixed;
  right: 0px;
  top: 0px;
  width: 400px;
  box-shadow: 0px 5px 5px 0px #dde4ec;
  z-index: 15;
  padding: 15px 10px 15px 10px;
  border: 0.5px solid #ddd;
  height: 100vh;
  overflow-y: auto;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

#resource-details-panel::-webkit-scrollbar {
  display: none;
}

#resource-detail-body {
  height: calc(100% - 32px);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
}

.resource-details-block-title {
  margin-top: 15px;
  padding-bottom: 5px;
  border-bottom: 0.5px solid #ddd;
  margin-bottom: 4px;
  color: #4f4f4f;
}

.resource-details-indented-table {
  margin-left: 10px;
  padding-bottom: 3px;
  border-collapse: collapse;
  width: auto;
}

.resource-details-block-subtitle {
  margin: 15px 0 4px;
  padding-bottom: 5px;
  color: #4f4f4f;
  font-weight: 500;
}

.resource-details-indented-table thead {
  background-color: #EEEEEE;
  font-size: 0.85em;
  padding-bottom: 24px;
}

.resource-details-indented-table thead th {
  padding: 4px;
  width: 47px;
}

.resource-details-indented-table thead th:first-child {
  width: 215px;
}

.resource-details-indented-table td {
  padding: 5px;
  border-bottom: 0.5px solid #ddd;
}

td.details-table-body {
  text-wrap: wrap;
  padding-right: 7px;
}

.details-table-head-lg {
  width: 215px;
}

.resource-detail-table {
  width: 100%;
}

.resource-detail-table > tr {
  width: 100%;
}

#resource-action-block {
  margin-top: 10px;
  margin-bottom: 20px;
}

.btn-light-custom {
  border: 0.5px solid #eee;
}

#resource-detail-header {
  border-bottom: 0.5px solid #ddd;
  margin-bottom: 5px;
}

div.resource-details-table {
  font-size: 0.85em;
  padding-bottom: 3px;
  padding-left: 0px;
  vertical-align: top;
  width: 100%;
}

.resource-history {
  font-size: 0.85em;
  margin-bottom: 1px;
}

.close-button-span:hover {
  cursor: pointer;
}

#payable-query {
  font-size: 0.7em;
}

.refresh-button {
  margin-bottom: 3px;
  background-color: #bbb;
}

.refresh-button:hover {
  cursor: pointer;
}

.colibri-payable-subtitle {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 1.2em;
  color: black;
  font-weight: bold;
}

.nurse-wage-element {
  display: flex;
}

.wage-element-title {
  width: 110px;
  text-align: right;
  font-size: 1em;
}

.attendance-el-title {
  width: 80px;
  text-align: right;
  font-size: 1em;
}

.wage-element-value {
  width: 150px;
  padding-left: 6px;
}

.attendance-el-value {
  width: 180px;
  padding-left: 6px;
}

.wage-element-title.total-wage {
  border-top: 1px solid #ccc;
}

.attendance-container {
  border: 0.5px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  background-color: #fefffe;
}

.attendance-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 0.5px solid #ccc;
}

.attendance-datetime {
  flex-grow: 1;
}

.attendance-summary-container {
  margin-right: 5px;
  border: 0.5px solid #ccc;
  border-radius: 3px;
  width: 60%;
}

.attendance-action-container {
  display: flex;
  justify-content: space-between;
}

.attendance-date-query-container {
  display: flex;
  padding: 15px 10px 15px 0px;
  max-height: 55px;
  justify-content: right;
}

@media print {
  .completion-report-message-body {
    border: 3px solid #defcfc;
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .completed-report-row {
    border-bottom: 0.5px solid #dee2e6;
  }

  .completed-report-row > td {
    font-size: 16px;
  }

  #payable-container {
    height: auto !important;
    overflow: visible;
    max-width: none;
    min-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0px;
    position: relative;
  }
}
/* ============ HP – DESIGN TOKENS ============
   Retheme the whole site here. Figma "Humming Sky" palette mapped onto the existing variable names. */
:root {   /* brand blue: labels, active states, solid CTAs */   /* light blue backgrounds */   /* button / link hover */   /* coral button hover */   /* headings / body */   /* CTA / link highlight */   /* coral: hero/header CTAs */
}

/* ============ HP – IMAGE PLACEHOLDERS ============
   Real image: uncomment the image_tag above, delete the placeholder div. */
.hp-image-placeholder {
  background: #E9ECEF;
  border: 2px dashed #ADB5BD;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C757D;
  font-size: 0.8rem;
}
.hp-placeholder-hero    { min-height: 400px; }
.hp-placeholder-article { min-height: 280px; }

/* ============ HP – MEGA MENU (職種別機能) ============
   Left: service types. Right: feature links by category. */
.hp-mega-panel {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 29;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
  border-top: 1px solid #f0f0f0;
}

.hp-mega-inner {
  display: flex;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px;
}

.hp-mega-services {
  width: 160px;
  flex-shrink: 0;
  border-right: 1px solid #eee;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  grid-gap: 4px;
  gap: 4px;
}

.hp-mega-service-item {
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.95em;
  color: #393E46;
  transition: background 0.15s, color 0.15s;
  -webkit-user-select: none;
          user-select: none;
}

.hp-mega-service-item:hover,
.hp-mega-service-item.hp-mega-service-active {
  background: #EBF5FB;
  color: #479BDE;
  font-weight: 600;
}

.hp-mega-features {
  flex: 1 1;
  padding-left: 28px;
}

.hp-mega-feature-group {
  display: flex;
  flex-direction: column;
}

.hp-mega-section-label {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6C757D;
  margin-top: 14px;
  margin-bottom: 8px;
}

.hp-mega-section-label:first-child {
  margin-top: 0;
}

.hp-mega-links-row {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 4px 6px;
  gap: 4px 6px;
  margin-bottom: 4px;
}

.hp-mega-link {
  display: inline-block;
  padding: 5px 12px;
  color: #393E46;
  text-decoration: none;
  font-size: 0.92em;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hp-mega-link:hover {
  background: #EBF5FB;
  color: #479BDE;
  border-color: transparent;
  text-decoration: none;
}


/* ============ HP – CTA BANNER (_hp_cta_banner) ============ */
.hp-cta-banner {
  background: #EBF5FB;
  padding: 80px 24px;
  text-align: center;
}

.hp-cta-banner-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2C3E50;
  margin-bottom: 24px;
}

/* ============ HP – AI BADGE (pink pill on AI features) ============ */
.hp-ai-badge {
  display: inline-block;
  background: #479BDE;
  color: #fff;
  font-size: 0.52em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 8px;
  letter-spacing: 0.06em;
}


/* 職種別機能 trigger: active while open */
#hp-mega-trigger.hp-mega-trigger-active .colibri-hover-pink-underline::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.hp-btn-nav-contact {
  border: 1px solid #ccc;
  background: #fff;
  color: #393E46 !important;
  text-decoration: none;
}

.hp-btn-nav-contact:hover {
  background: #F8F9FA;
  color: #393E46 !important;
}

.menu-sub-service-label {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6C757D;
  padding: 8px 4px 2px 20px;
}

.ie9 img[src$=".svg"] {
  width: 100%;
}

.colibri-regular-link {
  color: #17a2b8;
  padding-bottom: 2px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

.coli-dotted-link {
  border-bottom: 1px dotted #17a2b8;
}

.colibri-regular-link:hover {
  color: #108ea1;
}

.coli-dotted-border {
  border-bottom: 1px dotted;
}

.mb-20px {
  margin-bottom: 20px;
}

.max-h-500px {
  max-height: 500px;
}

#colibri-pages-nav {
  background: white;
  color: black;
  z-index: 30;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 2px -2px #ccc;
}

#main-image-responsive {
  display: none;
}

.smartphone-portrait-only {
  display: none;
}

#colibri-clients-responsive {
  display: none !important;
}

a#brand-name {
  color: black;
  font-size: 1.7em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif;
}

span.colibri-brand-inline {
  font-family:
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif;
}

p.company-information {
  margin-bottom: 9px !important;
  color: #d9dce2;
}

#pages-nav-left {
  display: flex;
  justify-content: center;
  align-items: center;
}

#pages-nav-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

#colibri-mobile-nav {
  display: none;
}

.colibri-dropdown {
  position: relative;
  display: inline-block;
}

.colibri-dropdown-content {
  display: none;
  position: absolute;
  top: 45px;
  background-color: white;
  width: 190px;
  border: 1px solid #ccc;
  border-radius: 3px;
  z-index: 1;
  padding: 0.5px;
}

.colibri-dropdown-content a {
  color: #393e46;
  padding: 9px 11px;
  text-decoration: none;
  display: block;
}

.colibri-arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #393e46;
}

.colibri-dropdown-content a:hover {
  background-color: #f8f8f8;
  color: black;
}

.dropdown-show {
  display: block;
}

#colibri-home-pink-pattern {
  width: 100%;
  margin-top: -21.25vw;
}

#colibri-home-pink-pattern-2 {
  width: 100%;
  margin-top: -25vw;
}

#colibri-home-pink-pattern-5 {
  width: 100%;
  margin-top: -50vw;
}

#colibri-home-pink-pattern-smartphone,
#colibri-home-pink-pattern-smartphone-landscape {
  display: none;
}

.coli-horizontal-img {
  max-height: 480px;
  width: 100%;
  width: auto;
  height: auto;
}

#service-types-section {
  text-align: center;
  padding-top: 80px;
  margin-top: -40px;
  padding-bottom: 40px;
  margin-bottom: 15px;
}

#top-subsection {
  padding: 120px 50px 0px 70px;
  display: flex;
  height: 650px;
}

#top-subsection.home-top-section {
  background-image: url(/packs/static/colibri_pink_pattern-2c7dc11a2c2588145ae2.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}

#top-subsection.product-top-section {
  background-image: url(/packs/static/colibri_pink_pattern_5-d35ee3dc6df3ee53887d.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

#issues-subsection {
  padding-top: 40px;
  padding-bottom: 0px;
}

#colibri-calendar {
  padding-top: 30px;
}

#colibri-payment {
  padding-top: 0px;
  padding-bottom: 0px;
}

.background-transition {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  margin-bottom: -2px;
  margin-top: -2px;
  margin-left: -2px;
  margin-right: -2px;
}

#colibri-reporting {
  padding-top: 50px;
  padding-bottom: 30px;
}

.colibri-bottom-action-container {
  max-width: 800px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

.colibri-security-head {
  display: flex;
}

#mobile-only-contact-form-button {
  display: none;
}

#presentation-text {
  width: 55%;
  padding-top: 5px;
}

#colibri-presentation {
  padding: 60px 50px 60px 20px;
  color: #393e46;
  display: flex;
}

#colibri-presentation-text {
  background-color: transparent;
  z-index: 30;
  font-size: 1em;
}

#main-image {
  width: 900px;
}

#colibri-main-image {
  width: 900px;
}

.colibri-home-presentation-title {
  color: #1b263b;
  font-size: 2.7em;
  font-weight: 600;
  line-height: 1.7em;
}

.white-background {
  background-color: white;
}

.light-pink-background {
  background-color: #fce7ea;
}

.light-blue-background-hp {
  background-color: #f3f7fe;
}

.middle-blue-background {
  background-color: #9bbdf9;
}

.section-title-container {
  width: 100%;
  text-align: center;
}

.colibri-section-title {
  font-size: 2.2em;
}

.colibri-home-large-container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.colibri-section-centered-text {
  max-width: 690px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

.colibri-home-centered-container {
  max-width: 740px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 120px;
}

#colibri-features-container {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.colibri-feature-container {
  width: 200px;
  border-radius: 4px;
  margin: 10px;
  border: 1px solid #ccc;
  background-color: white;
  color: #393e46;
}

.colibri-feature-container:hover {
  cursor: pointer;
  color: black;
}

.colibri-feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  width: 188px;
  margin: 6px;
}

#calendar-tablet-image {
  display: none;
}

.product-pink-underline {
  height: 6px;
  background-color: transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.colibri-feature-title {
  font-size: 1.25em;
  text-align: center;
  margin-bottom: 4px;
}

footer {
  background-color: #1b263b;
  color: white;
  padding: 0px 20px 80px 20px;
}

#colibri-footer {
  display: flex;
  padding-top: 80px;
}

.hover-white-underline:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}

#footer-brand-container {
  width: 30%;
  margin-right: 20px;
}

#footer-colibri-information-container {
  padding-top: 30px;
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}

.footer-section {
  min-width: 130px;
  padding-left: 5px;
  padding-right: 60px;
}

.footer-section-title {
  color: white;
  font-weight: 550;
}

.footer-section-container {
  margin-top: 15px;
  margin-bottom: 45px;
  font-weight: lighter;
}

.footer-colibri-information-title {
  font-size: 1.3em;
}

.colibri-home-subsection {
  color: black;
  padding: 50px;
  width: 100%;
}

.margin-md {
  margin: 0px 20px 30px 20px;
}

.aligned-left-home {
  flex-direction: row-reverse;
}

.align-text-right-home {
  text-align: right;
}

.colibri-nav-dropdown {
  line-height: 18px;
}

#colibri-nav-hamburger {
  display: none;
}

ul#colibri-nav-right-list {
  list-style: none;
  margin-bottom: 0px;
}

#colibri-mobile-menu {
  display: none;
}

.heroku-and-salesforce-body {
  font-size: 0.9em;
}

.home-subsection-content-container {
  margin-top: 15px;
  display: flex;
  width: 100%;
  padding-bottom: 5px;
}

.aligned-center-home {
  margin-left: auto;
  margin-right: auto;
}

.colibri-subsection-content-container {
  display: flex;
  margin-bottom: 40px;
  width: 100%;
}

.home-subsection-subtitle {
  font-size: 1.8em;
  margin-bottom: 20px;
}

.colibri-subsection {
  flex: 1 1;
  padding: 20px 15px 20px 15px;
}

#colibri-security-text {
  width: 70%;
}

#security-icon-container {
  width: 30%;
}

.colibri-security-icon {
  max-width: 100%;
}

.colibri-subsection-centered {
  margin-bottom: 60px;
}

#heroku-and-salesforce {
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: left;
}

.heroku-and-salesforce-logo {
  text-align: center;
  height: 80px;
}

#joinus-page-container {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.heroku-and-salesforce-content {
  max-width: 300px;
  border-radius: 5px;
  margin: 8px;
  padding: 20px;
  background-color: #efefef;
}

.home-subsection-content {
  height: 100%;
  width: 50%;
  padding-top: 20px;
  font-size: 1.1em;
}

.responsive-img {
  max-width: 100%;
}

.shadowed-img {
  box-shadow: 0px 0px 30px 6px #bbb;
}

.flex-1 {
  flex: 1 1;
}

.add-margin-left-md {
  margin-left: 20px;
}

.ul-left > li {
  list-style-type: circle;
  text-align: left;
  padding-left: 0pt;
}

.list-style-p {
  margin-bottom: 0px;
}

.list-style-p::before {
  content: "•";
  color: left;
}

.colibri-subsection-icon {
  padding: 20px;
}

.colibri-home-subsection-title {
  display: block;
}

.colibri-homepage-subsection-title {
  color: #1b263b;
  font-weight: 600;
}

h2.colibri-home-subsection-small-title {
  display: block;
  font-size: 1.45em !important;
  color: #354553;
}

.colibri-home-subsection-title.title-light {
  color: #354553;
}

.colibri-home-subsection-title.title-sm {
  font-size: 1.4em;
}

.colibri-home-subsection-subtitle {
  font-size: 1.4em;
  color: #354553;
  margin-bottom: 12px;
}

.colibri-home-div {
  margin-bottom: 22px;
}

.colibri-sm-subsection-title {
  font-size: 1.9em;
  display: block;
  margin-bottom: 0;
}

.colibri-iframe-container {
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.colibri-iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.home-subsection-image-container {
  width: 50%;
  height: 100%;
  text-align: center;
}

.bloglike-subsection-image-container {
  width: 50%;
  height: 100%;
  text-align: left;
}

.colibri-merits-subsection {
  color: white;
  padding: 60px 10px 30px 10px;
}

.colibri-merits-subsection > div {
  margin-top: 30px;
}

.colibri-merits-subsection > div > p {
  font-size: 1rem;
  line-height: 1.6rem;
}

.align-text-center {
  text-align: center;
}

.colibri-merits {
  margin-top: 20px;
  font-size: 1.4em;
}

.colibri-about-us {
  padding: 20px 10px 60px 10px;
}

.colibri-about-us > p {
  text-align: center;
  font-size: 1.3em;
}

.founders-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  justify-content: center;
}

.colibri-founder {
  max-width: 420px;
  flex: 1 1 340px;
  margin-bottom: 0;
}

.colibri-self-photo-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

p.founder-bio-important {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 7px;
}

.founder-bio {
  padding: 10px;
}

.founder-fun-fact {
  background: linear-gradient(
    rgba(255, 242, 160, 0) 60%,
    rgba(252, 231, 234, 1) 60%,
    rgba(252, 231, 234, 1)
  );
  line-height: 0.2em;
}

.pink-underline {
  font-weight: bold;
  background: linear-gradient(
    rgba(255, 242, 160, 0) 60%,
    rgba(252, 231, 234, 1) 60%,
    rgba(252, 231, 234, 1)
  );
  line-height: 0.2em;
}

.colibri-tokutei-support {
  background-color: rgba(252, 231, 234, 1);
  margin: -12px;
  padding: 12px;
}

.home-page-text-box {
  padding: 60px 10px 60px 10px;
  width: 100%;
}

.home-page-text-box > div {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 60%;
}

.contact-us-button-container {
  padding: 20px 10px 60px 10px;
  text-align: center;
}

#blog-link-container {
  line-height: 40px;
}

#colibri-blog-link {
  margin-right: 20px;
  font-size: 0.9em;
  text-decoration: underline;
}

#shift-issue-details {
  font-size: 0.7em;
  max-width: 50%;
}

#presentation-images-banner {
  width: 45%;
  z-index: 1;
}

.colibri-home-text-container {
  max-width: 400px;
  color: #1b263b;
}

#colibri-logo {
  margin-left: 12px;
  margin-top: 3px;
}

#colibri-clients-banner {
  background: url(/packs/static/colibri_clients_banner_alt-74a8dbd7e88aedf273e5.jpeg) repeat-x;
  background-size: 1983px 100px;
  height: 100px;
  width: 5949px;
  animation: slide 40s linear infinite;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1983px, 0, 0); /* The image width */
  }
}

.colibri-large-header-title {
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 5px;
  color: #1b263b;
}

.colibri-issues-head-style {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 5px;
  color: #1b263b;
}

.issue-header {
  margin-bottom: 10px;
}

#colibri-issues-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#colibri-issues {
  display: flex;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.story-text-container {
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
}

.story-corporation-name,
.issue-body {
  margin-top: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
  font-size: 0.9em;
}

.story-additional-info {
  padding-top: 10px;
  padding-bottom: 30px;
  font-size: 0.8em;
}

.story-additional-info > p {
  margin-bottom: 7px;
}

.story-body {
  border-top: 1px dotted #ccc;
  margin-top: 9px;
  padding-top: 22px;
}

.story-information {
  margin-bottom: 8px;
  font-size: 0.8em;
}

.issue-header-title {
  text-align: center;
  font-size: 1.1em;
  font-weight: 550;
  color: #1b263b;
  margin-top: 15px;
}

.story-headline {
  text-align: left;
  font-size: 1em;
  font-weight: 550;
  min-height: 70px;
}

.issue-read-more {
  margin-top: 25px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}

.colibri-issue-container {
  flex: 1 1;
  max-width: 300px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #1b263b;
  border-radius: 8px;
  background-color: #fcfcfc;
}

.story-container {
  flex: 1 1;
  max-width: 300px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  color: #1b263b;
  border-radius: 8px;
  background-color: white;
}

.story-container:hover {
  cursor: pointer;
  color: #17a2b8 !important;
}

.issue-icon {
  width: 60px;
}

.issue-container {
  flex: 1 1;
  max-width: 300px;
  background-color: white;
  border-radius: 20px;
  margin: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #1b263b;
}

.issue-title {
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 20px;
  text-align: center;
}

.story-image {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.service-type-image {
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.story-main-image {
  border-radius: 20px !important;
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.coli-story-card-img {
  max-width: 400px;
  border-radius: 12px;
}

.image-subtext {
  font-size: 0.9em;
  color: #354553;
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Customer story page helpers */
.coli-story-hero {
  padding-top: 120px;
  background: linear-gradient(#fff6f9, white);
}

.coli-story-container {
  max-width: 790px;
}

.coli-story-img-wrapper {
  max-width: 450px;
}

.coli-story-section-img {
  max-width: 750px;
}

.coli-small-subtitle {
  font-size: 0.7em;
  font-weight: normal;
}

.colibri-arguments-wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.colibri-argument-container {
  margin: 10px;
  text-align: center;
}

.colibri-argument-container.service-type-container {
  background-color: #f7f9fe;
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.colibri-argument-container.service-type-container:hover {
  cursor: pointer;
}

.colibri-argument-container.four-items {
  width: 230px;
}

.colibri-argument-container.three-items {
  width: 310px;
}

.colibri-link-button-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.argument-title {
  color: #1b263b;
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: center;
}

.argument-body {
  text-align: left;
}

.argument-illustration {
  display: flex;
  justify-content: center;
  align-items: middle;
  height: 100px;
}

.home-subsection-detailed-content {
  display: flex;
}

.colibri-sub-subsection-title {
  text-decoration: underline;
  font-size: 1.2em;
}
.colibri-subsection-line {
  margin-bottom: 10px;
  overflow: hidden;
}

.subsection-line-head {
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 100px);
}

.subsection-line-head:after {
  content: " ................................................................................................................................................................................";
}

.detailed-content-container {
  margin: 20px;
  flex: 1 1;
}

.detailed-content-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.3em;
  line-height: 35px;
  vertical-align: middle;
}

#colibri-nav-container {
  height: 100%;
  margin-left: 35px;
  font-size: 1em;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #393e46;
}

.dropdown-toggle.colibri-nav-li {
  padding-right: 15px;
  padding-left: 5px;
}

.colibri-nav-li {
  height: 100%;
}

.colibri-hover-pink-underline {
  display: inline-block;
  position: relative;
}

.colibri-hover-pink-underline:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #ff9090;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.bg-dark-pink {
  background-color: #ff7070;
}

.colibri-hover-pink-underline:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.colibri-hover-pink-underline:hover {
  cursor: pointer;
}

.footer-element {
  display: block;
}

a.footer-url {
  line-height: 1em;
  color: #d9dce2;
  margin-bottom: 11px;
}

a.footer-url:hover {
  color: #d9dce2;
}

.hover-black:hover {
  color: black;
}

.colibri-vertically-centered-a {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

.nav-centered-vertically {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-centered-vertically > a {
  display: block;
  height: 59px;
  text-align: center;
  vertical-align: middle;
  line-height: 59px;
}

.colibri-bloglike-container {
  padding: 80px 10px 20px 10px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.colibri-bloglike-title {
  font-size: 2.4em;
}

.colibri-bloglike-p {
  margin-top: 20px;
  margin-bottom: 20px;
}

#colibri-bloglike-table-of-content-container {
  font-size: 1.2em;
  margin-top: 15px;
  border-radius: 15px;
  background-color: #f5f7f7;
  padding: 20px;
  display: inline-block;
}

#colibri-bloglike-table-of-content {
  text-decoration: underline;
  line-height: 1.6em;
}
#colibri-bloglike-table-of-content > div:hover {
  cursor: pointer;
}

.colibri-sm-h3-title {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 1.5em;
}

.colibri-sm-h4-title {
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 1.2em;
}

.centered-btn-container {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.additional-information {
  font-size: 0.8em;
}

#colibri-covid-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #ff9090;
  vertical-align: center;
  margin-bottom: 3px;
  margin-right: 2px;
}

#colibri-covid {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 0px 0px 0px;
  border-radius: 18px;
  width: 320px;
  background-color: white;
  border: 0.5px solid #17a2b8;
}

#telework-image {
  width: 65%;
}

#colibri-covid-text {
  display: flex;
  padding-right: 30px;
  margin-bottom: 15px;
}

.margin-top {
  padding-top: 70px;
  margin-bottom: -20px;
}

#colibri-call-to-action-head {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
}

#colibri-call-to-action {
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  border-radius: 15px;
  border: 0.5px solid #17a2b8;
}

#colibri-call-to-action-body > p {
  font-size: 1.7em;
  text-align: center;
}

#colibri-thank-you {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  border-radius: 15px;
  padding: 40px 30px;
  background-color: white;
  border: 0.5px solid #ccc;
}

#thank-you-container {
  padding-top: 45px;
  padding-bottom: 30px;
  display: flex;
}

#bottom-footer {
  font-size: 0.9em;
  opacity: 0.7;
}

@media screen and (orientation: portrait) {
  #blog-link-container {
    margin-top: 13px;
  }

  #colibri-banner-text {
    max-width: 90%;
  }

  .align-text-right-home {
    text-align: left;
  }

  .home-subsection-content {
    width: 100%;
    flex: 2 1;
  }

  .home-subsection-content-container {
    flex-direction: column;
  }

  .colibri-merits-subsection > div > p {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2em;
  }

  .home-page-text-box > div {
    max-width: 90%;
  }

  .founder-bio {
    margin-top: 30px;
    padding: 5px;
  }

  .founder-bio > p {
    line-height: 1.3em;
  }

  .home-subsection-image-container {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
  }
}

/* =============================================
   Coli utility classes (Bootstrap supplement)
   ============================================= */

/* Structural spacer between image and text columns */
.coli-content-spacer {
  min-width: 45px;
  min-height: 10px;
}

/* Section heading divider */
.coli-divider-top {
  border-top: 1px solid #ccc;
}

/* Hero intro paragraph size on product pages */
.coli-hero-subtitle {
  font-size: 1.45em;
}

/* Service type badge chips on home page */
.coli-service-badge {
  width: 180px;
  font-size: 1.1em;
  color: #1b263b;
}

/* Fixed-height CTA banner section */
.coli-banner-section {
  height: 400px;
}

/* Fixed-height CTA banner section — compact */
.coli-banner-section-sm {
  height: 300px;
}

/* Mobile pink gradient fill — portrait */
.coli-pink-gradient-top {
  height: 100px;
  background: linear-gradient(170deg, #ffffff 50%, #fce7ea 50%);
}

/* Mobile pink gradient fill — landscape */
.coli-pink-gradient-landscape {
  height: 200px;
  background: linear-gradient(175deg, #ffffff 50%, #fce7ea 50%);
}

/* Light-pink solid fill — responsive height variants */
.coli-pink-bg-sm {
  height: 200px;
}
.coli-pink-bg-md {
  height: 300px;
}
.coli-pink-bg-lg {
  height: 450px;
}

/* Decorative SVG pattern overlay (float-end, negative margin) */
.coli-pattern-overlay {
  height: 300px;
  margin-top: -300px;
}

/* Customer stories decorative background strip */
.coli-stories-bg-height {
  height: 330px;
}
.coli-stories-bg-overlay {
  height: 330px;
  margin-top: -330px;
}

/* Dark footer transition bar */
.coli-dark-footer-transition {
  height: 70px;
  background-color: #1b263b;
}

/* Full-viewport confirmation / contact page background */
.coli-contact-bg {
  height: 80vh;
}

/* Large centred heading on confirmation pages */
.coli-form-title {
  font-size: 1.8em;
  text-align: center;
}

/* Centred inline action container */
.coli-centered-action {
  text-align: center;
  margin-top: 20px;
}

/* Page header for content / FAQ / guide pages */
.coli-page-header {
  padding-top: 85px;
  margin-bottom: 60px;
}

/* Subtitle h3 on entry / guide pages */
.coli-page-subtitle {
  margin-top: 30px;
  margin-bottom: 40px;
  font-size: 1.2em;
}

/* Blog-style chapter / section heading */
.coli-chapter-title {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 50px;
}

/* Blog-style chapter heading — compact */
.coli-chapter-title-sm {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 25px;
}

/* CTA section with generous padding */
.coli-cta-section {
  padding-top: 80px;
  padding-bottom: 100px;
}

/* Large top gap between major content sections */
.coli-section-gap {
  margin-top: 100px;
}

/* Image / content wrapper max-width scale */
.coli-img-xs {
  width: 100%;
  max-width: 200px;
}
.coli-img-sm {
  width: 100%;
  max-width: 300px;
}
.coli-img-sm-plus {
  width: 100%;
  max-width: 350px;
}
.coli-img-md {
  width: 100%;
  max-width: 500px;
}
.coli-img-lg {
  width: 100%;
  max-width: 650px;
}

/* FAQ page illustration */
.coli-faq-image {
  max-width: 250px;
}

/* CTA explanation text block */
.coli-cta-text {
  max-width: 600px;
  padding: 5px;
}

/* Contact form container */
#colibri-contact-form-container {
  padding: 40px;
}

/* Light-pink solid fill — extra small height */
.coli-pink-bg-xs {
  height: 100px;
}

/* Service badges flex wrapper — constrained max-width */
.coli-service-badges-container {
  max-width: 760px;
}

/* About Us page — Mission / Values / Vision sections */
.coli-about-section {
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.coli-about-section p {
  margin-bottom: 1rem;
  line-height: 1.8;
  color: #333;
}

.coli-about-section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.coli-about-section-label {
  font-size: 1.4rem;
  font-weight: 400;
  color: #ff7070;
  margin-left: 0.3rem;
}

.coli-vision-item {
  margin-bottom: 1.4rem;
}

.coli-vision-item-title {
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #222;
}

/* About Us — Team members grid */
.coli-team-section {
  max-width: 900px;
  margin: 3rem auto 2rem auto;
  padding: 0 1.5rem 3rem;
  text-align: center;
}

.coli-team-title {
  text-align: left;
  margin-bottom: 2rem;
}

.coli-team-grid {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 2.5rem 1.5rem;
  gap: 2.5rem 1.5rem;
  justify-content: center;
}

.coli-team-member {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: calc(33.333% - 1.5rem);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coli-team-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  margin-bottom: 0.8rem;
}

.coli-team-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: #222;
}

.coli-team-role {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.1rem;
}

.coli-team-bg {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .coli-team-member {
    flex: 0 1 100%;
  }
}

/* Join Us — offset anchor targets below fixed navbar */
#job-sales,
#job-cs,
#job-ruby,
#job-ai,
#job-design {
  scroll-margin-top: 85px;
}

/* Join Us — quick nav */
.coli-joinus-quicknav {
  padding: 0;
}

.coli-joinus-quicknav-grid {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1rem;
  gap: 1rem;
  justify-content: flex-start;
}

.coli-joinus-quicknav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  min-width: 110px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.coli-joinus-quicknav-card:hover {
  border-color: #f4a7b3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: #333;
  text-decoration: none;
}

.coli-joinus-quicknav-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.coli-joinus-quicknav-label {
  font-weight: 600;
  line-height: 1.4;
}

/* ── Contact form (contacts/new → confirm → pages/thank_you) ── */

.hp-contact {
  position: relative;
  padding: 80px 0;
}

.hp-contact-inner {
  position: relative;
  z-index: 1;
  max-width: 948px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 32px;
  gap: 32px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #2C3E50;
}

.hp-contact-steps {
  display: flex;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-contact-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border: 1px solid #FF7070;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  opacity: 0.4;
}

.hp-contact-step-current {
  border-width: 2px;
  opacity: 1;
}

.hp-contact-step-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FF7070;
  color: #fff;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.hp-contact-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 23px;
}

.hp-contact-step-arrow img { transform: rotate(90deg); }

.hp-contact-lead {
  margin: 0;
  text-align: center;
}

.hp-contact-alert {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #FFF0F0;
  color: #C0392B;
  text-align: center;
}

.hp-contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
}

.hp-contact-summary {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
  margin: 0;
}

.hp-contact-row {
  display: flex;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
}

.hp-contact-row-top { align-items: flex-start; }

.hp-contact-label {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 700;
}

/* soft pill, not solid coral: doesn't compete with the primary button */
.hp-contact-required {
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: #FFF0F0;
  color: #D64545;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.hp-contact-field {
  flex: 1 1;
  min-width: 0;
}

.hp-contact-input {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.hp-contact-input::placeholder {
  color: #2C3E50;
  opacity: 0.4;
}

.hp-contact-input:focus {
  outline: none;
  border-color: #479BDE;
}

.hp-contact-textarea {
  height: 258px;
  padding: 16px 8px;
  resize: vertical;
}

.hp-contact-options {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 8px 32px;
  gap: 8px 32px;
}

.hp-contact-option {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.hp-contact-radio {
  appearance: none;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin: 0;
  border: 1px solid #2C3E50;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.hp-contact-radio:checked {
  border-color: #FF7070;
  background: radial-gradient(circle, #FF7070 0 5px, #fff 6px);
}

.hp-contact-radio:focus-visible {
  outline: 2px solid #479BDE;
  outline-offset: 2px;
}

.hp-contact-error {
  margin: 4px 0 0;
  color: #D64545;
  font-size: 14px;
}

.hp-contact-value {
  flex: 1 1;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  overflow-wrap: anywhere;
}

.hp-contact-value p { margin: 0; }

.hp-contact-note {
  margin: 8px 0 0;
  font-size: 14px;
  text-align: center;
}

.hp-contact-note-link {
  color: #FF7070;
  text-decoration: underline;
}

.hp-contact-actions {
  display: flex;
  justify-content: center;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 8px;
}

.hp-contact-actions-confirm { flex-direction: row-reverse; }

.hp-contact-btn { min-width: 250px; }

.hp-btn.hp-contact-btn-back { background: #EBF5FB; }

.hp-contact-complete-title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.hp-contact-complete-text {
  margin: 0;
  text-align: center;
}

.hp-contact-leaf {
  position: absolute;
  pointer-events: none;
}

.hp-contact-leaf-top { left: calc(50% - 427px); top: 49px; width: 72px; }

.hp-contact-leaf-bottom { left: calc(50% + 352px); top: 433px; }

/* sp: Figma 393px frames; stacked rows, full-width buttons (修正 above 送信) */
@media (max-width: 767px) {
  .hp-contact { padding: 60px 0; }
  .hp-contact-inner { grid-gap: 32px; gap: 32px; padding: 0 16px; font-size: 14px; }
  .hp-contact-steps { grid-gap: 16px; gap: 16px; }
  .hp-contact-step { width: 74px; height: 74px; font-size: 18px; }
  .hp-contact-step-number { width: 25px; height: 25px; font-size: 14px; }
  .hp-contact-step-arrow { width: 21px; height: 15px; }
  .hp-contact-step-arrow img { width: 15px; height: auto; }
  .hp-contact-lead,
  .hp-contact-complete-text { width: 100%; text-align: left; }
  .hp-contact-row { flex-direction: column; align-items: stretch; grid-gap: 8px; gap: 8px; }
  .hp-contact-label { flex-basis: auto; }
  .hp-contact-required { margin-left: 16px; }
  /* keep 16px: smaller makes iOS Safari zoom on focus */
  .hp-contact-input { padding: 16px 8px; font-size: 16px; }
  .hp-contact-options { grid-gap: 16px 32px; gap: 16px 32px; }
  .hp-contact-value { padding: 8px 0; font-size: 16px; }
  .hp-contact-note { font-size: 12px; text-align: left; }
  .hp-contact-actions { flex-direction: column; grid-gap: 24px; gap: 24px; }
  .hp-contact-actions-confirm { flex-direction: column-reverse; }
  .hp-btn.hp-contact-btn { min-width: 0; width: 100%; font-size: 18px; }
  .hp-contact-complete-title { font-size: 24px; }
  .hp-contact-leaf-top { left: 16px; top: 14px; width: 47px; }
  .hp-contact-leaf-bottom { left: auto; right: 18px; top: auto; bottom: 2px; width: 29px; }
}


/* ── MEGA MENU OVERVIEW CARD: name │ catchphrase … 概要を見る ── */
.hp-mega-overview {
  display: flex;
  align-items: center;
  grid-gap: 14px;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  margin-bottom: 18px;
  background: #EBF5FB;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
}
.hp-mega-overview:hover { background: #DCEEFA; text-decoration: none; }

.hp-mega-overview + .hp-mega-section-label { margin-top: 0; }

.hp-mega-overview-name {
  font-size: 17px;
  font-weight: 700;
  color: #2C3E50;
  white-space: nowrap;
}

.hp-mega-overview-catch {
  flex: 1 1;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid #C4DAEA;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4A5663;
}

/* darker than primary: 4.5:1 contrast on light blue */
.hp-mega-overview-more {
  display: inline-flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #2A78B8;
  white-space: nowrap;
}

.hp-mega-overview-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #479BDE;
  transition: transform .2s;
}
.hp-mega-overview-arrow::after {
  content: '';
  width: 18px;
  height: 18px;
  background-color: #fff;
  mask: url(/packs/static/icon_arrow-f318e41c4f73ab6e5d3a.svg) center / contain no-repeat;
  transform: rotate(90deg);
}
.hp-mega-overview:hover .hp-mega-overview-arrow { transform: translateX(3px); }

/* ── SERVICE TOP: BREADCRUMB ── */
.hp-service-breadcrumb {
  padding: 86px 0 0;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.hp-service-breadcrumb ol {
  display: flex;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: #6C757D;
}
.hp-service-breadcrumb li + li::before {
  content: '›';
  margin-right: 6px;
  color: #6C757D;
}
.hp-service-breadcrumb a {
  color: #6C757D;
  text-decoration: none;
}
.hp-service-breadcrumb a:hover { color: #2C3E50; text-decoration: underline; }
.hp-service-breadcrumb li:last-child { color: #2C3E50; font-weight: 500; }
.hp-service-cross-chip {
  display: inline-block;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6C757D;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hp-service-cross-chip:hover { color: #2C3E50; }
.hp-service-cross-chip-active {
  color: #2C3E50;
  font-weight: 700;
  border-bottom-color: #479BDE;
}

/* ── SERVICE TOP: HERO ACTIONS ── */
.hp-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}

/* ── SERVICE TOP: BEFORE/AFTER TABLE ── */
.hp-service-compare-section {
  padding: 72px 24px;
  background: #F8F9FA;
}
.hp-service-compare-inner {
  max-width: 900px;
  margin: 0 auto;
}
.hp-service-compare-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #479BDE;
  margin-bottom: 8px;
}
.hp-service-compare-heading {
  font-size: 1.75rem;
  font-weight: 800;
  color: #2C3E50;
  margin-bottom: 40px;
}
.hp-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.hp-compare-table thead th {
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}
.hp-compare-table thead th:first-child {
  width: 30%;
  background: #f8f9fa;
  color: #6C757D;
}
.hp-compare-table thead th.col-before {
  background: #f8d7da;
  color: #842029;
}
.hp-compare-table thead th.col-after {
  background: #d1e7dd;
  color: #0a3622;
}
.hp-compare-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}
.hp-compare-table tbody tr:last-child { border-bottom: none; }
.hp-compare-table tbody td {
  padding: 18px 24px;
  font-size: 0.9rem;
  vertical-align: middle;
  background: #fff;
}
.hp-compare-table tbody td:first-child {
  font-weight: 600;
  color: #2C3E50;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
}
.hp-compare-table tbody td.td-before {
  color: #6c757d;
}
.hp-compare-table tbody td.td-after {
  color: #2C3E50;
  font-weight: 500;
}
.hp-compare-icon-bad  { color: #dc3545; margin-right: 6px; }
.hp-compare-icon-good { color: #198754; margin-right: 6px; }

/* ── SERVICE TOP: NUMBERED CARDS ── */
.hp-service-cards-section {
  padding: 80px 24px;
  background: #fff;
}
.hp-service-cards-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hp-service-cards-heading {
  font-size: 1.75rem;
  font-weight: 800;
  color: #2C3E50;
  margin-bottom: 8px;
}
.hp-service-cards-subtitle {
  font-size: 1rem;
  color: #6C757D;
  margin-bottom: 48px;
}
.hp-service-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 28px;
  gap: 28px;
}
.hp-service-detail-card {
  background: #F8F9FA;
  border-radius: 12px;
  padding: 32px 28px;
  position: relative;
}
.hp-service-detail-card-num {
  font-size: 2rem;
  font-weight: 900;
  color: #479BDE;
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hp-service-detail-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2C3E50;
  margin-bottom: 12px;
}
.hp-service-detail-card-body {
  font-size: 0.9rem;
  color: #393E46;
  line-height: 1.7;
}
.hp-service-detail-card-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #479BDE;
  text-decoration: none;
}
.hp-service-detail-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .hp-service-cards-grid { grid-template-columns: 1fr; grid-gap: 20px; gap: 20px; }
  .hp-service-compare-heading { font-size: 1.4rem; }
  .hp-service-cross-chip { padding: 10px 14px; font-size: 0.8rem; }
}

/* ============ HP – JOIN US (Figma「採用情報」) ============
   Decorations placed per the 1440px frame; hidden on narrow screens. */

/* big faded English word behind the JA heading */
.hp-joinus-heading {
  position: relative;
  display: inline-block;
}

.hp-joinus-heading-en {
  margin: 0;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #479BDE;
  opacity: .1;
  white-space: nowrap;
}

.hp-joinus-heading-ja {
  position: absolute;
  left: 0;
  top: 48px;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #479BDE;
  white-space: nowrap;
}

.hp-joinus-heading-center .hp-joinus-heading-ja {
  left: 50%;
  transform: translateX(-50%);
}

.hp-joinus-deco {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}

/* ── MESSAGE ── */
.hp-joinus-message {
  position: relative;
  overflow: hidden;
}

.hp-joinus-message-line {
  position: absolute;
  z-index: 1;
  left: calc(50% - 781px);
  top: 163px;
  width: 728px;
  height: auto;
  pointer-events: none;
}

/* Scroll-drawn threads (pages/hp_lines/*): pages.js colibriInitDrawLines sets --hp-draw-offset 1.05 → 0.
   No fallback/calc() around the var: postcss-custom-properties (preserve: false) would fold it to a constant.
   Gap 2 and the extra .05 keep the round cap from showing a dot at either end. */
.hp-draw-line-ready [pathLength] {
  stroke-dasharray: 1 2;
  stroke-dashoffset: var(--hp-draw-offset);
}

.hp-joinus-message-inner {
  position: relative;
  display: grid;
  grid-template-columns: 538px minmax(0, 524px);
  justify-content: space-between;
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-joinus-message-visual {
  position: relative;
  min-height: 621px;
}

.hp-joinus-message-visual .hp-joinus-heading {
  position: absolute;
  z-index: 2;
  left: 4px;
  top: 31px;
}

.hp-joinus-message-photo {
  position: absolute;
  z-index: 3;
  left: 71px;
  top: 103px;
  width: 373px;
  height: auto;
}

.hp-joinus-message-trees {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 366px;
  height: auto;
}

.hp-joinus-message-text {
  position: relative;
  padding: 116px 0 56px;
}

.hp-joinus-message-bird {
  position: absolute;
  left: -23px;
  top: 0;
  width: 163px;
}

.hp-joinus-message-lead {
  margin: 0 0 24px;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-joinus-message-body p { margin: 0 0 1.6em; }

.hp-joinus-message-body p:last-child { margin-bottom: 0; }

.hp-joinus-message-sign {
  margin: 24px 0 0;
  color: #479BDE;
}

/* phone-only pieces (see SMARTPHONE section) */
.hp-joinus-message-line-sp,
.hp-joinus-br-sp { display: none; }

/* ── WORKS ── */
.hp-joinus-works {
  position: relative;
  padding: 80px 24px 220px;
}

.hp-joinus-works-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

.hp-joinus-works-head {
  margin-bottom: 24px;
  text-align: center;
}

.hp-joinus-works-intro { margin: 0; }

.hp-joinus-works-leaf-a { left: calc(50% - 482px); top: 226px; width: 91px; }
.hp-joinus-works-leaf-c { left: calc(50% + 514px); top: 1677px; width: 30px; z-index: 2; }
.hp-joinus-works-leaf-d { left: calc(50% - 456px); top: 2418px; width: 47px; z-index: 2; }

.hp-joinus-works-list {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
}

.hp-joinus-work {
  display: flex;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-joinus-work-photo-left { flex-direction: row-reverse; }

.hp-joinus-work-text {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 16px;
  gap: 16px;
  min-width: 0;
  padding: 32px;
}

.hp-joinus-work-role {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #479BDE;
  color: #fff;
  font-weight: 700;
}

.hp-joinus-work-lead {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-joinus-work-lead-accent { color: #FF7070; }

.hp-joinus-work-body p { margin: 0 0 1.6em; }

.hp-joinus-work-body p:last-child { margin-bottom: 0; }

.hp-joinus-work-photo {
  flex: 0 0 52%;
  align-self: stretch;
}

.hp-joinus-work-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.hp-joinus-work-photo-left .hp-joinus-work-photo img { object-position: right center; }

.hp-joinus-works-clouds {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1440px, 100%);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ── RECRUIT ── */
.hp-joinus-recruit {
  padding: 60px 24px;
  background: #fff;
}

.hp-joinus-recruit-inner {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.hp-joinus-recruit-head { position: relative; }

.hp-joinus-recruit-intro { margin: 0; }

.hp-joinus-recruit-bird {
  position: absolute;
  left: 517px;
  top: 9px;
  width: 373px;
  height: auto;
  pointer-events: none;
}

.hp-positions-list {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
}

.hp-position-card {
  padding: 24px;
  border: 1px solid #2C3E50;
  border-radius: 15px;
  background: #fff;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .05));
}

.hp-position-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.hp-position-summary {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
  gap: 16px;
  max-width: 743px;
}

.hp-position-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.hp-position-badge {
  padding: 6px 8px;
  border-radius: 8px;
  background: #2C3E50;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
}

.hp-position-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-position-intro { line-height: 1.6; }

.hp-position-toggle {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}

.hp-position-toggle img {
  display: block;
  width: 100%;
  height: 100%;
}

.hp-position-toggle-minus,
.hp-position-header[aria-expanded="true"] .hp-position-toggle-plus { display: none !important; }

.hp-position-header[aria-expanded="true"] .hp-position-toggle-minus { display: block !important; }

.hp-position-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #2C3E50;
}

.hp-position-table {
  width: 100%;
  margin: 0;
}

.hp-position-row {
  display: flex;
  border-bottom: 1px solid #EBF5FB;
}

.hp-position-row dt {
  display: flex;
  flex: 0 0 203px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #EBF5FB;
  font-weight: 700;
  text-align: center;
}

.hp-position-row dd {
  flex: 1 1;
  margin: 0;
  padding: 16px;
}

/* 選考の流れ: overlapping circles */
.hp-joinus-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
}

.hp-joinus-flow-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #479BDE;
}

.hp-joinus-flow-steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-joinus-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 200px;
  padding-top: 56px;
  border: 1px solid #479BDE;
  border-radius: 50%;
}

.hp-joinus-flow-step + .hp-joinus-flow-step { margin-left: -30px; }

.hp-joinus-flow-num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  color: #479BDE;
}

.hp-joinus-flow-num::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  margin: 7px auto 0;
  border-radius: 3px;
  background: #479BDE;
}

.hp-joinus-flow-name {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-main .hp-joinus-flow-note {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

/* casual-interview CTA */
.hp-joinus-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 32px;
  border-radius: 10px;
  background:
    linear-gradient(249.4deg, rgba(23, 164, 244, .6) 4.5%, rgba(103, 190, 239, .6) 32%, rgba(207, 226, 239, .6) 101%),
    #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  text-align: center;
}

.hp-joinus-cta > img {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.hp-joinus-cta-cloud { left: 58.77%; top: 0; width: 41.23%; }
.hp-joinus-cta-tree-left { left: 0; bottom: 0; width: 55.62%; }
.hp-joinus-cta-tree-right { right: 0; bottom: 0; width: 53.4%; }

.hp-joinus-cta-heading,
.hp-joinus-cta-body,
.hp-joinus-cta .hp-btn { position: relative; }

.hp-joinus-cta-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #FF7070;
}

.hp-joinus-cta-body { margin: 16px 0 24px; }

/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  /* inner box stops at 1148px, so the photo (and thread) stop following the centre */
  .hp-joinus-message-line { left: max(-207px, calc(50% - 781px)); }
  .hp-joinus-works-leaf-c { left: min(calc(50% + 514px), calc(100% - 46px)); }
  .hp-joinus-message-inner { grid-template-columns: minmax(0, 538px) minmax(0, 524px); grid-gap: 24px; gap: 24px; }
  .hp-joinus-message-lead { white-space: normal; }
}

@media (max-width: 991px) {
  .hp-joinus-deco,
  .hp-joinus-message-line { display: none; }
  .hp-joinus-heading-en { font-size: 56px; }
  .hp-joinus-heading-ja { top: 24px; font-size: 24px; }

  .hp-joinus-message-inner { grid-template-columns: 1fr; }
  .hp-joinus-message-visual { min-height: 0; padding-top: 110px; }
  .hp-joinus-message-visual .hp-joinus-heading { left: 0; top: 16px; }
  .hp-joinus-message-photo { position: relative; left: auto; top: auto; display: block; width: min(373px, 80%); margin: 0 auto; }
  .hp-joinus-message-trees { display: none; }
  .hp-joinus-message-text { padding: 40px 0 64px; }
  .hp-joinus-message-bird { left: auto; right: 0; top: -60px; width: 96px; }
  .hp-joinus-message-lead,
  .hp-joinus-work-lead { font-size: 22px; }
  .hp-joinus-message-lead { white-space: normal; }

  .hp-joinus-works { padding: 56px 16px 160px; }
  .hp-joinus-work,
  .hp-joinus-work-photo-left { flex-direction: column-reverse; align-items: stretch; grid-gap: 0; gap: 0; }
  .hp-joinus-work-photo { flex-basis: auto; }
  .hp-joinus-work-photo img { height: auto; }
  .hp-joinus-work-text { padding: 24px; }

  .hp-joinus-recruit { padding: 56px 16px; }
  .hp-joinus-recruit-bird { display: none; }
  .hp-position-card { padding: 16px; }
  .hp-position-header { grid-gap: 12px; gap: 12px; }
  .hp-position-toggle { width: 44px; height: 44px; }
  .hp-position-row { flex-direction: column; }
  .hp-position-row dt { flex-basis: auto; }
  .hp-position-panel .hp-btn { white-space: normal; }

  .hp-joinus-flow-steps { flex-wrap: wrap; justify-content: center; max-width: 340px; }
  .hp-joinus-flow-step { width: 170px; height: 170px; padding-top: 42px; }
  .hp-joinus-flow-step + .hp-joinus-flow-step { margin-left: 0; }
  .hp-joinus-flow-step:nth-child(even) { margin-left: -20px !important; }
  .hp-joinus-flow-step:nth-child(n + 3) { margin-top: -20px; }
  .hp-joinus-flow-num,
  .hp-joinus-flow-name { font-size: 17px; }
  .hp-joinus-cta { padding: 32px 20px 72px; }
  .hp-joinus-cta-heading { font-size: 22px; }
  .hp-joinus-cta .hp-btn { white-space: normal; }
}

/* iPad mini portrait: photo stacks over text; phone composition at 1.3× around a centred 300px photo.
   Negative top: the colibri lives in the text column, under the visual. */
@media (min-width: 768px) and (max-width: 991px) {
  .hp-joinus-message-visual { padding-bottom: 131px; }
  .hp-joinus-message-photo { width: 300px; }
  .hp-joinus-message-trees {
    display: block;
    z-index: 1;
    left: calc(50% - 189px);
    top: 230px;
    bottom: auto;
    width: 476px;
  }
  .hp-joinus-message-line-sp {
    display: block;
    position: absolute;
    z-index: 2;
    left: calc(50% - 189px);
    top: 161px;
    width: 474px;
    height: auto;
    pointer-events: none;
  }
  .hp-joinus-message-bird {
    z-index: 4;
    left: calc(50% + 179px);
    right: auto;
    top: -432px;
    width: 146px;
  }
  .hp-joinus-recruit-bird {
    display: block;
    left: auto;
    right: 9px;
    top: -49px;
    width: 213px;
  }

  /* WORKS leaves: card top = 247px + cards above + 24px gaps (photo .946 × (100vw - 32px), text 444 / 492 / 418px) */
  .hp-joinus-deco { display: block; }
  .hp-joinus-works-leaf-a { left: 34px; top: 138px; }
  .hp-joinus-works-leaf-c { left: auto; right: 4px; top: calc(1465.456px + 189.2vw); }
  .hp-joinus-works-leaf-d { left: 60px; top: calc(1595.184px + 283.8vw); }
}

/* ============ HP – PRIVACY POLICY ============ */
.hp-policy-body {
  padding: 80px 0;
}

.hp-policy-body-inner {
  max-width: 948px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #2C3E50;
}

.hp-policy-body-inner p,
.hp-policy-body-inner ul { margin: 0; }

.hp-policy-body-inner ul { padding-left: 1.5em; }

.hp-policy-body-inner h2 {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 1.6em 0 0;
}

@media (max-width: 767px) {
  .hp-policy-body { padding: 48px 0; }
}

@media (max-width: 860px) {
  .hp-footer-main { flex-direction: column; grid-gap: 40px; gap: 40px; }
  .hp-footer-columns { grid-gap: 32px; gap: 32px; flex-wrap: wrap; }
  .hp-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ ABOUT US PAGE (legacy classes, still used by join_us) ============ */

/* ── HERO ── */
.hp-about-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 56px;
  gap: 56px;
  align-items: center;
}

.hp-about-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6C757D;
  margin-bottom: 16px;
}

.hp-about-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #2C3E50;
  line-height: 1.15;
  margin: 0;
}

.hp-about-hero-image {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .hp-about-hero,
  .hp-about-story-inner,
  .hp-about-mv,
  .hp-about-team,
  .hp-about-founders { grid-template-columns: 1fr; grid-gap: 32px; gap: 32px; }
  .hp-about-hero-title { font-size: 2rem; }
}

/* ============ HP v3 – BASE (Figma "SeviceSite_ver3") ============ */

.hp-main,
.hp-page-hero,
.hp-features-section,
.hp-final-cta-section,
.hp-footer,
#colibri-pages-nav,
.hp-mega-panel {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  letter-spacing: .05em;
}

/* overflow-x: clip (hidden fallback): not a scroll container, which would break position: sticky (Top CONCEPT) */
.hp-main {
  background: #EBF5FB;
  color: #2C3E50;
  overflow-x: hidden;
  overflow-x: clip;
}

/* same for app-wide `body { overflow-x: hidden }`, HP pages only */
body:has(#colibri-pages-nav) { overflow-x: clip; }

.hp-main p { line-height: 1.6; }

.hp-container {
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-container-narrow {
  max-width: 948px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-bg-white { background: #fff; }

.hp-highlight {
  background: linear-gradient(transparent 57%, rgba(255, 112, 112, .3) 57%, rgba(255, 112, 112, .3) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============ HP v3 – HEADER (layouts/pages) ============
   Transparent over the hero, white once scrolled. */
#colibri-pages-nav {
  height: 79px;
  padding: 0 max(24px, calc(50% - 640px));
  background: transparent;
  box-shadow: none;
  transition: background .2s ease, box-shadow .2s ease;
}

#colibri-pages-nav.hp-nav-scrolled {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* mega menu open: white header even at page top */
#colibri-pages-nav.hp-nav-menu-open {
  background: #fff;
  box-shadow: none;
}

#colibri-pages-nav #colibri-logo {
  height: 47px;
  width: auto;
}

#colibri-pages-nav #colibri-nav-container {
  grid-gap: 24px;
  gap: 24px;
  margin-left: 146px;
}

#colibri-pages-nav .colibri-nav-li,
#colibri-pages-nav .colibri-nav-li a {
  font-size: 18px;
  line-height: 20px;
  letter-spacing: .04em;
  color: #2C3E50;
  text-decoration: none;
}

#colibri-pages-nav .colibri-arrow-down {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top: 7px solid #2C3E50;
}

/* hover / active: coral bar growing from the centre */
#colibri-pages-nav .colibri-hover-pink-underline::after {
  left: 50%;
  bottom: -10px;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 2px;
  background-color: #FF7070;
  transform-origin: center;
  transition: transform .25s ease-out;
}

#colibri-nav-right-list {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.hp-nav-login {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .04em;
  color: #2C3E50 !important;
  text-decoration: none !important;
  padding: 12px 8px 12px 0;
}

.hp-mega-panel { top: 79px; }

/* ============ HP v3 – BUTTONS (Figma "Cta" / "Btn2_sp" / "Btn3") ============ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid #479BDE;
  border-radius: 999px;
  background: #479BDE;
  color: #fff !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.hp-btn-outline {
  background: #fff;
  color: #479BDE !important;
}

.hp-btn-coral {
  background: #FF7070;
  border-color: #FF7070;
}

.hp-btn-coral-outline {
  background: #fff;
  border-color: #FF7070;
  color: #FF7070 !important;
}

/* explicit background also beats global `a:hover { background-color: transparent }` */
.hp-btn:hover,
.hp-btn:focus-visible {
  background-color: #3A89CB;
  border-color: #3A89CB;
}

.hp-btn-outline:hover,
.hp-btn-outline:focus-visible {
  background-color: #EBF5FB;
  border-color: #479BDE;
}

.hp-btn-coral:hover,
.hp-btn-coral:focus-visible {
  background-color: #F25C5C;
  border-color: #F25C5C;
}

.hp-btn-coral-outline:hover,
.hp-btn-coral-outline:focus-visible {
  background-color: #FFF0F0;
  border-color: #FF7070;
}

.hp-btn-sm { font-size: 16px; }

.hp-btn-lg { padding: 16px 24px; }

.hp-btn-arrow::after,
.hp-btn-mail::before,
.hp-btn-download::before {
  content: '';
  flex-shrink: 0;
  background-color: currentColor;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.hp-btn-arrow::after {
  width: 24px;
  height: 24px;
  mask-image: url(/packs/static/icon_arrow-f318e41c4f73ab6e5d3a.svg);
  transform: rotate(90deg);
}

.hp-btn-mail::before {
  width: 19px;
  height: 19px;
  mask-image: url(/packs/static/icon_mail-ed952a44f6c17c10617e.svg);
}

.hp-btn-download::before {
  width: 19px;
  height: 19px;
  mask-image: url(/packs/static/icon_download-98cfa07226cb99b94a4f.svg);
}

.hp-text-link {
  display: inline-flex;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .04em;
  color: #FF7070 !important;
  text-decoration: none !important;
}

.hp-text-link:hover { opacity: .8; }

/* ============ HP v3 – SECTION TITLES (eyebrow = EN, heading = JA) ============ */
.hp-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
}

.hp-section-head-left {
  align-items: flex-start;
  text-align: left;
}

.hp-features-eyebrow {
  margin: 0;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #479BDE;
}

.hp-features-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #2C3E50;
}

.hp-section-lead {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #2C3E50;
}

/* ============ HP v3 – PAGE HERO (_hp_page_hero, _hp_story_hero) ============
   Sky gradient + curved bottom; centred, or split when a visual / CTA is given. */
.hp-page-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 150px;
  color: #2C3E50;
  background:
    linear-gradient(330deg, #94D8FF 0%, #D2EFFF 34.6%, #EBF5FB 100%) 0 -11px / 100% 929px no-repeat,
    #EBF5FB;
}

.hp-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -190px;
  width: max(1688px, 117.3vw);
  height: 287px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #EBF5FB;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-page-hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 16px;
}

.hp-page-hero-label {
  margin: 0 0 8px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #479BDE;
}

/* auto-phrase needs lang="ja" (set in _hp_page_hero): no lone 「に。」 */
.hp-page-hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #2C3E50;
  word-break: auto-phrase;
}

.hp-page-hero-subtitle {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.hp-page-hero-deco {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}

/* ── Error pages (errors/show: 404 / 422 / 429 / 500) ── */
.hp-error {
  position: relative;
  /* fixed nav (79px) overlaps the section top */
  padding: 180px 24px 80px;
  text-align: center;
}

.hp-error-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

.hp-error-code,
.hp-error-label {
  margin: 0;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FF7070;
}

.hp-main .hp-error-code { font-size: 88px; line-height: 1; }

.hp-error-label {
  margin-top: 10px;
  font-size: 20px;
}

.hp-error-heading {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  color: #2C3E50;
}

.hp-error-body {
  margin: 32px 0 0;
  font-size: 16px;
}

.hp-error-btn {
  min-width: 250px;
  margin-top: 32px;
}

.hp-error-bird {
  position: absolute;
  z-index: 1;
  left: calc(50% + 349px);
  top: 199px;
  width: 169px;
}

@media (max-width: 991px) {
  .hp-error { padding-top: 140px; }
  .hp-error-bird { left: calc(50% + 90px); top: 100px; width: 96px; }
  .hp-main .hp-error-code { font-size: 64px; }
}

.hp-page-hero-tree { left: calc(50% - 391px); top: 110px; width: 182px; }
.hp-page-hero-colibri { left: calc(50% + 447px); top: 113px; width: 88px; }
.hp-page-hero-leaf-a { left: calc(50% - 196px); top: 184px; width: 29px; }
.hp-page-hero-leaf-b { left: calc(50% + 406px); top: 279px; width: 33px; }
.hp-page-hero-leaf-c { left: calc(50% + 345px); top: 241px; width: 38px; }

/* split: text left, visual right (職種トップ / 職種別機能 / 導入事例詳細) */
.hp-page-hero-split { padding-bottom: 130px; }

.hp-page-hero-split .hp-page-hero-body {
  display: grid;
  grid-template-columns: 408px minmax(0, 1fr);
  align-items: center;
  grid-gap: 40px;
  gap: 40px;
  min-height: 325px;
  margin-top: 0;
  text-align: left;
}

.hp-page-hero-split .hp-page-hero-text { align-self: center; }

.hp-page-hero-split .hp-page-hero-label {
  margin-bottom: 8px;
  font-size: 18px;
}

.hp-page-hero-split .hp-page-hero-subtitle { margin-top: 12px; }

.hp-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 32px;
}

.hp-page-hero-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 607px;
}

.hp-page-hero-visual > img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-page-hero-visual-product { max-width: 520px; }

/* mock is cropped to the bezel (transparent corners): shadow lives here */
.hp-page-hero-visual-product > img:not(.hp-page-hero-deco) { box-shadow: 0 12px 32px rgba(0, 0, 0, .10); }

/* explicit width, or the grid track shrinks to min-content and the mock renders at half size */
.hp-page-hero-visual-mockup { width: min(607px, 100%); }
.hp-page-hero-visual-mockup .hp-page-hero-leaf-a { left: 0; top: 4px; }

/* mock + cards column; cards drop below once the hero stacks */
.hp-page-hero-visual-mockup-cards { display: flex; align-items: center; grid-gap: 16px; gap: 16px; width: min(720px, 100%); position: relative; }
.hp-page-hero-visual-mockup-cards > img:not(.hp-page-hero-deco):not(.hp-page-hero-mockup-thread):not(.hp-page-hero-mockup-bird) { flex: 1 1; min-width: 0; position: relative; z-index: 1; }
.hp-page-hero-visual-mockup-cards > .hp-page-hero-mockup-thread { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; pointer-events: none; }
/* artwork faces left: mirrored */
.hp-page-hero-visual-mockup-cards > .hp-page-hero-mockup-bird { position: absolute; left: 60%; top: -17%; width: 84px; transform: scaleX(-1) rotate(-8deg); z-index: 3; }
.hp-page-hero-mockup-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; grid-gap: 10px; gap: 10px; flex: none; position: relative; z-index: 2; }
.hp-page-hero-mockup-cards li {
  padding: 10px 18px; border-radius: 14px;
  background: #fff; box-shadow: 0 10px 24px -14px rgba(30, 50, 80, .35); font-weight: 700; font-size: 15px; white-space: nowrap;
  color: var(--hp-card-color);
}
/* 給与ソフト: name + brand color only, no logos */
.hp-page-hero-mockup-card-freee { --hp-card-color: #2864F0; }
.hp-page-hero-mockup-card-jobcan { --hp-card-color: #0071E8; }
.hp-page-hero-mockup-card-moneyforward { --hp-card-color: #0054AC; }
.hp-page-hero-mockup-card-yayoi { --hp-card-color: #005BAC; }

@media (max-width: 991px) {
  .hp-page-hero-visual-mockup-cards { flex-direction: column; }
  .hp-page-hero-visual-mockup-cards > img:not(.hp-page-hero-deco) { width: 100%; }
  .hp-page-hero-mockup-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hp-page-hero-visual-mockup-cards > .hp-page-hero-mockup-thread,
  .hp-page-hero-visual-mockup-cards > .hp-page-hero-mockup-bird { display: none; }
}

.hp-page-hero-visual .hp-page-hero-leaf-a { left: -16px; top: -10px; width: 46px; }
.hp-page-hero-visual .hp-page-hero-leaf-b { left: auto; right: -12px; top: auto; bottom: -24px; width: 33px; }

/* scene variant (請求連携): pages/hp_scenes/* instead of an image */
.hp-page-hero-visual-scene { width: min(607px, 100%); }

/* _integrations_galaxy: 1100 × 480 art box, overlays in % */
.hp-int-galaxy { position: relative; aspect-ratio: 1100 / 480; }
.hp-int-galaxy-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.hp-int-galaxy-bird { position: absolute; left: 42.91%; top: 27.92%; width: 14.18%; }
.hp-int-galaxy-wordmark { position: absolute; left: 42.55%; top: 56.25%; width: 14.91%; height: auto; }

.hp-int-galaxy-label {
  position: absolute;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #3E4E5E;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.hp-int-galaxy-label-above { transform: translate(-50%, -100%); }
.hp-int-galaxy-label-main { font-size: 14px; color: #1B263B; }
.hp-int-galaxy-label span { display: block; font-size: 11px; font-weight: 400; color: #6B7684; }

.hp-int-galaxy-careplan { left: 24.64%; top: 24.58%; }
.hp-int-galaxy-payslip { left: 91.91%; top: 26.25%; }
.hp-int-galaxy-billing { left: 7.73%; top: 43.54%; }
.hp-int-galaxy-patient { left: 13.82%; top: 78.54%; }
.hp-int-galaxy-attendance { left: 35.18%; top: 81.88%; }
.hp-int-galaxy-hr { left: 67%; top: 77.08%; }
.hp-int-galaxy-salary { left: 85.91%; top: 62.71%; }

.hp-int-galaxy-spark { animation: hp-int-galaxy-twinkle 3.2s ease-in-out infinite; }
.hp-int-galaxy-spark-2 { animation-duration: 2.6s; animation-delay: -1.3s; }
.hp-int-galaxy-spark-3 { animation-duration: 3.8s; }
.hp-int-galaxy-spark-4 { animation-duration: 3s; animation-delay: -1.5s; }

@keyframes hp-int-galaxy-twinkle {
  0%, 100% { opacity: .15; }
  50% { opacity: 1; }
}

@media (max-width: 575px) {
  .hp-int-galaxy-label { font-size: 10px; }
  .hp-int-galaxy-label-main { font-size: 11px; }
  .hp-int-galaxy-label span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-int-galaxy-light { display: none; }
  .hp-int-galaxy-spark { animation: none; opacity: 1; }
}

/* photo variant (採用情報) */
.hp-page-hero-visual-photo { max-width: 573px; padding: 11px 0 61px; }

/* heading is wider than the 408px Figma column: keep both lines whole */
@media (min-width: 992px) {
  .hp-page-hero-body:has(.hp-page-hero-visual-photo) .hp-page-hero-title { white-space: nowrap; }
}

.hp-page-hero-visual-photo .hp-page-hero-photo {
  display: block;
  width: 75.74%;
  height: auto;
  margin-left: auto;
  border: 2px solid #2C3E50;
  border-radius: 15px;
}

/* bottom-anchored: stay on the photo edge as it scales */
.hp-page-hero-visual-photo .hp-page-hero-tree { left: 5.6%; top: auto; bottom: 0; width: 28.2%; }
.hp-page-hero-visual-photo .hp-page-hero-leaf-a { left: 0; top: 32px; width: 46px; }
.hp-page-hero-visual-photo .hp-page-hero-leaf-b { left: 57.6%; right: auto; top: auto; bottom: 42px; width: 33px; }

.hp-page-hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

.hp-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 17px;
  gap: 17px;
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-breadcrumb li {
  display: inline-flex;
  align-items: center;
  grid-gap: 17px;
  gap: 17px;
  color: #479BDE;
}

.hp-breadcrumb li + li::before {
  content: '';
  width: 6px;
  height: 12px;
  background: url(/packs/static/breadcrumb_chevron-1390c1181dddc71797e9.svg) center / contain no-repeat;
}

.hp-breadcrumb a {
  color: #2C3E50;
  text-decoration: none;
}

.hp-breadcrumb a:hover { text-decoration: underline; }

/* ============ HP v3 – TAGS & FILTER TABS ============ */
.hp-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 16px;
  gap: 16px;
}

.hp-filter-tab {
  padding: 4px 20px;
  border: 2px solid #479BDE;
  border-radius: 999px;
  background: #fff;
  color: #479BDE;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.hp-filter-tab:hover,
.hp-filter-tab-active {
  background: #479BDE;
  color: #fff;
}

.hp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #EBF5FB;
  color: #479BDE;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .05em;
  white-space: nowrap;
}

.hp-tag-outline {
  border: 2px solid #479BDE;
  font-weight: 700;
}

.hp-tag-lg { padding: 4px 20px; }

/* ============ HP v3 – COLUMN CARD (_hp_column_card) ============ */
.hp-column-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  color: #2C3E50;
  text-decoration: none;
}

/* hover: only the photo zooms */
.hp-column-card:hover,
.hp-column-card:focus-visible { color: #2C3E50; }

.hp-column-card:hover .hp-column-card-image img,
.hp-column-card:focus-visible .hp-column-card-image img { transform: scale(1.05); }

.hp-column-card-image {
  aspect-ratio: 348 / 223;
  overflow: hidden;
  border-bottom: 1px solid #E0E0E0;
  background: #F9F9FA;
}

.hp-column-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.hp-column-card-body {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 20px 12px;
}

.hp-column-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 8px;
  gap: 8px;
}

.hp-column-card-date { font-size: 14px; }

.hp-column-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-column-card-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hp-column-card-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  grid-gap: 8px;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #FF7070;
}

.hp-column-card-more::after {
  content: '';
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask: url(/packs/static/icon_arrow-f318e41c4f73ab6e5d3a.svg) center / contain no-repeat;
  transform: rotate(90deg);
}

.hp-column-card-blue .hp-column-card-more { color: #479BDE; }
.hp-column-card-blue .hp-column-card-body { grid-gap: 16px; gap: 16px; }

/* ============ HP v3 – STORY CARD (_hp_story_card) ============ */
.hp-story-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  color: #2C3E50;
  text-decoration: none;
}

/* hover: only the photo zooms; explicit white beats global a:hover transparent */
.hp-story-card:hover,
.hp-story-card:focus-visible {
  background-color: #fff;
  color: #2C3E50;
}

.hp-story-card-image img { transition: transform .4s ease; }

.hp-story-card:hover .hp-story-card-image img,
.hp-story-card:focus-visible .hp-story-card-image img { transform: scale(1.05); }

.hp-story-card-image {
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  background: #D9D9D9;
}

.hp-story-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-story-card-body {
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
  gap: 8px;
  padding: 16px 8px;
}

.hp-story-card-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-story-card-name {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.hp-story-card-tags {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 4px 8px;
  gap: 4px 8px;
}

.hp-story-card-lg .hp-story-card-tags { grid-gap: 6px 12px; gap: 6px 12px; }
.hp-story-card-lg .hp-story-card-label { font-size: 14px; }
.hp-story-card-lg .hp-story-card-label,
.hp-story-card-lg .hp-story-card-name { letter-spacing: .05em; }

.hp-story-card-sm .hp-story-card-body { grid-gap: 4px; gap: 4px; padding: 16px; }
.hp-story-card-sm .hp-story-card-label { font-size: 14px; }

/* ============ HP v3 – FAQ ACCORDION ============ */
.hp-qa-item { border-bottom: 1px solid #2C3E50; }

.hp-qa-question {
  display: flex;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  width: 100%;
  padding: 32px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  color: #2C3E50;
}

.hp-qa-question > span { flex: 1 1; }

.hp-qa-question::after {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url(/packs/static/faq_minus-1a3ce5e730325d067ea9.svg) center / 18px 2px no-repeat;
}

.hp-qa-question.collapsed::after {
  background: url(/packs/static/faq_plus-cf8d16af484b4003a9d8.svg) center / contain no-repeat;
}

.hp-qa-answer {
  padding: 0 42px 32px 0;
  font-size: 16px;
  line-height: 2;
}

.hp-qa-bold .hp-qa-question { font-weight: 700; }
.hp-qa-bold .hp-qa-answer { line-height: 1.6; }

/* ============ HP v3 – FEATURE LIST (_hp_features_grid, _hp_common_features_grid) ============ */
.hp-features-section {
  padding: 60px 0;
  background: #fff;
  color: #2C3E50;
}

.hp-features-title {
  display: inline-block;
  margin: 0 0 36px;
  padding-left: 16px;
  border-left: 6px solid #479BDE;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  color: #0F172B;
}

/* 1px blue row dividers = grid gap over a blue background; odd last row spans both columns */
.hp-feature-box-head {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  min-height: 60px;
  padding: 8px 24px;
  border-radius: 10px 10px 0 0;
  background: #479BDE;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-feature-box-tag {
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #479BDE;
}

.hp-feature-box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1px;
  gap: 1px;
  overflow: hidden;
  border: 2px solid #479BDE;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #479BDE;
}

.hp-feature-link:last-child:nth-child(odd) { grid-column: 1 / -1; }

.hp-feature-link {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 14px 16px 14px 32px;
  background: #fff;
  color: #2C3E50 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  text-decoration: none !important;
  transition: background-color .15s ease;
}

/* explicit bg: global a:hover transparent would show the blue grid */
.hp-feature-link:hover,
.hp-feature-link:focus-visible,
.hp-feature-link-active,
.hp-feature-link-active:hover { background-color: #EBF5FB; }

.hp-feature-link-active { color: #479BDE !important; }

.hp-feature-link-icon { flex: none; }

.hp-feature-link-name { flex: 1 1; }

.hp-feature-link-arrow {
  flex: none;
  transition: transform .15s ease;
}

.hp-feature-link:hover .hp-feature-link-arrow { transform: translateX(3px); }

.hp-features-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.hp-features-group + .hp-features-group { margin-top: 32px; }

/* ============ HP v3 – FINAL CTA (_contact_us + home) ============ */
.hp-final-cta-section {
  padding: 80px 0 100px;
  background: url(/packs/static/cta_bg-10f0d89fb1b3a2b0b5d5.webp) center bottom / cover no-repeat, #9FD3F2;
  color: #2C3E50;
}

.hp-final-cta-inner {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
  grid-gap: 63px;
  gap: 63px;
  max-width: 1148px;
  margin: 0 auto;
  padding: 0 24px;
}

.hp-final-cta-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  padding: 72px 32px 40px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.hp-final-cta-bird {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 180px;
  height: auto;
}

.hp-final-cta-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #479BDE;
}

.hp-final-cta-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.hp-final-cta-body strong { font-weight: 700; }

.hp-final-cta-illustration {
  width: 450px;
  max-width: 100%;
  height: auto;
  margin-top: 8px;
}

.hp-final-cta-cards {
  display: flex;
  flex-direction: column;
  grid-gap: 12px;
  gap: 12px;
}

.hp-final-cta-card {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 8px;
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-final-cta-card-primary {
  background: #479BDE;
  color: #fff;
}

.hp-final-cta-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-final-cta-card-body {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
}

/* ============ HP v3 – FOOTER (layouts/_footer) ============ */
.hp-footer {
  padding: 80px 24px 0;
  background: #479BDE;
  color: #fff;
}

.hp-footer-main {
  display: flex;
  justify-content: space-between;
  grid-gap: 48px;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 72px;
}

.hp-footer-logo img {
  display: block;
  width: 190px;
  height: auto;
}

.hp-footer-columns {
  display: flex;
  grid-gap: 72px;
  gap: 72px;
}

.hp-footer-col-title {
  margin: -6px 0 16px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.hp-footer-col-title ~ .hp-footer-link { padding-left: 8px; }

.hp-footer-link {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  text-decoration: none;
}

.hp-footer-link:hover { color: #fff; text-decoration: underline; }

.hp-footer-bottom {
  display: flex;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0 32px;
}

.hp-footer-copyright {
  margin: 0;
  font-size: 14px;
  color: #fff;
}

/* ============ HP v3 – SHARED DECORATIONS ============ */
/* Figma "雲": 1643px group, 66px left of the 1440 frame; only its top shows */
.hp-clouds {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 310px;
  pointer-events: none;
  background: url(/packs/static/cloud_section-7e62e7dd05d50870179c.svg) calc(50% + 35px) 0 / 1643px 310px no-repeat;
}

/* mirrored (Top FAQ), 202px left of the frame */
/* repeating 609px strip extends the cloud past 1440 */
@media (min-width: 1441px) {
  .hp-clouds::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 189px;
    background: url(/packs/static/cloud_tile-abf3ddb234501ae3fe0b.svg) center bottom / 608.859px 189px repeat-x;
  }
}

.hp-trees-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 152px;
  pointer-events: none;
  background: url(/packs/static/trees_band-1979caba8c8e6eeddb5f.webp) center bottom / 1440px auto repeat-x;
}

.hp-trees-band-feature {
  height: 153px;
  /* Figma "下部木_long": 1495px repeatable bush, top 153px visible */
  background: url(/packs/static/feature_bush-15b6a7c4fe37aac117c8.webp) center top / 1495px 181px repeat-x;
}

/* ============ HP v3 – FAQ PAGE ============ */
.hp-faq-page { padding: 0 0 80px; }

.hp-faq-page .hp-filter-tabs { margin-bottom: 32px; }

.hp-faq-categories {
  display: flex;
  flex-direction: column;
  grid-gap: 32px;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.hp-faq-category-title {
  display: inline-block;
  margin: 0;
  padding: 0 16px;
  border-left: 6px solid #479BDE;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-qa-answer a { color: #479BDE; word-break: break-all; }

/* FAQ filters: topic tabs (with live counts) + keyword search + 職種 sub-filter */
.hp-faq-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 48px;
}

.hp-faq-page .hp-faq-controls .hp-filter-tabs { margin-bottom: 0; }

.hp-filter-tab-count {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  opacity: .7;
}

.hp-filter-tab-empty { opacity: .4; }

.hp-faq-subfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-gap: 12px 32px;
  gap: 12px 32px;
  width: 100%;
}

.hp-faq-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  margin: 0;
}

.hp-faq-search svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #479BDE;
  pointer-events: none;
}

.hp-faq-search input {
  width: 100%;
  padding: 9px 18px 9px 42px;
  border: 2px solid #EBF5FB;
  border-radius: 999px;
  background: #fff;
  color: #2C3E50;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color .15s ease;
}

.hp-faq-search input:focus {
  outline: none;
  border-color: #479BDE;
}

.hp-faq-search input::placeholder { color: #9AA9B6; }

.hp-faq-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.hp-faq-roles-label {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #2C3E50;
}

.hp-faq-role {
  padding: 3px 14px;
  border: 0;
  border-radius: 999px;
  background: #EBF5FB;
  color: #479BDE;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.hp-faq-role:hover,
.hp-faq-role-active {
  background: #479BDE;
  color: #fff;
}

.hp-faq-role-tag {
  flex: 0 0 auto;
  padding: 1px 10px;
  border-radius: 999px;
  background: #EBF5FB;
  color: #479BDE;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

.hp-faq-empty {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 0;
  text-align: center;
  color: #2C3E50;
}

.hp-faq-reset {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #479BDE;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* sp FAQ / お問い合わせ: hero keeps its tree, colibri, leaves (≤991px hides them elsewhere) */
@media (max-width: 767px) {
  /* tree top level with the title's bottom */
  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center { padding-bottom: 120px; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-deco { display: block; top: auto; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-tree { left: 30px; bottom: 9px; width: 103px; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-colibri { left: auto; right: 28px; bottom: 49px; width: 62px; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-leaf-a { left: 134px; bottom: 76px; width: 18px; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-leaf-c { left: auto; right: 70px; bottom: 30px; width: 24px; }

  .hp-main:has(> .hp-faq-page, > .hp-contact) > .hp-page-hero-center > .hp-page-hero-leaf-b { left: auto; right: 37px; bottom: 0; width: 19px; }
}

/* sp FAQ (393px frame) */
@media (max-width: 767px) {
  .hp-faq-page { padding: 60px 0 80px; }

  .hp-faq-page .hp-filter-tabs {
    justify-content: flex-start;
    grid-gap: 8px 16px;
    gap: 8px 16px;
    margin-bottom: 36px;
  }

  .hp-faq-page .hp-filter-tab { font-size: 12px; }

  .hp-faq-controls { grid-gap: 16px; gap: 16px; margin-bottom: 36px; }
  .hp-faq-page .hp-faq-controls .hp-filter-tabs { margin-bottom: 0; }
  .hp-faq-subfilters { justify-content: flex-start; grid-gap: 12px; gap: 12px; }
  .hp-faq-search { flex-basis: 100%; max-width: none; }
  .hp-faq-search input { font-size: 14px; }
  .hp-faq-role { padding: 2px 12px; font-size: 12px; }
  .hp-faq-role-tag { font-size: 11px; }
  .hp-faq-page .hp-qa-question { flex-wrap: wrap; }

  .hp-faq-categories { grid-gap: 36px; gap: 36px; }

  .hp-faq-page .hp-qa-question {
    grid-gap: 24px;
    gap: 24px;
    padding: 32px 0;
    font-weight: 700;
  }

  .hp-faq-page .hp-qa-answer {
    padding: 0 42px 32px 0;
    line-height: 1.6;
  }
}

/* ============ HP v3 – COLUMNS (index + sidebar) ============ */
.hp-columns-section { padding: 0 0 80px; }

.hp-columns-layout {
  display: grid;
  grid-template-columns: minmax(0, 786px) 281px;
  justify-content: space-between;
  grid-gap: 32px;
  gap: 32px;
  align-items: start;
}

.hp-columns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 350px));
  grid-gap: 24px 52px;
  gap: 24px 52px;
}

.hp-columns-grid .hp-column-card { min-height: 448px; }

.hp-columns-sidebar {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
}

.hp-sidebar-heading {
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid #479BDE;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  color: #0F172B;
}

.hp-sidebar-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-sidebar-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #479BDE;
  font-size: 16px;
  line-height: 1.6;
  color: #2C3E50;
  text-decoration: none;
}

.hp-sidebar-links a::after {
  content: '';
  width: 24px;
  height: 24px;
  background-color: #479BDE;
  mask: url(/packs/static/icon_arrow-f318e41c4f73ab6e5d3a.svg) center / contain no-repeat;
  transform: rotate(90deg);
}

.hp-sidebar-links a:hover { background: rgba(255, 255, 255, .6); }

.hp-sidebar-articles {
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 24px;
}

.hp-sidebar-article {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
  gap: 16px;
  color: #2C3E50;
  text-decoration: none;
}

.hp-sidebar-article:hover { color: #2C3E50; opacity: .85; }

.hp-sidebar-article-image {
  height: 136px;
  overflow: hidden;
  border-radius: 8px;
}

.hp-sidebar-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-sidebar-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.hp-sidebar-article-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-sidebar-article-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ============ HP v3 – COLUMN ARTICLE (columns/*) ============
   Legacy colibri-* markup restyled to Figma 中見出し / 小見出し. */
.hp-article-page { padding: 80px 0; }

.hp-article-page .hp-breadcrumb { margin-bottom: 24px; }

.hp-article-card {
  display: flex;
  flex-direction: column;
  grid-gap: 56px;
  gap: 56px;
  padding: 32px;
  border-radius: 15px;
  background: #fff;
}

.hp-article-date {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #479BDE;
}

/* re-edited columns: 公開 (original release) ／ 更新 (site publication) */
.hp-article-date-updated {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #EBF5FB;
  font-weight: 500;
  color: #6C757D;
}

.hp-article-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-article-hero {
  aspect-ratio: 722 / 400;
  overflow: hidden;
  border-radius: 15px;
}

.hp-article-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-article-body {
  display: flex;
  flex-direction: column;
  grid-gap: 40px;
  gap: 40px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-article-body .white-background {
  margin: 0 !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.hp-article-body .colibri-home-subsection-title {
  position: relative;
  margin: 0 0 24px !important;
  padding: 12px 24px;
  background: #EBF5FB;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .11em;
  text-align: left;
  color: #2C3E50;
}

.hp-article-body .colibri-home-subsection-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: #479BDE;
}

.hp-article-body .colibri-subsection-centered + .colibri-home-subsection-title,
.hp-article-body .aligned-right-home + .colibri-home-subsection-title { margin-top: 40px !important; }

.hp-article-body .colibri-home-subsection-subtitle {
  margin: 24px 0 16px;
  padding-left: 16px;
  border-left: 4px solid #479BDE;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: #2C3E50;
}

.hp-article-body .colibri-section-title {
  margin: 0 0 16px !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left !important;
  color: #479BDE;
}

.hp-article-body .aligned-right-home,
.hp-article-body .colibri-subsection-centered,
.hp-article-body .colibri-home-div {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.hp-article-body .colibri-home-div { margin-bottom: 16px; }

.hp-article-body .colibri-tokutei-support {
  margin-top: 24px !important;
  padding: 20px 24px !important;
  border-radius: 10px;
  background: #EBF5FB;
}

.hp-article-body .colibri-tokutei-support .colibri-home-subsection-subtitle { margin-top: 0; }

.hp-article-body .pink-underline {
  background: linear-gradient(transparent 60%, rgba(255, 112, 112, .3) 60%);
  border: 0;
}

/* HP text links: overrides the app-wide teal / white-ground style */
#colibri-pages-nav ~ * .colibri-regular-link {
  background-color: transparent;
  color: #479BDE;
  transition: color .15s ease;
}

#colibri-pages-nav ~ * .colibri-regular-link.coli-dotted-link { border-bottom-color: currentColor; }

#colibri-pages-nav ~ * .colibri-regular-link:hover,
#colibri-pages-nav ~ * .colibri-regular-link:focus-visible {
  background-color: transparent;
  color: #3A89CB;
}

#colibri-pages-nav ~ * .colibri-regular-link.coli-dotted-link:hover,
#colibri-pages-nav ~ * .colibri-regular-link.coli-dotted-link:focus-visible { border-bottom-style: solid; }

.hp-article-footer-cta { text-align: center; }

/* article figures; -sm keeps small diagrams small */
.hp-article-body .hp-article-figure {
  margin: 8px 0 20px;
  text-align: center;
}

.hp-article-body .hp-article-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.hp-article-body .hp-article-figure-sm img { max-width: 320px; }

.hp-article-body .hp-article-figure .hp-scene {
  max-width: 560px;
  margin: 0 auto;
}

.hp-article-body .hp-article-figure-caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #6C757D;
}

/* lists, tables, quotes, notes in an article body */
.hp-article-body .hp-article-list {
  margin: 0 0 16px;
  padding-left: 22px;
}

.hp-article-body .hp-article-list li { margin-bottom: 8px; }

.hp-article-body .hp-article-list-links { padding-left: 20px; }

.hp-article-body .hp-article-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hp-article-body .hp-article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}

.hp-article-body .hp-article-table th,
.hp-article-body .hp-article-table td {
  padding: 10px 14px;
  border: 1px solid #DCE6EE;
  text-align: left;
  vertical-align: top;
}

.hp-article-body .hp-article-table thead th {
  background: #EBF5FB;
  color: #2C3E50;
  font-weight: 700;
  white-space: nowrap;
}

.hp-article-body .hp-article-table tbody td:first-child {
  font-weight: 600;
  color: #2C3E50;
  white-space: nowrap;
}

.hp-article-body .hp-article-table-compact { width: auto; min-width: 60%; }

.hp-article-body .hp-article-table-total td {
  background: #EBF5FB;
  font-weight: 700;
}

.hp-article-body .hp-article-quote {
  padding: 16px 20px;
  border-left: 4px solid #479BDE;
  background: #F7FAFC;
  font-size: 15px;
}

.hp-article-body .hp-article-quote-source {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #6C757D;
}

.hp-article-body .hp-article-formula {
  margin: 0 0 16px;
  padding: 14px 20px;
  border-radius: 10px;
  background: #EBF5FB;
  font-weight: 700;
  color: #2C3E50;
  text-align: center;
}

.hp-article-body .hp-article-note {
  padding: 14px 18px;
  border-radius: 10px;
  background: #FFF6E5;
  font-size: 14px;
  line-height: 1.7;
}

/* Markdown columns (HpColumn, kramdown output) */
.hp-article-body .hp-article-md > * { margin-top: 0; margin-bottom: 0; }
.hp-article-body .hp-article-md > * + * { margin-top: 12px; }
.hp-article-body .hp-article-md > h3 { margin-top: 24px; margin-bottom: 16px; }
.hp-article-body .hp-article-md > .hp-article-figure { margin-top: 8px; margin-bottom: 20px; }
.hp-article-body .hp-article-md > .hp-article-table-wrap,
.hp-article-body .hp-article-md > .hp-article-list { margin-bottom: 8px; }
.hp-article-body .hp-article-faq .hp-qa-item h3 { margin: 0; padding: 0; border: 0; }

@media (max-width: 575px) {
  /* let tables wrap to fit a phone; wrapper still scrolls */
  .hp-article-body .hp-article-table thead th,
  .hp-article-body .hp-article-table tbody td:first-child { white-space: normal; }
  .hp-article-body .hp-article-table th,
  .hp-article-body .hp-article-table td { padding: 8px 10px; font-size: 14px; }
  .hp-article-body .hp-article-table-compact { width: 100%; }
  .hp-article-body .hp-article-table-scroll { min-width: 480px; }
  .hp-article-body .hp-article-table-scroll th,
  .hp-article-body .hp-article-table-scroll td:first-child { white-space: nowrap; }
  /* prose table: each row a card, column heading before each cell */
  .hp-article-body .hp-article-table-stack,
  .hp-article-body .hp-article-table-stack tbody,
  .hp-article-body .hp-article-table-stack tr,
  .hp-article-body .hp-article-table-stack td { display: block; width: 100%; }
  .hp-article-body .hp-article-table-stack thead { display: none; }
  .hp-article-body .hp-article-table-stack tr {
    margin-bottom: 12px;
    border: 1px solid #DCE6EE;
    border-radius: 10px;
    overflow: hidden;
  }
  .hp-article-body .hp-article-table-stack td { border: 0; border-top: 1px solid #DCE6EE; }
  .hp-article-body .hp-article-table-stack td:first-child {
    border-top: 0;
    background: #EBF5FB;
    font-weight: 700;
  }
  .hp-article-body .hp-article-table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #479BDE;
  }
}

.hp-related-columns-heading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-related-columns-list {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
  gap: 16px;
}

.hp-related-col-item {
  display: flex;
  align-items: center;
  grid-gap: 40px;
  gap: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid #D5DDE5;
  color: #2C3E50;
  text-decoration: none;
}

.hp-related-col-item:hover { color: #2C3E50; opacity: .85; }

.hp-related-col-thumb {
  flex: 0 0 150px;
  height: 100px;
  overflow: hidden;
  border-radius: 15px;
}

.hp-related-col-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-related-col-date {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #479BDE;
}

.hp-related-col-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* ============ HP v3 – CUSTOMER STORIES INDEX ============ */
.hp-stories-section { padding: 0 0 80px; }

.hp-stories-section .hp-filter-tabs { margin-bottom: 32px; }

.hp-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 330px));
  justify-content: space-between;
  grid-gap: 32px 24px;
  gap: 32px 24px;
}

.hp-stories-no-results {
  padding: 40px 0;
  text-align: center;
}

/* ============ HP v3 – CUSTOMER STORY DETAIL (customer_stories/*) ============
   Legacy markup restyled to Figma Q&A cards. */
.hp-story-hero-labels {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 4px 16px;
  gap: 4px 16px;
  margin: 0 0 4px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  color: #479BDE;
}

.hp-story-hero-name {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-story-hero-people-label {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #479BDE;
}

.hp-story-hero-people {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.hp-story-hero-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 492px;
}

.hp-story-hero-photo {
  aspect-ratio: 492 / 327;
  overflow: hidden;
  border: 2px solid #2C3E50;
  border-radius: 15px;
  background: #fff;
}

.hp-story-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-story-hero-visual .hp-page-hero-tree {
  left: -127px;
  top: auto;
  bottom: -30px;
  width: 160px;
}

.hp-story-hero-visual .hp-page-hero-leaf-a { left: -70px; top: 0; width: 46px; }
.hp-story-hero-visual .hp-page-hero-leaf-b { left: auto; right: -20px; top: auto; bottom: -10px; width: 33px; }

.hp-story-body {
  max-width: 948px;
  margin: 0 auto;
  padding: 0 24px 24px;
  font-size: 16px;
  line-height: 1.6;
}

.hp-story-body .white-background {
  margin: 24px 0 0 !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.hp-story-body .colibri-section-title {
  display: inline-flex;
  margin: 32px 0 8px !important;
  padding: 4px 20px;
  border: 2px solid #479BDE;
  border-radius: 999px;
  background: #EBF5FB;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: left !important;
  color: #479BDE;
}

.hp-story-body .colibri-section-title .smartphone-no-display { display: none; }

.hp-story-body .colibri-home-subsection-small-title {
  margin: 16px 0 0 !important;
  padding: 16px 4px 16px 24px;
  border: 1px solid #E2E8F0;
  border-radius: 4px 4px 0 0;
  background: #479BDE;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: left;
  color: #fff;
}

.hp-story-body .colibri-home-subsection-small-title + .aligned-right-home {
  margin: 0 !important;
  padding: 16px 24px;
  border: 1px solid #E2E8F0;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-story-body .aligned-right-home,
.hp-story-body .colibri-subsection-centered {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.hp-story-body .colibri-subsection-centered { padding: 0; }

.hp-story-body > .white-background:first-child .colibri-home-subsection-small-title {
  margin-top: 0 !important;
  padding: 24px 0 10px;
  border: 0;
  background: none;
  font-size: 20px;
  color: #2C3E50;
}

.hp-story-body > .white-background:first-child .colibri-home-subsection-small-title + .aligned-right-home {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.hp-story-body .coli-small-subtitle { font-size: 14px; font-weight: 400; }

.hp-story-body img {
  max-width: 100%;
  height: auto;
}

.hp-story-body .coli-story-img-wrapper,
.hp-story-body .coli-story-section-img { margin-top: 16px; }

.hp-story-body .image-subtext {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

.hp-story-body .pink-underline {
  background: linear-gradient(transparent 60%, rgba(255, 112, 112, .3) 60%);
  border: 0;
}

/* quote photos are low-res crops (450–650px): max 280px to stay sharp on retina */
.hp-story-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  grid-gap: 40px;
  gap: 40px;
  margin: 16px 0 40px;
  padding: 32px 32px 32px 40px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-story-quote-mark {
  display: block;
  width: 28px;
  height: 22px;
  margin-bottom: 12px;
  fill: #FF7070;
}

.hp-story-quote-body { margin: 0; }

.hp-main .hp-story-quote-body p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .04em;
  color: #2C3E50;
}

.hp-story-quote-source {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6C757D;
}

.hp-story-quote-source::before {
  content: "";
  flex: 0 0 24px;
  height: 2px;
  border-radius: 1px;
  background: #479BDE;
}

.hp-story-quote-source span span + span { margin-left: 1em; }

.hp-story-quote-photo {
  position: relative;
  aspect-ratio: 4 / 3;
}

.hp-story-body .hp-story-quote-photo img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.hp-story-quote-position-top { object-position: center 4%; }

.hp-story-body .hp-story-quote-leaf {
  position: absolute;
  left: -16px;
  top: -18px;
  width: 34px;
  transform: rotate(-20deg);
  pointer-events: none;
}

.hp-story-closing {
  padding: 24px 0 56px;
  text-align: center;
}

.hp-story-related {
  position: relative;
  overflow: hidden;
  padding: 60px 0 160px;
}

.hp-story-related-title {
  margin: 0 0 26px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.hp-story-related-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 330px));
  justify-content: space-between;
  grid-gap: 32px 24px;
  gap: 32px 24px;
}

/* ============ HP v3 – ABOUT US (会社方針) ============ */
.hp-about-leaf {
  position: absolute;
  width: 46px;
  height: auto;
  pointer-events: none;
}

.hp-about-story { padding: 30px 0 80px; }

.hp-about-story-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 28px;
  gap: 28px;
}

.hp-about-story-text {
  position: relative;
  flex: 0 1 601px;
}

.hp-about-story-text .hp-about-leaf { left: -12px; top: -30px; }

.hp-about-story-body { margin-top: 20px; }

.hp-about-story-body p,
.hp-about-story-body blockquote {
  margin: 0 0 1.6em;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 1.6;
}

.hp-about-story-body blockquote { font-weight: 700; }

.hp-about-story-body > :last-child { margin-bottom: 0; }

.hp-about-story-images {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 231px 231px;
  grid-template-rows: 353px 173px;
  grid-gap: 10px 9px;
  gap: 10px 9px;
}

.hp-about-story-images > div {
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-about-story-images .hp-about-story-img-main { grid-column: 1 / 3; }

.hp-about-story-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-about-company { padding: 80px 0; }

.hp-about-company .hp-section-head { margin-bottom: 24px; }

.hp-about-table {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
}

.hp-about-table-row {
  display: flex;
  grid-gap: 16px;
  gap: 16px;
  border-bottom: 1px solid #EBF5FB;
}

.hp-about-table-row:last-child { border-bottom: 0; }

.hp-about-table-label {
  display: flex;
  flex: 0 0 140px;
  align-items: center;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-about-table-value {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: center;
  grid-gap: 4px;
  gap: 4px;
  padding: 16px 16px 16px 0;
  font-size: 16px;
  line-height: 1.6;
}

.hp-about-map-link {
  display: inline-flex;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  font-size: 14px;
  color: #2C3E50;
  text-decoration: none;
}

.hp-about-map-link::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #479BDE;
}

.hp-about-map-link:hover { color: #479BDE; }

.hp-about-mission {
  position: relative;
  padding: 80px 0;
  background: url(/packs/static/mission_bg-45097e92b9910d2766e9.webp) center / cover no-repeat;
  color: #fff;
}

.hp-about-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(71, 155, 222, .9);
}

.hp-about-mission > .hp-container { position: relative; }

.hp-about-mission .hp-section-head { margin-bottom: 0; }

.hp-about-mission .hp-features-eyebrow,
.hp-about-mission .hp-features-heading { color: #fff; }

.hp-about-mission-body {
  max-width: 601px;
  margin: 20px auto 0;
  text-align: center;
}

.hp-about-mission-body p { margin: 0 0 1.6em; font-size: 16px; }
.hp-about-mission-body p:last-child { margin-bottom: 0; }

/* breaks after 「時間を」 on phones only */
.hp-about-br-sp { display: none; }

/* VISION cards: 190px illustration on top */
.hp-about-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 540px));
  justify-content: space-between;
  align-items: start;
  grid-gap: 12px 20px;
  gap: 12px 20px;
  margin-top: 24px;
}

.hp-about-vision-item {
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  color: #2C3E50;
}

.hp-about-vision-item-image {
  display: block;
  align-self: center;
  max-width: 100%;
  height: 190px;
  width: auto;
  object-fit: contain;
}

.hp-about-vision-item-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-about-vision-item-body { margin: 0; font-size: 16px; }

.hp-about-recruit-illustration-sp { display: none; }

.hp-about-values {
  position: relative;
  overflow: hidden;
  padding: 80px 0 200px;
}

.hp-about-values-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 40px;
  gap: 40px;
}

.hp-about-values-image {
  flex: 0 0 530px;
  aspect-ratio: 530 / 353;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-about-values-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-about-values-text {
  position: relative;
  flex: 0 1 530px;
}

.hp-about-values-text .hp-about-leaf { left: -26px; top: -18px; }

.hp-about-values-list {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
  gap: 16px;
  margin-top: 20px;
}

.hp-about-value-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-about-value-body { margin: 4px 0 0; font-size: 16px; }

.hp-about-team {
  padding: 60px 0;
  background: #fff;
}

.hp-about-team-intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 48px;
}

.hp-about-team-intro-text { position: relative; flex: 0 1 530px; }

.hp-about-team-intro-text .hp-section-lead { margin-top: 16px; }

.hp-about-team-colibri {
  position: absolute;
  left: -40px;
  top: -64px;
  width: 59px;
  height: auto;
}

.hp-about-team-illustration {
  width: 370px;
  max-width: 45%;
  height: auto;
}

.hp-about-founders {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 48px;
  gap: 48px;
  margin-bottom: 48px;
}

.hp-about-founder {
  display: flex;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
}

.hp-about-founder-figure {
  display: flex;
  flex: 0 0 251px;
  flex-direction: column;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
}

.hp-about-founder-figure img {
  display: block;
  width: 251px;
  height: auto;
}

.hp-about-founder-role {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.hp-about-founder-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #479BDE;
}

.hp-about-founder-text { flex: 0 1 493px; }

/* scoped to .hp-main, or `.hp-main p` line-height wins and wrapped chips overlap */
.hp-main .hp-about-founder-quote {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 3;
}

.hp-about-founder-quote span {
  padding: 6px 16px;
  border-radius: 10px;
  background: #FF7070;
  color: #fff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hp-about-founder-bio { margin: 0; font-size: 16px; }

.hp-about-members-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
  margin-top: 24px;
}

.hp-about-member {
  position: relative;
  padding-top: 230px;
}

.hp-about-member-photo {
  position: absolute;
  top: 0;
  left: 45px;
  width: 245px;
  height: 245px;
}

.hp-about-member-photo::before {
  content: '';
  position: absolute;
  left: -6px;
  top: -2px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: #FF7070;
}

.hp-about-member-photo img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hp-about-member-card {
  position: relative;
  padding: 24px;
  border-radius: 15px;
  background: #EBF5FB;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-about-member-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-about-member-role { margin: 0; font-size: 14px; }

.hp-about-recruit {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 228px;
  margin-top: 48px;
  padding: 20px 24px;
  border-radius: 10px;
  background: #479BDE;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  color: #fff;
}

.hp-about-recruit-text { position: relative; z-index: 1; }

.hp-about-recruit .hp-features-eyebrow,
.hp-about-recruit .hp-features-heading { color: #fff; }

.hp-about-recruit-roles { margin: 8px 0 16px; font-size: 16px; }

.hp-about-recruit-illustration {
  position: absolute;
  right: 130px;
  bottom: 2px;
  width: 360px;
  height: auto;
}

/* ============ HP v3 – 職種トップ / 職種別機能 ============ */
.hp-service-cross-nav {
  display: flex;
  justify-content: center;
}

.hp-service-cross-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-service-cross-nav-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-service-cross-nav-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 16px;
  gap: 16px;
}

.hp-service-cross-nav-chips .hp-btn { min-width: 200px; }

.hp-jobtop-visual {
  position: relative;
  width: 607px;
  max-width: 100%;
  aspect-ratio: 607 / 394;
}

.hp-jobtop-visual-photo {
  position: absolute;
  left: 13%;
  top: 8.6%;
  width: 71.5%;
  height: 76.9%;
  overflow: hidden;
  border: 3px solid #2C3E50;
  border-radius: 15px;
}

.hp-jobtop-visual-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-jobtop-visual-phone {
  position: absolute;
  left: 47.4%;
  top: -2%;
  width: 70.8%;
  height: auto;
}

.hp-jobtop-visual .hp-page-hero-tree {
  left: 0;
  top: auto;
  bottom: 0;
  width: 29%;
}

/* doc stack overflows 18% right: visual shrinks to keep it in the window */
@media (min-width: 992px) and (max-width: 1319px) {
  .hp-jobtop-visual { max-width: 84%; margin-right: 15%; }
}

/* stacked hero (768–991): leaf onto the photo corner; tree stays on its bottom-left like PC */
@media (min-width: 768px) and (max-width: 991px) {
  .hp-jobtop-visual .hp-page-hero-leaf-a { left: 8%; top: 1%; }
  .hp-jobtop-visual .hp-page-hero-deco.hp-page-hero-tree,
  .hp-page-hero-visual-photo .hp-page-hero-deco.hp-page-hero-tree { display: block; }
  .hp-page-hero-visual-photo .hp-page-hero-tree { left: -8%; width: 24%; }

  .hp-workstyle-inner { flex-direction: column; align-items: center; }
  .hp-workstyle-inner > .hp-workstyle-visual {
    display: block;
    position: relative;
    left: auto;
    width: min(557px, 100%);
    margin-top: 24px;
  }
}

/* Figma "Frame 627087" (1440 × 482) */
.hp-workstyle {
  position: relative;
  overflow: hidden;
  padding: 24px 0 16px;
}

.hp-workstyle-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 466px;
}

.hp-workstyle-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 32px;
  gap: 32px;
  width: calc(50% - 24px);
  /* clears a third pill row above the 171px bushes */
  padding: 64px 0 171px;
}

/* sized to the heading so the bird stays by its first characters */
.hp-workstyle-head { position: relative; }

/* Figma "colibri" 113 × 84; flapping box is 1.27× the bird (bird 18% in, 7% down). The bird flies in from the
   top-left of the title: its beak ends about 12px left of and 20px above the first glyph, never over the text */
.hp-workstyle-colibri {
  position: absolute;
  left: -150px;
  top: -84px;
  width: 143px;
}

/* 1280–1439: the content edge is only 90px from the screen, so a wrapped title (訪問看護) leaves no room for the
   full bird; a smaller one ends at the screen edge instead of being clipped */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hp-workstyle-colibri { left: -104px; top: -80px; width: 110px; }
}

.hp-workstyle-title {
  position: relative;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: center;
}

.hp-workstyle-title-em {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 7px;
  background: #FF7070;
  color: #fff;
}

.hp-workstyle-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  grid-gap: 16px;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-workstyle-item {
  display: flex;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  min-width: 250px;
  padding: 8px 24px 8px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-workstyle-item-icon {
  display: flex;
  flex: 0 0 45px;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 50%;
  background: #FF7070;
  color: #fff;
  font-size: 22px;
}

.hp-workstyle-item-text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* Figma "_レイヤー_3" (557 × 466) */
.hp-workstyle-visual {
  position: absolute;
  left: calc(50% - 7px);
  top: 0;
  width: 557px;
  aspect-ratio: 557 / 466;
  pointer-events: none;
}

.hp-workstyle-illustration {
  display: block;
  width: 100%;
  height: auto;
}

.hp-workstyle-cloud {
  position: absolute;
  left: 73.25%;
  top: 8.15%;
  width: 17.37%;
  height: auto;
}

.hp-workstyle-caption {
  position: absolute;
  left: 8.26%;
  top: 5.58%;
  width: 35.19%;
  height: auto;
}

.hp-workstyle .hp-trees-band-feature { height: 171px; }

/* narrower PCs: column < 532px, pills and type step down */
@media (min-width: 992px) and (max-width: 1279px) {
  .hp-workstyle-title { font-size: 24px; }
  /* the head fills the body when the title wraps (訪問看護), 24px from the screen edge: keep the bird inside */
  .hp-workstyle-colibri { left: -40px; top: -82px; width: 96px; }
  .hp-workstyle-item { grid-gap: 12px; gap: 12px; min-width: 0; padding: 8px 18px 8px 12px; }
  .hp-workstyle-item-icon { flex-basis: 40px; height: 40px; font-size: 19px; }
  .hp-workstyle-item-text { font-size: 16px; }
}

.hp-feature-highlight {
  position: relative;
  overflow: hidden;
  /* clear the 153px bush band, or it paints over the scene */
  padding: 0 0 163px;
  text-align: center;
}

.hp-feature-highlight-title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-feature-highlight-body {
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

.hp-feature-highlight-image {
  position: relative;
  width: 538px;
  max-width: 100%;
  margin: 24px auto 0;
}

/* outline variant (請求連携): 2 × 2 anchor chips */
.hp-feature-highlight-image-outline { width: 640px; margin-top: 40px; }
.hp-ai-summary-list.hp-feature-highlight-outline { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px 16px; gap: 12px 16px; margin: 0; text-align: left; }
.hp-feature-highlight-outline a { padding: 14px 18px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .05); }
.hp-feature-highlight-image-outline > .hp-feature-highlight-bird { left: -136px; top: -64px; }

@media (max-width: 575px) {
  .hp-ai-summary-list.hp-feature-highlight-outline { grid-template-columns: 1fr; }
}

/* anchors land below the fixed header */
.hp-detail-card[id] { scroll-margin-top: 96px; }

.hp-feature-highlight-image > img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-feature-highlight-image > .hp-feature-highlight-bird {
  position: absolute;
  left: -90px;
  top: -16px;
  width: 125px;
  height: auto;
}

.hp-detail-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0 150px;
}

/* Figma "雲" (機能詳細): two 1440 × 447 tiles, seam at centre; tiles seamlessly on wider screens */
.hp-detail-section .hp-clouds,
.hp-videos-tour .hp-clouds {
  height: 447px;
  background: url(/packs/static/cloud_band-10ddd285cf7b03786c6b.svg) center bottom / 1440px 447px repeat-x;
}

.hp-detail-section .hp-clouds::before,
.hp-videos-tour .hp-clouds::before { content: none; }

.hp-detail-section .hp-section-head {
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
}

.hp-detail-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row-gap: 24px;
  row-gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}


.hp-detail-card {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
  min-height: 351px;
  padding: 24px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1);
}

/* active card (pages.js .hp-detail-card-active) lifts */
.hp-detail-card-active {
  z-index: 2;
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 14px 28px rgba(62, 78, 94, .12);
}

@media (prefers-reduced-motion: reduce) {
  .hp-detail-card { transition: none; }
  .hp-detail-card-active { transform: none; }
}

.hp-detail-card-flip { flex-direction: row-reverse; }

/* Leaves around POINT cards (_hp_detail_leaves): grid siblings pinned to their card's row, fixed z-index so the
   lift never reorders them. Cards 1 (2 lifted); tucked leaf 0; others 3. */
.hp-detail-card:nth-of-type(1),
.hp-detail-leaf-r1 { grid-row: 1; }

.hp-detail-card:nth-of-type(2),
.hp-detail-leaf-r2 { grid-row: 2; }

.hp-detail-card:nth-of-type(3),
.hp-detail-leaf-r3 { grid-row: 3; }

.hp-detail-card:nth-of-type(4),
.hp-detail-leaf-r4 { grid-row: 4; }

.hp-detail-card:nth-of-type(5),
.hp-detail-leaf-r5 { grid-row: 5; }

.hp-detail-card:nth-of-type(6),
.hp-detail-leaf-r6 { grid-row: 6; }

.hp-detail-card:nth-of-type(7),
.hp-detail-leaf-r7 { grid-row: 7; }

.hp-detail-card:nth-of-type(8),
.hp-detail-leaf-r8 { grid-row: 8; }

.hp-detail-leaf {
  z-index: 3;
  grid-column: 1;
  background: center / contain no-repeat;
  pointer-events: none;
}

.hp-detail-leaf-top-left {
  align-self: start;
  justify-self: start;
  width: 92px;
  height: 59px;
  margin: -27px 0 0 -37px;
  background-image: url(/packs/static/detail_leaf_1-f89bbadfe64ab9c78b95.png);
}

.hp-detail-leaf-tucked {
  z-index: 0;
  align-self: start;
  justify-self: end;
  width: 31px;
  height: 20px;
  margin: -17px 374px 0 0;
  background-image: url(/packs/static/detail_leaf_2-57b453c97fe7e9693796.png);
}

.hp-detail-leaf-bottom {
  align-self: end;
  justify-self: start;
  width: 47px;
  height: 42px;
  margin: 0 0 -35px 236px;
  background-image: url(/packs/static/detail_leaf_3-a132a5dfab1e486acee1.png);
}

.hp-detail-leaf-cluster {
  align-self: end;
  justify-self: end;
  width: 99px;
  height: 95px;
  margin: 0 -27px -73px 0;
  background-image: url(/packs/static/detail_leaf_4-de9e980dc12f7a743461.png);
}

.hp-detail-card-text { flex: 0 1 401px; }

.hp-detail-card-flip .hp-detail-card-text { flex-basis: 380px; }

.hp-detail-card-image {
  flex: 0 0 460px;
  max-width: 50%;
}

.hp-detail-card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-detail-card-num {
  margin: 0 0 4px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #479BDE;
}

.hp-detail-card-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  color: #2C3E50;
}

.hp-detail-card-body {
  font-size: 16px;
  line-height: 1.6;
}

.hp-detail-card-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #479BDE;
  text-decoration: none;
}

.hp-detail-card-link:hover { text-decoration: underline; }

/* flow-root: stops the heading margin collapsing through (light-blue band on phones) */
.hp-function-section {
  display: flow-root;
  padding: 0 0 12px;
  background: #fff;
}

/* 1px tuck: hides a hairline gap on fractional pixels */
.hp-detail-section + .hp-function-section { margin-top: -1px; }

.hp-function-section .hp-section-head { margin-bottom: 24px; }

/* no video yet */
.hp-function-section + .hp-features-section { padding-top: 0; }

.hp-function-media {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 118px;
}

.hp-video-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-gap: 12px;
  gap: 12px;
  aspect-ratio: 812 / 457;
  margin: 25px;
  border: 1px solid #CAD5E2;
  border-radius: 4px;
  background: #F1F5F9 url(/packs/static/video_placeholder_bg-bdc18b61fc3dd55f57cd.svg) center / cover no-repeat;
  color: #62748E;
}

.hp-video-placeholder-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 67px;
  border: 2px solid #62748E;
  border-radius: 50%;
  background: #fff;
  font-size: 32px;
  color: #475569;
}

.hp-video-placeholder-label { margin: 0; font-size: 15px; }

.hp-video-placeholder-sub { margin: 0; font-size: 13px; color: #90A1B9; }

.hp-video-placeholder-duration {
  position: absolute;
  right: 36px;
  bottom: 14px;
  padding: 0 8px;
  border-radius: 4px;
  background: #1D293D;
  font-size: 12px;
  line-height: 21px;
  color: #fff;
}

.hp-function-house {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 217px;
  height: auto;
}

.hp-function-van {
  position: absolute;
  left: 813px;
  bottom: 2px;
  width: 168px;
  height: auto;
}

/* ============ HP v3 – HOME (Top) ============ */
.hp-home-fv {
  position: relative;
  height: 813px;
  /* clip x only: thread tail runs 52px past the meadow */
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(261deg, #17A4F4 -5%, #67BEEF 30%, #CFE2EF 105%);
}

/* Figma "Bg": sky + hill to the screen edges; clouds, trees, people on a centred 1440 stage (no scaling) */
.hp-home-fv-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: url(/packs/static/fv_sky_noise-a1963fe5bc3e4246ba7f.svg) 0 0 / 256px 256px;
}

.hp-home-fv-stage {
  position: absolute;
  top: 0;
  left: calc(50% - 720px);
  width: 1440px;
  height: 813px;
}

/* positions = each layer's box in the 1440 frame (2x exports) */
.hp-home-fv-layer {
  position: absolute;
  z-index: 1;
  background: center / 100% 100% no-repeat;
}

.hp-home-fv-cloud-m { left: -346px; top: 365px; width: 930px; height: 437px; background-image: url(/packs/static/fv_cloud_m-aa9c3bfde7023c01384f.webp); }
.hp-home-fv-cloud-l { left: 768px; top: -4px; width: 960px; height: 672px; background-image: url(/packs/static/fv_cloud_l-8b7d8c016452363cea76.webp); }
.hp-home-fv-mountain { left: 477px; top: 613px; width: 958px; height: 182px; background-image: url(/packs/static/fv_mountain-cf803513c522370cf88c.webp); }
.hp-home-fv-trees { left: 25px; top: 625px; width: 565px; height: 128px; background-image: url(/packs/static/fv_trees-f7ff12ad27b1d753acf1.webp); }

.hp-home-fv-people,
.hp-home-fv-bush-left,
.hp-home-fv-bush-right { z-index: 3; }

.hp-home-fv-people { left: 247.5px; top: 608px; width: 935px; height: 179px; background-image: url(/packs/static/fv_people-7c760b8dad3acdc9c63d.webp); }
.hp-home-fv-bush-left { left: -15px; top: 646px; width: 234px; height: 163px; background-image: url(/packs/static/fv_bush_left-b4463e810b83ca1f0172.webp); }
.hp-home-fv-bush-right { left: 1003px; top: 719px; width: 418px; height: 94px; background-image: url(/packs/static/fv_bush_right-013b84d5d0f966522ff6.webp); }

/* Figma "image 131" hill: 2029 × 62 grass band + mirror (no seam) + flipped copy below (no stripe), then avg green.
   Skew = 1440 meadow slope (~26px / 780px), pivot at page centre 87px above the bottom. */
.hp-home-fv-hill {
  position: absolute;
  z-index: 2;
  left: -200px;
  right: -200px;
  bottom: -120px;
  height: 207px;
  background: url(/packs/static/fv_hill-40210ad9220f1d6e803a.webp) 50% 0 / 4058px 124px repeat-x, #9FC365;
  transform: skewY(-1.9deg);
  transform-origin: 50% 0;
}

.hp-home-fv-inner {
  position: relative;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}

.hp-home-fv-line {
  position: absolute;
  left: 238px;
  top: 170px;
  width: 1051px;
  height: 695px;
  background: url(/packs/static/line_fv-df561b64755911f6834d.svg) center / contain no-repeat;
  pointer-events: none;
}

.hp-home-fv-colibri {
  position: absolute;
  left: 120px;
  top: 66px;
  width: 170px;
  height: auto;
}

/* Figma "葉っぱ" (FV): 1440 × 286 sheet, rasterized without blur, hangs 37px past the meadow */
.hp-home-fv::after {
  content: "";
  position: absolute;
  left: calc(50% - 720px);
  bottom: -37px;
  width: 1440px;
  height: 286px;
  background: url(/packs/static/leaves_fv-37fff856d12ce9fe416d.png) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* top-left leaf was cut at the screen edge in the sheet: drawn whole here, 16px inside */
.hp-home-fv-leaf {
  position: absolute;
  left: 16px;
  top: 570px;
  width: 84px;
  height: auto;
  pointer-events: none;
}

.hp-home-fv-device {
  position: absolute;
  left: 620px;
  top: 136px;
  width: 648px;
  height: auto;
}

.hp-home-fv-text {
  position: absolute;
  left: 167px;
  top: 220px;
  z-index: 2;
  text-shadow: 0 4px 20px rgba(255, 255, 255, .7);
}

.hp-home-fv-label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #479BDE;
}

.hp-home-fv-title {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
}

.hp-home-fv-sub {
  max-width: 440px;
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: .06em;
}

.hp-home-fv-actions {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  text-shadow: none;
}

.hp-home-fv-actions .hp-btn-coral-outline { min-width: 166px; }

.hp-home-about {
  position: relative;
  /* z-index: hanging leaves paint over CASE STUDY; clip x only */
  z-index: 1;
  overflow: clip visible;
  padding: 80px 0;
}

/* top meets the FV thread tail; bottom pinned to the section edge (stretches a few px) */
.hp-home-about-line {
  position: absolute;
  left: calc(50% - 482px);
  top: 50px;
  bottom: 0;
  width: 874px;
  background: url(/packs/static/line_about-08559bc4bdbf0a7a5820.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Figma "葉っぱ" (About): 829 × 126, bottom-anchored */
.hp-home-about::after {
  content: "";
  position: absolute;
  left: calc(50% - 501px);
  bottom: -28px;
  width: 829px;
  height: 126px;
  background: url(/packs/static/leaves_about-3d6b45827d9e9635cafe.png) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.hp-home-about-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 30px;
}

.hp-home-about-text { flex: 0 1 452px; }

.hp-home-about-text .hp-features-heading { margin-bottom: 22px; }

.hp-home-about-diagram {
  position: relative;
  width: 383px;
  max-width: 45%;
  height: auto;
}

.hp-home-about-diagram img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* Phone / tablet thread part 2 (line_about_sp.svg), anchored to the diagram so it loops the role circles.
   Box 860 × 1020 diagram units from (-60, -20); section clips both ends. Part 1: .hp-home-about-line. */
/* tablet thread pieces (768–1199, see TOP ON TABLETS) */
.hp-home-about-link,
.hp-home-about-tail {
  display: none;
  position: absolute;
  pointer-events: none;
}

.hp-home-about-link { background: url(/packs/static/line_about_link-6aff54cd22d379918dfa.svg) 0 0 / 100% 100% no-repeat; }
.hp-home-about-tail { background: url(/packs/static/line_about_tail-04bea5899b33850e125a.svg) 0 0 / 100% 100% no-repeat; }

.hp-home-about-thread {
  display: none;
  position: absolute;
  left: -17.4419%;
  top: -6.1538%;
  width: 250%;
  aspect-ratio: 860 / 1020;
  background: url(/packs/static/line_about_sp-b578fcbf7c6c8112848c.svg) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.hp-home-about-features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.hp-home-feature-card {
  display: flex;
  align-items: center;
  grid-gap: 15px;
  gap: 15px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-home-feature-card img {
  width: 47px;
  height: 47px;
  flex-shrink: 0;
}

.hp-home-feature-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-home-feature-desc { margin: 0; font-size: 16px; }

.hp-home-cases {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: url(/packs/static/casestudy_bg_photo-91d8b776c878ab9c5a2a.webp) center / cover no-repeat;
  color: #fff;
}

.hp-home-cases::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(71, 155, 222, .9);
}

.hp-home-cases > * { position: relative; }

.hp-home-cases .hp-section-head { margin-bottom: 32px; }

.hp-home-cases .hp-features-eyebrow,
.hp-home-cases .hp-features-heading,
.hp-home-cases .hp-section-lead { color: #fff; }

.hp-home-cases-row {
  display: flex;
  justify-content: center;
  grid-gap: 32px;
  gap: 32px;
  margin-bottom: 32px;
}

.hp-home-cases-row > * { flex: 0 0 300px; }

.hp-home-cases-cta { text-align: center; }

.hp-home-concept {
  position: relative;
  /* clip, not hidden: a scroll container breaks sticky */
  overflow: hidden;
  overflow: clip;
  background: #EBF5FB;
}

/* zero-height track over the section: scenery sticks inside it, leaves with the section */
.hp-home-concept-scenery-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* sky + greenery: one viewport tall, sticky */
.hp-home-concept-scenery {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  background:
    url(/packs/static/concept_clouds-c20e79b73dd35e93bbfe.webp) right top / auto min(520px, 50vh) no-repeat,
    url(/packs/static/concept_trees_left-c91918d6db7bd4c13e47.webp) left bottom / auto min(286px, 28vh) no-repeat,
    url(/packs/static/concept_trees_right-d3980440b5c5b4761dba.webp) right bottom / auto min(286px, 28vh) no-repeat;
}

/* thread + leaves on the 1440 frame; stretched so it meets the SERVICE thread */
.hp-home-concept-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 720px);
  width: 1440px;
  pointer-events: none;
  background:
    url(/packs/static/line_why-e7b72dc97d4f5a3e0711.svg) 0 0 / 1440px 100% no-repeat,
    url(/packs/static/concept_leaves-d0bc8c367b4cd2f3ab99.webp) 0 0 / 1440px 1806px no-repeat;
}

/* Figma "colibri" (Concept) 110 × 81: artwork has transparent margins (bird 80% wide, 18% in) */
.hp-home-concept-colibri {
  position: absolute;
  left: calc(50% - 333px);
  top: 68px;
  z-index: 1;
  width: 138px;
}

.hp-home-concept > .hp-container {
  position: relative;
  z-index: 1;
  padding-block: 60px;
}

.hp-home-concept .hp-section-head {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.hp-home-concept-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-gap: 24px;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.hp-home-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 34px;
  gap: 34px;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-home-block-flip { flex-direction: row-reverse; }

.hp-home-block-text {
  display: flex;
  flex: 0 1 501px;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 16px;
  gap: 16px;
}

.hp-home-block-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

.hp-home-block-body { margin: 0; font-size: 16px; }

.hp-home-block-features {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px 30px;
  gap: 12px 30px;
}

.hp-home-block-feature {
  display: inline-flex;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-home-block-feature img {
  width: 47px;
  height: 47px;
  flex-shrink: 0;
}

/* light-blue box from here; the PNGs are transparent */
.hp-home-block-image {
  display: flex;
  flex: 0 0 300px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  border-radius: 14px;
  background: #EBF5FB;
}

.hp-home-block-image img {
  display: block;
  width: 82%;
  height: auto;
}

.hp-home-service {
  position: relative;
  overflow: hidden;
  padding: 80px 0 140px;
  background: linear-gradient(180deg, #fff 0%, #EBF5FB 100%);
}

.hp-home-service-line {
  position: absolute;
  left: calc(50% - 602px);
  top: 0;
  width: 1224px;
  height: 1366px;
  background: url(/packs/static/line_service-9cd21c05ad12480b6c59.svg) center / contain no-repeat;
  pointer-events: none;
}

.hp-home-service-colibri {
  position: absolute;
  left: calc(50% + 362px);
  top: 20px;
  width: 174px;
  height: auto;
}

/* Figma "葉っぱ" (Service): 846 × 731 */
.hp-home-service::after {
  content: "";
  position: absolute;
  left: calc(50% - 249px);
  top: 0;
  width: 846px;
  height: 731px;
  background: url(/packs/static/leaves_service-c70e72cd87547aeb94f5.webp) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.hp-home-service .hp-section-head { position: relative; z-index: 1; margin-bottom: 0; }

.hp-home-service .hp-function-media { z-index: 1; }

.hp-home-service-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 530px));
  justify-content: space-between;
  grid-gap: 20px 40px;
  gap: 20px 40px;
  margin-top: 24px;
}

.hp-service-card {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
  gap: 16px;
  padding: 24px;
  border: 1px solid #2C3E50;
  border-radius: 10px;
  background: #fff;
  color: #2C3E50;
  text-decoration: none;
}

/* hover: only the illustration zooms; explicit white beats global a:hover transparent */
.hp-service-card:hover,
.hp-service-card:focus-visible {
  background-color: #fff;
  color: #2C3E50;
}

.hp-service-card:hover .hp-service-card-image img,
.hp-service-card:focus-visible .hp-service-card-image img { transform: scale(1.05); }

.hp-service-card:hover .hp-btn {
  background-color: #3A89CB;
  border-color: #3A89CB;
}

.hp-service-card-top {
  display: flex;
  align-items: center;
  grid-gap: 13px;
  gap: 13px;
}

.hp-service-card-image {
  display: flex;
  flex: 0 0 192px;
  align-items: center;
  justify-content: center;
  height: 128px;
  overflow: hidden;
  border-radius: 10px;
  background: #EBF5FB;
}

.hp-service-card-image img {
  max-width: 100%;
  max-height: 118px;
  transition: transform .4s ease;
}

.hp-service-card-name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-service-card-tagline {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-service-card-tags {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 6px 12px;
  gap: 6px 12px;
}

.hp-service-card .hp-btn { align-self: flex-start; }

.hp-home-columns {
  padding: 60px 0;
  background: #fff;
}

.hp-home-columns-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 24px;
}

.hp-home-columns-header .hp-section-lead { margin-top: 20px; }

.hp-home-columns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.hp-home-faq {
  position: relative;
  overflow: hidden;
  padding: 80px 0 140px;
}

/* one thread, behind the clouds, behind the content */
.hp-home-faq-line {
  position: absolute;
  left: calc(50% - 470px);
  top: -24px;
  width: 1400px;
  height: 930px;
  background: url(/packs/static/line_faq-f9132e460579de484925.svg) center / contain no-repeat;
  pointer-events: none;
}

.hp-home-faq-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 32px;
}

.hp-home-faq-head .hp-section-head { margin-bottom: 0; }

.hp-home-faq-house { width: 197px; height: auto; }

.hp-home-faq-people { width: 93px; height: auto; }

.hp-home-faq-list {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.hp-home-faq-cta {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  text-align: center;
}

.hp-home-philosophy {
  padding: 80px 0;
  background: #fff;
}

.hp-home-philosophy-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 40px;
  gap: 40px;
}

.hp-home-philosophy-text { flex: 0 1 604px; }

.hp-home-philosophy-title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
}

.hp-home-philosophy-body { margin: 0 0 24px; font-size: 16px; }

.hp-home-ceos {
  display: flex;
  grid-gap: 32px;
  gap: 32px;
  margin-bottom: 32px;
}

.hp-home-ceo {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.hp-home-ceo img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  background: #1D293D;
}

.hp-home-ceo-role { margin: 0; font-size: 14px; }

.hp-home-ceo-name { margin: 0; font-size: 16px; }

.hp-home-philosophy-image {
  flex: 0 0 456px;
  height: 524px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-home-philosophy-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ HP v3 – RESPONSIVE FALLBACKS ============
   Design is 1440px PC; these keep narrower windows usable. */
/* <1440 the FV thread (left-anchored) and ABOUT thread (centred) drift apart: FV clipped at the meadow
   (see TOP THREADS ON TABLETS AND NARROW PCS) */
@media (max-width: 1439px) {
  .hp-home-fv { overflow-y: hidden; }
}

@media (max-width: 1199px) {
  .hp-page-hero-center > .hp-page-hero-colibri { left: auto; right: 24px; }
  .hp-home-fv-device { left: auto; right: 24px; width: 520px; }
  /* SERVICE colibri was half off a tablet screen */
  .hp-home-service-colibri { left: auto; right: 24px; }
  /* CASE STUDY: row scrolls sideways (snap) */
  .hp-home-cases-row {
    justify-content: flex-start;
    grid-gap: 24px;
    gap: 24px;
    padding: 0 24px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    scrollbar-width: none;
  }
  .hp-home-cases-row::-webkit-scrollbar { display: none; }
  .hp-home-cases-row > * { scroll-snap-align: start; }
  .hp-home-fv-text { left: 48px; }
  .hp-home-fv-line,
  .hp-home-service-line,
  .hp-home-faq-line { display: none; }
  .hp-home-about-line { bottom: auto; height: 721px; background-size: contain; }
  .hp-home-concept-deco { bottom: auto; height: 1806px; background-size: 1440px 1806px; }
  .hp-function-media { padding: 0; }
  .hp-function-house,
  .hp-function-van { display: none; }
}

/* TOP THREADS ON TABLETS AND NARROW PCS (768–1439): FV stays left-anchored, ABOUT centred. Only the ABOUT loop is drawn
   (line_about_ring.svg); .hp-home-about-link stretches from the FV tail to the loop top, .hp-home-about-tail drops
   from the loop behind the cards to the bottom edge. */
@media (min-width: 768px) and (max-width: 1439px) {
  .hp-home-about-line {
    bottom: auto;
    height: 721px;
    background-image: url(/packs/static/line_about_ring-02b4dd7153fd7ae9b212.svg);
    background-size: contain;
  }
  .hp-home-about-link,
  .hp-home-about-tail { display: block; }
  /* (871.976, 223) of the loop = 300 + 571.976 from its box left */
  .hp-home-about-tail {
    left: calc(50% - 182px);
    top: 273px;
    bottom: 0;
    width: 580px;
  }
  /* link ends on the loop top (743.476, 73.5) */
  .hp-home-about-link { right: calc(50% - 261.476px); }
}

/* 992–1439: PC FV thread returns (from the colibri's beak); tail ends at (16.8, 693), link starts 1.5px into ABOUT */
@media (min-width: 992px) and (max-width: 1439px) {
  .hp-home-fv { overflow-y: visible; }
  .hp-home-fv-line { display: block; }
  .hp-home-about-link {
    left: 254.8px;
    top: 51.5px;
    height: 72px;
  }
}

/* 768–991: own FV thread (line_fv_tab.svg) from the beak straight down to the FV edge, 24px left of centre;
   link continues down to the loop top (123.5px into ABOUT). Loop box at 50% - 542px: link + tail move 60px left. */
@media (min-width: 768px) and (max-width: 991px) {
  .hp-home-fv-line {
    display: block;
    left: calc(50% - 384px);
    top: 0;
    width: 1120px;
    height: 720px;
    background-image: url(/packs/static/line_fv_tab-ae3625b27a6f64edbe3b.svg);
    background-size: 100% 100%;
  }
  .hp-home-about-link {
    left: calc(50% - 24px);
    right: calc(50% - 201.476px);
    top: 0;
    height: 123.5px;
  }
  .hp-home-about-tail { left: calc(50% - 242px); }
}

@media (max-width: 991px) {
  .hp-home-fv-leaf { display: none; }
  .hp-page-hero-split .hp-page-hero-body,
  .hp-final-cta-inner { grid-template-columns: 1fr; }
  /* minmax(0, …): bare 1fr has a min-content floor, so 800px figures would widen the card */
  .hp-columns-layout { grid-template-columns: minmax(0, 1fr); }
  .hp-page-hero-visual,
  .hp-story-hero-visual { justify-self: center; }
  /* phone mock overflows 18%: shrink to fit 768px */
  .hp-jobtop-visual { width: 520px; }
  .hp-page-hero-deco.hp-page-hero-tree,
  .hp-page-hero-deco.hp-page-hero-colibri { display: none; }
  .hp-page-hero-visual-photo { padding: 0; }
  .hp-page-hero-visual-photo .hp-page-hero-photo { width: 100%; }
  .hp-page-hero-visual-photo .hp-page-hero-leaf-a { left: -10px; top: -14px; }
  .hp-page-hero-visual-photo .hp-page-hero-leaf-b { left: auto; right: -10px; bottom: -16px; }
  .hp-columns-grid,
  .hp-stories-grid,
  .hp-story-related-grid,
  .hp-about-members-grid,
  .hp-about-vision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-about-story-inner,
  .hp-about-values-inner,
  .hp-about-team-intro,
  .hp-detail-card,
  .hp-detail-card-flip,
  .hp-about-founder { flex-direction: column; }
  .hp-detail-card-image,
  .hp-about-team-illustration { max-width: 100%; }
  .hp-detail-card-image { flex-basis: auto; width: 100%; }
  .hp-detail-card-text,
  .hp-detail-card-flip .hp-detail-card-text { flex-basis: auto; }
  .hp-about-values-image { flex-basis: auto; width: 100%; }
  .hp-about-recruit-illustration,
  .hp-workstyle-visual { display: none; }
  .hp-workstyle { padding: 48px 0 150px; }
  .hp-workstyle-inner { justify-content: center; min-height: 0; }
  .hp-workstyle-body { width: auto; padding: 40px 0 0; }
  /* the head fills the body when the title wraps (訪問看護), 24px from the screen edge: keep the bird inside */
  .hp-workstyle-colibri { left: -40px; top: -82px; width: 96px; }
  .hp-workstyle .hp-trees-band-feature { height: 120px; }
  .hp-footer-main { flex-direction: column; }
}

/* Top keeps PC composition on tablets; stacks below 768px */
@media (max-width: 767px) {
  .hp-home-columns-grid,
  .hp-home-about-features,
  .hp-home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-home-about-top,
  .hp-home-philosophy-inner,
  .hp-home-block,
  .hp-home-block-flip { flex-direction: column; }
  .hp-home-about-diagram { max-width: 100%; }
  .hp-home-about-text { flex: none; }
  /* stacked: 501px basis would become a height; min-height: 0 keeps the aspect-ratio height */
  .hp-home-block-text { flex: none; width: 100%; }
  .hp-home-block-image { order: -1; flex-basis: auto; width: 100%; min-height: 0; aspect-ratio: 329 / 219; padding: 16px; overflow: hidden; }
  .hp-home-block-image img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
  .hp-home-philosophy-image { flex-basis: auto; width: 100%; }
  .hp-home-fv { height: auto; padding: 120px 24px 220px; }
  .hp-home-fv-stage { top: auto; bottom: 0; }
  /* fade the cloud's cut top edge */
  .hp-home-fv-cloud-l { mask-image: linear-gradient(transparent, #000 200px); }
  .hp-home-fv-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hp-home-fv-text,
  .hp-home-fv-device { position: static; }
  .hp-home-fv-text { order: 1; }
  .hp-home-fv-sub { margin-inline: auto; }
  .hp-home-fv-actions { justify-content: center; }
  .hp-home-fv-device {
    order: 2;
    width: 100%;
    max-width: 640px;
    margin: 32px auto 0;
  }
  .hp-home-fv-colibri,
  .hp-home-fv-line { display: none; }
  /* Top ABOUT stacks like sp so the sp thread fits; the desktop loop would cut the heading */
  .hp-home-about { overflow: clip; }
  /* sp thread part 1: picks up the FV tail; stretched sideways only */
  .hp-home-about-line {
    left: calc(max(16px, 50% - 180.5px) + 55px);
    right: -60px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 110px;
    background: url(/packs/static/line_about_top_sp-f15f19e662da975af1f1.svg) 0 0 / 100% 100% no-repeat;
  }
  .hp-home-about-thread { display: block; }
  .hp-home-about-text { position: relative; z-index: 1; }
  .hp-service-card-top {
    flex-direction: column;
    align-items: stretch;
  }
  .hp-service-card-image {
    flex: none;
    width: 100%;
  }
}

/* TOP ON TABLETS (768–991): PC composition tightened; 1440 stage scaled 75% from its bottom edge */
@media (min-width: 768px) and (max-width: 991px) {
  .hp-home-fv { height: 720px; }
  /* zoom, not transform: transform makes a stacking context and puts people (z 3) behind the hill (z 2) */
  .hp-home-fv-stage {
    top: auto;
    bottom: 0;
    zoom: .75;
  }
  /* lift by 110 / .75 = 147 stage px so the cloud crop sits on the FV top edge */
  .hp-home-fv-cloud-l { top: -151px; }
  /* fv_people: two crops of one sheet close the 365px gap to 120px (groups 1–2: x 0–260; 3–4: x 600–935 in ::after) */
  .hp-home-fv-people {
    left: 372px;
    width: 260px;
    background-size: 935px 179px;
    background-position: 0 0;
  }
  .hp-home-fv-people::after {
    content: "";
    position: absolute;
    top: 0;
    left: 380px;
    width: 335px;
    height: 100%;
    background: url(/packs/static/fv_people-7c760b8dad3acdc9c63d.webp) -600px 0 / 935px 179px no-repeat;
  }
  .hp-home-fv::after {
    transform: scale(.75);
    transform-origin: 50% 100%;
  }
  .hp-home-fv-text {
    left: 32px;
    top: 120px;
    width: calc(50% - 32px);
  }
  .hp-home-fv-title { font-size: 32px; }
  .hp-home-fv-sub {
    margin-bottom: 24px;
    font-size: 16px;
  }
  .hp-home-fv-actions { flex-wrap: wrap; }
  .hp-home-fv-actions .hp-btn-lg { padding-inline: 18px; }
  .hp-home-fv-actions .hp-btn-coral-outline { min-width: 0; }
  .hp-home-fv-device {
    top: 150px;
    right: 16px;
    width: calc(50% - 8px);
  }
  /* beak (70% across, 64% down) = line_fv_tab.svg start (457, 105) */
  .hp-home-fv-colibri {
    left: calc(50% - 4px);
    top: 34px;
    width: 110px;
  }
  .hp-home-about { padding-top: 120px; }
  .hp-home-about-line { left: calc(50% - 542px); }
  .hp-home-about-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-service-card-top {
    flex-direction: column;
    align-items: stretch;
  }
  .hp-service-card-image {
    flex: none;
    width: 100%;
  }
  .hp-home-philosophy-image {
    flex: 0 0 38%;
    height: 440px;
  }
  .hp-home-ceos { grid-gap: 20px; gap: 20px; }
  .hp-home-ceo-role,
  .hp-home-ceo-name { white-space: nowrap; }
  .hp-home-columns .hp-column-card-date {
    font-size: 13px;
    white-space: nowrap;
  }
}

/* pages without a phone design collapse to one column; Top / 職種トップ: see SMARTPHONE */
@media (max-width: 575px) {
  .hp-columns-grid,
  .hp-stories-grid,
  .hp-story-related-grid,
  .hp-about-members-grid,
  .hp-about-vision-grid { grid-template-columns: 1fr; }
}

/* Flapping colibri (_hp_flapping_bird): flaps 3× on .hp-in-view (pages.js). Artwork faces right.
   Body has a full back under the wing so rotation never shows the page through. */
.hp-flap-bird {
  aspect-ratio: 196 / 183;
  pointer-events: none;
}

.hp-flap-bird-flip { transform: scaleX(-1); }

.hp-flap-bird-float {
  position: relative;
  width: 100%;
  height: 100%;
}

.hp-flap-bird-wing,
.hp-flap-bird-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hp-flap-bird-wing { transform-origin: 55% 47%; }

.hp-flap-bird.hp-in-view .hp-flap-bird-float { animation: hp-flap-bird-float 3.3s ease-in-out; }

.hp-flap-bird.hp-in-view .hp-flap-bird-wing { animation: hp-flap-bird-flap 1.1s ease-in-out 3; }

/* start and end at rest: no jump */
@keyframes hp-flap-bird-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes hp-flap-bird-flap {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-flap-bird-float,
  .hp-flap-bird-wing { animation: none; }
}

/* ── Feature scenes (pages/hp_scenes/*) ──
   Play once on .hp-in-view (pages.js; skipped under reduced-motion). Drawn in END state; keyframes replay from
   the start, so no JS = still. Palette: Humming Sky. Shifts teal + dark text; per-service: 介護 teal, 看護 blue, 障害 green, 施設 yellow. */
.hp-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* default ink on the root, inherited, so a fill= attribute wins (a `.hp-scene text` rule would beat it) */
  fill: #3E4E5E;
}

.hp-scene text {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.hp-scene * {
  transform-box: fill-box;
  transform-origin: center;
}

.hp-feature-highlight-image > .hp-scene { margin: 0 auto; }

@keyframes hp-sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hp-sc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hp-sc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-grow { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }

/* click ring: no fill-mode, hidden outside its pulse */
@keyframes hp-sc-click-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@keyframes hp-sc-press { 0%, 100% { transform: none; } 40% { transform: scale(.85); } }

.hp-sc-click-ring { opacity: 0; }

/* --- one place --- */
@keyframes hp-sc-fly-tl { from { opacity: 0; transform: translate(-140px, -110px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-fly-tr { from { opacity: 0; transform: translate(140px, -110px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-fly-bl { from { opacity: 0; transform: translate(-140px, 110px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-fly-br { from { opacity: 0; transform: translate(140px, 110px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-ring { 0%, 100% { stroke: #DCE6EE; stroke-width: 1.5; } 50% { stroke: #479BDE; stroke-width: 3; } }

.hp-scene.hp-in-view .hp-sc-fleet > * { animation: hp-sc-fly-tl .7s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-fleet-tl > * { animation-name: hp-sc-fly-tl; animation-delay: .2s; }
.hp-scene.hp-in-view .hp-sc-fleet-tr > * { animation-name: hp-sc-fly-tr; animation-delay: .9s; }
.hp-scene.hp-in-view .hp-sc-fleet-bl > * { animation-name: hp-sc-fly-bl; animation-delay: 1.6s; }
.hp-scene.hp-in-view .hp-sc-fleet-br > * { animation-name: hp-sc-fly-br; animation-delay: 2.3s; }
.hp-scene.hp-in-view .hp-sc-fleet-tl > :nth-child(2) { animation-delay: .35s; }
.hp-scene.hp-in-view .hp-sc-fleet-tl > :nth-child(3) { animation-delay: .5s; }
.hp-scene.hp-in-view .hp-sc-fleet-tr > :nth-child(2) { animation-delay: 1.05s; }
.hp-scene.hp-in-view .hp-sc-fleet-tr > :nth-child(3) { animation-delay: 1.2s; }
.hp-scene.hp-in-view .hp-sc-fleet-bl > :nth-child(2) { animation-delay: 1.75s; }
.hp-scene.hp-in-view .hp-sc-fleet-bl > :nth-child(3) { animation-delay: 1.9s; }
.hp-scene.hp-in-view .hp-sc-fleet-br > :nth-child(2) { animation-delay: 2.45s; }
.hp-scene.hp-in-view .hp-sc-fleet-br > :nth-child(3) { animation-delay: 2.6s; }
.hp-scene.hp-in-view .hp-sc-window { animation: hp-sc-ring 1s ease-in-out 3.1s; }

/* --- one screen: backwards fill only, so chips render crisp after the animation --- */
@keyframes hp-sc-pill-rect { from { fill-opacity: .18; } to { fill-opacity: 1; } }
@keyframes hp-sc-pill-text { from { fill: #3E4E5E; } to { fill: #fff; } }

/* pill labels: dark on light pills, white on blue */
.hp-sc-pill text { fill: #3E4E5E; }
.hp-sc-pill-light text { fill: #fff; }
.hp-scene.hp-in-view .hp-sc-pill rect { animation: hp-sc-pill-rect .4s both; }
.hp-scene.hp-in-view .hp-sc-pill-light text { animation: hp-sc-pill-text .4s both; }
.hp-scene.hp-in-view .hp-sc-chipset > * { animation: hp-sc-grow .5s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left center; }
.hp-scene.hp-in-view .hp-sc-pill:nth-child(1) *,
.hp-scene.hp-in-view .hp-sc-chipset:nth-child(1) > * { animation-delay: .3s; }
.hp-scene.hp-in-view .hp-sc-pill:nth-child(2) *,
.hp-scene.hp-in-view .hp-sc-chipset:nth-child(2) > * { animation-delay: 1.2s; }
.hp-scene.hp-in-view .hp-sc-pill:nth-child(3) *,
.hp-scene.hp-in-view .hp-sc-chipset:nth-child(3) > * { animation-delay: 2.1s; }
.hp-scene.hp-in-view .hp-sc-pill:nth-child(4) *,
.hp-scene.hp-in-view .hp-sc-chipset:nth-child(4) > * { animation-delay: 3s; }

/* --- drag & drop: drawn at 15:00, replays from 10:30 (128px above) --- */
@keyframes hp-sc-drag {
  0% { transform: translateY(-128px); filter: none; }
  12% { transform: translateY(-128px) scale(1.06); filter: drop-shadow(0 6px 8px rgba(62, 78, 94, .25)); }
  62% { transform: translateY(0) scale(1.06); filter: drop-shadow(0 6px 8px rgba(62, 78, 94, .25)); }
  75%, 100% { transform: none; filter: none; }
}
@keyframes hp-sc-finger { 0% { opacity: 0; } 8%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }

.hp-sc-finger { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-drag { animation: hp-sc-drag 3.2s ease-in-out .4s both; }
.hp-scene.hp-in-view .hp-sc-finger { animation: hp-sc-finger 3.2s linear .4s both; }
.hp-scene.hp-in-view .hp-sc-note-from { animation: hp-sc-fade-in .4s .3s both; }
.hp-scene.hp-in-view .hp-sc-note-to { animation: hp-sc-fade-in .4s 2.5s both; }

/* --- look: 0s colour A horizontal; 1.5s layout click → vertical; 3.9s palette click → colour B;
   6.3s 月 click → month view --- */
@keyframes hp-sc-seg-thumb { from { transform: none; } to { transform: translateX(84px); } }
@keyframes hp-sc-seg-on { from { fill: #3E4E5E; } to { fill: #fff; } }
@keyframes hp-sc-seg-off { from { fill: #fff; } to { fill: #3E4E5E; } }
@keyframes hp-sc-look-ink { from { fill: #fff; } to { fill: #3E4E5E; } }

.hp-sc-seg-thumb { transform: translateX(84px); }
.hp-sc-seg-on { fill: #fff; }
.hp-sc-seg-off { fill: #3E4E5E; }
.hp-sc-look-ink { fill: #3E4E5E; }
.hp-sc-look-h,
.hp-sc-look-v { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-click-ring { animation: hp-sc-click-ring .7s ease-out; }
.hp-scene.hp-in-view .hp-sc-btn { animation: hp-sc-press .35s ease-out; }
.hp-scene.hp-in-view .hp-sc-ring-layout,
.hp-scene.hp-in-view .hp-sc-btn-layout { animation-delay: 1.5s; }
.hp-scene.hp-in-view .hp-sc-look-h { animation: hp-sc-fade-out .4s 1.8s both; }
.hp-scene.hp-in-view .hp-sc-look-v { animation: hp-sc-fade-in .4s 2s both; }
.hp-scene.hp-in-view .hp-sc-ring-palette,
.hp-scene.hp-in-view .hp-sc-btn-palette { animation-delay: 3.9s; }
.hp-scene.hp-in-view .hp-sc-look-b { animation: hp-sc-fade-in .7s 4.2s both; }
.hp-scene.hp-in-view .hp-sc-look-ink { animation: hp-sc-look-ink .7s 4.2s both; }
.hp-scene.hp-in-view .hp-sc-ring-month { animation-delay: 6.3s; }
.hp-scene.hp-in-view .hp-sc-seg-thumb { animation: hp-sc-seg-thumb .4s cubic-bezier(.2, .7, .2, 1) 6.3s both; }
.hp-scene.hp-in-view .hp-sc-seg-on { animation: hp-sc-seg-on .4s 6.3s both; }
.hp-scene.hp-in-view .hp-sc-seg-off { animation: hp-sc-seg-off .4s 6.3s both; }
.hp-scene.hp-in-view .hp-sc-look-v-out { animation: hp-sc-fade-out .4s 6.6s both; }
.hp-scene.hp-in-view .hp-sc-look-month { animation: hp-sc-rise .6s cubic-bezier(.2, .7, .2, 1) 6.9s both; }

/* --- adjusting --- */
@keyframes hp-sc-adj-chip {
  0% { transform: none; opacity: 1; }
  8% { transform: rotate(-3deg); }
  16% { transform: rotate(3deg); }
  24% { transform: rotate(-2deg); }
  32%, 40% { transform: none; opacity: 1; }
  72%, 100% { transform: translate(195px, -26px) scale(.35); opacity: 0; }
}
@keyframes hp-sc-count-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.35); } }

.hp-sc-adj-chip { opacity: 0; }
.hp-sc-count-old { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-adj-chip { animation: hp-sc-adj-chip 2.3s ease-in-out .3s both; }
.hp-scene.hp-in-view .hp-sc-new-row { animation: hp-sc-rise .5s cubic-bezier(.2, .7, .2, 1) 1.95s both; }
.hp-scene.hp-in-view .hp-sc-count-old { animation: hp-sc-fade-out .2s 1.95s both; }
.hp-scene.hp-in-view .hp-sc-count-new { animation: hp-sc-fade-in .2s 1.95s both; }
.hp-scene.hp-in-view .hp-sc-count { animation: hp-sc-count-pop .5s ease-in-out 1.95s; }

/* ── Feature-page scenes: shared pieces ──
   Entrances .hp-sc-rise-in / slide-up / drop-in / slide-in-right / fade / pop / grow-in / type(-slow) / draw (pathLength="1")
   Changes   .hp-sc-old → .hp-sc-new, .hp-sc-lit(-yellow), .hp-sc-turn-pink, .hp-sc-knob + .hp-sc-track
   Feedback  .hp-sc-tap, ripple, click-ring, twinkle, bump, flash, caret
   Travel    .hp-sc-travel: hidden at rest, moved by each scene's keyframes
   Timing    .hp-sc-dNN = delay in tenths of a second; defined last so they win. */
@keyframes hp-sc-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-type { from { clip-path: inset(-2px 100% -2px 0); } to { clip-path: inset(-2px 0 -2px 0); } }
@keyframes hp-sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hp-sc-lit { from { stroke: #DCE6EE; stroke-width: 1.5; } to { stroke: #479BDE; stroke-width: 2; } }
@keyframes hp-sc-lit-yellow { from { stroke: #DCE6EE; stroke-width: 1.5; } to { stroke: #E9C46A; stroke-width: 2; } }
@keyframes hp-sc-turn-pink { from { fill: #3E4E5E; } to { fill: #FF8A8D; } }
@keyframes hp-sc-knob { from { transform: none; } to { transform: translateX(12px); } }
@keyframes hp-sc-track { from { fill: #DCE6EE; } to { fill: #8DDF63; } }
@keyframes hp-sc-tap { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; } 45% { transform: scale(.75); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes hp-sc-twinkle { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1.1) rotate(20deg); } 100% { opacity: 0; transform: scale(.6) rotate(45deg); } }
@keyframes hp-sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hp-sc-slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hp-sc-drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

.hp-sc-tap,
.hp-sc-twinkle,
.hp-sc-old,
.hp-sc-caret,
.hp-sc-flash,
.hp-sc-travel { opacity: 0; }
.hp-sc-draw { stroke-dasharray: 1; }
.hp-sc-lit { stroke: #479BDE; stroke-width: 2; }
.hp-sc-lit.hp-sc-lit-yellow { stroke: #E9C46A; }
.hp-sc-turn-pink { fill: #FF8A8D; }
.hp-sc-knob { transform: translateX(12px); }
.hp-sc-track { fill: #8DDF63; }

.hp-scene.hp-in-view .hp-sc-rise-in { animation: hp-sc-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-slide-up { animation: hp-sc-slide-up .6s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-drop-in { animation: hp-sc-drop-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-slide-in-right { animation: hp-sc-slide-in-right .5s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-fade { animation: hp-sc-fade-in .4s both; }
.hp-scene.hp-in-view .hp-sc-pop { animation: hp-sc-pop .45s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-grow-in { animation: hp-sc-grow .5s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left center; }
.hp-scene.hp-in-view .hp-sc-type { animation: hp-sc-type .5s steps(14) both; }
.hp-scene.hp-in-view .hp-sc-type-slow { animation-duration: .9s; animation-timing-function: steps(9); }
.hp-scene.hp-in-view .hp-sc-draw { animation: hp-sc-draw .6s ease-out both; }
.hp-scene.hp-in-view .hp-sc-old { animation: hp-sc-fade-out .25s both; }
.hp-scene.hp-in-view .hp-sc-new { animation: hp-sc-fade-in .25s both; }
.hp-scene.hp-in-view .hp-sc-lit { animation: hp-sc-lit .4s both; }
.hp-scene.hp-in-view .hp-sc-lit.hp-sc-lit-yellow { animation-name: hp-sc-lit-yellow; }
.hp-scene.hp-in-view .hp-sc-turn-pink { animation: hp-sc-turn-pink .4s both; }
.hp-scene.hp-in-view .hp-sc-knob { animation: hp-sc-knob .3s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene.hp-in-view .hp-sc-track { animation: hp-sc-track .3s both; }
.hp-scene.hp-in-view .hp-sc-tap { animation: hp-sc-tap .9s ease-in-out; }
.hp-scene.hp-in-view .hp-sc-twinkle { animation: hp-sc-twinkle .9s ease-out; }
.hp-scene.hp-in-view .hp-sc-bump { animation: hp-sc-count-pop .5s ease-in-out; }
.hp-scene.hp-in-view .hp-sc-flash { animation: hp-sc-fade-out .9s ease-out; }
.hp-scene.hp-in-view .hp-sc-caret { animation: hp-sc-blink .6s steps(2, end) 5; }

/* --- .hp-sc-ripple: for buttons whose fill hides the pink tap ring; put a copy of the shape behind --- */
@keyframes hp-sc-ripple { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
.hp-sc-ripple { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-ripple { animation: hp-sc-ripple .9s ease-out both; }

.hp-scene-sal-auto.hp-in-view .hp-sc-twinkle { animation-duration: .8s; animation-iteration-count: 6; }

/* --- 給与 POINT 01: one keyframe for rise + hold + slide so the row keeps a single delay;
   lengthen the duration, not the delays --- */
@keyframes hp-sc-sal-lift {
  0% { opacity: 0; transform: translateY(174px); }
  10% { opacity: 1; transform: translateY(164px); }
  50% { opacity: 1; transform: translateY(164px); }
  85%, 100% { opacity: 1; transform: none; }
}
.hp-sc-sal-lift { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-sal-lift { animation: hp-sc-sal-lift 3.2s cubic-bezier(.4, 0, .2, 1) both; }

/* --- travelling dots / files: start in markup, end here --- */
@keyframes hp-sc-sal-dot { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translateX(38px); } 100% { opacity: 0; transform: translateX(38px); } }
.hp-scene.hp-in-view .hp-sc-sal-dot-1,
.hp-scene.hp-in-view .hp-sc-sal-dot-2 { animation: hp-sc-sal-dot .7s ease-in-out both; }

@keyframes hp-sc-joukin-dot { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translateX(52px); } 100% { opacity: 0; transform: translateX(52px); } }
.hp-scene.hp-in-view .hp-sc-joukin-dot { animation: hp-sc-joukin-dot .7s ease-in-out both; }

/* --- 勤怠 POINT 02 / 請求連携 POINT 01: three staggered copies read as a stream --- */
@keyframes hp-sc-att-flow {
  0% { opacity: 0; transform: none; }
  15% { opacity: 1; transform: none; }
  75% { opacity: 1; transform: translateX(156px); }
  100% { opacity: 0; transform: translateX(184px) scale(.7); }
}
.hp-scene.hp-in-view .hp-sc-att-flow { animation: hp-sc-att-flow 1.1s cubic-bezier(.4, 0, .6, 1) both; }

@keyframes hp-sc-att-pin { 0% { opacity: 0; transform: translateY(-40px); } 60% { opacity: 1; transform: none; } 78% { transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes hp-sc-att-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }
.hp-scene.hp-in-view .hp-sc-att-pin { animation: hp-sc-att-pin .7s ease-out both; }
.hp-scene.hp-in-view .hp-sc-att-ripple { animation: hp-sc-att-ripple .9s ease-out both; }


/* 利用者情報: tool centre rows 52 / 124 / 196 / 268; light starts at (200, 169) */
@keyframes hp-sc-int-run-1 { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 25% { transform: translate(32px, 0); } 70% { transform: translate(32px, -109px); } 90% { opacity: 1; transform: translate(60px, -109px); } 100% { opacity: 0; transform: translate(60px, -109px); } }
@keyframes hp-sc-int-run-2 { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 25% { transform: translate(32px, 0); } 70% { transform: translate(32px, -9px); } 90% { opacity: 1; transform: translate(60px, -9px); } 100% { opacity: 0; transform: translate(60px, -9px); } }
@keyframes hp-sc-int-run-3 { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 25% { transform: translate(32px, 0); } 70% { transform: translate(32px, 91px); } 90% { opacity: 1; transform: translate(60px, 91px); } 100% { opacity: 0; transform: translate(60px, 91px); } }
.hp-scene.hp-in-view .hp-sc-int-run-1 { animation: hp-sc-int-run-1 .8s linear both; }
.hp-scene.hp-in-view .hp-sc-int-run-2 { animation: hp-sc-int-run-2 .8s linear both; }
.hp-scene.hp-in-view .hp-sc-int-run-3 { animation: hp-sc-int-run-3 .8s linear both; }

/* --- 計画書とシフト: slower than the defaults --- */
.hp-scene-pl-connected.hp-in-view .hp-sc-fade { animation-duration: .7s; }
.hp-scene-pl-connected.hp-in-view .hp-sc-rise-in { animation-duration: .8s; }
.hp-scene-pl-connected.hp-in-view .hp-sc-draw { animation-duration: .9s; }
.hp-scene-pl-connected.hp-in-view .hp-sc-pop { animation-duration: .6s; }

/* selected シフト visit: blue copy over the teal event (d22, clear by d50) */
@keyframes hp-sc-pl-select {
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 1; transform: scale(1.26); }
  22%, 85% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1); }
}
.hp-sc-pl-select { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-pl-select {
  filter: drop-shadow(0 2px 5px rgba(71, 155, 222, .45));
  animation: hp-sc-pl-select 3.4s ease-in-out both;
}

/* --- 情報共有: one 8s shared timeline (keyframes, not delays, so beats end in step); all lit from 76% --- */
@keyframes hp-sc-msg-beat-1 {
  0%, 5% { opacity: .2; }
  9%, 28% { opacity: 1; }
  32%, 72% { opacity: .2; }
  76%, 100% { opacity: 1; }
}
@keyframes hp-sc-msg-beat-2 {
  0%, 28% { opacity: .2; }
  32%, 50% { opacity: 1; }
  54%, 72% { opacity: .2; }
  76%, 100% { opacity: 1; }
}
@keyframes hp-sc-msg-beat-3 {
  0%, 50% { opacity: .2; }
  54%, 100% { opacity: 1; }
}
.hp-sc-msg-beat-1,
.hp-sc-msg-beat-2,
.hp-sc-msg-beat-3 { opacity: .2; }
.hp-scene.hp-in-view .hp-sc-msg-beat-1 { animation: hp-sc-msg-beat-1 8s linear both; }
.hp-scene.hp-in-view .hp-sc-msg-beat-2 { animation: hp-sc-msg-beat-2 8s linear both; }
.hp-scene.hp-in-view .hp-sc-msg-beat-3 { animation: hp-sc-msg-beat-3 8s linear both; }

@keyframes hp-sc-spin { to { transform: rotate(360deg); } }
.hp-scene.hp-in-view .hp-sc-spin { animation: hp-sc-spin .9s linear infinite; }

/* --- origin per scene via --hp-sc-from; element drawn at its end position --- */
@keyframes hp-sc-drag-xy {
  0% { transform: var(--hp-sc-from); filter: none; }
  12% { transform: var(--hp-sc-from) scale(1.06); filter: drop-shadow(0 6px 8px rgba(62, 78, 94, .25)); }
  62% { transform: scale(1.06); filter: drop-shadow(0 6px 8px rgba(62, 78, 94, .25)); }
  75%, 100% { transform: none; filter: none; }
}
@keyframes hp-sc-fly-from { from { opacity: 0; transform: var(--hp-sc-from); } to { opacity: 1; transform: none; } }
.hp-scene.hp-in-view .hp-sc-drag-xy { animation: hp-sc-drag-xy 3.2s ease-in-out .4s both; }
.hp-scene.hp-in-view .hp-sc-fly-from { animation: hp-sc-fly-from .7s cubic-bezier(.2, .7, .2, 1) both; }
.hp-scene-nur-drag .hp-sc-drag-xy { --hp-sc-from: translate(80px, -44px); }
.hp-scene-fac-drag .hp-sc-drag-xy { --hp-sc-from: translate(0, -40px); }

.hp-scene-nur-route.hp-in-view .hp-sc-draw { animation-duration: 1.4s; }
.hp-scene-ai-route.hp-in-view .hp-sc-draw { animation-duration: 1.4s; }
.hp-scene-fac-graph.hp-in-view .hp-sc-draw { animation-duration: 1.6s; }

/* --- .hp-sc-wave: listening waveform --- */
@keyframes hp-sc-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.hp-scene.hp-in-view .hp-sc-wave > * { animation: hp-sc-wave .9s ease-in-out infinite; }
.hp-scene.hp-in-view .hp-sc-wave > :nth-child(3n + 2) { animation-delay: -.3s; }
.hp-scene.hp-in-view .hp-sc-wave > :nth-child(3n) { animation-delay: -.6s; }
.hp-scene.hp-in-view .hp-sc-wave > :nth-child(4n + 1) { animation-duration: 1.1s; }
/* settles once the record is filled */
.hp-scene-nur-secretary.hp-in-view .hp-sc-wave > * { animation-iteration-count: 6; }
/* settles once saved (d42) */
.hp-scene-fac-voice.hp-in-view .hp-sc-wave > * { animation-iteration-count: 5; }
/* same beat so all settle at d92; :nth-child(n) outranks the 4n+1 rule */
.hp-scene-fac-multi.hp-in-view .hp-sc-wave > :nth-child(n) { animation-duration: .9s; animation-iteration-count: 10; }

/* --- .hp-sc-bird: reuses the decorative bird's keyframes --- */
.hp-scene .hp-sc-bird-wing { transform-origin: 55% 47%; }
.hp-scene.hp-in-view .hp-sc-bird { animation: hp-flap-bird-float 1.5s ease-in-out 3; }
.hp-scene.hp-in-view .hp-sc-bird-wing { animation: hp-flap-bird-flap .3s linear 15; }

@keyframes hp-sc-steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
.hp-sc-steam > * { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-steam > * { animation: hp-sc-steam 2.4s ease-out infinite; }
.hp-scene.hp-in-view .hp-sc-steam > :nth-child(2) { animation-delay: .8s; }
.hp-scene.hp-in-view .hp-sc-steam > :nth-child(3) { animation-delay: 1.6s; }

/* --- パートナープラン scenes: AFTER bars rest at zero width so the still shows 0h --- */
@keyframes hp-sc-pp-shrink {
  0% { opacity: 0; transform: scaleX(1); }
  12% { opacity: 1; transform: scaleX(1); }
  55% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 1; transform: scaleX(0); }
}
.hp-scene .hp-sc-pp-shrink { transform: scaleX(0); transform-origin: left center; }
.hp-scene.hp-in-view .hp-sc-pp-shrink { animation: hp-sc-pp-shrink 1.6s cubic-bezier(.4, 0, .2, 1) both; }

/* AFTER label shares the bar's timing; 0h (.hp-sc-new) replaces it */
@keyframes hp-sc-pp-hours {
  0% { opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: 1; }
  72% { opacity: 0; }
  100% { opacity: 0; }
}
.hp-scene .hp-sc-pp-hours { opacity: 0; }
.hp-scene.hp-in-view .hp-sc-pp-hours { animation: hp-sc-pp-hours 1.6s cubic-bezier(.4, 0, .2, 1) both; }

@keyframes hp-sc-pp-dot { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translateX(22px); } 100% { opacity: 0; transform: translateX(22px); } }
.hp-scene.hp-in-view .hp-sc-pp-dot { animation: hp-sc-pp-dot .8s ease-in-out both; }

/* --- delays (last, to win over the shorthands) --- */
.hp-scene.hp-in-view .hp-sc-d01 { animation-delay: .1s; }
.hp-scene.hp-in-view .hp-sc-d02 { animation-delay: .2s; }
.hp-scene.hp-in-view .hp-sc-d03 { animation-delay: .3s; }
.hp-scene.hp-in-view .hp-sc-d04 { animation-delay: .4s; }
.hp-scene.hp-in-view .hp-sc-d05 { animation-delay: .5s; }
.hp-scene.hp-in-view .hp-sc-d06 { animation-delay: .6s; }
.hp-scene.hp-in-view .hp-sc-d07 { animation-delay: .7s; }
.hp-scene.hp-in-view .hp-sc-d08 { animation-delay: .8s; }
.hp-scene.hp-in-view .hp-sc-d09 { animation-delay: .9s; }
.hp-scene.hp-in-view .hp-sc-d10 { animation-delay: 1s; }
.hp-scene.hp-in-view .hp-sc-d11 { animation-delay: 1.1s; }
.hp-scene.hp-in-view .hp-sc-d12 { animation-delay: 1.2s; }
.hp-scene.hp-in-view .hp-sc-d13 { animation-delay: 1.3s; }
.hp-scene.hp-in-view .hp-sc-d14 { animation-delay: 1.4s; }
.hp-scene.hp-in-view .hp-sc-d15 { animation-delay: 1.5s; }
.hp-scene.hp-in-view .hp-sc-d16 { animation-delay: 1.6s; }
.hp-scene.hp-in-view .hp-sc-d17 { animation-delay: 1.7s; }
.hp-scene.hp-in-view .hp-sc-d18 { animation-delay: 1.8s; }
.hp-scene.hp-in-view .hp-sc-d19 { animation-delay: 1.9s; }
.hp-scene.hp-in-view .hp-sc-d20 { animation-delay: 2s; }
.hp-scene.hp-in-view .hp-sc-d21 { animation-delay: 2.1s; }
.hp-scene.hp-in-view .hp-sc-d22 { animation-delay: 2.2s; }
.hp-scene.hp-in-view .hp-sc-d23 { animation-delay: 2.3s; }
.hp-scene.hp-in-view .hp-sc-d24 { animation-delay: 2.4s; }
.hp-scene.hp-in-view .hp-sc-d25 { animation-delay: 2.5s; }
.hp-scene.hp-in-view .hp-sc-d26 { animation-delay: 2.6s; }
.hp-scene.hp-in-view .hp-sc-d27 { animation-delay: 2.7s; }
.hp-scene.hp-in-view .hp-sc-d28 { animation-delay: 2.8s; }
.hp-scene.hp-in-view .hp-sc-d29 { animation-delay: 2.9s; }
.hp-scene.hp-in-view .hp-sc-d30 { animation-delay: 3s; }
.hp-scene.hp-in-view .hp-sc-d31 { animation-delay: 3.1s; }
.hp-scene.hp-in-view .hp-sc-d32 { animation-delay: 3.2s; }
.hp-scene.hp-in-view .hp-sc-d33 { animation-delay: 3.3s; }
.hp-scene.hp-in-view .hp-sc-d34 { animation-delay: 3.4s; }
.hp-scene.hp-in-view .hp-sc-d35 { animation-delay: 3.5s; }
.hp-scene.hp-in-view .hp-sc-d36 { animation-delay: 3.6s; }
.hp-scene.hp-in-view .hp-sc-d37 { animation-delay: 3.7s; }
.hp-scene.hp-in-view .hp-sc-d38 { animation-delay: 3.8s; }
.hp-scene.hp-in-view .hp-sc-d39 { animation-delay: 3.9s; }
.hp-scene.hp-in-view .hp-sc-d40 { animation-delay: 4s; }
.hp-scene.hp-in-view .hp-sc-d41 { animation-delay: 4.1s; }
.hp-scene.hp-in-view .hp-sc-d42 { animation-delay: 4.2s; }
.hp-scene.hp-in-view .hp-sc-d43 { animation-delay: 4.3s; }
.hp-scene.hp-in-view .hp-sc-d44 { animation-delay: 4.4s; }
.hp-scene.hp-in-view .hp-sc-d45 { animation-delay: 4.5s; }
.hp-scene.hp-in-view .hp-sc-d46 { animation-delay: 4.6s; }
.hp-scene.hp-in-view .hp-sc-d47 { animation-delay: 4.7s; }
.hp-scene.hp-in-view .hp-sc-d48 { animation-delay: 4.8s; }
.hp-scene.hp-in-view .hp-sc-d49 { animation-delay: 4.9s; }
.hp-scene.hp-in-view .hp-sc-d50 { animation-delay: 5s; }
.hp-scene.hp-in-view .hp-sc-d51 { animation-delay: 5.1s; }
.hp-scene.hp-in-view .hp-sc-d52 { animation-delay: 5.2s; }
.hp-scene.hp-in-view .hp-sc-d53 { animation-delay: 5.3s; }
.hp-scene.hp-in-view .hp-sc-d54 { animation-delay: 5.4s; }
.hp-scene.hp-in-view .hp-sc-d55 { animation-delay: 5.5s; }
.hp-scene.hp-in-view .hp-sc-d56 { animation-delay: 5.6s; }
.hp-scene.hp-in-view .hp-sc-d57 { animation-delay: 5.7s; }
.hp-scene.hp-in-view .hp-sc-d58 { animation-delay: 5.8s; }
.hp-scene.hp-in-view .hp-sc-d59 { animation-delay: 5.9s; }
.hp-scene.hp-in-view .hp-sc-d60 { animation-delay: 6s; }
.hp-scene.hp-in-view .hp-sc-d61 { animation-delay: 6.1s; }
.hp-scene.hp-in-view .hp-sc-d62 { animation-delay: 6.2s; }
.hp-scene.hp-in-view .hp-sc-d63 { animation-delay: 6.3s; }
.hp-scene.hp-in-view .hp-sc-d64 { animation-delay: 6.4s; }
.hp-scene.hp-in-view .hp-sc-d65 { animation-delay: 6.5s; }
.hp-scene.hp-in-view .hp-sc-d66 { animation-delay: 6.6s; }
.hp-scene.hp-in-view .hp-sc-d67 { animation-delay: 6.7s; }
.hp-scene.hp-in-view .hp-sc-d68 { animation-delay: 6.8s; }
.hp-scene.hp-in-view .hp-sc-d69 { animation-delay: 6.9s; }
.hp-scene.hp-in-view .hp-sc-d70 { animation-delay: 7s; }
.hp-scene.hp-in-view .hp-sc-d71 { animation-delay: 7.1s; }
.hp-scene.hp-in-view .hp-sc-d72 { animation-delay: 7.2s; }
.hp-scene.hp-in-view .hp-sc-d73 { animation-delay: 7.3s; }
.hp-scene.hp-in-view .hp-sc-d74 { animation-delay: 7.4s; }
.hp-scene.hp-in-view .hp-sc-d75 { animation-delay: 7.5s; }
.hp-scene.hp-in-view .hp-sc-d76 { animation-delay: 7.6s; }
.hp-scene.hp-in-view .hp-sc-d77 { animation-delay: 7.7s; }
.hp-scene.hp-in-view .hp-sc-d78 { animation-delay: 7.8s; }
.hp-scene.hp-in-view .hp-sc-d79 { animation-delay: 7.9s; }
.hp-scene.hp-in-view .hp-sc-d80 { animation-delay: 8s; }
.hp-scene.hp-in-view .hp-sc-d81 { animation-delay: 8.1s; }
.hp-scene.hp-in-view .hp-sc-d82 { animation-delay: 8.2s; }
.hp-scene.hp-in-view .hp-sc-d83 { animation-delay: 8.3s; }
.hp-scene.hp-in-view .hp-sc-d84 { animation-delay: 8.4s; }
.hp-scene.hp-in-view .hp-sc-d85 { animation-delay: 8.5s; }
.hp-scene.hp-in-view .hp-sc-d86 { animation-delay: 8.6s; }
.hp-scene.hp-in-view .hp-sc-d87 { animation-delay: 8.7s; }
.hp-scene.hp-in-view .hp-sc-d88 { animation-delay: 8.8s; }
.hp-scene.hp-in-view .hp-sc-d89 { animation-delay: 8.9s; }
.hp-scene.hp-in-view .hp-sc-d90 { animation-delay: 9s; }
.hp-scene.hp-in-view .hp-sc-d91 { animation-delay: 9.1s; }
.hp-scene.hp-in-view .hp-sc-d92 { animation-delay: 9.2s; }
.hp-scene.hp-in-view .hp-sc-d93 { animation-delay: 9.3s; }
.hp-scene.hp-in-view .hp-sc-d94 { animation-delay: 9.4s; }
.hp-scene.hp-in-view .hp-sc-d95 { animation-delay: 9.5s; }
.hp-scene.hp-in-view .hp-sc-d96 { animation-delay: 9.6s; }
.hp-scene.hp-in-view .hp-sc-d97 { animation-delay: 9.7s; }
.hp-scene.hp-in-view .hp-sc-d98 { animation-delay: 9.8s; }
.hp-scene.hp-in-view .hp-sc-d99 { animation-delay: 9.9s; }
.hp-scene.hp-in-view .hp-sc-d100 { animation-delay: 10s; }

.hp-page-hero-center.hp-page-hero-has-subtitle > .hp-page-hero-tree { left: calc(50% - 520px); }

.hp-home-block-feature-icon {
  display: inline-flex;
  flex: 0 0 47px;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #EBF5FB;
}

.hp-home-block-feature .hp-home-block-feature-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Story Q&A: neutralise legacy type/spacing */
.hp-story-body .colibri-home-subsection-small-title {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.hp-story-body > .white-background:first-child .colibri-home-subsection-small-title { font-size: 20px !important; }

.hp-story-body .aligned-right-home > .colibri-subsection-centered,
.hp-story-body .aligned-right-home > .colibri-subsection-centered > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* columns: neutralise legacy 60px block spacing */
.hp-article-body .colibri-subsection-centered {
  margin-top: 0;
  margin-bottom: 0;
}

.hp-article-body .colibri-subsection-centered + .colibri-subsection-centered,
.hp-article-body .colibri-subsection-centered + .colibri-home-div { margin-top: 16px; }

/* ============ HP – PARTNER PLAN (partner_plan) ============ */
.hp-page-hero-visual-illustration { max-width: 470px; padding: 8px 0; }

.hp-partner-intro { padding: 72px 0 80px; }

.hp-partner-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 48px;
  gap: 48px;
  align-items: center;
}

.hp-partner-intro-text .hp-section-lead + .hp-section-lead { margin-top: 12px; }

.hp-partner-intro-points {
  display: flex;
  flex-direction: column;
  grid-gap: 12px;
  gap: 12px;
}

.hp-partner-intro-point {
  display: flex;
  grid-gap: 16px;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-partner-intro-point-num {
  flex: 0 0 auto;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  color: #479BDE;
}

.hp-partner-intro-point-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-partner-intro-point-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.hp-partner-requirements {
  padding: 80px 0;
  background: #fff;
}

.hp-partner-req-list {
  max-width: 1000px;
  margin: 0 auto;
  border-top: 2px solid #479BDE;
}

.hp-partner-req-head,
.hp-partner-req-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.2fr);
  grid-gap: 24px;
  gap: 24px;
  padding: 20px 8px;
  border-bottom: 1px solid #EBF5FB;
}

.hp-partner-req-head {
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #479BDE;
  background: #EBF5FB;
}

.hp-partner-req-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-partner-req-heavy {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 112, 112, .15);
  color: #FF7070;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.hp-partner-req-summary {
  font-size: 14px;
  line-height: 1.7;
  color: #393E46;
}

.hp-partner-req-colibri {
  display: flex;
  flex-direction: column;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.hp-partner-req-colibri li {
  position: relative;
  padding-left: 24px;
}

.hp-partner-req-colibri li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8DDF63 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.hp-partner-themes {
  position: relative;
  overflow: hidden;
  padding: 80px 0 200px;
}

.hp-partner-themes-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-gap: 48px;
  gap: 48px;
  align-items: start;
}

.hp-partner-themes-illustration {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 32px auto 0;
}

.hp-partner-theme-list {
  display: flex;
  flex-direction: column;
  grid-gap: 12px;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-partner-theme {
  display: flex;
  align-items: flex-start;
  grid-gap: 16px;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-partner-theme-num {
  flex: 0 0 auto;
  padding-top: 2px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #479BDE;
}

.hp-partner-theme-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-partner-theme-detail {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #393E46;
}

.hp-partner-compare {
  padding: 80px 0;
  background: #fff;
}

.hp-partner-compare-scroll { overflow-x: auto; }

.hp-partner-compare-table {
  min-width: 640px;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #EBF5FB;
}

.hp-partner-compare-table thead th:first-child { width: 20%; }

.hp-partner-compare-table tbody td { line-height: 1.7; }

.hp-partner-compare-table tbody td.td-after { font-weight: 700; }

.hp-partner-voices { padding: 80px 0; }

.hp-partner-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.hp-partner-voice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 10px;
  gap: 10px;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-partner-voice-before,
.hp-partner-voice-after {
  margin: 0;
  line-height: 1.6;
}

.hp-partner-voice-before::before,
.hp-partner-voice-after::before {
  display: block;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
}

.hp-partner-voice-before {
  font-size: 14px;
  color: #6C757D;
}

.hp-partner-voice-before::before {
  content: 'BEFORE';
  color: #6C757D;
}

.hp-partner-voice-after {
  font-size: 18px;
  font-weight: 700;
  color: #479BDE;
}

.hp-partner-voice-after::before {
  content: 'AFTER';
  color: #FF7070;
}

/* POINT 03: viewpoint pills under the text */
.hp-partner-report-tags {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 8px 12px;
  gap: 8px 12px;
  margin-top: 16px;
}

.hp-partner-report-tags .hp-tag { font-weight: 700; }

@media (max-width: 767px) {
  .hp-partner-report-tags .hp-tag { font-size: 14px; }
}

.hp-partner-price {
  padding: 80px 0;
  background: #fff;
}

.hp-partner-price .hp-section-lead { max-width: 800px; }

.hp-partner-faq { padding: 80px 0; }

.hp-partner-cta { padding: 0 0 80px; }

.hp-partner-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-gap: 40px;
  gap: 40px;
  align-items: center;
  padding: 48px 56px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-partner-cta-bird {
  position: absolute;
  left: -30px;
  top: -70px;
  width: 110px;
  height: auto;
}

.hp-partner-cta-heading {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #479BDE;
}

.hp-partner-cta-body {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
}

.hp-partner-cta-actions {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 16px;
  gap: 16px;
}

.hp-partner-cta-illustration {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.hp-partner-related { margin-top: 48px; }

.hp-partner-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

@media (max-width: 991px) {
  .hp-partner-intro-inner,
  .hp-partner-themes-inner,
  .hp-partner-cta-card { grid-template-columns: minmax(0, 1fr); }
  .hp-partner-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-partner-req-head { display: none; }
  .hp-partner-req-row {
    grid-template-columns: 1fr;
    grid-gap: 12px;
    gap: 12px;
    padding: 20px 0;
  }
  .hp-partner-req-colibri {
    padding: 12px 16px;
    border-radius: 12px;
    background: #EBF5FB;
  }
  .hp-partner-cta-card { padding: 32px 24px; }
  .hp-partner-cta-bird { display: none; }
}

@media (max-width: 575px) {
  .hp-partner-intro,
  .hp-partner-requirements,
  .hp-partner-compare,
  .hp-partner-voices,
  .hp-partner-price,
  .hp-partner-faq { padding-top: 56px; padding-bottom: 56px; }
  .hp-partner-themes { padding-top: 56px; }
  .hp-partner-voice-grid,
  .hp-partner-related-grid { grid-template-columns: 1fr; }
  .hp-partner-cta-heading { font-size: 22px; }
  .hp-partner-cta-actions .hp-btn { width: 100%; white-space: normal; }
}

/* ============ HP v3 – HEADER ON PHONES & TABLETS (<992px: nav no longer fits) ============ */
/* 992–1199: desktop header tightened so it doesn't wrap 「職種別機／能」 */
@media (min-width: 992px) and (max-width: 1199px) {
  #colibri-pages-nav #colibri-nav-container {
    grid-gap: 16px;
    gap: 16px;
    margin-left: 32px;
  }

  #colibri-pages-nav .colibri-nav-li { white-space: nowrap; }

  #colibri-pages-nav .colibri-nav-li,
  #colibri-pages-nav .colibri-nav-li a,
  .hp-nav-login { font-size: 15px; }

  #colibri-nav-right-list .hp-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* responsive_tablet_*.css set `#colibri-pages-nav { height: auto !important }` (login page), opening a gap
   above the mega menu at 79px: keep the fixed height on HP layouts */
body:has(.hp-mega-panel) #colibri-pages-nav { height: 79px !important; }

@media (max-width: 991px) {
  #colibri-pages-nav {
    height: 70px;
    padding: 0 16px;
  }

  body:has(.hp-mega-panel) #colibri-pages-nav { height: 70px !important; }

  #colibri-pages-nav #colibri-nav-container,
  #colibri-pages-nav #colibri-nav-right-list,
  .hp-mega-panel { display: none; }

  #colibri-pages-nav #colibri-mobile-nav {
    display: block;
    margin: 0;
  }

  #colibri-pages-nav #hamburger-nav-mobile {
    padding: 8px 0;
    cursor: pointer;
  }

  #colibri-pages-nav #hamburger-nav-mobile img {
    display: block;
    width: 28px;
    height: auto;
  }

  /* Bootstrap Icons x-lg, 44px tap target */
  #colibri-pages-nav #close-nav-mobile {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #FF7070;
    cursor: pointer;
  }

  #colibri-pages-nav #close-nav-mobile .bi { display: block; }

  /* reset the legacy landscape side drawer (responsive_smartphone_landscape.css) */
  #colibri-mobile-menu {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: auto;
    height: auto;
    overflow-y: auto;
    padding: 0 16px 48px;
    border-top: 1px solid #E9E9E9;
    border-left: 0;
    background: #fff;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    letter-spacing: .04em;
    color: #2C3E50;
  }

  /* ── menu pages: メニュー → 職種別機能 → service type ── */
  .hp-mm-panel { padding-top: 24px; }

  .hp-mm-panel:has(.hp-mm-back) { padding-top: 0; }

  .hp-mm-list {
    display: flex;
    flex-direction: column;
  }

  .hp-mm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0;
    border: 0;
    border-bottom: 3px solid #FAF9FC;
    background: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #2C3E50;
    text-align: left;
    text-decoration: none;
  }

  .hp-mm-item:hover,
  .hp-mm-item:focus-visible { color: #2C3E50; text-decoration: none; }

  .hp-mm-item-strong { font-weight: 700; }

  .hp-mm-drill-icon {
    font-size: 24px;
    line-height: 1;
  }

  .hp-mm-back {
    display: flex;
    align-items: center;
    grid-gap: 4px;
    gap: 4px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #E2E8F0;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #2C3E50;
  }

  .hp-mm-back .bi {
    font-size: 18px;
    -webkit-text-stroke: 1px;
  }

  .hp-mm-title {
    padding: 16px 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  .hp-mm-overview {
    display: flex;
    flex-direction: column;
    grid-gap: 4px;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #C4DAEA;
    border-radius: 10px;
    background: #EBF5FB;
    text-decoration: none;
  }

  .hp-mm-overview:hover { background: #DCEEFA; text-decoration: none; }

  .hp-mm-back + .hp-mm-overview { margin-top: 16px; }

  .hp-mm-overview-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #2C3E50;
  }

  .hp-mm-overview-catch {
    font-size: 12px;
    line-height: 1.5;
    color: #4A5663;
  }

  .hp-mm-overview-more {
    display: inline-flex;
    align-items: center;
    grid-gap: 8px;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #2A78B8;
  }

  .hp-mm-overview-more .hp-mega-overview-arrow {
    width: 24px;
    height: 24px;
  }

  .hp-mm-overview-more .hp-mega-overview-arrow::after {
    width: 15px;
    height: 15px;
  }

  .hp-mm-group { border-bottom: 3px solid #FAF9FC; }

  .hp-mm-overview + .hp-mm-group { margin-top: 8px; }

  .hp-mm-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    font-size: 18px;
    line-height: 20px;
    list-style: none;
    cursor: pointer;
  }

  .hp-mm-group-title::-webkit-details-marker { display: none; }

  .hp-mm-group-title .bi {
    font-size: 16px;
    transition: transform .2s;
  }

  .hp-mm-group[open] .hp-mm-group-title { font-weight: 700; }

  .hp-mm-group[open] .hp-mm-group-title .bi { transform: rotate(90deg); }

  .hp-mm-group-links {
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
  }

  .hp-mm-group-links a {
    padding: 10px 0;
    border-bottom: 1px solid #E2E8F0;
    font-size: 16px;
    line-height: 20px;
    color: #2C3E50;
    text-decoration: none;
  }

  .hp-mobile-menu-actions {
    display: flex;
    flex-direction: column;
    grid-gap: 12px;
    gap: 12px;
    margin-top: 24px;
  }

  .hp-mobile-menu-actions .hp-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* ============ HP v3 – SMARTPHONE (Figma "TOP_sp" / "職種トップ" sp, 393px) ============
   Type: eyebrow 18 / h1 28 / h2 24 / card titles 18 / body 14 / tags 12. Adds to the tablet fallbacks above. */
@media (max-width: 767px) {
  .hp-container,
  .hp-container-narrow,
  .hp-page-hero-inner { padding: 0 16px; }

  /* ── type scale ── */
  .hp-features-eyebrow,
  .hp-page-hero-label,
  .hp-page-hero-split .hp-page-hero-label,
  .hp-story-hero-labels { font-size: 18px; }

  .hp-features-heading,
  .hp-workstyle-title,
  .hp-feature-highlight-title,
  .hp-home-philosophy-title,
  .hp-final-cta-heading,
  .hp-article-title,
  .hp-story-hero-name { font-size: 24px; }

  .hp-page-hero-title { font-size: 28px; }

  .hp-section-head { margin-bottom: 24px; }

  .hp-section-lead {
    margin-top: 16px;
    font-size: 14px;
  }

  .hp-features-title,
  .hp-home-block-title,
  .hp-home-feature-name,
  .hp-column-card-title,
  .hp-final-cta-card-title,
  .hp-detail-card-num,
  .hp-detail-card-title { font-size: 18px; }

  .hp-detail-card-title { letter-spacing: .05em; }

  .hp-detail-card-body,
  .hp-detail-card-link,
  .hp-home-block-body,
  .hp-home-feature-desc,
  .hp-home-philosophy-body,
  .hp-final-cta-body,
  .hp-final-cta-card-body,
  .hp-qa-question,
  .hp-qa-answer,
  .hp-features-note,
  .hp-column-card-excerpt { font-size: 14px; }

  .hp-tag,
  .hp-column-card-date { font-size: 12px; }

  /* ── buttons (Btn2_sp / Btn3) ── */
  .hp-btn { font-size: 16px; }

  .hp-btn-lg { padding: 16px 24px; }

  .hp-page-hero-actions .hp-btn,
  .hp-home-fv-actions .hp-btn,
  .hp-service-cross-nav-chips .hp-btn,
  .hp-home-block-text .hp-btn,
  .hp-service-card .hp-btn,
  .hp-home-faq-cta .hp-btn,
  .hp-home-columns-cta .hp-btn,
  .hp-home-philosophy-text .hp-btn,
  .hp-final-cta-card .hp-btn {
    width: 100%;
    min-width: 0;
  }

  .hp-page-hero-actions,
  .hp-home-fv-actions,
  .hp-service-cross-nav-chips {
    flex-direction: column;
    grid-gap: 12px;
    gap: 12px;
  }

  /* ── page hero (職種トップ MV) ── */
  .hp-page-hero {
    padding: 80px 0 100px;
    background-size: 100% 1053px;
  }

  .hp-page-hero::after {
    width: 112vw;
    height: 75px;
    bottom: -38px;
  }

  .hp-page-hero-split { padding-bottom: 80px; }

  .hp-page-hero-split .hp-breadcrumb-nav { display: none; }

  .hp-page-hero-split .hp-page-hero-body {
    display: flex;
    flex-direction: column;
    grid-gap: 24px;
    gap: 24px;
    min-height: 0;
    text-align: center;
  }

  .hp-page-hero-split .hp-page-hero-text { width: 100%; }

  .hp-page-hero-split .hp-page-hero-subtitle {
    max-width: none;
    margin-top: 8px;
    font-size: 14px;
    text-align: left;
  }

  .hp-page-hero-actions { margin-top: 32px; }

  .hp-page-hero-visual {
    max-width: none;
    justify-self: stretch;
  }

  /* Figma "Group 6839": 361 × 267 box */
  .hp-jobtop-visual {
    width: 100%;
    aspect-ratio: 361 / 267;
  }

  .hp-jobtop-visual-photo {
    left: 0;
    top: 23.2%;
    width: 69.6%;
    height: 65.7%;
    border-width: 2px;
  }

  /* phone PNG includes its shadow (opaque 326 of 860px); child selector beats `.hp-page-hero-visual > img` */
  .hp-jobtop-visual > .hp-jobtop-visual-phone {
    left: 28%;
    top: -32px;
    width: 110%;
  }

  .hp-jobtop-visual .hp-page-hero-leaf-a {
    left: -2px;
    top: 18%;
    width: 32px;
  }

  .hp-page-hero-visual-photo { padding: 0; }

  .hp-page-hero-bottom { margin-top: 56px; }

  .hp-service-cross-nav-inner {
    width: 280px;
    max-width: 100%;
    padding: 16px 32px;
  }

  .hp-service-cross-nav-chips {
    width: 100%;
    grid-gap: 16px;
    gap: 16px;
  }

  /* ── 職種トップ: WORK STYLE ── */
  .hp-workstyle { padding: 60px 0 110px; }

  /* phrase breaks (needs lang="ja" on the h2) */
  .hp-workstyle-title { word-break: auto-phrase; }

  .hp-workstyle-inner { display: block; }

  .hp-workstyle-body { grid-gap: 24px; gap: 24px; }

  .hp-workstyle-colibri { display: none; }

  .hp-workstyle-item { min-width: 0; }

  .hp-workstyle .hp-trees-band-feature { height: 70px; }

  .hp-workstyle-list {
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 12px;
    gap: 12px;
    /* full width, not shrunk to the longest label: wider iOS glyphs reached the pill's round end */
    width: 100%;
    max-width: 361px;
    margin: 0 auto;
  }

  .hp-workstyle-item { padding: 8px 24px 8px 12px; }

  .hp-workstyle-item-icon {
    flex-basis: 40px;
    height: 40px;
    font-size: 18px;
  }

  .hp-workstyle-item-text { font-size: 16px; }

  .hp-workstyle-inner::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 361px;
    aspect-ratio: 361 / 277;
    margin: 24px auto 0;
    background: url(/packs/static/workstyle_illustration_sp-0b4986a656d8fc12419d.png) center / contain no-repeat;
  }

  .hp-trees-band {
    height: 89px;
    background-size: auto 89px;
  }

  .hp-trees-band-feature {
    height: 70px;
    background-size: auto 70px;
  }

  /* ── 職種トップ: POINT ── */
  .hp-detail-section { padding: 60px 0 170px; }

  .hp-detail-section .hp-section-head { margin-bottom: 24px; }

  .hp-detail-card {
    grid-gap: 24px;
    gap: 24px;
    min-height: 0;
    padding: 24px;
  }

  .hp-detail-card-image { max-width: 100%; }

  .hp-detail-card-link { margin-top: 12px; }

  .hp-detail-section .hp-clouds,
  .hp-videos-tour .hp-clouds {
    height: 224px;
    background-size: 720px 224px;
  }

  .hp-detail-leaf { display: none; }

  /* ── 職種トップ: FUNCTION ── */
  .hp-function-section { padding-bottom: 0; }

  .hp-function-media { padding: 0 0 12px; }

  .hp-video-placeholder { margin: 0 10px; }

  .hp-function-house,
  .hp-function-van { display: block; }

  .hp-function-house {
    left: -2px;
    bottom: 0;
    width: 78px;
  }

  .hp-function-van {
    left: auto;
    right: 0;
    bottom: 2px;
    width: 64px;
  }

  /* ── 利用できる機能一覧 ── */
  .hp-features-section { padding: 40px 0 60px; }

  .hp-features-title { margin-bottom: 24px; }

  .hp-feature-box-grid { grid-template-columns: minmax(0, 1fr); }

  /* ── final CTA ── */
  .hp-final-cta-section { padding: 60px 0 100px; }

  .hp-final-cta-inner {
    grid-gap: 24px;
    gap: 24px;
    padding: 0 16px;
  }

  .hp-final-cta-text {
    grid-gap: 12px;
    gap: 12px;
    padding: 96px 16px 24px;
  }

  .hp-final-cta-bird {
    left: 8px;
    top: 8px;
    width: 96px;
  }

  .hp-final-cta-illustration {
    width: 100%;
    margin-top: 8px;
  }

  .hp-final-cta-cards { grid-gap: 16px; gap: 16px; }

  .hp-final-cta-card { padding: 16px; }

  /* ── footer ── */
  .hp-footer { padding: 60px 16px 0; }

  .hp-footer-main {
    align-items: center;
    grid-gap: 40px;
    gap: 40px;
    padding-bottom: 40px;
  }

  .hp-footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px 16px;
    gap: 24px 16px;
    width: 100%;
  }

  .hp-footer-col:last-child { grid-column: 1 / -1; }

  .hp-footer-bottom { padding: 16px 0 24px; }

  .hp-footer-copyright { font-size: 12px; }

  /* ── Top: FV ── */
  /* fv_bg_sp.webp: 393 × 836 sp artwork at 2x (colibri painted out, drawn separately) */
  .hp-home-fv {
    height: auto;
    min-height: 837px;
    padding: 111px 16px 150px;
    overflow: visible;
    background: url(/packs/static/fv_bg_sp-ca7a918a86b3abe1f10a.webp) center bottom / cover no-repeat, #BFE3F7;
  }

  .hp-home-fv-scene { display: none; }

  .hp-home-fv-inner {
    display: flex;
    flex-direction: column;
    max-width: 361px;
    height: auto;
  }

  /* Figma "line" 296 × 761; stretched to the FV bottom so ABOUT's thread picks up its tail */
  .hp-home-fv-line {
    display: block;
    left: 74px;
    top: -36px;
    bottom: -150px;
    width: 297px;
    height: auto;
    background-image: url(/packs/static/line_fv_sp-22878ad6eddbcbc3ffcb.svg);
    background-size: 100% 100%;
  }

  /* Figma "colibri" 80 × 75; artwork margins (bird 18–97% wide, 7% down) → 100px box */
  .hp-home-fv-colibri {
    display: block;
    left: -4px;
    top: -58px;
    width: 90px;
  }

  /* sp leaf sheet 381 × 198, 18px past the meadow */
  .hp-home-fv::after {
    left: calc(50% - 188.5px);
    bottom: -18px;
    width: 381px;
    height: 198px;
    background-image: url(/packs/static/leaves_fv_sp-901f46849019fce52400.png);
  }

  .hp-home-fv-text {
    position: static;
    order: 1;
    text-align: center;
  }

  .hp-home-fv-label,
  .hp-home-fv-actions .hp-text-link { display: none; }

  .hp-home-fv-title {
    margin-bottom: 8px;
    font-size: 28px;
    letter-spacing: .08em;
  }

  .hp-home-fv-sub {
    max-width: none;
    margin-bottom: 24px;
    font-size: 16px;
    letter-spacing: .06em;
    word-break: auto-phrase;
  }

  .hp-home-fv-actions .hp-btn-coral-outline { min-width: 0; }

  /* clear the desktop top / right offsets */
  .hp-home-fv-device {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 1;
    order: 2;
    width: calc(100% + 32px);
    max-width: none;
    margin: 16px -16px 0;
  }

  /* ── Top: ABOUT ── */
  .hp-home-about { padding: 60px 0; }

  /* Figma "Group 6813": 315 × 50 */
  .hp-home-about::after {
    left: calc(50% - 165.5px);
    bottom: 0;
    width: 315px;
    height: 50px;
    background-image: url(/packs/static/leaves_about_sp-a1edb519c432a5fba9f2.png);
  }

  .hp-home-about-top {
    align-items: stretch;
    grid-gap: 40px;
    gap: 40px;
    margin-bottom: 40px;
  }

  .hp-home-about-text .hp-section-lead { font-size: 16px; }

  .hp-home-about-diagram {
    width: 100%;
    max-width: 344px;
    margin: 0 auto;
  }

  .hp-home-about-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 12px 11px;
    gap: 12px 11px;
  }

  .hp-home-feature-card {
    flex-direction: column;
    grid-gap: 8px;
    gap: 8px;
    padding: 16px 8px;
    text-align: center;
  }

  /* ── Top: CASE STUDY ── */
  .hp-home-cases { padding: 60px 0; }

  .hp-home-cases .hp-section-head { margin-bottom: 24px; }

  .hp-home-cases-row {
    justify-content: flex-start;
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 25px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 25px;
    scrollbar-width: none;
  }

  .hp-home-cases-row::-webkit-scrollbar { display: none; }

  .hp-home-cases-row > * {
    flex: 0 0 300px;
    scroll-snap-align: center;
  }

  .hp-home-cases-row .hp-story-card-label,
  .hp-home-cases-row .hp-story-card-name { font-size: 14px; }

  .hp-home-cases-cta .hp-btn { min-width: 166px; }

  /* ── Top: CONCEPT ── */
  .hp-home-concept > .hp-container { padding-block: 60px 80px; }

  .hp-home-concept-scenery {
    background-size: auto min(240px, 30vh), auto min(120px, 14vh), auto min(120px, 14vh);
  }

  /* Figma "Vector 20" 402 × 2513 from (-10, 38), stretched; leaves share the box (frame coords minus (-10, 38)) */
  .hp-home-concept-deco {
    left: 0;
    right: 0;
    top: 38px;
    bottom: 0;
    width: auto;
    height: auto;
    background:
      url(/packs/static/leaves_concept_top_sp-2f2604e1248834289749.png) 3px 68px / 384px 182px no-repeat,
      url(/packs/static/leaves_concept_mid_sp-152e60bcfa1494e6cbb1.png) 0 836px / 393px 1154px no-repeat,
      url(/packs/static/line_why_sp-3eb196412e768656e148.svg) 0 0 / 100% 100% no-repeat;
  }

  /* Figma "colibri" 77 × 57 → 97px box (see FV colibri) */
  .hp-home-concept-colibri {
    left: calc(50% - 175.5px);
    top: 28px;
    width: 97px;
  }

  .hp-home-block {
    grid-gap: 16px;
    gap: 16px;
    padding: 16px;
  }

  .hp-home-block-body { font-size: 14px; }

  .hp-home-block-text { grid-gap: 16px; gap: 16px; }

  .hp-home-block-features {
    align-items: center;
    grid-gap: 8px 16px;
    gap: 8px 16px;
  }

  .hp-home-block-feature { font-size: 12px; }

  .hp-home-block-feature img,
  .hp-home-block-feature-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .hp-home-block-feature .hp-home-block-feature-icon img {
    width: 22px;
    height: 22px;
  }

  .hp-home-block-image { padding: 8px 16px; }

  /* ── Top: SERVICE ── */
  .hp-home-service { padding: 60px 0; }

  .hp-home-service .hp-features-heading br { display: none; }

  .hp-home-service::after { display: none; }

  /* line_service_sp.svg: crosses the seam vertically at 80% width (vertical tangent survives stretch), so it joins CONCEPT flush */
  .hp-home-service-line {
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background: url(/packs/static/line_service_sp-b9ba099015e6b90bb8e2.svg) 0 0 / 100% 100% no-repeat;
  }

  /* Figma "colibri" 87 × 64, facing left → 109px box */
  .hp-home-service-colibri {
    left: auto;
    right: 10px;
    top: 8px;
    width: 109px;
  }

  .hp-home-service .hp-video-placeholder { margin: 24px 0 0; }

  .hp-home-service-grid {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    gap: 20px;
  }

  .hp-service-card {
    padding: 24px;
    border-width: 2px;
    border-radius: 16px;
  }

  .hp-service-card-top {
    flex-direction: column;
    align-items: stretch;
    grid-gap: 13px;
    gap: 13px;
  }

  .hp-service-card-image {
    flex: none;
    width: 100%;
    border-radius: 14px;
  }

  .hp-service-card .hp-btn { align-self: stretch; }

  /* cloud strip at 1/3 size */
  .hp-home-service .hp-clouds,
  .hp-home-faq .hp-clouds {
    height: 103px;
    background-size: 548px auto;
    background-position: -73px 0;
  }

  /* ── Top: COLUMN ── */
  .hp-home-columns { padding: 60px 0; }

  .hp-home-columns-header {
    flex-direction: column;
    align-items: stretch;
    grid-gap: 0;
    gap: 0;
    margin-bottom: 24px;
  }

  .hp-home-columns-header .hp-section-lead { margin-top: 8px; }

  .hp-home-columns-grid {
    display: flex;
    grid-gap: 16px;
    gap: 16px;
    margin: 0 -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }

  .hp-home-columns-grid::-webkit-scrollbar { display: none; }

  .hp-home-columns-grid > * {
    flex: 0 0 283px;
    scroll-snap-align: start;
  }

  .hp-home-columns-cta { margin-top: 24px; }

  /* ── Top: FAQ ── */
  /* isolate: bottom thread at z -1 runs behind the cloud */
  .hp-home-faq {
    padding: 60px 0 140px;
    isolation: isolate;
  }

  /* Figma "Vector 22" (top) / "Vector 23" (bottom) */
  .hp-home-faq-line {
    display: block;
    left: calc(50% - 196.5px);
    top: -38px;
    width: 512px;
    height: 232px;
    background: url(/packs/static/line_faq_top_sp-4b608e27a5c27505f94b.svg) 0 0 / 100% 100% no-repeat;
  }

  .hp-home-faq::after {
    content: '';
    position: absolute;
    left: calc(50% - 290.5px);
    bottom: 38px;
    width: 843px;
    height: 194px;
    z-index: -1;
    background: url(/packs/static/line_faq_bottom_sp-4bc2af1e910ebada0f15.svg) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
  }

  /* SERVICE's cloud band, mirrored */
  .hp-home-faq .hp-clouds { transform: scaleX(-1); }

  .hp-home-faq-head {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 24px;
  }

  .hp-home-faq-house {
    order: 0;
    width: 110px;
  }

  .hp-home-faq-people {
    order: 1;
    width: 60px;
  }

  .hp-home-faq-head .hp-section-head {
    order: 2;
    width: 100%;
  }

  .hp-home-faq-list { padding: 0 9px; }

  .hp-home-faq-cta { margin-top: 24px; }

  /* ── Top: PHILOSOPHY ── */
  .hp-home-philosophy {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
  }

  .hp-home-philosophy::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 196.5px);
    width: 393px;
    pointer-events: none;
    background:
      url(/packs/static/philosophy_leaf_a_sp-36fe9f2b12646aace687.png) 243.5px 25px / 46.5px 62px no-repeat,
      url(/packs/static/philosophy_leaf_b_sp-7a148b10146a4c2852c3.png) 300px 24.5px / 31px 40.5px no-repeat,
      url(/packs/static/philosophy_leaf_c_sp-3160aa20f6f097eca7c7.png) 328.5px 311px / 51px 58px no-repeat,
      url(/packs/static/philosophy_leaf_d_sp-91023a26defca6f1be1e.png) 338.5px 384px / 30.5px 30.5px no-repeat,
      url(/packs/static/philosophy_tree_sp-eb88674da007e33eee5f.png) 186px calc(100% - 13px) / 207px 223px no-repeat;
  }

  .hp-home-philosophy > .hp-container {
    position: relative;
    z-index: 1;
  }

  .hp-home-philosophy-inner { grid-gap: 10px; gap: 10px; }

  .hp-home-philosophy-image {
    order: -1;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 361 / 240;
  }

  .hp-home-philosophy-text {
    flex: none;
    padding: 10px;
  }

  .hp-home-ceos {
    flex-direction: column;
    grid-gap: 8px;
    gap: 8px;
  }

  .hp-home-ceo-role { font-size: 12px; }

  .hp-home-ceo-name { font-size: 14px; }
}

/* ============ HP v3 – JAPANESE LINE BREAKS ============
   pages.js inserts <wbr> at BudouX phrase boundaries (targets: COLIBRI_PHRASE_WRAP_* there, marked data-hp-phrase-wrapped);
   keep-all breaks only there. Not Chrome's auto-phrase: worse splits, no Safari. overflow-wrap: anywhere for long phrases. */
[data-hp-phrase-wrapped] {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* not `balance`: moved designed breaks after 「、」. Longhand so nowrap elements stay one line */
.hp-main :is(h1, h2, h3, h4, p, li, dd, blockquote, figcaption) { text-wrap-style: pretty; }

/* Safari's pretty evens out every line of a long paragraph: on a phone they stopped at 70–80% of the width */
@media (max-width: 767px) {
  .hp-main :is(p, dd):not([data-hp-phrase-wrapped]) { text-wrap-style: auto; }
}

/* ============ HP v3 – SMARTPHONE, ALL PAGES ============
   Shared components on the other pages, down to 344px (iPhone SE/mini, narrow Android). */

.hp-joinus-heading-en {
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  /* ── Top FV: undo the ≤1199px `right: 24px` ── */
  .hp-home-fv-device { right: auto; }

  /* ── comparison tables: one card per row ── */
  .hp-route-compare-scroll,
  .hp-partner-compare-scroll { overflow: visible; }

  .hp-compare-table.hp-route-compare-table,
  .hp-compare-table.hp-partner-compare-table {
    display: block;
    min-width: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .hp-route-compare-table thead,
  .hp-partner-compare-table thead { display: none; }

  .hp-route-compare-table tbody,
  .hp-partner-compare-table tbody {
    display: flex;
    flex-direction: column;
    grid-gap: 12px;
    gap: 12px;
  }

  .hp-route-compare-table tbody tr,
  .hp-partner-compare-table tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid #EBF5FB;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  }

  .hp-route-compare-table tbody td,
  .hp-partner-compare-table tbody td {
    display: block;
    padding: 10px 16px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.7;
  }

  .hp-route-compare-table tbody tr td:first-child,
  .hp-partner-compare-table tbody tr td:first-child {
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid #EBF5FB;
    background: #F8F9FA;
    font-size: 15px;
    font-weight: 700;
  }

  .hp-route-compare-table tbody tr td.td-before,
  .hp-route-compare-table tbody tr td.td-after,
  .hp-partner-compare-table tbody tr td.td-before,
  .hp-partner-compare-table tbody tr td.td-after {
    border: none;
    border-radius: 0;
  }

  .hp-route-compare-table tbody td.td-before,
  .hp-partner-compare-table tbody td.td-before { background: #F8FAFC; }

  .hp-route-compare-table tbody td.td-after,
  .hp-partner-compare-table tbody td.td-after { background: #fff; }

  .hp-route-compare-table tbody td.td-before::before,
  .hp-route-compare-table tbody td.td-after::before,
  .hp-partner-compare-table tbody td.td-before::before,
  .hp-partner-compare-table tbody td.td-after::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
  }

  .hp-route-compare-table tbody td.td-before::before,
  .hp-partner-compare-table tbody td.td-before::before { color: #6C757D; }

  .hp-route-compare-table tbody td.td-after::before,
  .hp-partner-compare-table tbody td.td-after::before { color: #479BDE; }

  .hp-route-compare-cell { grid-gap: 8px; gap: 8px; }

  /* ── illustrations ≤ ~half a phone screen ── */
  .hp-page-hero-visual-illustration {
    max-width: 300px;
    margin: 0 auto;
  }

  .hp-partner-themes-illustration { max-width: 240px; }

  /* ── 採用情報 ── */
  .hp-joinus-heading-en { font-size: min(56px, 13vw); }

  /* PC one-phrase-per-line copy leaves fragments at phone width: run on as one paragraph */
  .hp-joinus-message-body p br,
  .hp-joinus-work-body p br,
  .hp-joinus-works-intro br,
  .hp-joinus-recruit-intro br { display: none; }

  /* ── page hero: shrink the eyebrow so long ones stay one line ── */
  .hp-page-hero-label,
  .hp-page-hero-split .hp-page-hero-label { font-size: clamp(14px, 4.4vw, 18px); }

  .hp-page-hero-split .hp-page-hero-subtitle { text-align: center; }

  /* ── feature pages: intro flush left ── */
  .hp-feature-highlight-body {
    font-size: 15px;
    text-align: left;
  }

  /* colibri was half off-screen: perch above the mock */
  .hp-feature-highlight-image { margin-top: 56px; }

  /* 会社方針 TEAM: same */
  .hp-about-team-intro-text { padding-top: 56px; }
  .hp-about-team-colibri { left: 0; top: 0; width: 56px; }

  .hp-feature-highlight-image > .hp-feature-highlight-bird {
    left: 0;
    top: -52px;
    width: 64px;
  }

  /* ── 会社方針: company table ── */
  .hp-about-table-row { grid-gap: 0; gap: 0; }

  .hp-about-table-label {
    flex: 0 0 108px;
    padding: 14px 8px 14px 14px;
    font-size: 13px;
  }

  .hp-about-table-value {
    padding: 14px 16px 14px 0;
    font-size: 14px;
  }

  /* STORY photos: fixed desktop columns overflowed */
  .hp-about-story-images {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .hp-about-story-images > div { aspect-ratio: 231 / 173; }

  .hp-about-story-images .hp-about-story-img-main { aspect-ratio: 471 / 353; }

  /* ── コラム一覧 (Figma sp) ── */
  /* MV: eyebrow + title only (breadcrumb JSON-LD still emitted); curve tops out at 264px */
  .hp-page-hero:has(+ .hp-columns-section) { padding-bottom: 133px; }

  .hp-page-hero:has(+ .hp-columns-section) .hp-breadcrumb-nav,
  .hp-page-hero:has(+ .hp-columns-section) .hp-page-hero-subtitle { display: none; }

  .hp-page-hero:has(+ .hp-columns-section) .hp-page-hero-body { margin-top: 0; }

  .hp-page-hero:has(+ .hp-columns-section) .hp-page-hero-title { font-size: 32px; }

  .hp-page-hero:has(+ .hp-columns-section) > .hp-page-hero-deco.hp-page-hero-tree {
    display: block;
    left: 30px;
    top: 168px;
    width: 103px;
  }

  .hp-page-hero:has(+ .hp-columns-section) > .hp-page-hero-deco.hp-page-hero-colibri {
    display: block;
    left: auto;
    right: 28px;
    top: 187px;
    width: 62px;
  }

  .hp-page-hero:has(+ .hp-columns-section) > .hp-page-hero-leaf-a {
    display: block;
    left: 134px;
    top: 192px;
    width: 20px;
  }

  .hp-page-hero:has(+ .hp-columns-section) > .hp-page-hero-leaf-c {
    left: auto;
    right: 69px;
    top: 239px;
    width: 25px;
  }

  .hp-page-hero:has(+ .hp-columns-section) > .hp-page-hero-leaf-b {
    left: auto;
    right: 38px;
    top: 262px;
    width: 19px;
  }

  .hp-columns-section { padding: 47px 0 80px; }

  .hp-columns-grid .hp-column-card { min-height: 0; }

  .hp-columns-grid .hp-column-card-body { padding-bottom: 10px; }

  .hp-columns-grid .hp-tag,
  .hp-columns-grid .hp-column-card-date { font-size: 14px; }

  .hp-columns-grid .hp-column-card-excerpt { font-size: 12px; }

  .hp-columns-grid .hp-column-card-more { padding-top: 8px; }

  /* sidebar (一覧 + article) */
  .hp-sidebar-heading {
    padding-bottom: 8px;
    border-bottom-width: 2px;
    font-size: 18px;
  }

  .hp-sidebar-links a { font-size: 14px; }

  .hp-sidebar-article-image { border-radius: 0; }

  .hp-sidebar-article-meta,
  .hp-sidebar-article-excerpt { font-size: 12px; }

  .hp-sidebar-article-title { font-size: 14px; }

  .hp-sidebar-article-excerpt { -webkit-line-clamp: 2; }

  /* ── コラム article (Figma sp) ── */
  .hp-article-page { padding: 90px 0 80px; }

  .hp-article-page .hp-breadcrumb-nav { display: none; }

  .hp-article-body img {
    max-width: 100%;
    height: auto;
  }

  .hp-article-card { padding: 32px 16px; }

  .hp-article-date {
    font-size: 12px;
    letter-spacing: .05em;
  }

  /* 公開 / 更新 stack instead of wrapping with a dangling divider */
  .hp-article-date-updated {
    display: block;
    margin: 2px 0 0;
    padding-left: 0;
    border-left: 0;
  }

  .hp-article-hero { aspect-ratio: 329 / 198; }

  .hp-article-card > header + .hp-article-body { margin-top: -32px; }

  .hp-article-body > .white-background.hp-article-md:first-child { margin-bottom: 16px !important; }

  .hp-article-body .hp-article-md > * + * { margin-top: 16px; }

  .hp-article-body .colibri-home-subsection-title {
    padding: 8px 16px;
    letter-spacing: 0;
  }

  .hp-article-body .colibri-home-subsection-title::after {
    bottom: -4px;
    height: 4px;
  }

  .hp-article-body .hp-article-md > h3 { margin-top: 40px; }

  .hp-article-footer-cta .hp-btn { width: 100%; }

  .hp-article-card .hp-related-columns-heading {
    font-size: 18px;
    letter-spacing: .05em;
  }

  .hp-related-col-item {
    flex-direction: column;
    align-items: stretch;
    grid-gap: 8px;
    gap: 8px;
    border-bottom-color: #479BDE;
  }

  .hp-related-col-thumb {
    flex: none;
    height: auto;
    aspect-ratio: 329 / 219;
  }

  .hp-related-col-date {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: .05em;
  }

  .hp-related-col-title {
    font-size: 14px;
    letter-spacing: .05em;
  }

  /* Q&A answer uses the full width on phones */
  .hp-qa-question {
    grid-gap: 16px;
    gap: 16px;
    padding: 20px 0;
  }

  .hp-qa-answer { padding: 0 0 24px; }

  /* breadcrumbs one line; last item ellipsized */
  .hp-breadcrumb {
    flex-wrap: nowrap;
    grid-gap: 10px;
    gap: 10px;
    max-width: 100%;
    padding: 6px 14px;
    font-size: 13px;
  }

  .hp-breadcrumb li {
    flex: none;
    grid-gap: 10px;
    gap: 10px;
    white-space: nowrap;
  }

  .hp-breadcrumb li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hp-breadcrumb li:last-child::before { flex: none; }

  /* 採用情報 positions: +/− to the top-right, title gets full width */
  .hp-position-header { position: relative; }

  .hp-position-summary { width: 100%; }

  .hp-position-toggle {
    position: absolute;
    top: -4px;
    right: 0;
    width: 44px;
    height: 44px;
  }

  .hp-position-title {
    flex-basis: 100%;
    font-size: 18px;
  }

  .hp-position-intro br { display: none; }

  /* index heroes: left leaf covered long titles */
  .hp-page-hero-center > .hp-page-hero-leaf-a { display: none; }

  .hp-btn { text-align: center; }

  /* footer: 2nd column has no title, align its links */
  .hp-footer-col:nth-child(2) { padding-top: 37px; }
}

/* narrowest phones (344 / 360): Top feature card titles stay one line */
@media (max-width: 374px) {
  .hp-home-feature-name { font-size: 16px; }

  /* 選考の流れ: two 170px circles per row no longer fit */
  .hp-joinus-flow-step {
    width: 150px;
    height: 150px;
    padding-top: 34px;
  }

  .hp-joinus-flow-num,
  .hp-joinus-flow-name { font-size: 15px; }
}

/* mobile menu open: white header */
@media (max-width: 991px) {
  #colibri-pages-nav:has(#close-nav-mobile[style*="block"]) {
    background: #fff;
    box-shadow: none;
  }
}

/* stacked two-column blocks: desktop `flex: 0 1 530px` would become a 530px height */
@media (max-width: 991px) {
  .hp-about-story-text,
  .hp-about-values-text,
  .hp-about-team-intro-text,
  .hp-about-founder-figure,
  .hp-about-founder-text { flex: none; }

  .hp-about-founder-text { width: 100%; }
}

/* ============ HP v3 – 会社方針 SMARTPHONE (393px) ============
   After the SMARTPHONE sections so it overrides them. */
@media (max-width: 767px) {
  /* MV: like コラム一覧 */
  .hp-page-hero:has(+ .hp-about-story) { padding-bottom: 133px; }

  .hp-page-hero:has(+ .hp-about-story) .hp-breadcrumb-nav { display: none; }

  .hp-page-hero:has(+ .hp-about-story) .hp-page-hero-body { margin-top: 0; }

  .hp-page-hero:has(+ .hp-about-story) .hp-page-hero-title { font-size: 32px; }

  .hp-page-hero:has(+ .hp-about-story) > .hp-page-hero-deco.hp-page-hero-tree {
    display: block;
    left: 30px;
    top: 168px;
    width: 103px;
  }

  .hp-page-hero:has(+ .hp-about-story) > .hp-page-hero-deco.hp-page-hero-colibri {
    display: block;
    left: auto;
    right: 28px;
    top: 187px;
    width: 62px;
  }

  .hp-page-hero:has(+ .hp-about-story) > .hp-page-hero-leaf-a {
    display: block;
    left: 134px;
    top: 192px;
    width: 20px;
  }

  .hp-page-hero:has(+ .hp-about-story) > .hp-page-hero-leaf-c {
    left: auto;
    right: 69px;
    top: 239px;
    width: 25px;
  }

  .hp-page-hero:has(+ .hp-about-story) > .hp-page-hero-leaf-b {
    left: auto;
    right: 38px;
    top: 262px;
    width: 19px;
  }

  .hp-about-story { padding: 60px 0; }

  .hp-about-story-inner { grid-gap: 24px; gap: 24px; }

  .hp-about-story-body p,
  .hp-about-story-body blockquote { font-size: 14px; }

  .hp-about-company { padding: 60px 0; }

  .hp-about-table-row {
    flex-direction: column;
    grid-gap: 0;
    gap: 0;
    padding: 8px 16px;
  }

  .hp-about-table-label {
    flex: none;
    padding: 0;
    font-size: 14px;
  }

  .hp-about-table-value {
    padding: 0;
    font-size: 16px;
  }

  .hp-about-mission { padding: 60px 0; }

  .hp-about-br-sp { display: inline; }

  .hp-about-mission .hp-section-head {
    align-items: flex-start;
    text-align: left;
  }

  .hp-about-mission .hp-features-eyebrow,
  .hp-about-mission .hp-features-heading { text-align: left; }

  .hp-about-mission-body {
    max-width: none;
    text-align: left;
  }

  .hp-about-mission-body p { font-size: 14px; }

  .hp-about-vision-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 8px;
    gap: 8px;
  }

  .hp-about-vision-item-image { max-width: calc(100% + 36px); }

  .hp-about-vision-item-title { font-size: 18px; }

  .hp-about-vision-item-body { font-size: 14px; }

  /* TEAM: no gap under the illustration; founder heads already rise ~55px above their circles */
  .hp-about-team-intro { margin-bottom: 0; }

  .hp-about-team-intro-text { padding-top: 0; }

  .hp-about-team-colibri {
    left: 80px;
    top: -22px;
    width: 59px;
  }

  .hp-about-team-intro .hp-about-team-illustration { margin-top: 24px; }

  .hp-about-founders { grid-gap: 24px; gap: 24px; }

  .hp-about-founder { grid-gap: 8px; gap: 8px; }

  .hp-about-founder-figure { order: -1; }

  .hp-about-founder-role { font-size: 12px; }

  .hp-about-founder-name { font-size: 18px; }

  /* right padding keeps cloned chip end padding inside the gutter */
  .hp-main .hp-about-founder-quote {
    margin-top: 4px;
    padding-right: 16px;
    font-size: 16px;
    line-height: 2.875;
  }

  .hp-main .hp-about-founder + .hp-about-founder .hp-about-founder-quote {
    font-size: 14px;
    line-height: 3;
  }

  .hp-about-founder-quote span { padding: 8px 16px; }

  .hp-about-founder-bio { font-size: 14px; }

  .hp-about-members-grid { grid-gap: 16px; gap: 16px; }

  .hp-about-member-name { font-size: 18px; }

  .hp-about-member-role { font-size: 12px; }

  .hp-about-recruit {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 0;
  }

  .hp-about-recruit .hp-btn { width: 100%; }

  .hp-about-recruit-illustration-sp {
    display: block;
    width: 282px;
    max-width: 100%;
    height: auto;
    margin: 24px auto 0;
  }
}

/* ============ HP v3 – 採用情報 SMARTPHONE (393px) ============
   After the SMARTPHONE sections so it overrides them. */
@media (max-width: 767px) {
  .hp-page-hero-visual-photo > .hp-page-hero-deco.hp-page-hero-tree {
    display: block;
    left: -45px;
    top: 172px;
    bottom: auto;
    width: 118px;
  }

  .hp-page-hero-visual-photo .hp-page-hero-leaf-a {
    left: -3px;
    top: -23px;
    width: 32px;
  }

  .hp-page-hero-visual-photo .hp-page-hero-leaf-b {
    right: 1px;
    bottom: -34px;
    width: 33px;
  }

  /* MESSAGE: columns laid out as one; photo closes the section */
  .hp-joinus-message-inner {
    display: flex;
    flex-direction: column;
    grid-gap: 0;
    gap: 0;
    padding: 0 16px 100px;
  }

  .hp-joinus-message-visual,
  .hp-joinus-message-text { display: contents; }

  .hp-joinus-message-visual .hp-joinus-heading {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    align-self: flex-start;
  }

  .hp-joinus-heading-ja { top: 26px; }

  .hp-joinus-message-lead {
    order: 2;
    margin: 0 0 24px;
    font-size: 24px;
  }

  .hp-joinus-message-body {
    order: 3;
    font-size: 14px;
  }

  .hp-joinus-message-body p br,
  .hp-joinus-br-sp { display: inline; }

  .hp-joinus-em-sp { font-weight: 700; }

  .hp-joinus-message-sign {
    order: 4;
    font-size: 14px;
  }

  .hp-joinus-message-photo {
    order: 5;
    position: relative;
    z-index: 3;
    width: 231px;
    margin: 0 auto;
  }

  .hp-joinus-message-trees {
    display: block;
    z-index: 1;
    left: 16px;
    width: 366px;
    max-width: none;
  }

  .hp-joinus-message-line-sp {
    display: block;
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 149px;
    width: 361px;
    height: auto;
    pointer-events: none;
  }

  /* stays inside the screen (section clips) */
  .hp-joinus-message-bird {
    z-index: 4;
    left: auto;
    right: 4px;
    top: auto;
    bottom: 227px;
    width: 112px;
  }

  .hp-joinus-works { padding: 60px 16px 160px; }

  .hp-joinus-works-intro { font-size: 14px; }

  .hp-joinus-works-intro br,
  .hp-joinus-work-body p br,
  .hp-joinus-recruit-intro br { display: inline; }

  .hp-joinus-work,
  .hp-joinus-work-photo-left {
    flex-direction: column;
    grid-gap: 16px;
    gap: 16px;
  }

  .hp-joinus-work-text {
    grid-gap: 8px;
    gap: 8px;
    padding: 16px 16px 0;
  }

  .hp-joinus-work-role { font-size: 14px; }

  .hp-joinus-work-lead {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .hp-joinus-work-body { font-size: 14px; }

  .hp-joinus-recruit { padding: 60px 16px; }

  .hp-joinus-recruit-bird {
    display: block;
    left: auto;
    right: 9px;
    top: -49px;
    width: 213px;
  }

  .hp-joinus-recruit-intro {
    position: relative;
    font-size: 14px;
  }

  .hp-position-header {
    flex-direction: column;
    align-items: center;
    grid-gap: 16px;
    gap: 16px;
  }

  .hp-position-header[aria-expanded="true"] { grid-gap: 8px; gap: 8px; }

  .hp-position-summary {
    align-self: stretch;
    grid-gap: 8px;
    gap: 8px;
  }

  .hp-position-badge,
  .hp-position-intro { font-size: 14px; }

  .hp-position-intro br { display: inline; }

  .hp-position-toggle {
    position: static;
    width: 35px;
    height: 35px;
  }

  .hp-position-panel {
    grid-gap: 10px;
    gap: 10px;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
  }

  .hp-position-row { border-bottom: 0; }

  .hp-position-row dt {
    font-size: 14px;
    color: #479BDE;
  }

  .hp-position-row dd {
    padding: 16px 0;
    font-size: 14px;
  }

  .hp-position-panel .hp-btn {
    width: 100%;
    font-size: 14px;
  }

  /* 選考の流れ: 200px circles, overlapping by 40px */
  .hp-joinus-flow { grid-gap: 16px; gap: 16px; }

  .hp-joinus-flow-heading { font-size: 24px; }

  .hp-joinus-flow-steps {
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
  }

  .hp-joinus-flow-step {
    width: 200px;
    height: 200px;
    padding-top: 56px;
  }

  .hp-joinus-flow-step:nth-child(even) { margin-left: 0 !important; }

  .hp-joinus-flow-step + .hp-joinus-flow-step { margin-top: -40px; }

  .hp-joinus-flow-num,
  .hp-joinus-flow-name { font-size: 18px; }

  /* cta_cloud.webp is cut at the card's right edge: keep it anchored there */
  .hp-joinus-cta {
    align-items: stretch;
    padding: 32px 16px;
  }

  .hp-joinus-cta-heading { font-size: 24px; }

  .hp-joinus-cta-body {
    margin: 16px 0 24px;
    font-size: 14px;
    text-align: left;
  }

  .hp-joinus-cta .hp-btn { width: 100%; }

  .hp-joinus-cta-cloud {
    left: auto;
    right: 0;
    width: 230px;
  }
}

/* ============ HP v3 – AI機能 PAGES (_hp_ai_page) ============
   Summary = the one-paragraph answer for search/answer engines; outline anchors to each card. */
.hp-ai-summary { padding: 40px 0 0; }

.hp-ai-summary-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.hp-ai-summary-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

.hp-ai-summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px 12px;
  gap: 8px 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hp-ai-summary-list a {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #EBF5FB;
  font-size: 14px;
  font-weight: 600;
  color: #2C3E50;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.hp-ai-summary-num {
  flex-shrink: 0;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #479BDE;
  transition: color .2s ease;
}

.hp-ai-summary-list a:hover,
.hp-ai-summary-list a:focus-visible {
  background: #479BDE;
  color: #fff;
}

.hp-ai-summary-list a:hover .hp-ai-summary-num,
.hp-ai-summary-list a:focus-visible .hp-ai-summary-num { color: #fff; }

.hp-ai-page .hp-detail-section { padding-top: 48px; }

/* anchors land below the fixed header */
.hp-ai-page .hp-detail-card { scroll-margin-top: 96px; }

.hp-ai-trust,
.hp-ai-faq { padding: 80px 0; }

.hp-ai-promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.hp-ai-promise-item {
  padding: 28px 24px;
  border-radius: 16px;
  background: #EBF5FB;
  color: #2C3E50;
}

.hp-ai-promise-num {
  margin: 0 0 12px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #479BDE;
}

.hp-ai-promise-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.hp-ai-promise-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.hp-ai-faq .hp-section-head { margin-bottom: 16px; }

/* waveform settles: ai_voice_record d48, ai_meeting_minutes d18 */
.hp-scene-ai-voice.hp-in-view .hp-sc-wave > * { animation-iteration-count: 5; }
.hp-scene-ai-minutes.hp-in-view .hp-sc-wave > * { animation-iteration-count: 2; }
/* 訪問看護 帳票 POINT 01: listens until d37 */
.hp-scene-nur-hearing.hp-in-view .hp-sc-wave > * { animation-iteration-count: 5; }

@media (max-width: 991px) {
  .hp-ai-summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-ai-promise-grid { grid-template-columns: 1fr; grid-gap: 16px; gap: 16px; }
}

@media (max-width: 767px) {
  .hp-ai-summary { padding-top: 32px; }
  .hp-ai-summary-box { padding: 24px 16px; }
  .hp-ai-summary-lead { font-size: 14px; }
  .hp-ai-summary-list { grid-template-columns: 1fr; }
  .hp-ai-trust,
  .hp-ai-faq { padding: 48px 0; }
  .hp-ai-promise-item { padding: 20px 16px; }
}

/* ============ ROUTE OPTIMIZATION (pages/route_optimization) ============ */
.hp-route-compare,
.hp-route-usecases,
.hp-route-faq,
.hp-int-faq { padding: 80px 0; }

.hp-route-compare-scroll { overflow-x: auto; }

/* Colibri column raised; 専用ツール flat */
.hp-route-compare-table {
  min-width: 640px;
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible;
  box-shadow: none;
}

.hp-route-compare-table thead th:first-child {
  width: 28%;
  background: transparent;
}

.hp-route-compare-table thead th.col-before {
  background: #EEF2F5;
  color: #6C757D;
  border-radius: 12px 0 0 0;
}

.hp-route-compare-table thead th.col-after {
  padding: 22px 24px;
  border: 2px solid #479BDE;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: #479BDE;
  color: #fff;
  font-size: 1rem;
}

.hp-route-compare-table tbody td { line-height: 1.7; }

.hp-route-compare-table tbody td:first-child {
  background: transparent;
  border-right: none;
  border-bottom: 1px solid #EEF2F5;
}

.hp-route-compare-table tbody td.td-before {
  background: #F8FAFC;
  border-bottom: 1px solid #E6ECF1;
}

.hp-route-compare-table tbody td.td-after {
  font-weight: 700;
  background: #fff;
  border-left: 2px solid #479BDE;
  border-right: 2px solid #479BDE;
  border-bottom: 1px solid #EEF2F5;
}

.hp-route-compare-table tbody tr:last-child td:first-child,
.hp-route-compare-table tbody tr:last-child td.td-before { border-bottom: none; }

.hp-route-compare-table tbody tr:last-child td.td-before { border-radius: 0 0 0 12px; }

.hp-route-compare-table tbody tr:last-child td.td-after {
  border-bottom: 2px solid #479BDE;
  border-radius: 0 0 12px 12px;
}

.hp-route-compare-cell {
  display: inline-flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.hp-route-compare-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.hp-route-compare-icon-check { color: #3C9A5F; }
.hp-route-compare-icon-link { color: #939190; }
.hp-route-compare-icon-cross { color: #B8474A; }

.hp-route-compare-note {
  max-width: 1000px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.9;
  color: #2C3E50;
}

.hp-route-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(248px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

/* same look as the home service cards */
.hp-route-usecase {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #2C3E50;
  border-radius: 10px;
  background: #fff;
  color: #2C3E50;
}

.hp-route-usecase-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 10px;
  background: #EBF5FB;
}

.hp-route-usecase-image img {
  max-width: 100%;
  max-height: 118px;
}

.hp-route-usecase-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-route-usecase-body {
  flex: 1 1;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
}

.hp-route-usecase .hp-btn { align-self: flex-start; }

.hp-route-faq .hp-section-head,
.hp-int-faq .hp-section-head { margin-bottom: 16px; }

/* ── 請求連携: 連携実績のある請求ソフト (pages/integrations) ──
   Sky band after the cloud band: 12 names as pills on three staggered rows, dotted threads behind,
   the bird hovering top-right. Stagger and threads are desktop/tablet only. */
.hp-int-sky {
  padding: 80px 0 40px;
  background: linear-gradient(180deg, #EBF5FB 0%, #F7FBFE 70%, #fff 100%);
}

.hp-int-sky .hp-section-head { margin-bottom: 36px; }

.hp-int-sky-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-gap: 32px;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 0 8px;
}

.hp-int-sky-threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #479BDE;
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  opacity: .45;
}

.hp-int-sky-spark { fill: #FF7070; stroke: none; }
.hp-int-sky-spark-blue { fill: #479BDE; }

/* level with the first row, clear of the lead text above */
.hp-int-sky-bird {
  position: absolute;
  right: -30px;
  top: 20px;
  width: 118px;
}

.hp-int-sky-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 16px 28px;
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the stagger: rows 2 / 3 slide right / left */
.hp-int-sky-row:nth-child(3) { padding-left: 90px; }
.hp-int-sky-row:nth-child(4) { padding-right: 90px; }

.hp-int-sky-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 30px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2C3E50;
}

.hp-int-sky-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-gap: 12px 24px;
  gap: 12px 24px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: #2C3E50;
}

.hp-int-sky-method,
.hp-int-sky-more {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  font-weight: 500;
}

/* hairline separators between the three foot items */
.hp-int-sky-method + .hp-int-sky-method,
.hp-int-sky-method + .hp-int-sky-more {
  padding-left: 24px;
  border-left: 1px solid #B9D9F0;
}

.hp-int-sky-foot .hp-text-link { font-size: 14px; }

.hp-int-method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: #479BDE;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
}

@media (max-width: 991px) {
  .hp-int-sky-stage { grid-gap: 20px; gap: 20px; padding-top: 32px; }
  .hp-int-sky-row { grid-gap: 12px 16px; gap: 12px 16px; }
  .hp-int-sky-row:nth-child(3) { padding-left: 48px; }
  .hp-int-sky-row:nth-child(4) { padding-right: 48px; }
  .hp-int-sky-pill { padding: 12px 22px; font-size: 15px; }
  .hp-int-sky-bird { right: 0; top: -60px; width: 88px; }
  .hp-int-sky-method + .hp-int-sky-more { flex-basis: 100%; justify-content: center; padding-left: 0; border-left: 0; }
}

/* 248px per card (button): four per row from 1120px, else two (never 3 + 1) */
@media (max-width: 1119px) {
  .hp-route-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .hp-route-usecase-grid { grid-gap: 16px; gap: 16px; }
}

@media (max-width: 767px) {
  .hp-route-compare,
  .hp-route-usecases,
  .hp-route-faq,
  .hp-int-faq { padding: 48px 0; }
  .hp-int-sky { padding: 48px 0 40px; }
  .hp-int-sky .hp-section-head { margin-bottom: 20px; }
  .hp-int-sky-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; grid-gap: 10px; gap: 10px; padding: 0; }
  .hp-int-sky-threads,
  .hp-int-sky-bird { display: none; }
  .hp-int-sky-row { display: contents; }
  .hp-int-sky-pill { padding: 10px 18px; font-size: 14px; }
  .hp-int-sky-foot { flex-direction: column; grid-gap: 10px; gap: 10px; margin-top: 24px; }
  .hp-int-sky-method + .hp-int-sky-method,
  .hp-int-sky-method + .hp-int-sky-more { padding-left: 0; border-left: 0; }
  .hp-route-usecase-grid { grid-template-columns: 1fr; }
  .hp-route-usecase { padding: 16px; }
}

/* ── 料金ページ ── */
/* _hp_price_model (料金 + パートナープラン): staircase steps share the SVG's 72-unit rhythm */
.hp-price-model {
  max-width: 1000px;
  margin: 0 auto;
}

.hp-price-model-card {
  display: grid;
  align-items: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.hp-price-model-start { padding: 40px 48px 32px; }

.hp-price-model-prices {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  grid-gap: 32px;
  gap: 32px;
}

.hp-price-model-price-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
}

.hp-price-model-price-amount {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #0F172B;
}

.hp-price-model-price-amount strong {
  margin: 0 4px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 56px;
  letter-spacing: .01em;
  color: #FF7070;
}

.hp-price-model-price-amount span {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #6C757D;
}

/* amounts are the smallest 売上区分, not a flat price */
.hp-price-model-basis {
  margin: 28px 0 0;
  padding: 16px 24px;
  border-radius: 12px;
  background: #FFF4F4;
  text-align: center;
}

.hp-price-model-basis p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #FF7070;
}

.hp-price-model-basis p + p { margin-top: 2px; color: #2C3E50; }

.hp-price-model-price-note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #393E46;
}

.hp-price-model-price-sub {
  padding: 24px 28px;
  border-radius: 16px 16px 16px 44px;
  background: #EBF5FB;
}

.hp-price-model-price-sub .hp-price-model-price-amount strong { font-size: 34px; }

.hp-price-model-price-sub .hp-price-model-price-note { margin-top: 6px; font-size: 13px; }

.hp-price-model-offices {
  grid-template-columns: 400px minmax(0, 1fr);
  grid-gap: 40px;
  gap: 40px;
  margin-top: 24px;
  padding: 32px 48px;
}

.hp-price-model-offices-art {
  display: block;
  width: 100%;
  height: auto;
}

.hp-price-model-offices-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #2C3E50;
}

.hp-price-model-offices-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

.hp-price-model-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px dashed #D3E7F6;
  list-style: none;
}

.hp-price-model-term {
  display: flex;
  align-items: baseline;
  justify-content: center;
  grid-gap: 8px;
  gap: 8px;
  white-space: nowrap;
}

.hp-price-model-term .bi {
  align-self: center;
  font-size: 16px;
  color: #FF7070;
}

.hp-price-model-term span {
  font-size: 13px;
  color: #393E46;
}

.hp-price-model-term strong {
  font-size: 18px;
  color: #2C3E50;
}

.hp-price-model-quote {
  margin: 24px 0 0;
  font-size: 14px;
  text-align: center;
  color: #393E46;
}

.hp-price-more {
  max-width: 1000px;
  margin: 24px auto 0;
  text-align: right;
}

.hp-price-footnote {
  max-width: 1000px;
  margin: 16px auto 0;
  font-size: 12px;
  line-height: 1.8;
  color: #6C757D;
}

.hp-pricing-table,
.hp-pricing-includes,
.hp-pricing-faq { padding: 80px 0; }

/* PRICE / INCLUDED on light blue; cloud band hands over to white */
.hp-pricing-table { padding-bottom: 0; }

.hp-pricing-includes {
  position: relative;
  overflow: hidden;
  padding-bottom: 220px;
}

.hp-pricing-includes .hp-container {
  position: relative;
  z-index: 1;
}

.hp-pricing-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.hp-pricing-include {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.hp-pricing-include-num {
  margin-bottom: 12px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #FF7070;
}

.hp-pricing-include-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #2C3E50;
}

.hp-pricing-include-body {
  flex: 1 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.hp-pricing-include-link {
  margin-top: 16px;
  font-size: 15px;
}

.hp-pricing-includes-note {
  max-width: 900px;
  margin: 32px auto 0;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
  color: #393E46;
}

.hp-pricing-includes-note-link { font-size: 15px; }

.hp-pricing-faq .hp-section-head { margin-bottom: 16px; }

.hp-pricing-faq { padding-top: 24px; }

.hp-pricing-cta {
  position: relative;
  overflow: hidden;
  padding: 250px 0 80px;
}

.hp-pricing-cta .hp-clouds {
  top: 0;
  bottom: auto;
  transform: scaleY(-1);
}

.hp-pricing-cta .hp-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .hp-pricing-includes-grid { grid-template-columns: 1fr; }
  .hp-price-model-start { padding: 36px 32px 28px; }
  .hp-price-model-prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 24px; gap: 24px; }
  .hp-price-model-price-main .hp-price-model-price-amount strong { font-size: 46px; }
  .hp-price-model-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row-gap: 12px; row-gap: 12px; }
  .hp-price-model-offices { grid-template-columns: 300px minmax(0, 1fr); grid-gap: 32px; gap: 32px; padding: 28px 32px; }
  .hp-price-model-offices-title { font-size: 20px; }
}

@media (max-width: 767px) {
  .hp-price-model-offices { grid-template-columns: minmax(0, 1fr); }
  .hp-price-model-start { text-align: center; }
  .hp-price-model-basis { padding: 14px 16px; }
  .hp-price-model-prices { grid-template-columns: minmax(0, 1fr); grid-gap: 24px; gap: 24px; }
  .hp-price-model-offices { grid-gap: 16px; gap: 16px; }
  .hp-price-model-offices-art { max-width: 340px; margin: 0 auto; }
  .hp-price-model-offices-title { text-align: center; }
  .hp-price-more { text-align: center; }
}

@media (max-width: 575px) {
  .hp-pricing-table,
  .hp-pricing-includes,
  .hp-pricing-faq { padding: 56px 0; }
  .hp-pricing-table { padding-bottom: 0; }
  .hp-pricing-includes { padding-bottom: 190px; }
  .hp-pricing-faq { padding-top: 16px; }
  .hp-pricing-cta { padding: 200px 0 56px; }
  .hp-pricing-include { padding: 24px 20px; }
  .hp-price-model-start { padding: 28px 20px 24px; }
  .hp-price-model-offices { padding: 24px 20px; }
  .hp-price-model-price-amount strong { font-size: 44px; }
  .hp-price-model-price-amount span { display: block; margin: 8px 0 0; }
  .hp-price-model-offices-title { font-size: 19px; }
  .hp-price-model-price-sub { padding: 20px 16px; border-radius: 14px 14px 14px 36px; }
  .hp-price-model-terms { grid-template-columns: minmax(0, 1fr); justify-items: start; width: max-content; margin-right: auto; margin-left: auto; }
  .hp-price-model-term strong { font-size: 16px; }
}

/* ── セキュリティページ ── */
.hp-security-intro { padding: 64px 0 0; }

.hp-security-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #2C3E50;
}

.hp-security-checklist,
.hp-security-duties,
.hp-security-faq,
.hp-security-references { padding: 80px 0; }

.hp-security-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #DCE6EE;
  border-radius: 12px;
  background: #fff;
}

.hp-security-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.8;
  color: #2C3E50;
}

.hp-security-table th,
.hp-security-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #DCE6EE;
  text-align: left;
  vertical-align: top;
}

.hp-security-table tbody tr:last-child th,
.hp-security-table tbody tr:last-child td { border-bottom: none; }

.hp-security-table thead th {
  background: #EBF5FB;
  font-weight: 700;
  white-space: nowrap;
}

.hp-security-table tbody th {
  width: 26%;
  min-width: 11em;
  font-weight: 700;
  background: #F8F9FA;
}

.hp-security-table a,
.hp-security-duty dd a,
.hp-security-reference-list a {
  color: #479BDE;
  text-decoration: underline;
}

.hp-security-duty-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin: 0;
}

.hp-security-duty {
  padding: 24px;
  border: 1px solid #DCE6EE;
  border-radius: 12px;
  background: #F8F9FA;
}

.hp-security-duty dt {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #479BDE;
}

.hp-security-duty dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #2C3E50;
}

.hp-security-references-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #2C3E50;
}

.hp-security-reference-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 2;
  color: #2C3E50;
}

@media (max-width: 991px) {
  .hp-security-duty-list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hp-security-intro { padding-top: 40px; }
  .hp-security-checklist,
  .hp-security-duties,
  .hp-security-faq,
  .hp-security-references { padding: 48px 0; }
  .hp-security-table { display: block; }
  .hp-security-table thead { display: none; }
  .hp-security-table tbody,
  .hp-security-table tr,
  .hp-security-table th,
  .hp-security-table td { display: block; width: auto; min-width: 0; }
  .hp-security-table th,
  .hp-security-table td { padding: 12px 16px; font-size: 14px; }
  .hp-security-table tbody th { border-bottom: none; }
  .hp-security-duty { padding: 16px; }
}

/* ============ HP v3 – SMARTPHONE, 導入事例 (393px) ============
   After the generic SMARTPHONE sections so these win at equal specificity. */
@media (max-width: 767px) {
  /* ── 一覧 MV: like コラム一覧 (breadcrumb JSON-LD still emitted) ── */
  .hp-page-hero:has(+ .hp-stories-section) { padding-bottom: 133px; }

  .hp-page-hero:has(+ .hp-stories-section) .hp-breadcrumb-nav,
  .hp-page-hero:has(+ .hp-stories-section) .hp-page-hero-subtitle { display: none; }

  .hp-page-hero:has(+ .hp-stories-section) .hp-page-hero-body { margin-top: 0; }

  .hp-page-hero:has(+ .hp-stories-section) .hp-page-hero-title { font-size: 32px; }

  .hp-page-hero:has(+ .hp-stories-section) > .hp-page-hero-deco.hp-page-hero-tree {
    display: block;
    left: 30px;
    top: 168px;
    width: 103px;
  }

  .hp-page-hero:has(+ .hp-stories-section) > .hp-page-hero-deco.hp-page-hero-colibri {
    display: block;
    left: auto;
    right: 28px;
    top: 187px;
    width: 62px;
  }

  .hp-page-hero:has(+ .hp-stories-section) > .hp-page-hero-leaf-a {
    display: block;
    left: 134px;
    top: 192px;
    width: 20px;
  }

  .hp-page-hero:has(+ .hp-stories-section) > .hp-page-hero-leaf-c {
    left: auto;
    right: 69px;
    top: 239px;
    width: 25px;
  }

  .hp-page-hero:has(+ .hp-stories-section) > .hp-page-hero-leaf-b {
    left: auto;
    right: 38px;
    top: 262px;
    width: 19px;
  }

  .hp-stories-section { padding-top: 47px; }

  .hp-stories-section .hp-filter-tabs {
    justify-content: flex-start;
    grid-gap: 8px 16px;
    gap: 8px 16px;
    margin-bottom: 36px;
  }

  .hp-stories-section .hp-filter-tab { font-size: 12px; }

  /* 14px Tag_2 (generic sp .hp-tag is 12px) */
  .hp-stories-grid,
  .hp-story-related-grid { grid-gap: 32px; gap: 32px; }

  .hp-stories-grid .hp-story-card-label,
  .hp-stories-grid .hp-story-card-name,
  .hp-story-related-grid .hp-story-card-name,
  .hp-stories-grid .hp-tag,
  .hp-home-cases-row .hp-tag { font-size: 14px; }

  /* ── 詳細 MV ── */
  .hp-page-hero:has(.hp-story-hero-visual) { padding-bottom: 90px; }

  .hp-page-hero:has(.hp-story-hero-visual) .hp-page-hero-body {
    grid-gap: 40px;
    gap: 40px;
    text-align: left;
  }

  .hp-story-hero-labels {
    grid-gap: 4px 16px;
    gap: 4px 16px;
    font-size: 18px;
  }

  .hp-page-hero-text .hp-story-hero-name { font-size: 28px; }

  .hp-story-hero-people-label { font-size: 14px; }

  .hp-story-hero-people { font-size: 14px; }

  .hp-page-hero-body .hp-story-hero-visual {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .hp-story-hero-photo {
    aspect-ratio: 361 / 240;
    border-width: 3px;
  }

  .hp-story-hero-visual > .hp-page-hero-deco.hp-page-hero-tree {
    display: block;
    left: -48px;
    top: auto;
    bottom: -47px;
    width: 112px;
  }

  .hp-story-hero-visual > .hp-page-hero-leaf-a {
    left: -4px;
    top: -23px;
    width: 32px;
  }

  .hp-story-hero-visual > .hp-page-hero-leaf-b {
    left: auto;
    right: 0;
    top: auto;
    bottom: -35px;
    width: 33px;
  }

  /* ── 詳細 interview body ── */
  .hp-story-body {
    padding: 0 16px 24px;
    font-size: 14px;
  }

  .hp-story-body .aligned-right-home,
  .hp-story-body .colibri-subsection-centered { font-size: 14px; }

  .hp-story-body .colibri-section-title {
    margin: 24px 0 8px !important;
    font-size: 12px;
  }

  .hp-story-body .colibri-home-subsection-small-title {
    padding: 16px 4px 16px 24px;
    font-size: 14px !important;
  }

  .hp-story-body > .white-background:first-child .colibri-home-subsection-small-title {
    padding: 24px 0 10px;
    font-size: 18px !important;
  }

  .hp-story-body .coli-small-subtitle { font-size: 12px; }

  .hp-story-quote {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "mark mark" "body body" "photo source";
    grid-gap: 0 16px;
    gap: 0 16px;
    margin: 16px 0 32px;
    padding: 24px 20px;
  }

  .hp-story-quote-text { display: contents; }

  .hp-story-quote-mark { grid-area: mark; width: 24px; height: 19px; margin-bottom: 10px; }

  .hp-story-quote-body { grid-area: body; }

  .hp-main .hp-story-quote-body p { font-size: 16px; }

  .hp-story-quote-photo { grid-area: photo; margin-top: 20px; }

  .hp-story-body .hp-story-quote-photo img:first-child { border-radius: 8px; }

  .hp-story-quote-source { grid-area: source; align-self: center; margin-top: 20px; font-size: 12px; }

  .hp-story-quote-source::before,
  .hp-story-body .hp-story-quote-leaf { display: none; }

  .hp-story-quote-source span span { display: block; }

  .hp-story-quote-source span span + span { margin-left: 0; }

  .hp-story-closing { padding: 24px 16px 80px; }

  .hp-story-related { padding-bottom: 120px; }

  .hp-story-related-title { font-size: 18px; }

  .hp-story-related-grid {
    grid-template-columns: minmax(0, 330px);
    justify-content: center;
  }

  .hp-story-related-grid .hp-story-card-sm .hp-story-card-body {
    grid-gap: 8px;
    gap: 8px;
    padding: 16px 8px;
  }
}

/* ============ HP – PHONE ILLUSTRATIONS AT 85% ============
   Designer request: phone illustrations 85% and centred; photos, product images, scenes unchanged. */
@media (max-width: 767px) {
  .hp-home-about-diagram { max-width: 292px; }

  .hp-home-block-image img { height: 85%; }

  .hp-final-cta-illustration {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .hp-about-vision-item-image { height: 162px; }

  .hp-about-team-illustration {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .hp-about-recruit-illustration-sp { width: 240px; }

  .hp-workstyle-inner::after { max-width: 307px; }

  .hp-page-hero-visual-illustration { max-width: 255px; }

  .hp-partner-themes-illustration { max-width: 204px; }

  .hp-partner-cta-illustration { max-width: 85%; }
}

/* ── 動画ページ ── */
/* product_videos: white-matted 16:9 frames (1920 × 1080 films), leaves as .hp-detail-leaf */
.hp-videos-concept {
  position: relative;
  overflow: hidden;
  padding: 0 0 232px;
}

.hp-videos-tagline {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #FF7070;
}

.hp-videos-stage {
  position: relative;
  max-width: 880px;
  margin: 16px auto 0;
}

.hp-videos-leaf {
  position: absolute;
  z-index: 2;
  background: center / contain no-repeat;
  pointer-events: none;
}

.hp-videos-leaf-stage-a {
  left: -46px;
  top: -30px;
  width: 112px;
  height: 72px;
  background-image: url(/packs/static/detail_leaf_1-f89bbadfe64ab9c78b95.png);
}

.hp-videos-leaf-stage-b {
  right: -36px;
  bottom: -52px;
  width: 112px;
  height: 107px;
  background-image: url(/packs/static/detail_leaf_4-de9e980dc12f7a743461.png);
}

.hp-videos-spark {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10C1-2.5 2.5-1 10 0 2.5 1 1 2.5 0 10-1 2.5-2.5 1-10 0-2.5-1-1-2.5 0-10z' fill='%23FFC94D'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hp-int-galaxy-twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}

.hp-videos-spark-a { right: -30px; top: -26px; }

.hp-videos-spark-b {
  right: -6px;
  top: 14px;
  width: 11px;
  height: 11px;
  animation-duration: 2.6s;
  animation-delay: -1.3s;
}

.hp-videos-frame {
  position: relative;
  z-index: 1;
  padding: 10px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(27, 38, 59, .1);
}

.hp-videos-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #1B263B;
  object-fit: cover;
}

/* play button on an unplayed poster (pages.js .hp-videos-frame-idle; nothing hidden without JS) */
.hp-videos-play { display: none; }

.hp-videos-frame-idle .hp-videos-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding: 0 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 10px 24px rgba(27, 38, 59, .18);
  font-size: 40px;
  color: #FF7070;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background-color .25s ease;
  cursor: pointer;
}

.hp-videos-frame-idle .hp-videos-play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }

.hp-videos-frame-idle .hp-videos-play:focus-visible { outline: 3px solid #479BDE; outline-offset: 4px; }

.hp-videos-row .hp-videos-frame-idle .hp-videos-play { width: 60px; height: 60px; font-size: 32px; }

.hp-videos-tour {
  position: relative;
  overflow: hidden;
  padding: 48px 0 150px;
}

.hp-videos-tour .hp-section-head,
.hp-videos-list {
  position: relative;
  z-index: 1;
}

.hp-videos-list {
  display: grid;
  grid-row-gap: 104px;
  row-gap: 104px;
  max-width: 1040px;
  margin: 24px auto 0;
}

.hp-videos-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  grid-gap: 56px;
  gap: 56px;
  scroll-margin-top: 96px;
}

.hp-videos-row-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.hp-videos-row-flip .hp-videos-media { order: 2; }

.hp-videos-media { position: relative; }

.hp-videos-row:nth-child(1) .hp-videos-leaf-row {
  left: -34px;
  top: -24px;
  width: 84px;
  height: 54px;
  background-image: url(/packs/static/detail_leaf_1-f89bbadfe64ab9c78b95.png);
}

.hp-videos-row:nth-child(2) .hp-videos-leaf-row {
  right: -22px;
  bottom: -30px;
  width: 52px;
  height: 46px;
  background-image: url(/packs/static/detail_leaf_3-a132a5dfab1e486acee1.png);
}

.hp-videos-row:nth-child(3) .hp-videos-leaf-row {
  left: -28px;
  bottom: -56px;
  width: 92px;
  height: 88px;
  background-image: url(/packs/static/detail_leaf_4-de9e980dc12f7a743461.png);
  transform: scaleX(-1);
}

.hp-videos-row:nth-child(4) .hp-videos-leaf-row {
  right: 48px;
  top: -18px;
  z-index: 0;
  width: 40px;
  height: 26px;
  background-image: url(/packs/static/detail_leaf_2-57b453c97fe7e9693796.png);
}

.hp-videos-row .hp-videos-frame {
  padding: 8px;
  border-radius: 18px;
}

.hp-videos-row .hp-videos-player { border-radius: 11px; }

.hp-videos-text { max-width: 440px; }

.hp-videos-num {
  margin: 0 0 10px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  color: #479BDE;
}

.hp-videos-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  color: #2C3E50;
}

.hp-videos-lead {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.hp-main .hp-videos-body {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.9;
  color: #393E46;
}

.hp-videos-support { padding: 16px 0 112px; }

.hp-videos-row-panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 28px 28px 28px 80px;
  background: #F3F9FD;
}

.hp-videos-support .hp-videos-title { font-size: 20px; }

.hp-videos-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .hp-videos-spark { animation: none; }
}

@media (max-width: 991px) {
  .hp-videos-stage { max-width: 640px; }
  .hp-videos-list { grid-row-gap: 80px; row-gap: 80px; max-width: 640px; }
  .hp-videos-row,
  .hp-videos-row-flip { grid-template-columns: minmax(0, 1fr); grid-gap: 36px; gap: 36px; }
  .hp-videos-row-flip .hp-videos-media { order: 0; }
  .hp-videos-text { max-width: none; }
  .hp-videos-row-panel { max-width: 640px; padding: 28px; border-radius: 24px 24px 24px 64px; }
}

@media (max-width: 575px) {
  .hp-videos-concept { padding: 0 0 136px; }
  .hp-videos-leaf-stage-a { left: -14px; top: -26px; width: 72px; height: 46px; }
  .hp-videos-leaf-stage-b { right: -10px; bottom: -40px; width: 76px; height: 73px; }
  .hp-videos-stage { margin-top: 24px; }
  .hp-videos-spark-a { right: 2px; top: -30px; }
  .hp-videos-spark-b { right: 22px; top: -12px; }
  .hp-videos-frame { padding: 6px; border-radius: 16px; }
  .hp-videos-player { border-radius: 10px; }
  .hp-videos-frame-idle .hp-videos-play,
  .hp-videos-row .hp-videos-frame-idle .hp-videos-play { width: 52px; height: 52px; font-size: 28px; }
  .hp-videos-tour { padding: 32px 0 120px; }
  .hp-videos-list { grid-row-gap: 64px; row-gap: 64px; }
  .hp-videos-row { grid-gap: 28px; gap: 28px; }
  .hp-videos-row:nth-child(1) .hp-videos-leaf-row { left: -12px; top: -22px; width: 64px; height: 41px; }
  .hp-videos-row:nth-child(3) .hp-videos-leaf-row { left: -10px; bottom: -40px; width: 64px; height: 61px; }
  .hp-videos-row:nth-child(2) .hp-videos-leaf-row { right: -6px; }
  .hp-videos-title { font-size: 20px; letter-spacing: .05em; }
  .hp-videos-support { padding: 8px 0 72px; }
  .hp-videos-row-panel { padding: 12px 12px 24px; border-radius: 20px 20px 20px 48px; }
  .hp-videos-support .hp-videos-text { padding: 0 8px; }
}

/* ============ HP – iPAD MINI PORTRAIT (768–991) ============
   Last so it wins over the ≤991 phone rules and page-specific PC rules. */
@media (min-width: 768px) and (max-width: 991px) {
  /* centred heroes: PC tree / colibri sat past the tablet edges; moved into the side margins */
  .hp-page-hero-center > .hp-page-hero-deco.hp-page-hero-tree { display: block; left: 28px; top: 126px; width: 112px; }
  .hp-page-hero-center > .hp-page-hero-deco.hp-page-hero-colibri { display: block; left: auto; right: 28px; top: 96px; width: 72px; }
  .hp-page-hero-center > .hp-page-hero-leaf-a { left: 150px; top: 226px; width: 24px; }
  .hp-page-hero-center > .hp-page-hero-leaf-b { left: auto; right: 44px; top: 214px; width: 26px; }
  .hp-page-hero-center > .hp-page-hero-leaf-c { left: auto; right: 104px; top: 180px; width: 30px; }

  .hp-story-hero-visual > .hp-page-hero-deco.hp-page-hero-tree { display: block; left: -80px; bottom: -30px; width: 136px; }

  /* 給与計算: stacked, so no thread; colibri stays */
  .hp-page-hero-visual-mockup-cards > img.hp-page-hero-mockup-bird { display: block; left: 80%; top: 2%; width: 72px; }

  /* 会社方針: TEAM colibri was off-screen; RECRUIT text narrowed to clear the illustration */
  .hp-about-team-colibri { left: -12px; }
  .hp-about-recruit-text { max-width: calc(100% - 200px); }
  .hp-about-recruit > .hp-about-recruit-illustration { display: block; right: 16px; width: 190px; }

  .hp-partner-cta-card > .hp-partner-cta-bird { display: block; left: -12px; top: -56px; width: 96px; }

  /* 請求連携: colibri kept inside the screen */
  .hp-feature-highlight-image-outline > .hp-feature-highlight-bird { left: -52px; top: -44px; width: 64px; }
}

/* Top 768–1199: SERVICE / FAQ threads no longer meet the one above, so they run in/off the screen edges */
@media (min-width: 768px) and (max-width: 1199px) {
  .hp-home-service-line,
  .hp-home-faq-line { display: block; }
}
.hide-resource {
  display: none;
}

.patients-submenu {
  display: flex;
  justify-content: space-between;
}

#patient-dashboard {
  height: 165px;
  display: flex;
}

.patient-dashboard-panel {
  border: 0.5px solid #ccc;
  border-radius: 3px;
  width: calc(50% - 5px);
}

#payable-menu {
  display: none;
}

.patient-left-panel {
  width: calc(75% - 5px);
  margin-right: 5px;
}

.patient-right-panel {
  width: 34%;
}

.patient-right-panel > div.patient-dashboard-panel-body {
  overflow-y: auto;
}

.patient-dashboard-panel-title {
  margin: 3px;
  border-bottom: 0.5px solid #ccc;
}

.patient-dashboard-panel-body {
  height: 132px;
  overflow-y: hidden;
  overflow-x: auto;
  margin: 3px;
}

.attendance-dashboard-panel {
  overflow-x: auto;
  margin: 3px;
}

.patient-management-item:hover {
  background-color: #f4f7f7;
  color: #828e99;
}

.patient-management-item.selected {
  color: #828e99;
  border-bottom: 3px solid rgb(122, 213, 222);
}

.kana-header {
  padding: 6px 10px 6px 10px;
  border-bottom: 0.5px solid #dee2e6;
  font-weight: bold;
  font-size: 1.1em;
}

.kana-toggle-arrow {
  float: right;
}

.assessment-delimiter {
  padding-right: 6px;
  border-right: 2px solid #ddd;
  height: 100%;
  width: 100%;
}

/* patient office contract page ; thread */

.selected-thread-dot {
  margin-bottom: 3px;
  margin-right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #7ad5de;
  display: inline-block;
}

.selected-thread-dot.dot-container {
  display: none;
}

.selected-thread-dot.dot-container.show-dot {
  display: inline-block;
}

#contract-thread-body {
  overflow: hidden;
}

.contract-thread-item {
  display: flex;
  width: 100%;
  font-size: 0.9em;
  page-break-inside: avoid !important;
  padding-right: 8px;
}

.thread-item-body {
  margin: 5px 0px 5px 15px;
  padding: 6px 24px 6px 8px;
  border: 1px solid #e0e2e2;
  border-radius: 3px;
  width: 100%;
  display: flex;
}

.reportable-information {
  width: 25%;
}

.post-information {
  width: 23%;
}

.report-items {
  width: 21%;
}

.post-readmarks {
  width: 17%;
}

.report-body,
.post-content {
  width: 50%;
}

.report-action {
  width: 18%;
}

.post-action {
  width: 10%;
}

.mobile-thread-item-body {
  margin: 5px;
  padding: 6px 8px 6px 8px;
  border: 1px solid #e0e2e2;
  border-radius: 3px;
  width: calc(100% - 10px);
}

.thread-item-head {
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  padding-bottom: 3px;
  border-bottom: 1px solid #eff1f1;
}

.thread-block {
  padding-left: 3px;
  padding-right: 3px;
}

.thread-post-body {
  background-color: #fafbfb;
  padding: 8px;
  border: 0.5px solid #ccc;
  border-radius: 5px;
}

.pdca-buttons {
  flex-direction: row;
  min-width: 62.52px;

  @media screen and (min-width: 1200px) {
    flex-direction: column;
  }
}

.new-pdca-button {
  justify-content: end;

  @media screen and (min-width: 1200px) {
    flex-direction: row-reverse;
    height: fit-content;
  }
}

.assessment-cell {
  flex-direction: column-reverse;
  justify-content: start;

  @media screen and (min-width: 1200px) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.report_actions_dropdown {
  min-width: auto !important;
  width: 125px !important;
}

.assessment-details {
  flex-grow: 1;
  margin-right: 20px;
}

.assessments-column {
  width: 31%;
}

.service-plannings-column {
  width: 43%;
}

.monitorings-column {
  width: 26%;
}

.assessments-table-cell {
  height: 150px;
}

.sort-thread-btn {
  padding-left: 7px;
  padding-right: 7px;
}

@media print {
  .thread-item-body {
    overflow: hidden;
  }

  .comments-container {
    overflow: hidden;
  }
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

#planning-view-container {
  display: flex;
}

#planning-menu-container {
  height: 100%;
  width: 58px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #415465;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: scroll;
}

.glyphicon-selected {
  color: white;
}

.glyphicon-default {
  color: #97a0a8;
}

#planning-show-main {
  margin-left: 55px;
  margin-right: 5px;
}

#planning-menu-title {
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  color: #4f4f4f;
}

#planning-menu-list {
  font-size: 2em;
  display: block;
}

#address-phone-container {
  color: #4f4f4f;
  margin-top: 3px;
  font-size: 0.9em;
}

#resource-search-icon {
  display: none;
}

#close-resource-list {
  display: none;
}

li.planning-menu-items {
  font-size: 2em;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  height: 48px;
  width: 48px;
  margin: 2px 5px;
  line-height: 54px;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

li.planning-menu-items:hover {
  cursor: pointer;
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
}

li.planning-menu-selected {
  color: white;
  padding-left: -2px;
  background-color: rgba(0, 0, 0, 0.25);
}

.left-menu-nav-item {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  height: 48px;
  width: 48px;
  margin: 3px 5px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
}

.left-menu-nav-item:hover {
  cursor: pointer;
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
}

#link-to-general-settings.planning-menu-selected {
  color: white;
  background-color: rgba(0, 0, 0, 0.25);
}

#left-menu-nav {
  margin-bottom: 15px;
}

span.left-menu-icon {
  line-height: 48px;
}

.desktop-margin-top {
  margin-top: 20px;
}

#colibri-data-top-menu {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 5px 5px 12px;
}

#planning-container {
  display: flex;
  padding-left: 8px;
  padding-right: 8px;
}

.calendar {
  max-width: 100%;
}

#calendar {
  min-width: 100%;
}

.nurse_calendar {
  max-width: 100%;
}

#main-planning-header {
  margin-top: 7px;
  display: flex;
  flex-direction: row-reverse;
}

#planning-activity-module {
  padding-top: 10px;
  padding-left: 10px;
}

.planning-activity-module-title {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  display: block;
}

.planning-nurse-module-title {
  font-weight: bold;
  font-size: 1.5em;
}

.master-title {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  display: block;
}

#index-container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#index-table-container {
  margin-top: 12px;
}

#planning-top-right-action-container {
  text-align: right;
  display: flex;
}

#see-more-service-category-data:hover {
  cursor: pointer;
}

#planning-page-wrapper {
  position: absolute;
  left: 298px;
  top: 0px;
  width: calc(100vw - 298px);
}

#planning-page-wrapper.no-resources-width {
  width: calc(100vw - 58px);
  left: 58px;
}

#detail-container {
  display: flex;
  width: 100%;
}

#detail-planning-title {
  display: flex;
  justify-content: start;
  flex-grow: 1;
  margin-bottom: 15px;
}

#payable-title-wrapper {
  display: flex;
  padding-left: 12px;
  padding-bottom: 18px;
}

#color-select-selectized {
  position: absolute;
  left: -100000px;
}

#planning-header-container {
  margin-bottom: 15px;
  box-shadow: 0px 1px 2px #ccc;
  padding-top: 16px;
  padding-right: 10px;
}

#detail-planning-container {
  width: 100%;
  height: 100%;
}

#smartphone-planning-wrapper {
  height: 100%;
  overflow: scroll;
}

#resource-list-container {
  background-color: #415465;
  border-left: 0.5px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 240px;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 58px;
  overflow-x: hidden;
  padding-top: 20px;
  padding-left: 2px;
}

.invisible-scrollbar {
  overflow-y: scroll !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* Internet Explorer and Edge */
}

#settings-menu-container {
  height: 100%;
  width: 240px;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 58px;
  padding-top: 20px;
  background-color: #415465;
  border-left: 0.5px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: auto;
}

#resource-container {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}

#resource-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

#nurses-resource,
#patients-resource {
  padding-bottom: 30px;
}

#new-assign-mitei-nurses:hover {
  cursor: pointer;
}

.resource-subsection-title {
  margin-top: 8px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 2px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.6);
  color: white;
  font-size: 0.95em;
  font-weight: bold;
}

.resource-title-office,
.resource-title-patient,
.resource-accordion-header,
.document-accordion-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  margin-top: 20px;
  padding: 4px 4px;
}

.document-accordion-header {
  color: var(--bs-heading-color);
  margin-top: 0px;
}

.resource-subtitle-kana {
  color: white;
  cursor: pointer;
  font-size: 14px;
  line-height: 21px;
  padding: 4px 4px;
}

.resource-title-office:hover,
.resource-title-patient:hover,
.resource-accordion-header:hover {
  background-color: #00000040;
  border-top-left-radius: 4px;
}

.document-accordion-header:hover {
  background-color: transparent;
  border-top-left-radius: 0px;
}

.resource-subtitle-kana:hover {
  background-color: #00000040;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.resource-title-no-office {
  border-bottom: none;
  color: #a8b4be;
  font-size: 12px;
  font-weight: 600;
}

.resource-accordion-header,
.resource-accordion-subheader {
  cursor: pointer;
  transition: background 0.3s;
}

.resource-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.resource-list-element {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 21px;
  padding-bottom: 3px;
  padding-top: 3px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 8px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-x: hidden;
}

.double-line-divider {
  height: 4px;
  width: 100%;
  border-top: 0.5px solid rgba(255, 255, 255, 0.6);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.6);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: 0;
}

.office-group-section {
  margin: 10px 0;
}

.office-group-header,
.office-patients-header {
  color: white;
  cursor: default;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  padding: 4px;
}

.sidebar-clickable {
  cursor: pointer;
}

.office-patients-all {
  margin: 10px 0;
}

.office-no-group-header {
  color: #a8b4be;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.nurse-name-sidebar,
.patient-name-sidebar {
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  min-height: 27px;
  margin-left: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
}

.nurses-sidebar,
.patients-sidebar {
  margin-left: auto;
  margin-right: 0;
  width: 228px;
}

.patients-sidebar-kana-subsection {
  margin-left: auto;
  margin-right: 0;
  width: 215px;
}

.sidebar-clickable:hover,
.resource-selected {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #00000040;
}

.resource-title-office.resource-selected,
.resource-title-office:hover,
.resource-title-patient.resource-selected,
.resource-title-patient:hover {
  border-bottom-left-radius: 0px;
}

/* -------- */

.colibri-resource-title {
  margin-top: 8px;
  margin-left: 3px;
  margin-right: 3px;
  color: white;
  font-size: 1em;
}

.colibri-selectable-title {
  padding-left: 5px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  margin-right: 0px;
}

.colibri-selectable-title:hover {
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.colibri-resource-subtitle {
  padding-left: 4px;
  margin-top: 3px;
  margin-left: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1em;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.colibri-resource-subtitle:hover {
  color: white !important;
  background-color: rgb(0, 0, 0, 0.25);
}

.colibri-bottom-border {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.6);
}

.colibri-resource-menu-subcontainer {
  margin: 10px 0px 10px 6px;
}

/* will be deprecated from this line below */
/* p.resource-list-element,
a.planning-list-element.colorize,
.master-list-element {
  font-size: 13px;
  line-height: 18px;
  padding-bottom: 3px;
  padding-top: 3px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 8px;
  font-size: 0.9em;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  overflow-x: hidden;
} */

.resource-list-element:hover,
a.planning-list-element.colorize:hover {
  color: white;
  cursor: pointer;
  background-color: rgb(0, 0, 0, 0.25);
}

.resource-list-element.resource-selected {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

/* will be deprecated from this line above */

.colibri-resource {
  line-height: 18px;
  padding: 3px 0px 3px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom: 0;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.8);
}

.colibri-resource:hover {
  color: white;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.25);
}

.colibri-resource.resource-selected,
.colibri-resource-title.resource-selected {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

#master-mode {
  width: calc(100% + 30px);
  margin-left: -20px;
  margin-right: -10px;
  margin-top: -10px;
  z-index: 1;
  color: #4f4f4f;
  background-color: #beffb7;
  text-align: center;
  margin-bottom: 10px;
  min-height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#duplicate-button-wrapper {
  margin-top: 10px;
  margin-bottom: 5px;
}

#no-duplicate-button-wrapper {
  text-align: center;
}

#toggle-patients-nurses-wrapper {
  margin-bottom: 7px;
  margin-left: auto;
  margin-right: auto;
}

.appointment-comment {
  margin-bottom: 4px;
  font-size: 1em;
}

.chosen-container {
  font-size: 1em !important;
}

ul.chosen-results {
  font-size: 1em !important;
}

#delete-planning-action {
  margin-bottom: 30px;
  text-align: center;
}

.settings-list-element {
  font-size: 1.1em;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 2px;
  padding-top: 1px;
  padding-bottom: 2px;
  padding-left: 8px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.settings-list-element:hover {
  color: white;
  cursor: pointer;
  background-color: rgb(0, 0, 0, 0.25);
}

.settings-list-element:hover > a {
  color: white !important;
}

.settings-list-element.settings-list-element-selected {
  color: white;
  background-color: rgb(0, 0, 0, 0.25);
}

a.settings-list-url {
  display: block;
}

.settings-list-element.settings-list-element-selected > .settings-list-url {
  color: white !important;
}

ul.settings-list {
  font-size: 0.85em;
  padding-left: 8px;
  list-style: none;
}

#close-settings {
  display: none;
}

.settings-list-element {
  width: 100%;
}

#planning-header-submenu {
  display: none;
}

#nurse_filter_wrapper {
  min-width: 400px;
}

#nurse_filter_wrapper > .selectize-control {
  width: 400px;
}

.forty-percent-width {
  width: 40%;
}

.fifty-percent-width {
  width: 50%;
}

.sixty-percent-width {
  width: 60%;
}

#settings-menu-list {
  text-align: left;
  margin-top: 15px;
  margin-bottom: 30px;
}

#settings-container {
  position: absolute;
  left: 298px;
  top: 0px;
  width: calc(100vw - 298px);
  height: 100vh;
  overflow-y: scroll;
}

.settings-body {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
  height: auto;
  overflow-y: scroll;
}

.settings-list-header {
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: solid rgba(255, 255, 255, 0.6) 0.5px;
  margin-bottom: 7px;
  margin-left: 8px;
  margin-right: 8px;
  padding-bottom: 7px;
}

#planning-options {
  width: 90%;
  max-width: 550px;
  margin-bottom: 30px;
}

#printing-options {
  max-width: 300px;
}

.colibri-xs-title {
  color: #4f4f4f;
  font-size: 1.15em;
  font-weight: bold;
  padding-bottom: 5px;
}

ul#left-menu-ul {
  border-bottom: 0px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  font-size: 13px;
}

#resource-detail-header {
  display: flex;
  justify-content: space-between;
}

.resource-title-selectable:hover {
  cursor: pointer;
  color: white;
}

#nurse-conflict-confirm {
  display: none;
}

#appointment-comments-container {
  width: 100%;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.1em;
}

#appointment-comments {
  margin-left: 0px;
}

.appointment-comments-title {
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}

#description-container {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.colibri-form-subsection {
  width: 100%;
  margin-bottom: 10px;
  margin-top: 5px;
}

.colibri-form-subsection-title {
  margin-top: 15px;
  padding-bottom: 5px;
  border-bottom: 0.5px solid #ddd;
  margin-bottom: 4px;
  font-size: 1.15em;
  color: black;
}

.report-download-wrapper {
  margin-top: 5px;
}
#colibri-master-action-button {
  height: fit-content;
}

#colibri-master-action-button:hover {
  cursor: pointer;
}

.batch-action-button {
  position: fixed;
  text-align: center;
  vertical-align: middle;
  z-index: 6;
  width: 56px;
  height: 56px;
  border-radius: 50px;
  background: #fc7181;
  bottom: 80px;
  right: 60px;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.19),
    0 3px 3px rgba(0, 0, 0, 0.23);
}

.batch-action-button:hover {
  background: #f15365;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.25),
    0 6px 6px rgba(0, 0, 0, 0.22);
}

span.glyphicon.glyphicon-pencil.batch-action-pencil {
  color: white;
  line-height: 40px;
}

.master-reflect-option:hover {
  cursor: pointer;
  color: black !important;
}

p.master-reflect-option {
  margin-bottom: 5px;
}

.glyphicon-action-button {
  color: #85929e;
  font-size: 17px;
}

.colibri-action {
  height: 28px;
  line-height: 28px;
}

.colibri-action:hover {
  cursor: pointer;
}

.colibri-toggle-switch {
  display: flex;
  padding: 0px !important;
  margin: 0px !important;
  height: 40px;
}

.colibri-toggle-handle {
  padding: 0px !important;
  height: 34px;
  width: 6px;
  margin: 0px 2px 2px 2px;
}

.colibri-handle-left {
  border-radius: 4px 3px 3px 4px !important;
}

.colibri-handle-right {
  border-radius: 3px 4px 4px 3px !important;
}

.colibri-toggle-text-left {
  margin: 6px 12px 6px 18px;
}

.colibri-toggle-text-right {
  margin: 6px 18px 6px 12px;
}

#planning-header {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
}

#new-reminder-email:hover {
  cursor: pointer;
}

#print-button:hover {
  cursor: pointer;
}

/* styles for completion reports index */

.resource-details-subsection-title {
  margin-left: 5px;
  font-size: 1.2em;
  font-weight: bold;
}

.resource-details-subsection-body {
  color: #4f4f4f;
}

.write-completion-report {
  color: #4f4f4f;
}

.hamburger_menu {
  display: none;
}

td.report-caution {
  background-color: #ffff9b;
}

td.report-items {
  padding: 0px !important;
}

/* styles for left menu backdrop */

#menu-backdrop {
  display: none;
}

#settings-menu {
  display: flex;
}

.settings-list-icon {
  display: inline-block;
  font-size: 14px;
  width: 17px;
}

.coli-horizontal-menu-container {
  display: flex;
  justify-content: space-between;
}

p.setting-title {
  margin-bottom: 0;
  line-height: 1.5em;
}

#batch-action-menu {
  width: 140px;
  margin-left: -70px;
  margin-bottom: 15px;
  background-color: white;
  font-size: 0.85em;
  text-align: left;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

#batch-action-menu.batch-master-button {
  width: 90px;
  margin-left: -40px;
}

.fc-icon.glyphicon.glyphicon-calendar {
  font-size: 1.25em !important;
  margin-top: -3px;
}

.fc-icon.glyphicon.glyphicon-filter {
  font-size: 1.15em !important;
}

.fc-icon.glyphicon.glyphicon-calendar:hover,
.fc-icon.glyphicon.glyphicon-filter:hover {
  color: #4f5b66 !important;
}

#phone-action-container {
  display: none;
}

#phone-reflect-button-wrapper {
  display: none;
}

#planning-menu-wrapper {
  height: 100vh;
  overflow: hidden;
}

@media print {
  #index-container {
    width: 95%;
  }

  #index-table-container {
    margin: 0px;
  }

  #planning-page-wrapper {
    position: static;
    margin: 0px;
  }

  #calendar {
    z-index: 200;
  }

  #detail-container {
    max-width: none;
    width: 100vw !important;
  }

  #planning-container {
    width: calc(100vw - 298px) !important;
  }

  #resource-print-info {
    max-height: 40px;
  }

  #planning-header-container {
    box-shadow: none;
  }

  .payable-body {
    width: 100% !important;
  }

  #planning-menu-wrapper {
    height: auto !important;
    overflow: visible !important;
  }

  #settings-container {
    position: static;
    margin-left: 0px;
    width: 100vh;
    height: auto;
  }
}

@media screen and (orientation: portrait) {
  #detail-container {
    height: 100vh;
    overflow: visible;
  }

  #detail-planning-container {
    height: auto;
  }

  #colibri-batch-action-button {
    height: 90px;
    width: 90px;
    border-radius: 90px;
  }

  span.glyphicon.glyphicon-pencil.batch-action-pencil {
    line-height: 74px;
    font-size: 1.7em;
  }
}

.nursing-sidebar-office,
.nursing-sidebar-kana {
  display: flex;
  grid-gap: 7px;
  gap: 7px;
}

.nursing-sidebar-office.accordion-button,
.nursing-sidebar-kana.accordion-button {
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-inner-border-radius: none;
  --bs-accordion-active-color: none;
  --bs-accordion-active-bg: none;
  background-color: transparent;
  color: inherit;
  padding: 0;
}

.nursing-sidebar-office.accordion-button:not(.collapsed),
.nursing-sidebar-kana.accordion-button:not(.collapsed) {
  background-color: transparent;
}

.toggle-accordion {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.rotate-90 {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.nursing-sidebar-office-content.accordion-body,
.nursing-sidebar-kana-group-content.accordion-body {
  padding: 0;
}

.office-all-nurses,
.office-all-patients {
  height: 17px;
  width: 17px;
  font-size: 17px;
}
.post-container {
  padding: 5px;
}

.post-header {
  display: flex;
  justify-content: space-between;
}

.meeting-report-title {
  background-color: #f3f4f6;
  font-size: 15px !important;
  padding: 10px 10px 10px 10px !important;
  border-radius: 4px;
}

.meeting-report-div {
  color: #364153;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
}

.post-author-wrapper {
  font-size: 0.85em;
}

.post-timestamps-wrapper {
  color: grey;
  font-size: 0.85em;
}

.post-body {
  background-color: #defcfc;
  border-radius: 5px;
  padding: 3px 7px 5px 7px;
}

div.post-body > p {
  font-size: 0.85em;
}

.post-body.unread-post {
  background-color: #beffb7;
}

.post-body.unread-post.reminderable-post {
  background-color: #ffcad4;
}

.post-clickable-row:hover {
  cursor: pointer;
}

.unrepresentable-wrapper {
  width: 80px;
  height: 80px;
  border: 1.5px solid #eaecec;
  display: inline-block;
}

.unrepresentable-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.extension-icon-container {
  display: flex;
  align-items: center;
  padding-left: 2px;
}

.unrepresentable-filename {
  overflow-wrap: anywhere;
  font-size: 0.8em;
  height: 60px;
}

.unrepresentable-info-bar {
  background-color: #eaecec;
  height: 20px;
  display: flex;
  justify-content: space-between;
}

.extension-icon {
  font-size: 9px;
  color: white;
  padding: 2px 3px;
  height: 13px;
  line-height: 9px;
  border-radius: 3px;
}

.xls-extension {
  background-color: #1fa463;
}

.pdf-extension {
  background-color: #f40f02;
}

.ppt-extension {
  background-color: #ffd04b;
}

.doc-extension {
  background-color: #4688f4;
}

.default-extension {
  background-color: #5f6368;
}

.coli-thread-line {
  height: 10px;
  width: 22.5px;
  border-right: 1px solid #ccc;
  color: transparent;
}

#read-unread-menu {
  border-bottom: 2px solid #ccc;
}

.read-mark-container {
  line-height: 40px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.read-mark-container > .user-name {
  line-height: 45px;
}

.post-author-and-date {
  justify-content: left;
  margin-left: 5px;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.post-author-and-date > div {
  width: 100%;
  text-align: left;
}

@media print {
  table#post-table > tbody::after {
    content: "";
    display: block;
    page-break-after: always !important;
    page-break-inside: avoid;
    page-break-before: avoid;
  }

  tbody.break-page-on-print {
    page-break-after: always !important;
    break-after: page !important;
    page-break-after: always !important;
  }

  tr.post-clickable-row {
    page-break-inside: avoid !important;
  }

  td.td-post-body {
    page-break-inside: avoid !important;
  }

  .thread-post-body {
    page-break-inside: avoid !important;
  }

  #read-posts-container {
    width: 100% !important;
  }
}
#chosen-select-all-container {
    margin-left: 150px;
}

#chosen_target_services_chosen {
    width: 250px !important;
}

.verified-at-and-by {
    margin-left: 4px;
    color: #4f5b66;
    font-size: 0.80em;
}

.verified-at-and-by:hover {
    color: black;
    cursor: pointer;
    font-size:0.80em;
}
.coli-reactions-dropdown {
  border: 1px solid #ccc;
  background-color: #4f5b66 !important;
  border-radius: 3px;
  z-index: 100;
}

ul.coli-reaction-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  vertical-align: middle;
}

li.coli-reaction {
  height: 40px;
  width: 40px;
  border-radius: 4px;
  text-align: center;
  margin-left: 4px;
  margin-right: 4px;
  line-height: 40px;
}

li.coli-reaction:hover {
  background-color: #3b4d61;
  cursor: pointer;
}

.user-reactions-container {
  line-height: 45px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.reactions-index-link:hover {
  border-bottom: 1px dotted #0075c4;
  color: #0075c4 !important;
  cursor: pointer;
}

.reactions-index-link:hover .coli-text-charcoal {
  color: inherit;
}

.reaction-count {
  line-height: 23px;
}
.form-group.colibri-datetime-group {
	display: flex;
}

.colibri-datetime-input-container {
	display: flex;
}

.colibri-datetime-separator {
	margin-left: 2px;
	margin-right: 7px;
}

.appointment-occurrence {
	border-bottom: 5px;
	display: flex;
}

.appointment-occurrence-date {
	font-weight: bold;
}

.blue-background-form {
	background-color:  #fafafa;
	margin-left: 1px;
	margin-right: 1px;
	padding: 15px;
}

.recurring-appointment-form-container {
	background-color:#BEFFB7;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	margin-left:0.5px;
}

.recurring-appointment-form {
	background-color: white;
	padding: 12px;
	margin: 4px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.form-options-header {
	text-align: center;
	color: #4f5b66;
	padding-bottom: 7px;
}

#form-save {
	display: none;
}

#form-edit-list {
	display: none;
}

#recurring_appointment_nurse_id_chosen, #recurring_appointment_patient_id_chosen {
    width: 130px !important;
}
.pc-ee-column-header-wrapper {
  width: 210px;
  height: 99px;
}

.pc-ee-column-header {
  width: 176.5px;
  height: 75px;
  position: relative;
}

.pc-ee-column-header-top {
  display: flex;
  width: 176px;
  height: 40px;
  justify-content: space-between;
  position: absolute;
  top: 12px;
  left: 16.75px;
  align-items:center;
}

.header-top-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  text-align: center;
  width:90px;
  height:24px;
  color:black;
}

.header-top-checkbox-area {
  height: 40px;
  min-height: 28px;
  opacity: 1;
  grid-gap: 8px;
  gap: 8px;
  border-radius: 4px;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  display: flex;
}

.wished-slots-labels-checkbox {
  width: 24px;
  height: 24px;
  opacity: 1;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid #A8B4BE;
  border-width: 1px;
  border-radius: 4px;
  padding-top: 6px;
  padding-right: 4px;
  padding-bottom: 6px;
  padding-left: 4px;
  vertical-align:text-top;
  cursor: pointer;
}

.header-top-checkbox-label {
  height: 24px;
  font-family: Hiragino Sans;
  font-weight: 600;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0px;
  text-align: center;
  cursor: pointer;
  color: rgba(27, 38, 59, 1);
}

.pc-ee-column-switch-buttons {
  position: absolute;
  width: 160.5px;
  height: 26px;
  opacity: 1;
  top: 62px;
  left: 25.25px;
  border-radius: 6px;
  border-width: 0.5px;
  color:rgba(255, 255, 255, 1);
  background-color: rgba(168, 180, 190, 1);
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 2px;
}

.column-switch-button {
  width: 67.5px;
  height:100%;
  font-family: Hiragino Sans;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  flex: 1 1;
  cursor: pointer;
}

.column-switch-button-selected {
  background-color: white;
  border-radius: 4px;
  color:rgba(27, 38, 59, 1);
}

.wished-slots-group-label {
  height: 20px;
  font-family: Hiragino Sans;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #000000;
}

.chevron-for-wished-slots-label {
  height: 16px;
  color: #000000;
}

.wished-slots-group-label-container {
  height: 30px;
}

.wished-slots-nurse-label-container {
  height: 60px;
}

.wished-slots-nurse-label {
  height: 20px;
  font-family: Hiragino Sans;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: rgba(27, 38, 59, 1);
}

.wished-slots-date-label-container {
  width: 132px;
  height: 99px;
}

.wished-slots-date-label {
  width: 108px;
  font-family: Hiragino Sans;
  font-weight: 600;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0px;
  text-align: center;
  color: rgba(27, 38, 59, 1);
}

.wished-slot-calendar-container {
  height: 29px;
  grid-gap: 10px;
  gap: 10px;
  padding: 4px;
}

.wished-slot-calendar-title {
  font-weight: 400;
  font-size: 13px;
  line-height: 150%;
  letter-spacing: 0px;
}

.time-off-reason-select {
  width: 146px;
  padding-top: 12px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  border: 1px solid #D9DEE3;
  border-radius: 4px;
}

.time-off-reason-slot {
  width: 128px;
  height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  grid-gap: 8px;
  gap: 8px;
}

.time-off-reason-slot:not(:last-child) {
  border-bottom: 1px solid #A8B4BE;
}

.time-off-reason-check {
  color: #4F5B66;
}
.pattern-select-box {
  width: 52px;
  height: 52px;
  opacity: 1;
  grid-gap: 10px;
  gap: 10px;
  padding: 7px;
  background-color: #F5F7F8;
  border: 1px solid #D9DEE3;
  border-radius: 4px;
  cursor: pointer;
}

.pattern-select-title {
  width: 38px;
  height: 21px;
  opacity: 1;
  font-family: Hiragino Sans;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #1B263B;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.pattern-select-color-pill-preview {
  width: 38px;
  height: 6px;
  opacity: 1;
  border: 1px solid #FFFFFF;
  border-radius: 20px;
}

.shift-unconfirmed-frame {
  width: 108px;
  height: 29px;
  border: 2px solid;
  border-radius: 4px;
  opacity: 1;
  grid-gap: 10px;
  gap: 10px;
  padding: 4px;
  background-color: #F0FBFD;
  box-shadow: 0px 0px 5px 0px #4F5B6680;
  cursor: pointer;
}

.shift-unconfirmed-title,
.shift-confirmed-title {
  max-width: 100px;
  opacity: 1;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  color: #1B263B;
  text-align: center;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.shift-confirmed-frame {
  width: 108px;
  height: 29px;
  border-radius: 4px;
  border-width: 2px;
  opacity: 1;
  grid-gap: 10px;
  gap: 10px;
  padding: 4px;
  border: 2px solid #A8B4BE;
  cursor: pointer;
}

.pattern-unselected {
  opacity: 0.5;
  filter: grayscale(60%);
  transition: opacity 0.2s, filter 0.2s;
}
@media screen and (orientation: landscape) and (min-width: 900px) {
	/* layout only for desktop */
	#detail-container.no-resources-width {
		max-width: calc(100vw - 55px);
		width: calc(100vw - 55px);
	}

	#payable-container.no-resources-width {
		width: calc(100vw - 58px);
		left: 58px;
	}

    .fc-list-day-cushion.fc-cell-shaded {
        display: none;
    }

    .fc-list-day.fc-day.colibri-listday-no-events {
        display:none;
    }

    .fc-list-empty, .fc.fc-list-empty {
        background-color: white !important;
    }

    .fc-scroller.fc-scroller-liquid {
        background-color:white;
    }

    .fc-event.fc-list-event:hover {
        cursor: pointer;
    }
}
@media screen and (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
  /* login styles */

  #flash {
    position: fixed !important;
    top: calc(var(--sat) + 39px) !important;
    z-index: 35;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }

  .devise-input {
    font-size: 16px;
  }

  /* Home page layouts */

  #colibri-pages-nav {
    height: calc(var(--sat) + 70px) !important;
  }

  #top-subsection {
    flex-direction: column;
    max-height: none;
    height: 700px;
  }

  #top-subsection.product-top-section.handicap-top-section {
    height: auto !important;
  }

  #top-subsection.product-top-section {
    background-position: bottom;
  }

  #colibri-home-pink-pattern {
    display: none;
  }

  #colibri-home-pink-pattern-smartphone {
    display: none;
  }

  #colibri-home-pink-pattern-smartphone-landscape {
    margin-top: -300px;
    display: block !important;
  }

  #presentation-text {
    padding-top: 0px;
    width: 100%;
  }

  #presentation-images-banner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    z-index: 3;
  }

  #calendar-main-image {
    width: 470px;
  }

  .iphone-vertical-image {
    height: 330px !important;
  }

  #service-planning-top-image {
    height: 330px !important;
  }

  #main-image {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #colibri-main-image {
    width: 500px;
  }

  h2.colibri-home-presentation-title {
    text-align: center;
  }

  .colibri-home-subsection {
    padding: 45px;
  }

  .issue-container {
    max-width: none;
  }

  .issue-body {
    padding: 0 15px;
  }

  .home-subsection-detailed-content {
    flex-direction: column;
  }

  .colibri-subsection-content-container {
    flex-direction: column;
    margin: 0;
  }

  .colibri-subsection {
    padding: 25px 0;
  }

  /* general app-like styles */

  ::-webkit-scrollbar {
    display: none !important;
  }

  .turbolinks-progress-bar {
    visibility: hidden;
  }

  .btn.btn-desktop {
    display: none;
  }

  .btn.btn-phone-expand {
    width: 100%;
  }

  .phone_activity_container {
    z-index: 100;
    position: relative;
    top: 0;
    left: 0;
    width: calc(100vw - var(--sideInset));
    margin-left: calc(var(--navbarOnLeft)*var(--sideInset));
    margin-right: calc(var(--navbarOnRight)*var(--sideInset));
    height: 100vh;
    overflow: scroll;
    background-color: white;
  }

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

  .activity_header {
    height: calc(var(--sat) + 55px);
    width: calc(100% + 10px);
    margin-left: -5px;
    line-height: 55px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #2b384e;
    color: white;
    display: flex;
  }

  .activity_header_responsive {
    width: calc(100% - 50px);
    margin-left: 50px;
  }

  .activity_back_button {
    line-height: 55px;
    margin-right: 12px;
  }

  .activity_title {
    font-size: 1.3em;
    line-height: 55px;
  }

  #planning-top-right-action-container {
    display: none;
  }

  /* navigation styles */

  .main-page {
    padding-top: 0px !important;
  }

  #planning-menu-container {
    height: 100%;
    padding-top: 0px;
    background-color: #fdfdfd;
    border-right: 0.5px solid #ccc;
    padding-left: calc(var(--navbarOnLeft)*var(--sideInset));
    width: calc(var(--navbarOnLeft)*var(--sideInset) + 58px);
  }

  .glyphicon-default {
    color: rgb(180, 190, 199);
  }

  .glyphicon-selected {
    color: rgb(115, 120, 124);
  }

  li.planning-menu-items {
    color: rgb(180, 190, 199);
  }

  #more-menu-items-list {
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0px;
    margin-bottom: 0px;
  }

  #more-planning-menu-items {
    bottom: 18px;
    left: 68px;
  }

  .planning-menu-items.more-items {
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    height: 58px;
  }

  #planning-menu-list {
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  ul.nav-tabs {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  li.planning-menu-items {
    display: block;
  }

  #planning-horizontal-menu-container {
    display: none;
  }

  #phone-reflect-button-wrapper {
    bottom: 35px;
    right: calc(35px + var(--sar));
  }

  #colibri-nav-container {
    display: none;
  }

  #colibri-nav-right-list {
    display: none;
  }

  #colibri-mobile-nav {
    display: block;
    margin-right: 20px;
  }

  #close-nav-mobile {
    font-size: 3.5em;
    padding-bottom: 7px;
  }

  #colibri-mobile-menu {
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;
    position: fixed;
    top: 70px;
    right: 0;
    height: calc(100vh - 50px);
    width: 50vw;
    z-index: 30;
    background-color: white;
    padding: 7px 15px 7px 15px;
    overflow-y: auto;
  }

  #mobile-only-contact-form-button {
    display: block;
  }

  #mobile-menu-call-to-action {
    font-size: 1.1em;
  }

  .menu-item {
    border-bottom: 2px dotted #ccc;
  }

  .menu-item-title {
    display: block;
    padding: 10px;
    width: 100%;
    font-size: 1.1em;
    font-weight: 350;
  }

  .menu-sub-item {
    margin-left: 20px;
    padding: 4px;
  }

  .glyphicon.glyphicon-cog:hover,
  .glyphicon.glyphicon-home:hover,
  .glyphicon.glyphicon-calendar:hover {
    color: rgb(115, 120, 124) !important;
  }

  /* Contact form layouts */

  #contact-form-background {
    padding: 80px 0 40px 0;
    height: auto;
  }

  #colibri-contact-form-container {
    display: block;
    position: relative;
    margin-right: 10px;
  }

  #colibri-thank-you {
    margin: 10px;
  }

  /* Fullcalendar layouts */

  .fc-zoomOut-button,
  .fc-zoomIn-button {
    display: none !important;
  }

  .responsive-landscape-only {
    display: inline;
  }

  table.fc-list-table {
    border: none;
  }

  tr.fc-list-heading {
    border: none;
    border-bottom: 1px solid #ccc;
  }

  tr.fc-list-heading > td.fc-widget-header {
    background-color: white;
    text-align: center;
    border: none;
  }

  .fc-list-heading-main {
    font-size: 1.3em;
  }

  .colibri-fc-list-header {
    margin: 0;
    display: flex;
    justify-content: space-between;
    color: black;
    font-size: 1.1em;
  }

  .colibri-fc-list-title {
    font-size: 1.3em;
    line-height: 1.3em;
  }

  .fc-view.fc-listDay-view.fc-list-view {
    border: none;
  }

  div.colibri-fc-list {
    margin: 4px 0px 4px 0px;
    padding: 4px 12px 6px 12px;
    border-radius: 3px;
    color: black;
  }

  /* calendar layout styles */

  #planning-page-wrapper {
    width: calc(100vw - 58px);
    left: 58px;
    padding: 0px;
  }

  #detail-planning-container {
    width: 100%;
    margin: 0px 0px 150px 0px;
    padding-top: 0px;
  }

  #completion-reports-container {
    margin-left: 0px;
  }

  #detail-planning-title {
    justify-content: space-between;
    height: calc(var(--sat) + 50px);
    line-height: calc(var(--sat) + 50px);
    padding-top: calc(var(--insetsExist)*20);
    margin-bottom: 5px;
  }

  #planning-header {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    box-shadow: 0 4px 2px -2px #ccc;
    margin-bottom: 10px;
    display: block;
    background-color: #2b384e;
    color: white;
    border-bottom: 0.3px solid #2b384e;
    top: 0;
  }

  #plannning-header,
  #detail-container {
    padding-top: var(--sat);
  }

  #resource-detail-header {
    display: none;
  }

  #resource-details-wrapper {
    width: 100%;
  }

  #nurse_filter_wrapper {
    min-width: 0px !important;
    margin-right: 5px;
  }

  #nurse_filter_wrapper > .selectize-control {
    width: auto;
  }

  #nurse_resource_filter {
    min-width: none;
  }

  #resource-details-button {
    display: none !important;
    height: fit-content;
  }

  #planning-header-submenu {
    display: flex;
  }

  .header-submenu-item {
    text-align: center;
    flex-grow: 1;
    color: rgba(255, 255, 255, 0.5);
  }

  .header-submenu-item.header-submenu-item-selected {
    color: white;
    border-bottom: 3px solid white;
  }

  #close-resource-list {
    display: block;
    text-align: right;
    font-size: 1.2em;
    color: white;
  }

  #toggle-patients-nurses-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }

  .selectize-input {
    white-space: nowrap;
  }

  #resource-list-container {
    height: 100%;
    min-width: 150px;
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: var(--sat);
    padding-bottom: 60px;
    display: none;
    margin-left: var(--sal);
  }

  .accordion-menu-container-for-smartphone {
    width: fit-content !important;
  }

  #menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.6;
  }

  #resource-container {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hide;
    padding-bottom: 40px;
  }

  #resource-name-wrapper {
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 6px;
    margin-bottom: 5px;
    line-height: 48px;
    font-size: 1.3rem;
    font-weight: normal;
    color: white;
  }

  #nurses-resource {
    padding-bottom: 40px;
  }

  #patients-resource {
    padding-bottom: 40px;
  }

  #planning-nurse-information {
    display: flex;
    align-items: center;
  }

  #close-reports-index {
    display: none;
  }

  #display-completion-reports {
    display: none !important;
  }

  /* Hide batch action button */

  #colibri-batch-action-button {
    height: 60px;
    width: 60px;
    border-radius: 60px;
  }

  .batch-action-button {
    bottom: 35px;
    right: calc(35px + var(--sar));
  }

  span.glyphicon.glyphicon-pencil.batch-action-pencil {
    line-height: 45px;
    font-size: 1.2em;
    margin-bottom: -5px;
  }

  /* Hide print button */
  #print-button {
    display: none;
  }

  /* container styles */

  #payable-container {
    width: calc(100vw - var(--sideInset) - 58px);
    top: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-left: calc(var(--navbarOnLeft)*(var(--sideInset) + 58px));
    margin-right: calc(var(--navbarOnRight)*(var(--sideInset) + 58px));
    height: 100vh;
    padding-right: var(--sar);
  }

  #detail-container {
    display: block;
    width: 100%;
    margin-bottom: 0px;
    padding: 0px;
  }

  ul#left-menu-ul {
    justify-content: space-between;
  }

  ul#left-menu-ul.align-left {
    justify-content: start !important;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  ul#left-menu-ul.align-left > li.planning-menu-items {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  span.coli-bottom-menu-icon {
    line-height: 48px;
  }

  /* payable view styles */

  #resource-list-container {
    display: none;
  }

  #payable-menu {
    display: block;
  }

  .patient-left-panel {
    width: 100%;
  }

  .payable-body {
    margin-top: 10px;
  }

  #payable-title-wrapper {
    width: calc(100% + 10px);
    margin-left: -5px;
    height: calc(48px + var(--sat));
    z-index: 9;
    background-color: #2b384e;
    line-height: 48px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .colibri-xs-title.colibri-payable-title {
    font-size: 1.3em;
    font-weight: normal;
    color: white;
    line-height: 48px;
  }

  .patient-right-panel {
    display: none;
  }

  #payable-query {
    display: block;
    margin-top: 10px;
  }

  #appointments-by-category-detail {
    display: none;
  }

  #detail-planning-title {
    justify-content: left;
  }

  #payable-title {
    margin-top: 5px;
  }

  #payable-query {
    padding-left: 12px;
  }

  .planning-activity-module-title {
    padding-left: 4px;
  }

  .forty-percent-width {
    width: calc(100% - 10px);
  }

  .sixty-percent-width {
    width: calc(100% - 10px);
  }

  /* dashboard layout */

  .colibri-dashboard-container-row {
    overflow-x: auto;
    height: 70vh;
  }

  .posts-tab {
    margin-top: 0px !important;
  }

  #posts-body {
    padding-top: 10px;
    background-color: #f5f7f8;
    min-height: calc(100vh - 145px);
  }

  .mobile-thread-item-body.contract-thread-post {
    background-color: white;
    border: none;
    margin: 12px;
    width: calc(100% - 24px);
  }

  .commenter-top-thread {
    margin-top: -8px;
  }

  .commentor-and-thread-container > .commenter-bottom-thread {
    height: calc(100% - 18px) !important;
  }

  .comment-author-icon {
    left: -47px !important;
  }

  .comment-body
    > .thread-post-body
    > .comment-author-icon
    > .account-container {
    width: 32px;
    height: 32px;
  }

  .comment-body
    > .thread-post-body
    > .comment-author-icon
    > .account-container
    > .account-name {
    line-height: 32px;
  }

  #posts-index-container {
    margin-left: 50px;
    width: calc(100vw - 50px);
  }

  #payable-container.wide-width,
  #payable-container.wide-width.colibri-posts {
    width: calc(100vw - var(--sideInset) - var(--navbarOnLeft)*var(--sal)) !important;
    margin-left: calc(var(--navbarOnLeft)*var(--sideInset) + 58px) !important;
    margin-right: calc(var(--navbarOnRight)*(var(--sideInset) + 58px)) !important;
  }

  #payable-container {
    width: calc(100vw - var(--sideInset) - var(--navbarOnLeft)*var(--sal)) !important;
    margin-left: calc(var(--navbarOnLeft)*var(--sideInset) + 58px) !important;
    margin-right: calc(var(--navbarOnRight)*(var(--sideInset) + 58px)) !important;
  }

  /* settings page */

  #patients-excel {
    display: none;
  }

  .hamburger_menu {
    display: inline-block;
    margin-right: 6px;
  }

  #logout {
    display: inline-block;
  }

  p.setting-title {
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 48px;
    font-weight: normal;
    font-size: 1.3em;
  }

  #settings-menu-container {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 30;
    top: 0px;
    left: 0px;
    padding-top: calc(var(--sat) + 10px);
    background-color: #415465 !important;
    border: 0.5px solid #415465;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    display: none;
  }

  #settings-container {
    padding: 0px 5px 5px 5px;
    position: absolute;
    padding: 0px;
    left: 0px !important;
    width: calc(100vw - var(--sideInset) - var(--navbarOnLeft)*var(--sal)) !important;
    margin-left: calc(var(--navbarOnLeft)*var(--sideInset) + 58px) !important;
    margin-right: calc(var(--navbarOnRight)*(var(--sideInset) + 58px)) !important;
  }

  #planning-header-container {
    padding-top: 0px;
    padding-right: 0px;
  }

  #settings-menu {
    align-items: center;
  }

  #settings-menu-list {
    margin-top: 0px;
  }

  #index-table-container {
    margin-top: 0px;
  }

  .edit_corporation {
    margin-bottom: 70px;
  }

  .edit_printing_option {
    margin-bottom: 70px;
  }

  #planning-options {
    max-width: none;
    width: 100%;
    margin-bottom: 0px;
  }

  #printing-options {
    max-width: none;
  }

  /* Completion Reportslayouts */

  #patient-completion-reports-body {
    margin-top: 15px;
  }

  #handicap-image-container {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .switch-tab {
    margin-top: 20px;
  }

  .settings-body.with-mb-top-margin,
  #settings-container.with-mb-top-margin {
    margin-top: 0px;
  }

  .settings-body {
    padding-right: calc(10px + var(--sar));
  }

  .padding-top-adjusted-for-system-bars {
    padding-top: var(--sat);
  }

  #background-task {
    z-index: 99 !important;
    bottom: var(--sab) !important;
    padding-top: var(--sat) !important;
  }

  #planning-page-wrapper {
    width: calc(100vw - 58px - var(--sal) - var(--sar));
    left: calc(58px + var(--sal));
  }

  .width-adjusted-mobile-for-right-inset {
    width: calc(100% - var(--sar) - 10px);
  }

  .pc-shift-page-header-title {
    height: inherit;
    margin-left: 0 !important;
  }

  #coli-main-frame.with-top-border-pc-only {
    border-top: none;
  }
}
@media screen and (orientation: portrait) and (max-width: 743px) {
  :root {
    /* On Android, these values are overwritten with the correct values for the device in the Kotlin code
    insetsExist = keeps track of whether we have to account for the system bars
    sab = height of the safe area bottom
    sat = safe area top
    sal = safe area left
    sar = safe area right
    sideInset = on landscape, the side with the navigation bar
    navbarSide = side the system navigation bar is on
    */
    --insetsExist: 0;
    --sab: 0px;
    --sabWithoutKeyboard: 0px; /* height of bottom area when keyboard is not shown */
    --sat: 0px;
    --sal: 0px;
    --sar: 0px;
    --sideInset: 0px;
    --navbarOnLeft: 0; /* 1 if navbar on left, 0 otherwise */
    --navbarOnRight: 0; /* 1 if navbar on right, 0 otherwise */
  }
  /* login styles*/

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }

  #flash {
    position: fixed !important;
    top: calc(var(--sat) + 60px) !important;
    z-index: 35;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  #colibri-pages-nav {
    height: calc(var(--sat) + 70px) !important;
  }

  .devise-input {
    font-size: 16px;
  }

  /* styles for home page */

  .founders-container {
    flex-direction: column;
  }

  #colibri-clients-regular {
    display: none !important;
  }

  #colibri-clients-responsive {
    display: block !important;
  }

  .colibri-home-centered-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bloglike-subsection-image-container {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
  }

  #telework-image {
    width: 100%;
  }

  #presentation-text {
    font-size: 1.5em;
  }

  #colibri-nav-container {
    display: none;
  }

  #colibri-nav-right-list {
    display: none;
  }

  #colibri-mobile-nav {
    display: block !important;
    margin-right: 20px;
  }

  #colibri-mobile-menu {
    border-top: 2px solid #ccc;
    position: fixed;
    top: 70px;
    height: calc(100vh - 70px);
    width: 100vw;
    z-index: 30;
    background-color: white;
    padding: 15px;
  }

  .menu-item {
    border-bottom: 2px dotted #ccc;
  }

  .menu-item-title {
    display: block;
    padding: 10px;
    width: 100%;
    font-size: 1.5em;
    font-weight: 350;
  }

  .menu-sub-item {
    margin-left: 20px;
    padding: 4px;
  }

  .colibri-security-head {
    flex-direction: column;
  }

  #close-nav-mobile {
    font-size: 3.5em;
    padding-bottom: 7px;
    line-height: 70px;
    height: 70px;
  }

  #more-menu-items-list {
    display: flex;
    flex-direction: column;
    padding-left: 0px;
  }

  #more-planning-menu-items {
    bottom: calc(70px + var(--sabWithoutKeyboard));
    right: 12px;
  }

  .planning-menu-items.more-items {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .colibri-home-presentation-title.smartphone-centered {
    text-align: center;
  }

  #colibri-issues {
    flex-direction: column;
    margin: 0;
  }

  #issues-subsection {
    background-color: #f3f7fe;
    margin-top: 15px;
  }

  #colibri-issues-parent {
    margin-top: 20px;
  }

  .story-container {
    max-width: none;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }

  .home-subsection-detailed-content {
    flex-direction: column;
  }

  .home-subsection-content {
    padding-top: 0px;
  }

  .detailed-content-container {
    margin: 30px 0 0 0;
  }

  #blog-link-container {
    display: none;
  }

  #pages-nav-right {
    display: flex;
    justify-content: center;
  }

  img#colibri-logo {
    height: 50px;
    margin-left: 3px;
    margin-top: 3px;
    margin-right: -8px;
  }

  #nav-contact-button {
    display: none;
  }

  #presentation-text {
    width: 100%;
    padding-top: 0;
  }

  #colibri-home-pink-pattern,
  #colibri-home-pink-pattern-5 {
    display: none;
  }

  #colibri-home-pink-pattern-smartphone-landscape {
    display: none;
  }

  #colibri-home-pink-pattern-smartphone {
    z-index: 0;
    display: block !important;
    width: 100%;
  }

  #colibri-home-pink-pattern-smartphone.top-image {
    margin-top: -330px;
  }

  #colibri-home-pink-pattern-smartphone.pink-pattern-reporting {
    margin-top: -450px;
  }

  #colibri-home-pink-pattern-smartphone.pink-pattern-service-planning {
    margin-top: -500px;
  }

  #customer-stories-bg {
    display: none;
  }

  #service-planning-top-image {
    max-height: 55vh;
  }

  #colibri-home-pink-pattern-smartphone.pink-pattern-calendar {
    margin-top: -450px;
  }

  .iphone-vertical-image {
    max-height: 550px !important;
  }

  #main-smartphone-image {
    height: 550px;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
  }

  #main-smartphone-image.calendar-smartphone {
    height: 500px;
  }

  #calendar-main-image {
    display: none !important;
  }

  #calendar-tablet-image {
    display: flex !important;
    max-height: 500px;
  }

  #calendar-tablet-image.calendar-responsive-image  {
    display: flex !important;
  }

  .colibri-arguments-wrapper {
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
  }

  .colibri-argument-container {
    margin-bottom: 30px;
  }

  .colibri-argument-container.three-items,
  .colibri-argument-container.four-items {
    width: 100%;
  }

  #colibri-features-container {
    justify-content: center;
  }

  .colibri-feature-icon {
    margin-left: auto;
    margin-right: auto;
  }
  .colibri-feature-title {
    font-size: 1.1em;
    font-weight: 550;
  }
  .colibri-feature-container {
    width: 80%;
  }

  .add-margin-left-md {
    margin-left: 0;
  }

  #presentation-images-banner {
    z-index: 3;
    margin-top: 40px;
    height: 550px;
  }

  #top-subsection {
    display: block;
    margin-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
    z-index: 3;
    max-height: none;
    height: 1000px !important;
  }

  #top-subsection.product-top-section.handicap-top-section {
    height: auto !important;
  }

  #top-subsection.product-top-section {
    background-image: none;
  }

  #service-types-section {
    z-index: 3;
  }

  #main-image-responsive {
    display: block !important;
    z-index: 0;
  }

  .smartphone-portrait-only {
    display: block !important;
  }

  .all-but-smartphone-portrait {
    display: none !important;
  }

  #main-image {
    display: none !important;
  }

  .margin-md {
    margin: 0px;
  }

  #colibri-issues-head {
    margin-bottom: 20px;
  }

  .issue-container {
    margin: 10px;
    margin-bottom: 20px;
    max-width: none;
    width: calc(100% - 20px);
  }

  #presentation-images-banner {
    width: 100%;
    margin-bottom: 40px;
    z-index: 0;
    display: flex;
    justify-content: center;
  }

  #colibri-presentation-text {
    font-size: 0.7em;
  }

  #presentation-text {
    z-index: 5;
    display: block !important;
  }

  .colibri-home-presentation-title {
    font-size: 1.6em;
    line-height: 1.6em;
  }

  .colibri-home-subsection {
    padding: 50px 20px 50px 20px;
  }

  #shift-issue-details {
    margin-top: 15px;
    width: 100%;
    max-width: none;
  }

  .colibri-subsection-content-container {
    flex-direction: column;
    margin: 0;
  }

  .colibri-subsection {
    padding: 0;
    margin-bottom: 45px;
  }

  #heroku-and-salesforce {
    flex-direction: column;
  }

  #mobile-only-contact-form-button {
    display: block;
  }

  #mobile-menu-call-to-action {
    font-size: 1.3em;
  }

  #colibri-security-text {
    width: 100%;
  }

  #security-icon-container {
    width: 100%;
  }

  footer {
    background-color: #151e3f;
    color: white;
    padding: 35px 20px 80px 20px;
  }

  #colibri-footer {
    padding-top: 20px;
    flex-direction: column-reverse;
  }

  #footer-brand-container {
    width: 100%;
    max-width: none;
    margin-top: 40px;
  }

  .footer-colibri-information-title {
    font-size: 1.7em;
  }

  #footer-colibri-information-container {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    margin-left: 17px;
    font-size: 1.2em;
  }

  .footer-section {
    margin-bottom: 30px;
  }

  .footer-section-container {
    margin-top: 10px !important;
    margin-bottom: 15px;
  }

  /* styles for contact page */
  #contact-form-background {
    height: auto;
    padding: 70px 10px 50px 10px;
    flex-direction: column;
  }

  #contact-form-image-container {
    width: 60%;
  }

  #contact-form-login-button {
    display: none;
  }

  #thank-you-container {
    flex-direction: column;
    align-items: center;
  }

  #thank-you-container > div {
    margin-bottom: 25px;
  }

  /* styles for login page */

  .colibri-devise-form {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
    margin-bottom: 40px;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
  }

  /* styles for navigation bar */
  #header-navigation {
    display: none;
  }

  .main-page {
    padding-top: 0px !important;
  }

  /* general app-like styles */

  ::-webkit-scrollbar {
    display: none !important;
  }

  .turbolinks-progress-bar {
    visibility: hidden;
  }

  .btn.btn-phone-expand {
    width: 100%;
  }

  .btn.btn-desktop {
    display: none;
  }

  .phone_activity_container {
    width: 100vw;
    height: 100dvh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .activity_header {
    height: calc(55px + var(--sat));
    background-color: #2b384e;
    color: white;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .activity_back_button {
    line-height: 55px;
  }

  .activity_back_icon {
    line-height: 55px;
    margin-right: 12px;
  }

  .activity_title {
    font-size: 1.3em;
    line-height: 55px;
  }

  .activity_body {
    padding-bottom: var(--sab);
    background-color: white;
  }

  .coli-report-container {
    margin-bottom: 6px;
  }

  .coli-report-header {
    display: flex;
    justify-content: space-between;
  }

  .coli-report-publisher {
    font-size: 0.85em;
  }

  .coli-report-published-at {
    font-size: 0.85em;
  }

  .coli-report-body {
    background-color: #defcfc;
    padding: 3px 8px 3px 8px;
    border-radius: 3px;
  }

  /* styles for planning left menu */

  #plannning-header {
    padding-top: var(--sat);
  }

  #planning-menu-container {
    height: calc(75px + var(--sabWithoutKeyboard));
    width: 100%;
    position: fixed;
    top: auto;
    bottom: 0 !important;
    left: 0;
    background-color: #fdfdfd;
    border-top: 0.5px solid #ccc;
    z-index: 15;
    padding-top: 0;
  }

  #planning-menu-list {
    height: 75px;
  }

  ul#left-menu-ul {
    height: 60px;
    margin-bottom: 15px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  ul#left-menu-ul.align-left {
    padding-left: 0px;
    padding-right: 0px;
    flex-direction: row;
    align-items: start !important;
    justify-content: left !important;
  }

  ul#left-menu-ul.align-left > li.planning-menu-items {
    margin-left: 20px;
    margin-right: 20px;
  }

  .glyphicon-default {
    color: rgb(180, 190, 199);
  }

  .glyphicon-selected {
    color: rgb(115, 120, 124);
  }

  li.planning-menu-items {
    color: rgb(180, 190, 199);
    padding-top: 0px;
    width: 48px;
    text-align: center;
    margin-top: 0px;
  }

  span.coli-bottom-menu-icon {
    line-height: 48px;
  }

  .nav-tabs {
    border-bottom: 0px !important;
  }

  ul.nav-tabs {
    list-style: none;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0;
    padding-top: 0;
  }

  li.planning-menu-items {
    width: 48px !important;
    padding-bottom: 0;
    display: block;
    float: left !important;
    width: auto;
  }

  li.planning-menu-items:hover {
    color: rgb(115, 120, 124);
  }

  .glyphicon.glyphicon-cog:hover,
  .glyphicon.glyphicon-home:hover,
  .glyphicon.glyphicon-calendar:hover {
    color: rgb(115, 120, 124) !important;
  }

  /* styles dashboard and other content container */

  #smartphone-planning-wrapper {
    padding-top: 10px;
  }

  #colibri-dashboard-container {
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 3px;
    margin-bottom: 80px;
  }

  .colibri-dashboard-big-container {
    height: auto;
    flex-direction: column-reverse;
  }

  .colibri-dashboard-container-column-large {
    width: 100%;
    height: 140vh;
  }

  .colibri-dashboard-container-column-narrow {
    width: 100%;
    height: 70vh;
  }

  #planning-page-wrapper {
    left: 0 !important;
    width: 100vw !important;
  }

  #resource-list-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-width: 150px;
    width: 10vw;
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: var(--sat);
    padding-bottom: 0px;
    display: none;
  }

  .accordion-menu-container-for-smartphone {
    width: fit-content !important;
    position: relative;
  }

  #detail-container {
    display: block;
    position: absolute;
    width: 100%;
    max-width: none;
    top: 0;
    left: 0;
    margin: 0px;
    margin-bottom: 150px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1px;
  }

  p.setting-title {
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 48px;
    color: white;
    font-size: 1.3em;
    font-weight: normal;
  }

  #planning-container {
    margin: 5px;
    padding-left: 0px;
    padding-right: 0px;
    width: calc(100% - 10px);
    height: calc(100vh - 167px);
    margin-bottom: calc(80px + var(--sabWithoutKeyboard));
  }

  #coli-main-frame {
    margin-top: 15px;
    padding-bottom: 5px;
  }

  #planning-container.office-container,
  #planning-container.smaller-top-margin {
    height: calc(100vh - 137px) !important;
  }

  .fc-view-harness.fc-view-harness-passive {
    border-top: 0.5px solid rgb(221, 221, 221);
    border-bottom: 0.5px solid rgb(221, 221, 221);
  }

  button.fc-today-button.fc-button.fc-button-primary.toggle-today-button {
    display: none !important;
  }

  button.fc-today-button.btn.btn-primary {
    display: none !important;
  }

  #detail-planning-container {
    width: 100%;
    margin: 92px 0px 130px 0px;
    padding-top: 3px;
  }

  #detail-planning-container.smaller-top-margin,
  #detail-planning-container.office-planning-container {
    margin: 45px 0px 120px 0px !important;
  }

  #completion-reports-container {
    margin-left: 0px;
    margin-bottom: 200px;
    margin-top: 10px;
  }

  #payable-container {
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    margin: 0px 0px 120px 0px;
    padding: 0px;
    padding-top: calc(55px + var(--sat));
    padding-bottom: calc(75px + var(--sab));
    display: block;
    position: absolute;
  }

  /* Hide batch action button */

  #colibri-batch-action-button {
    height: 60px;
    width: 60px;
    border-radius: 60px;
  }

  .batch-action-button {
    bottom: calc(80px + var(--sabWithoutKeyboard));
    right: 20px;
  }

  span.glyphicon.glyphicon-pencil.batch-action-pencil {
    line-height: 45px;
    font-size: 1.2em;
    margin-bottom: -5px;
  }

  /* Hide print button */
  #print-button {
    display: none;
  }

  /* Other planning and master related styles */

  #planning-top-right-action-container {
    line-height: 48px;
    margin-bottom: 0px;
    padding-top: 5px;
    vertical-align: middle;
    display: none;
  }

  /* Fullcalendar custom smartphone layouts */

  .fc-zoomOut-button,
  .fc-zoomIn-button {
    display: none !important;
  }

  .fc-scroller-harness > .fc-scroller {
    overflow-x: scroll !important;
    height: auto !important;
  }

  table.fc-list-table {
    border: none;
  }

  tr.fc-list-heading {
    border: none;
    border-bottom: 1px solid #ccc;
  }

  tr.fc-list-heading > td.fc-widget-header {
    background-color: white;
    text-align: center;
    border: none;
  }

  .fc-list-heading-main {
    font-size: 1.3em;
    margin-top: 5px;
    text-align: center;
  }

  .colibri-fc-list-header {
    margin: 0;
    display: flex;
    justify-content: space-between;
    color: black;
    font-size: 1.1em;
  }

  .colibri-fc-list-title {
    font-size: 1.2em;
    line-height: 1.2em;
  }

  .fc-view.fc-listDay-view.fc-list-view {
    border: none;
  }

  div.colibri-fc-list {
    margin: 4px 0px 4px 0px;
    padding: 4px 12px 7px 12px;
    border-radius: 3px !important;
    color: black;
  }

  .responsive-landscape-only {
    display: none;
  }

  /* Calendar view layouts */

  #planning-header {
    position: fixed;
    top: 0;
    z-index: 9;
    width: 100vw;
    display: block;
    border-bottom: 0.3px solid #2b384e;
    padding-left: 0px;
  }

  #planning-horizontal-menu-container,
  #colibri-horizontal-menu {
    display: none;
  }

  #planning-header-container {
    display: block;
    padding-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
  }

  #planning-header-submenu {
    display: flex;
    height: 38px;
    line-height: 38px;
  }

  #phone-reflect-button-wrapper {
    bottom: calc(var(--sabWithoutKeyboard) + 80px);
  }

  .selectize-input {
    white-space: nowrap;
  }

  .header-submenu-item {
    text-align: center;
    flex-grow: 1;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.5);
  }

  .header-submenu-item.header-submenu-item-selected {
    color: white;
    border-bottom: 3px solid white;
  }

  button#resource-details-button {
    display: none !important;
  }

  #resource-name-wrapper {
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 6px;
    margin-bottom: 5px;
    font-size: 1.3rem;
    line-height: 48px;
    color: white;
    font-weight: normal;
  }

  #resource-search-icon {
    display: inline;
  }

  #patient-dashboard {
    display: block;
    height: auto;
  }

  .patient-dashboard-panel {
    width: 100%;
    margin-bottom: 5px;
    height: auto;
  }

  #toggle-patients-nurses-wrapper {
    margin-left: 3px;
  }

  #close-resource-list {
    display: block;
    text-align: right;
    font-size: 1.2em;
    color: white;
    margin-right: 6px;
  }

  #toggle-patients-nurses-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }

  #menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.6;
  }

  #resource-list-container {
    height: 100vh;
  }

  #resource-container {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 70px;
  }

  #nurses-resource {
    padding-bottom: 70px;
  }

  #patients-resource {
    padding-bottom: 70px;
  }

  #planning-nurse-information {
    display: flex;
    color: white;
  }

  #resource-details-panel {
    width: 100%;
    height: calc(100vh - 150px);
    overflow-y: scroll;
    position: absolute;
    bottom: 55px;
    z-index: 11;
    border: 0px;
  }

  #resource-details-wrapper {
    width: 100%;
  }

  #resource-detail-body {
    height: auto;
  }

  #resource-detail-header {
    display: none;
  }

  #close-reports-index {
    display: none;
  }

  #display-completion-reports {
    display: none !important;
  }

  /* payable view styles */

  #appointments-by-category-detail {
    display: none;
  }

  #payable-menu {
    display: block;
  }

  .patient-left-panel {
    width: 100%;
  }

  .patient-right-panel {
    display: none;
  }

  #payable-query {
    display: block;
    margin-top: 10px;
  }

  .patient-dashboard-panel-body {
    height: auto;
  }

  .payable-body {
    padding: 5px;
  }

  #payable-title-wrapper {
    position: fixed;
    top: 0px;
    height: calc(48px + var(--sat));
    width: 100vw;
    z-index: 9;
    background-color: #2b384e;
    line-height: 48px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .colibri-xs-title.colibri-payable-title {
    font-size: 1.3em;
    font-weight: normal;
    color: white;
    line-height: 48px;
  }

  #detail-planning-title {
    margin: 0px;
    justify-content: space-between;
    height: calc(var(--sat) + 50px);
    line-height: calc(var(--sat) + 50px);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: calc(var(--insetsExist)*20);
  }

  #nurse_filter_wrapper {
    margin: 5px;
    min-width: 0px !important;
  }

  #nurse_filter_wrapper > .selectize-control {
    width: auto;
  }

  #payable-title {
    margin-top: 5px;
  }

  #payable-query {
    padding-left: 12px;
  }

  .planning-activity-module-title {
    padding-left: 4px;
  }

  .forty-percent-width {
    width: calc(100% - 10px);
  }

  .sixty-percent-width {
    width: calc(100% - 10px);
  }

  .colibri-dashboard-container-row {
    overflow-x: auto;
    height: auto;
    flex-direction: column;
  }

  .post-container {
    margin-bottom: 10px;
  }

  #posts-lookup-button3 {
    bottom: calc(80px + var(--sabWithoutKeyboard)) !important;
  }

  #admin-corporation-name-container {
    top: calc(var(--sat) + 30px);
  }

  /* Settings view layouts */

  #patients-excel {
    display: none;
  }

  .hamburger_menu {
    display: inline-block;
    margin-right: 6px;
  }

  #logout {
    display: inline-block;
  }

  #settings-menu-container {
    height: 100vh;
    width: 200px;
    position: fixed;
    z-index: 30;
    top: 0px;
    left: 0px;
    padding-top: calc(var(--sat) + 10px);
    background-color: #415465 !important;
    border: 0.5px solid #415465;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    display: none;
  }

  #settings-menu {
    padding-top: 0 !important;
    align-items: center;
  }

  #settings-container {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    left: 0px !important;
    width: 100% !important;
  }

  .settings-body {
    margin-top: 5px;
    padding: 8px;
    margin-bottom: calc(60px + var(--sab));
  }

  .settings-body.with-mb-top-margin,
  #settings-container.with-mb-top-margin {
    margin-top: calc(52px + var(--sat));
  }

  #planning-options {
    width: 100%;
    max-width: none;
    margin-bottom: 30px;
  }

  #settings-menu-list {
    margin-top: 0px;
  }

  #index-table-container {
    margin-top: 10px;
  }

  .edit_corporation {
    margin-bottom: 70px;
  }

  #printing-options {
    max-width: none;
    width: 100%;
  }

  .edit_printing_option {
    margin-bottom: 70px;
  }

  .patients-submenu {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }

  #detail-planning-container {
    height: auto;
    overflow-y: visible;
  }

  /* Forms layouts */

  #appointment_starts_at_4i:before {
    content: "\A";
  }

  .colibri-datetime-input-container {
    flex-direction: column;
  }

  #toggle-detailed-minutes-container {
    margin-top: 10px;
  }

  .colibri-datetime-separator {
    display: none;
  }

  .colibri-date-input {
    margin-bottom: 4px;
  }

  .btn-margin-bottom {
    margin-bottom: 3px;
  }

  /* Completion Reports layouts */

  #patient-completion-reports-body {
    margin-top: 40px;
    margin-bottom: 90px;
  }

  #handicap-image-container {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 25px;
    padding-bottom: 20px;
  }

  #handicap-image-container.smartphone-pink-bg {
    background: linear-gradient(170deg, #ffffff 50%, #fce7ea 50%);
  }

  #handicap-image-container.group-home-container {
    margin-top: 0px;
    padding-bottom: 40px;
    padding-top: 40px;
    background: linear-gradient(170deg, #ffffff 35%, #fce7ea 35%);
  }

  .reaction {
    min-width: 21px;
  }

  .comment-author {
    min-width: 75px;
    line-height: 15px;
    max-height: 45px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines */
    -webkit-box-orient: vertical;
  }

  .edit-btn {
    min-width: 64px;
  }

  #detail-planning-title {
    background-color: inherit;
  }

  .nurses-sidebar,
  .patients-sidebar {
    height: calc(100vh - var(--sab));
    overflow: scroll;
  }

  .padding-top-adjusted-for-system-bars {
    padding-top: var(--sat);
  }

  .padding-top-adjusted-for-system-bars-ios-only {
    /* adjusted here means taking into account the system bar at the top */
    padding-top: 5px;
  }

  #background-task {
    z-index: 99 !important;
    bottom: var(--sab) !important;
    padding-top: var(--sat) !important;
  }

  .modal-dialog {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
  }

  #lookup-fields-container {
    padding-bottom: calc(var(--sab) + 10px) !important;
  }

  .daterangepicker-bottom-padding-adjustment-mobile {
    padding-bottom: calc(var(--sab) + 10px) !important;
  }

  .pc-shift-page-header-title {
    height: inherit;
    margin-left: 0 !important;
  }

  #coli-main-frame.with-top-border-pc-only {
    border-top: none;
  }

  .wished-slots-group-label {
    height: 13px;
    font-size: 13px;
    line-height: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .wished-slots-group-label-container {
    height: 20px;
  }

  .wished-slots-nurse-label-container {
    height: 30px;
  }

  .wished-slots-nurse-label {
    height: 15px;
    font-size: 15px;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .fc-resourceTimelineMonth-view .fc-datagrid-cell {
    width: 52px !important;
  }
}
@media screen and (min-width: 743px) and (max-width: 1032px) and (orientation: portrait) {
  #top-subsection {
    padding: 80px 30px 70px 30px;
    justify-content: space-between;
    margin-bottom: -60px !important;
  }

  #top-subsection.handicap-top-section {
    height: 350px !important;
    margin-bottom: 10px !important;
  }

  #top-subsection.product-top-section {
    padding-bottom: 20px;
    background-position: 0% 40%;
  }

  #handicap-image-container {
    padding-top: 40px;
  }

  #main-image-responsive {
    display: none !important;
  }

  #main-image {
    display: block !important;
    margin-left: -100px;
  }

  h2.colibri-home-presentation-title {
    width: 120%;
  }

  #presentation-images-banner {
    padding-top: 30px;
    width: 33%;
  }

  #presentation-text {
    padding: 0;
    width: 62%;
  }

  .colibri-home-subsection {
    padding: 50px 20px 30px 20px;
  }

  .home-subsection-content.margin-md {
    margin: 0px;
    padding: 20px;
  }

  #colibri-issues {
    flex-wrap: wrap;
    justify-content: center;
  }

  #issues-subsection {
    padding-left: 10px;
    padding-right: 10px;
  }

  .issue-container {
    margin: 10px;
    min-width: 300px;
  }

  .nav-tablet-hidden {
    display: none;
  }

  #heroku-and-salesforce {
    flex-direction: column;
  }

  .detailed-content-container {
    margin: 15px;
  }

  #colibri-contact-form-container {
    margin-right: 10px;
  }

  #contact-form-image-container {
    max-width: 280px;
  }

  #colibri-batch-action-button {
    height: 65px;
    width: 65px;
    border-radius: 65px;
  }

  span.glyphicon.glyphicon-pencil.batch-action-pencil {
    line-height: 45px;
    font-size: 1.2em;
    margin-bottom: -5px;
  }

  .story-container {
    margin: 10px;
    margin-bottom: 25px;
  }

  .colibri-homepage-subsection-title {
    text-align: center;
    font-size: 2em;
  }

  .colibri-homepage-subsection-title.add-margin-left-md {
    margin-left: 0px;
  }

  #colibri-home-pink-pattern-5 {
    margin-top: -65vw;
  }

  #calendar-main-image {
    display: none !important;
  }

  #calendar-tablet-image {
    display: block !important;
  }

  .iphone-vertical-image {
    max-height: 350px !important;
    margin-top: 40px;
  }

  .attendance-summary-container {
    width: 100%;
  }

  .attendance-action-container {
    flex-direction: column-reverse;
  }

  .attendance-date-query-container {
    justify-content: left !important;
  }

  .reaction {
    min-width: 21px;
  }

  .comment-body > .comment-head.with-calculated-width,
  .comment-body > .thread-post-body.with-calculated-width {
    width: calc(100% - 72px) !important;
  }

  .comment-container.with-calculated-width {
    width: calc(100% - 72px) !important;
  }


  .post-and-action-container > .thread-post-body {
    width: calc(100% - 73px) !important;
  }

  .post-and-action-container {
    display: flex;
  }

  .post-edit-btn {
    min-width: 68px;
  }

  .post-author-and-date {
    flex-direction: row;
  }

  .post-published-at {
    margin-left: 10px;
    min-width: 140px;
  }

  #colibri-pages-nav {
    height: auto !important;
  }

  #nav-login-button {
    height: fit-content !important;
  }

  #blog-link-container {
    margin-top: 0 !important;
  }

  #planning-header-container {
    padding-top: 8px;
  }
}
@media screen and (min-width: 743px) and (max-width: 1376px) and (orientation: landscape) {
  #colibri-pages-nav {
    height: auto !important;
  }

  #nav-login-button {
    height: fit-content !important;
  }

  #blog-link-container {
    margin-top: 0 !important;
  }

  #planning-header-container {
    padding-top: 8px;
  }

  .padding-top-adjusted-for-system-bars-tablet-only {
    padding-top: 40px !important;
  }
}
body {
  background-color: #fff;
  color: #333;
  margin: 33px;
  font-family:
    "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    "メイリオ", "Meiryo", "MS Pゴシック", "IPAexゴシック", "IPA Pゴシック",
    verdana, arial, helvetica, sans-serif !important;
  font-size: 13px;
  line-height: 18px;
}

td {
  font-size: 13px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

th {
  padding-bottom: 5px;
}

td {
  padding: 0 5px 7px;
}

div.field,
div.actions {
  margin-bottom: 10px;
}

#notice {
  color: green;
}

.field_with_errors {
  flex-grow: 1;
}

.field_with_errors > input {
  border-color: #e31515;
}

#error_explanation {
  width: 450px;
  border: 2px solid #e31515;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation > ul,
#error_explanation > li {
  font-size: 12px;
  list-style: square;
}
#error_explanation > h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px -7px 0;
  background-color: #c00;
  color: #fff;
}

label {
  display: block;
}
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  line-height: 17px;
}

.switch.switch-lg {
  width: 38px;
  height: 21px;
  line-height: 21px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 3px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 3px;
}

.slider.slider-lg:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 3px;
}

.information-item {
  padding: 8px 5px 8px 5px;
}

.information-item.bottom-border {
  border-bottom: 1px solid #ddd;
}

.my-profile-group {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 8px;
  margin-right: 8px;
  background-color: #fdfdfd;
  border-radius: 6px;
  padding: 12px 5px 12px 5px;
  border: 1px solid #ddd;
}

input:checked + .slider-blue {
  background-color: #2196f3;
}

input:focus + .slider-blue {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider-pink {
  background-color: #fce7ea;
}

input:focus + .slider-pink {
  box-shadow: 0 0 1px #fce7ea;
}

input:checked + .slider-cyan {
  background-color: #17a2b8;
}

input:focus + .slider-cyan {
  box-shadow: 0 0 1px #17a2b8;
}

input:checked + .slider-success {
  background-color: #2ea649;
}

input:focus + .slider-success {
  box-shadow: 0 0 1px #2ea649;
}

input:checked + .slider-cancelled {
  background-image: repeating-linear-gradient(
    45deg,
    #ffbfbf,
    #ffbfbf 5px,
    #ff8484 5px,
    #ff8484 10px
  );
}

input:focus + .slider-cancelled {
  box-shadow: 0 0 1px #ffbfbf;
}

input:checked + .slider-edit-requested {
  background-image: repeating-linear-gradient(
    45deg,
    #c8f6df,
    #c8f6df 5px,
    #99e6bf 5px,
    #99e6bf 10px
  );
}

input:focus + .slider-edit-requested {
  box-shadow: 0 0 1px #c8f6df;
}

input:checked + .slider:before {
  transform: translateX(13px);
}

input:checked + .slider.slider-lg:before {
  transform: translateX(17px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#users-index-container {
  margin-left: 10px;
  margin-right: 10px;
}

.account-container-xs {
  width: 24px;
  height: 24px;
  text-align: center;
  border-radius: 100%;
}

.account-container-sm {
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
}

.account-container {
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 100%;
}

.account-name-xs {
  line-height: 24px;
  font-weight: bold;
  font-size: 12px;
  color: white;
}

.account-name-sm {
  line-height: 40px;
  font-weight: bold;
  color: white;
}

.account-name {
  line-height: 45px;
  font-weight: bold;
  color: white;
}

.coli-profile-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.coli-xs-profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.coli-xxs-profile-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

@media print {
  .account-container {
    border: 0.5px solid #ccc;
  }
  .coli-profile-icon {
    border: 0.5px solid #ccc;
  }
}
#background-task-body {
  padding-left: 0px;
  font-size: 14px;
}

#background-task {
  position: absolute;
  right: 0;
  bottom: 60px;
  height: 92%;
  max-width: 500px;
  width: 100%;
  overflow: scroll;
  z-index: 9;
}

#reports-modal-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  height: 60px;
  padding-top: 12px;
}

@media (min-width: 576px) and (max-width: 768px) {
  #background-task {
    width: 60%;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  #background-task {
    margin: 8px;
    width: 50%;
    bottom: 0;
  }
}

@media (min-width: 992px) {
  #background-task {
    margin: 8px;
    height: 60%;
    width: 40%;
    bottom: 0;
  }
}
.office-clickable-row:hover {
  cursor: pointer;
}

/* =============================================
   Nursing home daily report
   ============================================= */

.nh-report-date-nav {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #d9dee3;
}

.nh-report-nav-arrow {
  font-size: 1.4em;
  text-decoration: none;
}

.nh-report-grid {
  border-collapse: collapse;
  min-width: 100%;
}

th.nh-report-label-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f5f7f8;
  border: 1px solid #d9dee3;
  padding: 8px 12px;
  min-width: 130px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}

.nh-report-patient-col {
  border: 1px solid #d9dee3;
  padding: 8px 12px;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
  background: #f5f7f8;
  font-weight: 600;
  font-size: 13px;
}

.nh-report-moment-header-row td {
  background: #eaedf0;
  border: 1px solid #d9dee3;
  padding: 6px 12px;
}

.nh-report-moment-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #eaedf0;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

td.nh-report-label-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f5f7f8;
  border: 1px solid #d9dee3;
  padding: 5px 12px;
  white-space: nowrap;
  font-size: 0.85em;
}

.nh-report-field-row td:not(.nh-report-label-col) {
  border: 1px solid #d9dee3;
  padding: 4px 6px;
  text-align: center;
}

.nh-report-field-row td:has(.nh-input-cell),
.nh-report-field-row td:has(.nh-bp-field),
.nh-report-field-row td:has(.nh-checkbox-field),
.nh-report-field-row td:has(.nh-select-cell),
.nh-report-field-row td:has(.nh-input-notes) {
  padding: 0;
}

.nh-input-cell {
  width: 100%;
  min-height: 32px;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  padding: 4px 2px;
  display: block;
  -moz-appearance: textfield;
}

.nh-input-cell::-webkit-inner-spin-button,
.nh-input-cell::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nh-report-section-gap td {
  height: 4px;
  background: transparent;
  padding: 0;
}

.nh-bp-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
}

.nh-bp-input {
  width: 0;
  flex: 1 1;
  min-height: 32px;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  padding: 4px 2px;
  -moz-appearance: textfield;
}

.nh-bp-input::-webkit-inner-spin-button,
.nh-bp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nh-bp-divider {
  color: #4f5b66;
  flex-shrink: 0;
  padding: 0 1px;
}

.nh-checkbox-field {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 6px;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
}

.nh-checkbox-field .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.nh-checkbox-field .form-check-label {
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}

.nh-input-xs {
  width: 60px;
}

.nh-input-notes {
  width: 100%;
  min-height: 40px;
  font-size: 0.85em;
  border: none;
  outline: none;
  background: transparent;
  resize: vertical;
  display: block;
  padding: 4px 6px;
  box-shadow: none;
}

.nh-select-cell {
  width: 100%;
  min-height: 32px;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  padding: 4px 2px;
  display: block;
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  font-size: inherit;
  box-shadow: none;
}

.nh-chevron-icon {
  font-size: 0.7em;
}

.nh-range-error {
  border: 1px solid #e8a5a5 !important;
  color: #c0392b !important;
  background-color: #fff8f8 !important;
}

/* ── Body-temperature picker ───────────────────────────────────────────────── */

.nh-bt-picker-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.bt-picker {
  position: fixed;
  z-index: 1060;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  padding: 8px 10px 10px;
  min-width: 230px;
  white-space: nowrap;
  font-size: 0.875rem;
}

.bt-picker--compact .bt-picker-btn {
  padding: 3px 6px;
}

.bt-picker-label {
  font-size: 1em;
  color: #6c757d;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  padding-left: 1px;
}

.bt-picker-row {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 10px;
}

.bt-picker-row:last-child {
  margin-bottom: 0;
}

.bt-picker-btn {
  padding: 4px 8px;
  font-size: 1em;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #f8f9fa;
  color: #343a40;
  cursor: pointer;
  line-height: 1.4;
  transition:
    background 0.1s,
    color 0.1s,
    border-color 0.1s;
}

.bt-picker-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.bt-picker-btn--active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.bt-picker-btn--active:hover {
  background: #0b5ed7;
  border-color: #0b5ed7;
}

/* ── Nursing-home vocal-input floating panel ───────────────────────────────── */

#nh-vocal-input-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1050;
  pointer-events: none; /* container is transparent; only the panel inside catches events */
}

.nh-vocal-input-panel {
  pointer-events: all;
  width: 420px;
  min-height: 320px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  margin: 8px;
}

.nh-vocal-input-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

@media (max-width: 576px) {
  .nh-vocal-input-panel {
    width: calc(100vw - 16px);
  }
}
.service-item, .service-filter-button {
  padding: 4px 12px 4px 4px;
  border: 1px solid #ccc;
  border-radius: 19px;
  position: relative;
  font-size: 0.9em;
  width: auto;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.service-item:hover, .service-filter-button:hover {
  background-color: #f5f7f8;
}

.service-item.no-cursor, .service-filter-button.no-cursor {
  transition: none;
}

.service-item.no-cursor:hover, .service-filter-button.no-cursor:hover {
  background-color: #fff;
}

.service-item .service-title, .service-filter-button .service-title {
  font-size: 0.9em;
  color: #4f5b66;
  margin-left: 6px;
}

.service-item .service-close, .service-filter-button .service-close {
  background-color: #4f5b66;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  line-height: 10px;
  text-align: center;
  margin-left: 6px;
  margin-right: -2px;
}

.service-list-item .service-close {
  display: none;
}

#ignored-service-list {
  max-height: 222px;
  overflow-y: auto;
}

.service-search-box {
  max-width: 40%;
  display: flex;
  align-items: center;
}

.service-search-box .form-control {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.service-search-box .service-search-icon {
  background-color: #eff1f1;
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  transition: background-color 0.2s ease-in-out;
}

.service-search-box .service-search-icon:hover {
  background-color: #d9dee3;
}

@media screen and (max-width: 743px) {
  .service-search-box {
    max-width: 100%;
  }
}

.service-list {
  max-height: 240px;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #bbb #eee;
  padding-bottom: 10px;
}

.service-list-container {
  position: relative;
}

.service-list-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.85) 80%,
    rgba(255, 255, 255, 1)
  );
  z-index: 2;
  transition: opacity 0.2s;
  opacity: 1;
}

.service-list-container.at-bottom::after {
  opacity: 0;
}

.service-list::-webkit-scrollbar {
  width: 6px;
  background: #eee;
}

.service-list::-webkit-scrollbar-thumb {
  background: #bbb; /* color of the scroll thumb */
  border-radius: 3px;
}
/* iOS only */
/* iOSのみ */
html:not(.mobile-safari) {
  @supports (-webkit-touch-callout: none) and
    (padding-top: env(safe-area-inset-top)) {
    /* 縦 */
    @media screen and (orientation: portrait) and (max-width: 743px) {
      #flash {
        top: calc(env(safe-area-inset-top) + 60px) !important;
      }

      .main-page {
        padding-top: env(safe-area-inset-top) !important;
      }

      .padding-top-adjusted-for-system-bars {
        padding-top: env(safe-area-inset-top) !important;
      }

      .padding-top-adjusted-for-system-bars-ios-only {
        padding-top: env(safe-area-inset-top) !important;
      }

      .padding-bottom-adjusted-for-system-bars {
        padding-bottom: env(safe-area-inset-bottom) !important;
      }

      .phone_activity_container {
        height: 100dvh !important;
        margin-top: 0 !important;
        position: fixed;
        top: 0 !important;
        z-index: 100;
      }

      .activity_header {
        height: calc(env(safe-area-inset-top) + 48px);
      }

      #planning-menu-container {
        height: calc(75px + env(safe-area-inset-bottom));
      }

      #planning-container {
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
      }

      #payable-container {
        padding-top: calc(50px + env(safe-area-inset-top));
        padding-bottom: calc(75px + env(safe-area-inset-bottom));
      }

      .batch-action-button {
        bottom: calc(80px + env(safe-area-inset-bottom));
      }

      #payable-title-wrapper {
        height: calc(48px + env(safe-area-inset-top));
      }

      #detail-planning-title {
        height: calc(env(safe-area-inset-top));
      }

      .settings-body {
        padding-bottom: calc(75px + env(safe-area-inset-bottom));
      }

      .settings-body.with-mb-top-margin,
      #settings-container.with-mb-top-margin {
        margin-top: calc(62px + env(safe-area-inset-top));
      }

      .nurses-sidebar,
      .patients-sidebar {
        height: calc(100vh - env(safe-area-inset-bottom));
      }

      #colibri-pages-nav {
        height: calc(70px + env(safe-area-inset-top)) !important;
      }

      #background-task {
        bottom: 0 !important;
      }

      #phone-reflect-button-wrapper {
        bottom: calc(env(safe-area-inset-bottom) + 80px);
      }

      .modal-dialog {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }

      #coli-main-frame {
        padding-bottom: 5px;
      }

      #more-planning-menu-items {
        bottom: calc(70px + env(safe-area-inset-bottom));
      }

      #posts-lookup-button3 {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
      }

      #admin-corporation-name-container {
        top: calc(env(safe-area-inset-top) + 30px);
      }

      #lookup-fields-container {
        padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
      }

      .daterangepicker-bottom-padding-adjustment-mobile {
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
      }
    }

    /* 横 */
    @media screen and (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
      .left-margin-adjusted-for-ios-safe-area {
        margin-left: env(safe-area-inset-left);
      }

      #planning-page-wrapper,
      #payable-container,
      #settings-container {
        width: calc(100vw - 58px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        margin-left: calc(58px + env(safe-area-inset-left)) !important;
        position: absolute;
      }

      #payable-container.wide-width,
      #payable-container.wide-width.colibri-posts {
        width: calc(100vw - 58px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        margin-left: calc(58px + env(safe-area-inset-left)) !important;
      }

      #resource-list-container,
      #settings-menu-container {
        margin-left: env(safe-area-inset-left) !important;
      }

      .phone_activity_container {
        margin-left: env(safe-area-inset-left);
        margin-right: env(safe-area-inset-right);
      }

      .modal-dialog {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }

      .batch-action-button {
        bottom: 35px;
        right: calc(35px + env(safe-area-inset-right));
      }

      #phone-reflect-button-wrapper {
        bottom: 35px;
        right: calc(35px + env(safe-area-inset-right));
      }

      .resource-accordion-content {
        max-height: none !important;
      }

      .max-height-fit-content-mobile-only {
        max-height: fit-content !important;
      }

      .max-height-0-mobile-only {
        max-height: 0 !important;
      }
    }
  }
}

/*
@import '@fullcalendar/common/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/timegrid/main.css';
@import '@fullcalendar/list/main.css';
@import '@fullcalendar/timeline/main.css';
@import '@fullcalendar/resource-timeline/main.css';
*/
tr.colibri-fc-hover-highlight:hover {
  background-color: #7ad5de;
  opacity: 20%;
}

tr.colibri-fc-hover-highlight {
  z-index: 4;
}

.fc-col-header-cell.fc-day-today {
  font-weight: bold;
  color: black;
}

.fc-daygrid-day.fc-day-today > .fc-daygrid-day-frame > .fc-daygrid-day-top {
  font-weight: bold;
  color: black;
}

.fc-event-title {
  font-size: 1.6em;
  line-height: 1.2;
  margin-top: 2px;
}

.fc-v-event .fc-colibri-hint {
  text-overflow: initial;
  padding: 0px;
}

.fc-colibri-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  padding: 0px 4px;
}

.fc-day.fc-day-sat {
  color: #118df0;
}

.fc-day.fc-day-sun {
  color: #ff304f;
}

.fc-toolbar-title {
  height: 24px;
  font-weight: 700;
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.31px;
  color: rgba(27, 38, 59, 1);
}

.fc-customPrev-button.btn.btn-primary,
.fc-customNext-button.btn.btn-primary {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #000000 !important;
}

.to-appointments-jisseki {
  font-size: 14px;
  color: #000000;
  font-weight: 300;
}

.fc .fc-customPrev-button {
  margin-right: 6px;
}

/* top left cell */
.fc-resourceTimelineMonth-view th[role="columnheader"] {
  background-color: #f9fafb;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 450px) {
  /* for smaller screens such as iPhone SE, to prevent dates from overlapping with the grid lines */
  .fc-day {
    font-size: 13px !important;
  }
}

.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
  margin-bottom: 10px;
}

.fc-event.fc-bg-event.colibri-bg-available {
  opacity: 0.5 !important;
}

.fc-event.fc-bg-event.colibri-bg-consultation {
  opacity: 1 !important;
  border: 2px solid rgba(242, 159, 35, 1) !important;
  background-color: rgba(255, 222, 150, 0.15) !important;
}

.fc-event.fc-bg-event.colibri-bg-unavailable {
  opacity: 0.5 !important;
}

.fc-bg-event {
  background-image: none !important;
}

.fc-timegrid-body {
  width: 100%;
}

/* daygrid month view */

.fc-daygrid-block-event.fc-event > .fc-event-main > .fc-event-main-frame {
  flex-direction: column;
}

.fc-daygrid-block-event.fc-event
  > .fc-event-main
  > .fc-event-main-frame
  > .fc-colibri-header
  > .fc-event-time {
  font-size: 0.9em;
  padding-bottom: 0px;
  font-weight: normal;
}

.fc-event-time {
  line-height: 12px;
}

.fc-daygrid-block-event.fc-event
  > .fc-event-main
  > .fc-event-main-frame
  > .fc-event-title-container {
  margin-bottom: 1px;
}

/* fc timeline view */

.fc-timeline-event > .fc-event-main > .fc-event-main-frame {
  flex-direction: column;
}

.fc-event > .fc-event-main > .fc-event-main-frame {
  overflow-x: hidden !important;
}

.fc-timeline-event.fc-event
  > .fc-event-main
  > .fc-event-main-frame
  > .fc-colibri-header
  > .fc-event-time {
  font-size: 0.95em;
  padding-bottom: 0px;
  font-weight: normal;
}

.fc-timeline-event.fc-event {
  display: flex;
  margin: 1px;
  border-radius: 3px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
  align-items: start !important;
}

h2.fc-toolbar-title {
  line-height: 40px;
}

button.fc-button {
  margin-bottom: 2px !important;
  max-height: 42px !important;
}

/* non-business hours */

div.fc-non-business {
  background: rgba(228, 228, 228, 0.3) !important;
}

.filter-selected.fc-button.fc-button-primary {
  background-color: #d5d5d5 !important;
}

#calendar-zoom-level {
  min-width: 80px;
  text-align: center;
}

.fc-event {
  overflow: hidden;
}

.fc-v-event .fc-event-main {
  height: auto !important;
  overflow: hidden;
}

.fc-v-event .fc-event-title-container {
  flex-grow: 0 !important;
}

@media print {
  #planning-container {
    margin-top: -5px !important;
  }

  #detail-planning-title {
    margin-bottom: 0 !important;
  }

  #planning-header-container {
    margin-bottom: 0 !important;
  }

  .fc-scroller.fc-scroller-liquid-absolute,
  .fc-scroller,
  .fc-day-grid-container,
  .fc-time-grid-container,
  .fc-scroller-harness,
  .fc-view,
  .fc-view-harness.fc-view-harness-active {
    /* */
    height: auto !important;
    overflow: visible !important;
  }

  .fc-timegrid > .fc-scrollgrid {
    height: auto;
  }

  .fc-timegrid-slots > table {
    height: auto !important;
  }

  .fc-scroller,
  .fc-timegrid-body {
    height: auto !important;
    display: flex;
  }

  .fc-scrollgrid.fc-scrollgrid-liquid {
    border: none;
  }

  .fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid {
    overflow: visible !important;
  }

  /* kill the horizontal border/padding used to compensate for scrollbars */
  .fc-row {
    border: 0 !important;
    margin: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0px;
  }

  /* do not hide background events */
  .fc-event.fc-bg-event {
    -webkit-print-color-adjust: exact !important;
  }

  /* Make background events more visible */

  .fc-event.colibri-bg-available {
    opacity: 0.5 !important;
  }

  .fc-event.colibri-bg-consultation {
    opacity: 1 !important;
    border: 2px solid rgba(242, 159, 35, 1) !important;
    background-color: rgba(255, 222, 150, 0.15) !important;
  }

  .fc-event.colibri-bg-unavailable {
    opacity: 0.5 !important;
  }

  /* fill cancelled and edit requested appointments */

  .fc-event.colibri-edit-requested {
    background-image: repeating-linear-gradient(
      45deg,
      #c8f6df,
      #c8f6df 5px,
      #99e6bf 5px,
      #99e6bf 10px
    ) !important;
    -webkit-print-color-adjust: exact;
  }

  .fc-event.colibri-cancelled {
    background-image: repeating-linear-gradient(
      45deg,
      #ffbfbf,
      #ffbfbf 5px,
      #ff8484 5px,
      #ff8484 10px
    ) !important;
    -webkit-print-color-adjust: exact;
  }

  .fc-event.colibri-missing-report {
    color: rgba(0, 0, 0, 0.7);
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(255, 255, 255, 0.35) 5px,
      rgba(255, 255, 255, 0.35) 10px
    ) !important;
    -webkit-print-color-adjust: exact;
  }

  /* Button Controls
  --------------------------------------------------------------------------------------------------*/
  .fc-button-group,
  button.fc-button,
  .btn-group,
  .fc-miniCalendar-button,
  .fc-today-button {
    display: none !important;
    /* don't display any button-related controls */
  }

  /* hide now indicator */
  .fc-timegrid-now-indicator-arrow,
  .fc-timegrid-now-indicator-line {
    display: none;
  }

  /* Undo month-view event limiting. Display all events and hide the "more" links
  --------------------------------------------------------------------------------------------------*/

  .fc-more-cell,
  .fc-more {
    display: none !important;
  }

  .fc tr.fc-limited {
    display: table-row !important;
  }

  .fc td.fc-limited {
    display: table-cell !important;
  }

  .pc-shift-page-header-title,
  .planning-resource-module-title {
    padding-top: 5px !important;
    font-size: 26px !important;
    line-height: 26px !important;
  }

  .fc-toolbar-title {
    font-size: 40px !important;
    line-height: 60px !important;
    margin-bottom: 30px !important;
  }

  div.fc-event-title {
    font-weight: bold !important;
    font-size: 26px !important;
    color: black;
  }

  .fc-daygrid-day-number {
    font-size: 18px !important;
  }

  .fc-event-time {
    font-size: 16px !important;
  }

  .fc-timeline-event.fc-event
    > .fc-event-main
    > .fc-event-main-frame
    > .fc-event-title-container
    > .fc-event-title {
    font-size: 18px !important;
    font-weight: normal !important;
    color: black;
  }

  .fc-popover {
    display: none;
    /* never display the "more.." popover in print mode */
  }

  /* custom Colibri styles 
  -------------------------------------------------------------------------------------------------*/

  .fc-timegrid-slot.fc-timegrid-slot-label {
    font-weight: bold;
  }

  /* more visible dates */
  th.fc-col-header-cell {
    font-weight: bold;
    font-size: 1.35em;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* making horizontal lines thicker for 9:00 12:00 15:00 18:00 */
  .thick-calendar-line {
    border-top: 3px solid #ccc !important;
  }

  /* make event borders thicker */
  .fc-day-grid-event,
  .fc-time-grid-event,
  .fc-v-event,
  .fc-event,
  .fc-start,
  .fc-end,
  .fc-draggable,
  .fc-resizable {
    border-width: 4.5px !important;
  }

  .fc-timeline-event.fc-event {
    border-width: 2px !important;
  }
}

/**
 * selectize.bootstrap3.css (v0.12.6) - Bootstrap 3 Theme
 * Copyright (c) 2013–2015 Brian Reavis & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <brian@thirdroute.com>
 */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: '!';
  visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
  position: relative;
  padding: 3px 12px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 4px 4px 0 0;
}
.selectize-dropdown-header-close {
  position: absolute;
  right: 12px;
  top: 50%;
  color: #333333;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
  color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  float: left;
  box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
  position: relative;
  padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
  z-index: 1;
  /* fixes ie bug (see #392) */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 17px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 1px 0 0 0;
  border-left: 1px solid rgba(0, 0, 0, 0);
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
  border-left-color: rgba(0, 0, 0, 0);
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
  background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
  border-left-color: rgba(77, 77, 77, 0);
}
.selectize-control.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.selectize-control {
  position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: #333333;
  font-family: inherit;
  font-size: inherit;
  line-height: 20px;
  -webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: #fff;
  cursor: text;
  display: inline-block;
}
.selectize-input {
  border: 1px solid #ccc;
  padding: 6px 12px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 4px;
}
.selectize-control.multi .selectize-input.has-items {
  padding: 5px 12px 2px;
}
.selectize-input.full {
  background-color: #fff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
  cursor: default !important;
}
.selectize-input.focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
  border-radius: 4px 4px 0 0;
}
.selectize-input > * {
  vertical-align: baseline;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 1px 3px;
  background: #efefef;
  color: #333333;
  border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input > div.active {
  background: #428bca;
  color: #fff;
  border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
  color: #808080;
  background: #ffffff;
  border: 0 solid rgba(77, 77, 77, 0);
}
.selectize-input > input {
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
  display: none;
}
.selectize-input > input:focus {
  outline: none !important;
}
.selectize-input::after {
  content: ' ';
  display: block;
  clear: left;
}
.selectize-input.dropdown-active::before {
  content: ' ';
  display: block;
  position: absolute;
  background: #ffffff;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
}
.selectize-dropdown {
  position: absolute;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: -1px 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;
}
.selectize-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
  background: rgba(255, 237, 40, 0.4);
  border-radius: 1px;
}
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
  padding: 3px 12px;
}
.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.selectize-dropdown [data-selectable].option {
  opacity: 1;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
  color: #777777;
  background: #fff;
  cursor: default;
}
.selectize-dropdown .active {
  background-color: #f5f5f5;
  color: #262626;
}
.selectize-dropdown .active.create {
  color: #262626;
}
.selectize-dropdown .create {
  color: rgba(51, 51, 51, 0.5);
}
.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  -webkit-overflow-scrolling: touch;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
  cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
  cursor: text;
}
.selectize-control.single .selectize-input:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  right: 17px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #333333 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #333333 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
  left: 17px;
  right: auto;
}
.selectize-control.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
  opacity: 0.5;
  background-color: #fff;
}
.selectize-dropdown,
.selectize-dropdown.form-control {
  height: auto;
  padding: 0;
  margin: 2px 0 0 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.selectize-dropdown .optgroup-header {
  font-size: 12px;
  line-height: 1.42857143;
}
.selectize-dropdown .optgroup:first-child:before {
  display: none;
}
.selectize-dropdown .optgroup:before {
  content: ' ';
  display: block;
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  margin-left: -12px;
  margin-right: -12px;
}
.selectize-dropdown-content {
  padding: 5px 0;
}
.selectize-dropdown-header {
  padding: 6px 12px;
}
.selectize-input {
  min-height: 34px;
}
.selectize-input.dropdown-active {
  border-radius: 4px;
}
.selectize-input.dropdown-active::before {
  display: none;
}
.selectize-input.focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-error .selectize-input {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .selectize-input:focus {
  border-color: #843534;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.selectize-control.multi .selectize-input.has-items {
  padding-left: 9px;
  padding-right: 9px;
}
.selectize-control.multi .selectize-input > div {
  border-radius: 3px;
}
.form-control.selectize-control {
  padding: 0;
  height: auto;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}


/*# sourceMappingURL=application-2651746b.css.map*/