@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| Use All Pages
|--------------------------------------------------------------------------
*/
:root {
  /* Primary Color */
  --color-primary: #264478;
  --color-primary-light: #6ea0de;
  --color-primary-pale: #e7effa;
  --color-primary-pale2: #f4f8fe;
  --color-primary-dark: #1B2F50;
  --color-primary-dark2: #111f3b;
  --color-primary-grad: linear-gradient(to right, #6ea0de, #c2d6f5);
  /* Secondary Color */
  --color-secondary: #F27C36;
  --color-secondary-light: #FFC9A3;
  --color-secondary-pale: #FFE8D8;
  --color-secondary-pale2: #ffeee5;
  --color-secondary-dark: #B7531F;
  --color-secondary-dark2: #801f00;
  --color-secondary-grad: linear-gradient(to right, #f69a64, #f3b68b);
  /* Error Color */
  --color-error: #FF0000;
  --color-error-light: #e06b6b;
  --color-error-pale: #FFE5E5;
  /* like color */
  --color-like: #ef4b52;
  --color-like-hover: #ff8a8f;
  /* Other Color */
  --color-accent: #FFD700;
  --color-accent02: #ec4c47;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #808080;
  --color-gray-light: #f5f5f5;
  --color-gray-dark: #333333;
  --color-success: #28a745;
  /* Spacing */
  --spacing-xsmall: .5rem;
  --spacing-small: 1rem;
  --spacing-medium: 1.5rem;
  --spacing-large: 2rem;
  --spacing-xlarge: 2.5rem;
  /* Font Sizes */
  --font-size-xsmall: clamp(12px, 2vw, 14px);
  --font-size-small: clamp(14px, 2vw, 16px);
  --font-size-medium: clamp(16px, 2vw, 18px);
  --font-size-large: clamp(18px, 2vw, 20px);
  --font-size-xlarge: clamp(20px, 2vw, 22px);
  /* Border Radius */
  --border-radius-small: clamp(4px, 1vw, 8px);
  --border-radius-medium: clamp(8px, 2vw, 12px);
  --border-radius-large: clamp(12px, 3vw, 16px);
  /* Border Width */
  --border-width-small: clamp(1px, 0.1vw, 2px);
  --border-width-medium: clamp(2px, 0.2vw, 4px);
  --border-width-large: clamp(3px, 0.3vw, 6px);
  /* Box Shadow */
  --box-shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-large: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Style Common
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
html {
  background-color: var(--color-white);
  scroll-behavior: smooth;
}
body {
  position: relative;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
header,
main,
footer {
  background-color: var(--color-white);
  color: var(--color-black);
  letter-spacing: 0.05em;
  line-height: normal;
  font-size: var(--font-size-medium);
}
/* text style common */
.f-xsmall {
  font-size: var(--font-size-xsmall) !important;
}
.f-small {
  font-size: var(--font-size-small) !important;
}
.f-medium {
  font-size: var(--font-size-medium) !important;
}
.f-large {
  font-size: var(--font-size-large) !important;
}
.f-center {
  text-align: center !important;
}
.f-left {
  text-align: left !important;
}
.f-right {
  text-align: right !important;
}
a {
  color: var(--color-secondary);
}
a i.fa-arrow-up-right-from-square {
  margin-left: var(--spacing-xsmall);
  font-size: var(--font-size-xsmall);
}
.liner {
  background-image: var(--color-primary-grad);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}
.dot {
  text-emphasis: filled;
  -webkit-text-emphasis: filled;
}
.tit {
  font-weight: bold;
  margin-bottom: var(--spacing-xsmall);
  color: var(--color-primary);
}
.tit span {
  margin-right: var(--spacing-xsmall);
  color: var(--color-secondary);
}
/* .list */
.list {
  padding-left: var(--spacing-medium);
}
.list li + li {
  margin-top: var(--spacing-xsmall);
}
.list.num li {
  list-style: decimal;
}
.list.check {
  padding-left: 0;
}
.list.check li {
  list-style: none;
  position: relative;
  margin-bottom: var(--spacing-xsmall);
}
.list.check li::before {
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  font-size: var(--font-size-large);
  color: var(--color-secondary);
  font-weight: bold;
  margin-right: var(--spacing-xsmall);
}
.note-text {
  margin-top: var(--spacing-medium);
}
/* .desc */
.desc + .desc {
  margin-top: calc(var(--spacing-large) * 1.5);
}
.desc h2 {
  font-size: calc(var(--font-size-large) * 1.25);
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
  padding: 0 var(--spacing-small);
  border-left: 8px solid var(--color-secondary);
}
.desc h3 {
  color: var(--color-primary);
  font-size: calc(var(--font-size-large) * 1.1);
  margin-bottom: var(--spacing-small);
  padding-bottom: var(--spacing-xsmall);
  border-bottom: 2px solid var(--color-primary);
}
.desc h3 span {
  color: var(--color-secondary);
  margin-right: var(--spacing-xsmall);
  font-size: 1.1em;
}
.desc h4 {
  font-size: var(--font-size-large);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xsmall);
  padding-bottom: var(--spacing-xsmall);
  border-bottom: 2px solid var(--color-primary);
}
.desc.f-center h2 {
  border: none;
}
.desc .text {
  margin-bottom: var(--spacing-large);
}
.desc .text.small {
  margin-bottom: var(--spacing-small);
}
.desc .text:last-child {
  margin-bottom: 0;
}
.desc .list {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}
.desc .list.num {
  padding-left: var(--spacing-medium);
}
.desc .list li i {
  font-size: var(--font-size-xsmall);
  margin-left: var(--spacing-xsmall);
}
.desc .image {
  margin-bottom: var(--spacing-small);
}
/* flex */
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-medium);
  margin-top: var(--spacing-large);
}
.flex.align-center {
  align-items: center;
}
.flex.align-end {
  align-items: flex-end;
}
.flex.align-start {
  align-items: flex-start;
}
.flex.direction-column {
  flex-direction: column;
}
.flex.direction-row {
  flex-direction: row;
}
.flex.direction-row-reverse {
  flex-direction: row-reverse;
}
.flex.direction-column-reverse {
  flex-direction: column-reverse;
}
.flex.three-column > .images img {
  width: 100%;
}
.flex > .desc {
  margin-top: 0;
}
.flex.two-column > .desc,
.flex.two-column > .images {
  width: calc(50% - var(--spacing-small));
}
.flex.three-column > .desc,
.flex.three-column > .images {
  width: calc(33.333% - var(--spacing-small));
}
/* .note */
.note {
  display: block;
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--color-primary-pale);
  color: var(--color-primary-dark);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-small);
}
.note.red {
  color: var(--color-accent02);
}
.note.small {
  font-size: var(--font-size-xsmall);
  box-shadow: none;
}
.note .list {
  padding-top: var(--spacing-xsmall);
  padding-bottom: 0;
  margin-bottom: 0;
}
/* grad background */
.primary-grad {
  background-image: var(--color-primary-grad);
  color: var(--color-primary-dark) !important;
  transition: all .5s ease;
}
.secondary-grad {
  background-image: var(--color-secondary-grad) !important;
  color: var(--color-white) !important;
  transition: all .5s ease;
}
/* .unde-border */
.unde-border {
  border-bottom: 2px solid var(--color-gray-light);
  padding-bottom: var(--spacing-medium);
}
/* img common */
img {
  width: 100%;
  height: auto;
}
.thumbnail {
  text-align: center;
  margin-bottom: var(--spacing-large);
  vertical-align: bottom;
}
.thumbnail img {
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-medium);
  vertical-align: bottom;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Button Style
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* buttons */
.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-small);
  justify-content: center;
}
.buttons.vertical {
  flex-direction: column;
  gap: var(--spacing-xsmall);
  align-items: center;
}
.buttons.mt {
  margin-top: var(--spacing-large);
}
/* .button */
.button a,
.formbutton {
  display: inline-block;
  background-color: var(--color-secondary);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius-small);
  color: var(--color-white);
  min-width: 130px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--font-size-medium);
  font-weight: bold;
}
.button.primary a,
.formbutton.primary {
  background-color: var(--color-primary);
}
.button.ac2 a,
.formbutton.ac2 {
  background-color: var(--color-accent02);
}
.button.ac a,
.formbutton.ac {
  background-color: var(--color-accent);
}
.button a i,
.formbutton i {
  margin-right: var(--spacing-xsmall);
}
/* .icon-button */
.icon-button a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xsmall);
  text-decoration: none;
  color: var(--color-primary);
  transition: all .5s ease;
  border-radius: var(--border-radius-small);
  padding: var(--spacing-xsmall);
}
.icon-button a i {
  font-size: var(--font-size-large);
}
.icon-button a span {
  font-size: var(--font-size-xsmall);
  font-weight: bold;
}
/* .rich-button */
.rich-button a,
.rich-form-button {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: var(--spacing-xsmall);
  align-items: center;
  padding: var(--spacing-xsmall) var(--spacing-small);
  background: var(--color-accent);
  text-decoration: none;
  text-align: center;
  color: var(--color-primary);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-large);
  transition: all 0.5s ease;
  border: none;
  cursor: pointer;
  line-height: normal;
}
.rich-button a i,
.rich-form-button i {
  font-size: var(--font-size-large);
}
.rich-button a p,
.rich-form-button p {
  font-size: var(--font-size-medium);
  font-weight: bold;
}
.rich-button a p span,
.rich-form-button p span {
  font-size: var(--font-size-xsmall);
}
.rich-button.ac2 a,
.rich-form-button.ac2 {
  background: var(--color-accent02);
  color: var(--color-white);
}
.rich-button.primary a,
.rich-form-button.primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.rich-button.secondary a,
.rich-form-button.secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}
/* .heart-button */
.heart-button,
.heart-button-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.heart-button,
.heart-button-link a {
  background-color: var(--color-accent02);
  color: var(--color-white);
}
.heart-button.is-favorite,
.heart-button-link a.is-favorite {
  background-color: var(--color-accent02);
  color: var(--color-white);
}
.heart-button i,
.heart-button-link a i {
  margin-left: var(--spacing-xsmall);
  transition: all 0.5s ease;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Title Style
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* H1 */
.first-title {
  font-size: clamp(32px, 5vw, 40px);
  color: var(--color-primary);
  font-weight: bold;
  text-align: left;
  margin-bottom: var(--spacing-large);
  line-height: normal;
}
.first-title.center {
  text-align: center;
}
.first-title small {
  font-size: var(--font-size-medium);
  color: var(--color-secondary);
}
.first-title span {
  display: block;
  letter-spacing: 0.2em;
}
/* H2 */
h2.secondary-title {
  position: relative;
  text-align: left;
  margin-bottom: var(--spacing-large);
  border: none;
  padding: 0;
}
h2.secondary-title small {
  font-size: var(--font-size-xsmall);
  color: var(--color-secondary);
}
h2.secondary-title span {
  display: block;
  font-size: clamp(20px, 4vw, 30px);
  color: var(--color-primary);
}
/* H3 */
.third-title {
  font-size: var(--font-size-large);
  color: var(--color-primary);
  font-weight: bold;
  text-align: left;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TOC
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.toc {
  margin-top: var(--spacing-large);
  padding: var(--spacing-small);
  background: var(--color-primary-pale);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-small);
  overflow: auto;
  max-height: 75vh;
}
.toc h3 {
  margin-bottom: var(--spacing-xsmall);
  font-size: var(--font-size-medium);
  font-weight: bold;
}
.toc .toc-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.toc-item {
  margin-bottom: var(--spacing-xsmall);
}
.toc-item.sub {
  margin-left: var(--spacing-xsmall);
  font-size: var(--font-size-xsmall);
}
.toc-item a {
  font-size: var(--font-size-xsmall);
  display: block;
  padding: calc(var(--spacing-xsmall) / 2) var(--spacing-xsmall);
  color: var(--color-primary);
  font-weight: bold;
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: all 0.5s ease;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Section Wrapper Style
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
section {
  padding: calc(var(--spacing-large) * 2) 0;
}
section.page-section {
  padding-top: 0;
}
/* .wrapper */
.wrapper {
  max-width: clamp(280px, 95%, 1380px);
  margin: 0 auto;
}
.wrapper p + p {
  margin-top: var(--spacing-xsmall);
}
.wrapper.flexible {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-large);
}
.wrapper.flexible .page-content {
  flex-grow: 1;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Header Style
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* .i-header */
.i-header .header-bar {
  background-color: var(--color-gray-light);
  padding: var(--spacing-xsmall);
}
.i-header .header-bar .header-bar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.i-header .header-bar h1 {
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
}
.i-header .header-bar .user-info {
  font-size: var(--font-size-xsmall);
  font-weight: bold;
  color: var(--color-primary);
}
.i-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-small) 0;
}

/* 安全な追従ヘッダー */
.sticky-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-medium);
  z-index: 998;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  pointer-events: none;
  border-bottom: 1px solid var(--color-gray-light);
}

.sticky-header-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-small) 0;
  min-height: 60px;
}

.sticky-nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}

.sticky-nav-buttons .icon-button {
  margin: 0;
}

.sticky-hamburger {
  margin-left: var(--spacing-small);
}
.sticky-header-sentinel {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
body.sticky-header-active:not(.mypage-body):not(#mypage) {
  transition: padding-top 0.3s ease;
}

@media (min-width: 769px) {
  .sticky-hamburger {
    display: none !important;
  }
  
  .sticky-nav-buttons .icon-button {
    display: flex;
  }
  
  .sticky-header-content {
    padding: var(--spacing-small) 0;
    min-height: 65px;
  }
  
  .sticky-header-content .header-logo {
    width: clamp(180px, 20%, 200px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .sticky-nav-buttons .icon-button:not(.sticky-hamburger) {
    display: none;
  }
  
  .sticky-hamburger {
    display: block !important;
  }
  
  body.sticky-header-active:not(.mypage-body):not(#mypage) {
    padding-top: 60px;
  }
  
  .sticky-header-content {
    padding: calc(var(--spacing-xsmall)) 0;
    min-height: 50px;
  }
  
  .sticky-header-content .header-logo {
    width: clamp(100px, 20%, 140px);
  }
}
.i-header .header-bar-area {
  background-color: var(--color-primary-pale);
}
.i-header .header-bar-area .wrapper {
  display: flex;
  gap: var(--spacing-small);
} 
/* .global-menu */
.global-menu {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-xsmall) 0;
}
.global-menu .global-menu-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-small);
}
.global-menu .global-menu-list li {
  list-style: none;
}
.global-menu .global-menu-list li a {
  padding: calc(var(--spacing-xsmall) / 2) var(--spacing-small);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: all .5s ease;
}
/* .header-logo */
.header-logo {
  width: clamp(180px, 20%, 220px);
}
.header-logo a img {
  vertical-align: bottom;
}
/* .i-hamburger */
.i-hamburger {
  font-size: calc(var(--font-size-large) * 1.25);
}

/* #i-drawer-menu */
#i-drawer-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  max-width: 100%;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: right 0.3s ease;
  padding: 20px;
  overflow-y: auto;
}
#i-drawer-menu.active {
  right: 0;
}
#i-drawer-menu .drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-small);
  padding-bottom: var(--spacing-small);
  border-bottom: 1px solid var(--color-gray-light);
}
#i-drawer-menu .drawer-close {
  cursor: pointer;
  font-size: var(--font-size-large);
  color: var(--color-primary);
}
#i-drawer-menu .drawer-menu-list {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-small);
  overflow-y: auto;
}
#i-drawer-menu .drawer-menu-list li {
  border-bottom: 1px solid var(--color-gray-light);
}
#i-drawer-menu .drawer-menu-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-small) var(--spacing-small);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.2s;
}
#i-drawer-menu .drawer-menu-list a i {
  color: var(--color-primary);
}

/* オーバーレイ */
.i-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.i-drawer-overlay.active {
  display: block;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .i-hamburger {
    display: block;
  }
  
  .buttons.pc {
    display: none;
  }
  
  .global-menu.pc {
    display: none;
  }
} 

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Breadcrumb
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.breadcrumb {
  font-size: var(--font-size-xsmall);
  padding: var(--spacing-xsmall) 0;
  background-color: var(--color-primary-pale2);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  display: flex;
  align-items: center;
}
.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 0.5rem;
  color: #6b7280;
}
.breadcrumb a {
  font-size: var(--font-size-small);
  color: var(--color-primary); 
  transition: color 0.5s ease;
}
.breadcrumb span {
  color: var(--color-gray);
  font-size: var(--font-size-small);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Form Style
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* form common */
.form .form-group + .form-group {
  margin-top: var(--spacing-medium);
}
.form .form-group.railway-selector {
  display: flex;
  gap: var(--spacing-small);
  margin-top: var(--spacing-xsmall);
}
.form .form-group label,
fieldset legend {
  display: flex;
  margin-bottom: var(--spacing-small);
  align-items: center;
  font-weight: bold;
  color: var(--color-primary);
}
.form .form-group input[readonly] {
  background-color: var(--color-gray-light);
  color: var(--color-gray);
  cursor: not-allowed;
}
/* select textarea input */
.form .form-group select,
.form .form-group textarea,
.form .form-group input {
  width: 100%;
  padding: var(--spacing-xsmall);
  border: 1px solid var(--color-gray-light);
  border-radius: 0.375rem;
  background-color: white;
  font-size: 1rem;
  color: var(--color-primary-dark);
  transition: border-color 0.3s ease;
}
.form .form-group select.is-invalid,
.form .form-group textarea.is-invalid,
.form .form-group input.is-invalid {
  border: 2px solid var(--color-accent02);
}
.form .form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  min-width: fit-content;
}
.form .form-group input[type="date"] {
  width: fit-content;
}
.form .form-group textarea {
  min-height: 300px;
}
.form .form-group.railway-selector .form-select {
  flex: 1;
}
.form .hidden {
  display: none;
}
/* .datetime-group */
.form .datetime-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-items: center;
  margin-bottom: var(--spacing-small);
}
.form .datetime-group select {
  width: fit-content;
}
/* Radio Button */
.form .form-group .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
  margin-top: var(--spacing-small);
}
.form .radio-group .radio-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  padding: var(--spacing-xsmall) var(--spacing-small);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.3s ease;
}
.form .radio-group .radio-label input[type="radio"] {
  width: auto;
  margin: 0;
  padding: 0;
}
.form .radio-group .radio-label input[type="radio"]:checked + span {
  color: var(--color-primary);
  font-weight: bold;
}
/* Checkbox */
.form .checkbox-group {
  margin-top: var(--spacing-xsmall);
  display: flex;
  flex-wrap: wrap;
}
.form .checkbox-group .area-group {
  width: 100%;
}
.form .region-group {
  margin-bottom: var(--spacing-small);
}
.form .region-group h4 {
  margin: 0 0 var(--spacing-xsmall) 0;
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
}
.form .checkbox-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
}
.form .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  padding: var(--spacing-xsmall) var(--spacing-small);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--font-size-small);
}
.form .checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
}
.form .checkbox-label input[type="checkbox"]:checked + span {
  color: var(--color-primary);
  font-weight: bold;
}
/* Upload */
.upload-area {
  border: 2px dashed var(--color-secondary-pale);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-medium);
  background-color: var(--color-white);
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.upload-area.dragover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
}
.upload-area .upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xsmall);
}
.upload-area .upload-content small {
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
}
.upload-area .upload-preview {
  margin-top: var(--spacing-xsmall);
}
.upload-area .upload-preview .preview-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary-pale);
  padding: var(--spacing-xsmall) var(--spacing-small);
  border-radius: var(--border-radius-small);
}
.upload-area .upload-preview .preview-content .file-name {
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
}
.upload-area .upload-preview .preview-content .remove-file {
  background: none;
  border: none;
  color: var(--color-accent02);
}
.upload-area .upload-preview .preview-content .remove-file {
  background: none;
  border: none;
  color: var(--color-accent02);
  cursor: pointer;
  padding: var(--spacing-xsmall);
  font-size: var(--font-size-xsmall);
}
.error-message {
  color: var(--color-accent02);
  font-size: var(--font-size-xsmall);
  margin: var(--spacing-xsmall) 0;
  font-weight: normal;
}
.required {
  display: inline-block;
  background-color: var(--color-accent02);
  padding: calc(var(--spacing-xsmall) / 3) var(--spacing-xsmall);
  border-radius: var(--border-radius-small);
  color: var(--color-white);
  font-size: var(--font-size-xsmall);
  margin-left: var(--spacing-xsmall);
}
.required.even {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* .confirm-list */
.confirm-list {
  padding: var(--spacing-large);
  border-radius: var(--border-radius-large);
  border: var(--border-width-small) solid var(--color-primary);
  background-color: var(--color-primary-pale);
  box-shadow: var(--box-shadow-medium);
  margin-bottom: var(--spacing-large);
}
.confirm-list dl + dl {
  margin-top: var(--spacing-medium);
}
.confirm-list dl dt {
  font-size: var(--font-size-medium);
  color: var(--color-primary-dark);
  font-weight: bold;
  margin-bottom: var(--spacing-xsmall);
}
.confirm-list dl dd {
  font-size: var(--font-size-small);
  color: var(--color-primary);
}

/* .invalid-feedback */
.invalid-feedback {
  display: inline-block;
  background-color: var(--color-accent02);
  padding: calc(var(--spacing-xsmall) / 3) var(--spacing-xsmall);
  color: var(--color-white);
  font-size: var(--font-size-xsmall);
  border-radius: var(--border-radius-small);
  font-weight: bold;
  margin: var(--spacing-xsmall) 0;
}

/* .alert */
.alert {
  padding: var(--spacing-small);
  border-radius: var(--border-radius-small);
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
  margin-bottom: var(--spacing-medium);
}
.alert ul {
  margin-left: var(--spacing-small);
}
.alert.alert-danger {
  background-color: var(--color-accent02);
  color: var(--color-white);
}

/* .tab-section */
.tab-section {
  margin: auto;
}
.tab-section .tab-buttons {
  display: flex;
  gap: var(--spacing-small);
  margin-bottom: -1.5px;
}
.tab-section .tab-buttons .tab-button {
  padding: var(--spacing-xsmall) var(--spacing-large);
  border: none;
  background: var(--color-white);
  cursor: pointer;
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  border: var(--border-width-small) solid var(--color-gray);
  font-size: var(--font-size-medium);
  font-weight: bold;
  transition: all 0.3s ease;
}
.tab-section .tab-buttons .tab-button.active {
  color: var(--color-secondary);
  border-bottom: var(--border-width-small) solid var(--color-white);
}
.tab-section .tab-content {
  padding: var(--spacing-large);
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  border: var(--border-width-small) solid var(--color-gray);
  box-shadow: var(--box-shadow-medium);
}
.tab-section .tab-content .tab-content-item {
  display: none;
}
.tab-section .tab-content .tab-content-item.active {
  display: block;
}
.tab-section .buttons {
  margin-top: var(--spacing-large);
}
/* salary-range */
.salary-range .range-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}
.salary-range .range-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
}
.salary-range .range-label {
  min-width: 2rem;
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
  font-weight: bold;
}
.salary-range .range-input input[type="range"] {
  padding: 0;
  border: none;
  accent-color: var(--color-primary);
  border-radius: var(--border-radius-small);
}
.salary-range .range-input input[type="range"]::-webkit-slider-thumb {
  border-radius: 50%;
  background: var(--color-primary-light);
  cursor: pointer;
  transition: all 0.2s ease;
}
.salary-range .range-input output {
  min-width: 6rem;
  text-align: right;
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
}
.salary-range .range-input .unit {
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
  min-width: 3rem;
}


/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Job List
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.job-list {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--spacing-small) 0;
}
.job-list .job-list-item {
  list-style: none;
  width: calc(50% - var(--spacing-small));
}
.job-list .job-list-item a.job-list-item-box {
  display: block;
  text-decoration: none;
  padding: var(--spacing-large);
  border-radius: var(--border-radius-large);
  color: var(--color-black);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-medium);
  background-color: var(--color-white);
  transition: all .5s ease;
}
.job-list-item-alt-box {
  display: block;
  text-decoration: none;
  color: var(--color-black);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-small);
}
.job-list .job-list-item .job-lead {
  margin-bottom: var(--spacing-xsmall);
}
.job-lead .job-update-date {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: var(--spacing-small);
  font-size: var(--font-size-small);
  text-align: right;
  margin-bottom: var(--spacing-xsmall);
  color: var(--color-gray);
}
.job-list .job-list-item .job-lead .recruitment-num {
  font-size: var(--font-size-small);
  color: var(--color-gray);
}
.job-list .job-list-item .job-lead .job-title {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  font-weight: bold;
  margin: var(--spacing-xsmall) 0;
}
.job-list .job-list-item .job-info-thumbnail {
  border-radius: var(--border-radius-large);
  overflow: hidden;
  vertical-align: bottom;
  margin-bottom: var(--spacing-small);
}
.job-list .job-list-item .job-info-thumbnail img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  vertical-align: bottom;
  transition: all .5s ease;
}
.job-list .job-list-item .job-info {
  display: flex;
  gap: 0 var(--spacing-small);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xsmall);
}
.job-list .job-list-item .job-info dl {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--spacing-xsmall);
  width: 100%;
}
.job-list .job-list-item .job-info dl + dl {
  border-top: var(--border-width-small) solid var(--color-gray);
  padding-top: var(--spacing-xsmall);
}
.job-list .job-list-item .job-info dl dt {
  margin-top: calc(var(--spacing-xsmall) / 2);
  color: var(--color-gray);
}
.job-list .job-list-item .job-info dl dt i {
  margin-right: var(--spacing-xsmall);
  color: var(--color-gray);
}
.job-list .job-list-item .job-info dl dd {
  flex: 1;
}
.job-list .no-jobs,
.no-history {
  width: 100%;
  text-align: center;
  list-style: none;
  font-weight: bold;
  font-size: var(--font-size-large);
  color: var(--color-gray);
}
.job-list .company-name {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xsmall);
  font-weight: bold;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Job List Slim
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.job-list-item-slim {
  display: block;
  padding: var(--spacing-medium);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-small);
  background-color: var(--color-white);
}
.job-list-item-slim p {
  color: var(--color-primary);
  margin-bottom: var(--spacing-xsmall);
  font-size: var(--font-size-xsmall);
}
.job-list-item-slim .job-title {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-bottom: var(--spacing-xsmall);
}
.job-list-item-slim .buttons {
  margin-top: var(--spacing-medium);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Job List Alt
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.job-list-item-alt {
  width: 100%;
  list-style: none;
}
.job-list-item-alt .job-list-item-alt-box .job-title {
  display: block;
  padding: var(--spacing-small) var(--spacing-xsmall);
  text-decoration: none;
  font-weight: bold;
  color: var(--color-primary);
  border-radius: var(--border-radius-small);
  margin: var(--spacing-xsmall) 0;
  transition: all .5s ease;
}
.job-list-item-alt .job-info-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}
.job-list-item-alt .job-info-thumbnail {
  border-radius: var(--border-radius-large);
  overflow: hidden;
  width: calc(45% - var(--spacing-small));
}
.job-list-item-alt .job-info-thumbnail img {
  height: auto;
  max-height: 100%;
  vertical-align: bottom;
}
.job-list-item-alt .job-info-desc {
  width: calc(55% - var(--spacing-small));
}
.job-list-item-alt .job-info-desc .job-info-detail dl {
  display: flex;
  gap: var(--spacing-small);
  margin-bottom: var(--spacing-xsmall);
  padding-bottom: var(--spacing-xsmall);
  border-bottom: var(--border-width-small) solid var(--color-gray-light);
}
.job-list-item-alt .job-info-desc .job-info-detail dl:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.job-list-item-alt .job-info-desc .job-info-detail dl dt {
  width: fit-content;
  font-weight: bold;
  color: var(--color-primary);
  min-width: 5rem;
}
.job-list-item-alt .job-info-desc .job-info-detail dl dd {
  font-size: var(--font-size-small);
}
.job-list-item-alt .job-info-message {
  padding: var(--spacing-small);
  background-color: var(--color-primary-pale);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-small);
}
.job-list-item-alt .job-info-message h4 {
  margin: 0 0 var(--spacing-xsmall) 0;
  font-size: var(--font-size-small);
  color: var(--color-primary);
}
.job-list-item-alt .job-info-message p {
  font-size: var(--font-size-small);
}
.job-list-item-alt .job-actions {
  margin-top: var(--spacing-medium);
}
.job-list-item-alt .job-actions .buttons {
  justify-content: flex-end;
}
.job-list-item-alt .job-actions .buttons .button a {
  color: var(--color-white);
}
/* .job-tags .tag */
.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
  margin-bottom: var(--spacing-small);
}
.tag {
  color: var(--color-white);
  padding: 0 var(--spacing-xsmall);
  border-radius: var(--border-radius-large);
  font-size: var(--font-size-xsmall);
  background-color: var(--color-secondary);
}
.tag.thin {
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
}
.tag-new {
  font-weight: bold;
  background-color: var(--color-accent02);
}
.secret-job {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
  font-weight: bold;
}

/* Time Limit Notice */
.time-limit-notice {
  background: var(--color-secondary-pale);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}
.time-limit-notice .notice-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xsmall);
}
.time-limit-notice .notice-content i {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
  margin-top: var(--spacing-xsmall);
}
.time-limit-notice .notice-text {
  flex: 1;
}
.time-limit-notice .notice-title {
  font-weight: bold;
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-xsmall) 0;
  font-size: var(--font-size-small);
}
.time-limit-notice .notice-desc {
  color: var(--color-secondary);
  margin: 0 0 var(--spacing-xsmall) 0;
  font-size: var(--font-size-small);
  line-height: 1.5;
}
.time-limit-notice .remaining-time {
  color: var(--color-secondary);
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: bold;
}
.time-limit-notice #remainingTime {
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--color-secondary);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Recommend Jobs
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.recommended-jobs {
  background-color: var(--color-primary-pale);
}
.recommended-jobs .job-list {
  flex-wrap: wrap;
  gap: var(--spacing-small);
}
.recommended-jobs .job-list .job-list-item {
  width: calc(33.333% - var(--spacing-small));
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
FAQ
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.faq-content {
  margin: 0 auto var(--spacing-large);
}
.faq-content dl + dl {
  margin-top: var(--spacing-medium);
}
.faq-content dl {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-pale);
  border-radius: var(--border-radius-medium);
}
.faq-content dl dt {
  position: relative;
  font-weight: bold;
  font-size: var(--font-size-medium);
  cursor: pointer;
  padding: var(--spacing-medium);
}
.faq-content dl dt:before {
  content: "Q.";
  display: inline-block;
  color: var(--color-secondary);
  padding-right: var(--spacing-xsmall);
}
.faq-content dl dd {
  position: relative;
  font-size: var(--font-size-small);
  padding: 0 var(--spacing-medium);
}
.faq-content dl dd p:last-child {
  padding-bottom: var(--spacing-medium);
}

/* .sort */
.sort {
  margin-top: var(--spacing-large);
}
.sort .form {
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
}
.sort .form .form-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  margin-top: 0;
}
.sort .form .form-group label {
  margin-bottom: 0;
}
.sort .form .form-group select {
  width: fit-content;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Pagination
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.pagination {
  margin-top: var(--spacing-large);
}
.pagination .pagination-nav {
  display: flex;
  justify-content: center;
}
.pagination .pagination-nav .pagination-list {
  display: flex;
  gap: var(--spacing-xsmall);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .pagination-nav .pagination-list .pagination-item {
  list-style: none;
}
.pagination .pagination-nav .pagination-list .pagination-link {
  display: block;
  padding: var(--spacing-small) var(--spacing-medium);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-small);
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  transform: translateY(0);
  box-shadow: var(--box-shadow-small);
}
.pagination .pagination-nav .pagination-list .pagination-item--active .pagination-link {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: scale(1.05);
  box-shadow: var(--box-shadow-medium);
  font-weight: bold;
}
.pagination .pagination-nav .pagination-list .pagination-item--disabled .pagination-link {
  color: var(--color-gray);
  pointer-events: none;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
column-wrap
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.column-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-medium);
}
.column-wrap.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.column-wrap.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.column-wrap .box {
  padding: var(--spacing-medium);
  background-color: var(--color-primary-pale2);
  border-radius: var(--border-radius-large);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Table
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.table {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--spacing-small);
  line-height: 1.5;
}
.table table th,
.table table td {
  padding: var(--spacing-small);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-light);
}
.table table th {
  font-weight: 600;
  color: var(--color-gray-dark);
  background-color: var(--color-primary-pale);
  white-space: nowrap;
}
.table table tr:last-child td {
  border-bottom: none;
}

/* .job-style-list */
.job-style-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-small);
}
.job-style-list li {
  list-style: none;
}
.job-style-list li a {
  display: block;
  text-decoration: none;
  background-color: var(--color-primary-pale);
  color: var(--color-primary-dark);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-small);
  height: 100%;
  transition: all .5s ease;
}
.job-style-list li a .job-info h3 {
  font-size: var(--font-size-large);
  font-weight: bold;
  margin: 0 0 var(--spacing-xsmall) 0;
}
.job-style-list li a .job-info .desc {
  font-size: var(--font-size-small);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Job Swiper
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.swiper.job-swiper {
  position: relative;
  padding: 0 var(--spacing-large);
  width: 100%;
  height: 100%;
}
.swiper.job-swiper .swiper-button-prev,
.swiper.job-swiper .swiper-button-next {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.8);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: var(--box-shadow-small);
  transition: all .5s ease;
}
.swiper.job-swiper .swiper-button-prev:after,
.swiper.job-swiper .swiper-button-next:after {
  font-size: var(--font-size-large);
}
.swiper.job-swiper .swiper-button-prev {
  left: 0;
}
.swiper.job-swiper .swiper-button-next {
  right: 0;
}
.swiper.job-swiper .swiper-pagination {
  position: relative;
  margin-top: var(--spacing-small);
}
.swiper.job-swiper .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--color-gray);
}
.swiper.job-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Modal
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}
.modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1, 1);
}
.modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal .modal-content {
  position: relative;
  width: fit-content;
  max-width: clamp(70%, 50vw, 1240px);
  min-width: 320px;
  margin: auto;
  background: var(--color-white);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-large);
}
.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-small);
  border-bottom: 1px solid var(--color-gray-light);
}
.modal .modal-header h2 {
  margin: 0;
  font-size: var(--font-size-large);
  color: var(--color-primary);
}
.modal .modal-header h2 i {
  margin-right: var(--spacing-xsmall);
}
.modal .close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xsmall);
}
.modal .close-icon {
  display: block;
  width: var(--spacing-medium);
  height: var(--spacing-medium);
  position: relative;
}
.modal .close-icon:before,
.modal .close-icon:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  top: 50%;
  left: 0;
}
.modal .close-icon:before {
  transform: rotate(45deg);
}
.modal .close-icon:after {
  transform: rotate(-45deg);
}
.modal .modal-body {
  padding: var(--spacing-medium);
  max-height: 80vh;
  overflow-y: auto;
}

/* Renewal Modal */
.modal .modal-content.renewal-modal-content {
  max-width: 600px;
  width: 90%;
}
.modal .modal-content.renewal-modal-content .renewal-content {
  text-align: center;
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-image {
  margin-bottom: var(--spacing-medium);
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-medium);
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-text h3 {
  color: var(--color-primary);
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-small);
  font-weight: bold;
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-text p {
  margin-bottom: var(--spacing-medium);
  line-height: 1.6;
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-note {
  font-weight: bold;
  color: var(--color-primary);
  margin-top: var(--spacing-medium);
}
.modal .modal-content.renewal-modal-content .renewal-content .renewal-actions {
  margin-top: var(--spacing-large);
}

/* Confirm Modal */
.modal .modal-content.confirm-modal-content .confirm-content {
  margin-bottom: var(--spacing-large);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Job Entry
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.job-entry-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-small);
  padding: var(--spacing-large);
  background-color: var(--color-primary-pale2);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-small);
  margin-bottom: var(--spacing-large);
}
.job-entry-info .job-entry-info-content {
  width: calc(50% - var(--spacing-small));
}
.job-entry-info .job-id {
  color: var(--color-gray);
  font-size: var(--font-size-small);
}
.job-entry-info .job-title {
  font-size: var(--font-size-large);
  font-weight: bold;
  margin: var(--spacing-xsmall) 0;
}
.job-entry-info .job-detail-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}
.job-entry-info .job-detail-box dl {
  display: flex;
  justify-content: flex-start;
}
.job-entry-info .job-detail-box dl dt {
  font-weight: bold;
}
.job-entry-info .buttons {
  margin-top: var(--spacing-small);
}
.job-entry-info .thumbnail {
  width: calc(50% - var(--spacing-small));
  overflow: hidden;
}
.job-entry-info .thumbnail img {
  border-radius: var(--border-radius-medium);
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Favorite Notification
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.favorite-notification {
  position: fixed;
  top: var(--spacing-medium);
  right: var(--spacing-medium);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius-medium);
  color: white;
  font-size: var(--font-size-small);
  z-index: 9999;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.favorite-notification-success {
  background-color: var(--color-accent02);
}
.favorite-notification-error {
  background-color: var(--color-accent);
}
.favorite-notification.show {
  opacity: 1;
  transform: translateX(0);
}
.favorite-notification.hide {
  opacity: 0;
  transform: translateX(100%);
}
.fav-link {
  color: var(--color-accent02);
  display: block;
  margin-top: var(--spacing-xsmall);
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--color-white);
  border-radius: var(--border-radius-small);
  text-decoration: none;
  font-size: var(--font-size-small);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Other Service
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.other-service-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-small);
}
.other-service-container .other-service-item a {
  box-shadow: var(--box-shadow-medium);
  transition: all .5s ease;
}
.other-service-container .other-service-item a img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: bottom;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Sitemap
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.sitemap-list ul li a,
.sitemap-list ul li span {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-primary);
}
.sitemap-list ul li.list-parent ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-large);
  margin-top: var(--spacing-small);
}
.sitemap-list ul .list-parent li {
  margin-top: 0;
}
.sitemap-list ul li.list-parent .list-child a {
  font-weight: normal;
}
.sitemap-list ul .list-parent .parent-ul {
  flex-direction: column;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
404
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.not-found .desc {
  max-width: 700px;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  padding: var(--spacing-large);
  background-color: var(--color-primary-pale2);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-small);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Loading
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.loading-component {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}
.loading-content {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-small);
}

/* Spinner Type */
.loading-spinner .spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-primary-pale);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Password Toggle
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrapper input {
  width: 100%;
  padding-right: var(--spacing-medium);
}
.password-toggle {
  position: absolute;
  right: var(--spacing-xsmall);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xsmall);
  color: var(--color-gray);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-medium);
  height: var(--spacing-medium);
  border-radius: var(--border-radius-small);
  transition: all 0.2s ease;
}
.password-toggle i {
  font-size: var(--font-size-small);
  line-height: 1;
}

/* Dots Type */
.loading-dots {
  display: flex;
  gap: var(--spacing-xsmall);
}

.loading-dots .dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  animation: loading-bounce 1.4s infinite both;
}

.loading-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dots .dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0s; }

/* Pulse Type */
.loading-pulse .pulse-circle {
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  border-radius: 50%;
  animation: loading-pulse 1.5s infinite;
}

/* Loading Text */
.loading-text {
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.05em;
}
/* Size Variations */
.loading-small .spinner-ring {
  width: 24px;
  height: 24px;
  border-width: 2px;
}
.loading-small .loading-dots .dot {
  width: 6px;
  height: 6px;
}
.loading-small .pulse-circle {
  width: 24px;
  height: 24px;
}
.loading-small .loading-text {
  font-size: var(--font-size-xsmall);
}
.loading-large .spinner-ring {
  width: 60px;
  height: 60px;
  border-width: 4px;
}
.loading-large .loading-dots .dot {
  width: 12px;
  height: 12px;
}
.loading-large .pulse-circle {
  width: 60px;
  height: 60px;
}
.loading-large .loading-text {
  font-size: var(--font-size-medium);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Footer
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
footer .footer-label {
  padding: var(--spacing-small);
  background-color: var(--color-gray-light);
  color: var(--color-gray);
  font-size: var(--font-size-small);
}
footer .footer-info {
  padding: var(--spacing-large) 0;
}
footer .footer-info .footer-logo {
  margin-bottom: var(--spacing-large);
}
footer .footer-info .footer-logo a img {
  width: clamp(220px, 20%, 340px);
}
footer .footer-info .footer-nav {
  margin-bottom: var(--spacing-large);
  padding-bottom: var(--spacing-xsmall);
}
footer .footer-info .footer-nav.border {
  border-bottom: 1px solid var(--color-gray);
}
footer .footer-info .footer-nav h3 {
  font-size: var(--font-size-medium);
  color: var(--color-primary);
}
footer .footer-info .footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  margin-top: var(--spacing-small);
  align-items: center;
}
footer .footer-info .footer-nav ul li {
  list-style: none;
}
footer .footer-info .footer-nav ul li a {
  display: block;
  text-decoration: none;
  color: var(--color-gray);
  font-size: var(--font-size-small);
}
footer .copy {
  padding: var(--spacing-small);
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  font-size: var(--font-size-small);
}
footer .footer-info .footer-nav-sns {
  border-top: 1px solid var(--color-gray-light);
}
footer .footer-info .sns-list li a i {
  font-size: var(--font-size-large);
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Floating Menu
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.floationg-menu {
  position: fixed;
  bottom: var(--spacing-medium);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--spacing-medium);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.floationg-menu.fixed {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
.sp {
  display: none;
}

@media (max-width: 820px) {
  :root {
    /* Font Sizes */
    --font-size-xsmall: clamp(10px, 2vw, 14px);
    --font-size-small: clamp(14px, 2vw, 16px);
    --font-size-medium: clamp(16px, 2vw, 18px);
    --font-size-large: clamp(18px, 2vw, 20px);
    --font-size-xlarge: clamp(20px, 2vw, 22px);
  }

  .toc {
    display: none;
  }

  .i-header-recruiter {
    background-color: var(--color-primary-pale);
    padding: var(--spacing-xsmall);
    text-align: center;
    font-size: var(--font-size-xsmall);
    color: var(--color-gray);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-small);
  }
  .i-header-recruiter a {
    text-decoration: none;
  }

  /* .tab-section */
  .tab-section .tab-buttons {
    gap: var(--spacing-xsmall);
  }
  .tab-section .tab-buttons .tab-button {
    font-size: var(--font-size-small);
    padding: var(--spacing-xsmall) var(--spacing-small);
  }

  .column-wrap,
  .column-wrap.three,
  .column-wrap.four {
    grid-template-columns: 1fr 1fr;
  }

  /* .flex */
  .flex.three-column > .desc {
    width: calc(50% - var(--spacing-medium));
  }

  /* Password Toggle */
  .password-toggle {
    width: 40px;
    height: 40px;
    right: 8px;
  }
  .password-input-wrapper input {
    padding-right: 56px;
  }
  .password-toggle i {
    font-size: 18px;
  }

  /* footer */
  footer .footer-info .wrapper {
    flex-direction: column;
  }
  footer .footer-info .footer-nav-content {
    width: 100%;
  }

  /* Renewal Modal */
  .modal .modal-content.renewal-modal-content {
    width: 95%;
    margin: 20px auto;
  }
  .modal .modal-content.renewal-modal-content .renewal-content .renewal-text h3 {
    font-size: var(--font-size-medium);
  }  
  .modal .modal-content.renewal-modal-content .renewal-content .renewal-features {
    margin: var(--spacing-small) 0;
  }
  .modal .modal-content.renewal-modal-content .renewal-content .renewal-features li {
    font-size: var(--font-size-small);
  }

  /* Responsive */
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

@media (max-width: 480px) {
  .rich-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  /* .button */
  .buttons {
    gap: var(--spacing-small);
  }
  .button a,
  .formbutton {
    min-width: 80px;
    padding: var(--spacing-small);
  }

  /* .icon-button */
  .icon-button a {
    padding: calc(var(--spacing-xsmall) / 2);
  }

  .i-header .header-bar .header-bar-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xsmall);
  }

  /* .header-logo */
  .header-logo {
    width: clamp(100px, 20%, 120px);
  }

  .note {
    padding: var(--spacing-small);
  }

  /* section */
  section {
    padding: var(--spacing-large) 0;
  }

  /* .job-list */
  .job-list .job-list-item,
  .recommended-jobs .job-list .job-list-item {
    width: 100%;
  }
  .job-list .job-list-item-alt .job-info-content {
    flex-direction: column-reverse;
  }
  .job-list .job-list-item-alt a .job-info-desc,
  .job-list .job-list-item-alt a .job-info-thumbnail {
    width: 100%;
    margin: 0;
  }
  .job-list .job-list-item-alt .job-info-desc,
  .job-list .job-list-item-alt .job-info-thumbnail {
    width: 100%;
  }
  .job-list .job-list-item-alt .job-actions .buttons {
    flex-wrap: wrap;
  }

  /* .tab-section */
  .tab-section .tab-content {
    padding: var(--spacing-xsmall);
  }
  .tab-section .tab-buttons {
    margin-bottom: -1px;
  }
  .tab-section .tab-buttons .tab-button {
    padding: var(--spacing-xsmall);
  }

  /* .column-wrap */
  .column-wrap,
  .column-wrap.three,
  .column-wrap.four {
    grid-template-columns: 1fr;
  }

  /* .search-form */
  .form .form-group label {
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-xsmall);
  }
  .form .form-group select,
  .form .form-group textarea,
  .form .form-group input {
    font-size: var(--font-size-small);
  }
  .search-form .form-group input[type="date"] {
    width: 100%;
  }

  /* Meeting Date */
  .meeting-date-form .form-group input[type="date"] {
    position: relative;
    width: 100%;
  }

  /* .floationg-menu */
  .floationg-menu {
    bottom: var(--spacing-small);
    right: var(--spacing-small);
    left: auto;
    width: auto;
    justify-content: flex-end;
  }
  .floationg-menu .rich-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .floationg-menu .rich-button a {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .floationg-menu .rich-button a i {
    font-size: var(--font-size-large);
    margin: 0;
  }
  .floationg-menu .rich-button a p {
    display: none;
  }

  /* iOS対応 */
  @supports (-webkit-touch-callout: none) {
    @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
      .meeting-date-form .form-group input[type="date"]:not(:focus):not(:valid)::before {
        content: attr(placeholder);
        color: var(--color-primary);
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 1;
      }
      
      .meeting-date-form .form-group input[type="date"]::-webkit-datetime-edit-text,
      .meeting-date-form .form-group input[type="date"]::-webkit-datetime-edit-month-field,
      .meeting-date-form .form-group input[type="date"]::-webkit-datetime-edit-day-field,
      .meeting-date-form .form-group input[type="date"]::-webkit-datetime-edit-year-field {
        color: transparent;
      }
      
      .meeting-date-form .form-group input[type="date"]:focus::-webkit-datetime-edit-text,
      .meeting-date-form .form-group input[type="date"]:focus::-webkit-datetime-edit-month-field,
      .meeting-date-form .form-group input[type="date"]:focus::-webkit-datetime-edit-day-field,
      .meeting-date-form .form-group input[type="date"]:focus::-webkit-datetime-edit-year-field {
        color: var(--color-black);
      }
    }
  }
  input[type="date"].ios-placeholder-visible {
    position: relative;
  }
  input[type="date"].ios-placeholder-visible::before {
    content: attr(placeholder);
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray);
    pointer-events: none;
    z-index: 1;
    font-size: var(--font-size-medium);
  }
  input[type="date"].ios-placeholder-visible::-webkit-datetime-edit {
    color: transparent;
  }

  /* .job-style-list */
  .job-style-list {
    grid-template-columns: 1fr;
  }

  /* .job-swiper */
  .swiper.job-swiper {
    padding: 0;
  }
  .swiper.job-swiper .swiper-button-next,
  .swiper.job-swiper .swiper-button-prev {
    top: 40%;
  }

  /* .other-service-container */
  .other-service-container {
    grid-template-columns: 1fr;
  }

  /* .job-entry-info */
  .job-entry-info {
    flex-direction: column-reverse
  }
  .job-entry-info .job-entry-info-content,
  .job-entry-info .thumbnail {
    width: 100%;
  }

  /* .modal */
  .modal .close-button {
    padding: 0;
  }
  .modal .modal-content {
    border-radius: var(--border-radius-medium);
    min-width: 95%;
  }

  /* .flex */
  .flex.two-column > .desc,
  .flex.two-column > .images {
    width: 100%;
  }
  .flex.three-column > .desc,
  .flex.three-column > .images {
    width: 100%;
  }

  /* footer */
  footer .footer-info .footer-logo a img {
    max-width: 150px;
  }
  footer .footer-info {
    padding: var(--spacing-large) 0;
  }
  footer .footer-info .footer-bnrs img {
    width: 100%;
  }
}

/* Animation */
@keyframes shine {
  100% {
    left: 120%;
  }
}
@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes loading-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes loading-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* hover animation */
@media (min-width: 1028px) {
  .icon-button a:hover {
    background-color: var(--color-primary-pale);
  }
  .i-header .header-bar-area a:hover {
    color: var(--color-primary);
  }
  .button a:hover,
  .formbutton:hover {
    background-color: var(--color-primary);
  }
  .swiper.job-swiper .swiper-button-prev:hover,
  .swiper.job-swiper .swiper-button-next:hover {
    background: var(--color-primary-light);
  }
  .rich-button a:hover,
  .rich-form-button:hover,
  a.primary-grad:hover,
  a.secondary-grad:hover,
  .job-list .job-list-item a:hover .job-info-thumbnail img {
    transform: scale(1.025);
  }
  .rich-button a:hover:before,
  .rich-form-button:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
    animation: shine 1.5s infinite;
  }
  .heart-button:hover,
  .heart-button-link a:hover {
    color: var(--color-white);
    background-color: var(--color-like);
  }
  .heart-button.is-favorite:hover,
  .heart-button-link a.is-favorite:hover {
    color: var(--color-white);
    background-color: var(--color-like-hover);
  }
  .heart-button:hover i,
  .dislike-button:hover i,
  .heart-button-link a:hover i,
  .dislike-button-link a:hover i {
    transform: scale(1.6);
  }
  .global-menu .global-menu-list li a:hover,
  .job-list-item-alt .job-list-item-alt-box .job-title:hover {
    background-color: var(--color-primary-pale);
    color: var(--color-primary);
  }
  .breadcrumb a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
  }
  .search-form .radio-group .radio-label:hover,
  .search-form .checkbox-label:hover,
  .tab-section .tab-buttons .tab-button:hover {
    background-color: var(--color-gray-light);
  }
  .upload-area .upload-preview .preview-content .remove-file .remove-file:hover {
    text-decoration: underline;
  }
  .tab-section .tab-buttons .tab-button.active:hover {
    background-color: var(--color-white);
  }
  .job-style-list li a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    box-shadow: var(--box-shadow-medium);
  }
  .other-service-container .other-service-item a:hover {
    box-shadow: var(--box-shadow-large);
  }
  footer .footer-info .footer-nav ul li a:hover,
  .sitemap-list ul li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .toc .toc-item a:hover {
    background-color: var(--color-primary-pale2);
  }
  .sticky-nav-buttons .icon-button a:hover {
    background-color: var(--color-primary-pale);
    border-radius: var(--border-radius-small);
    transform: translateY(-1px);
    transition: all 0.2s ease;
  }
  .salary-range .range-input input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }
  .pagination .pagination-nav .pagination-list .pagination-link:hover:not(.pagination-item--active .pagination-link) {
    background-color: var(--color-primary-pale);
    box-shadow: var(--box-shadow-medium);
  }
  .password-toggle:hover {
    background-color: var(--color-primary-pale);
    color: var(--color-primary);
  }
}