@charset "utf8";

/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */
:root {
  /* Layout */
  --content-width: 960px;
  --content-width-wide: 1200px;
  --header-height: 70px;
  
  /* Colors */
  --color-primary: #3366CC;
  --color-primary-dark: #0052a3;
  --color-primary-light: #0066cc;
  --color-brand-main: #3171AC;
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-tertiary: #666;
  --color-text-quaternary: #888;
  --color-white: #fff;
  --color-black: #000;
  --color-border: #ccc;
  --color-border-light: #ddd;
  --color-border-lighter: #e0e0e0;
  --color-bg-light: #f5f5f5;
  --color-bg-lighter: #f9f9f9;
  --color-bg-lightest: #fafafa;
  --color-bg-blue: #F4FAFD;
  --color-bg-gradient-start: #e3f2fd;
  --color-bg-gradient-end: #f0f8ff;
  --color-bg-gray: #EDEDED;
  --color-green: #077214;
  --color-green-dark: #2e7d32;
  --color-green-light: #28a745;
  --color-green-lighter: #66bb6a;
  --color-green-bg: #e8f5e9;
  --color-green-border: #a5d6a7;
  --color-blue: #316CB6;
  --color-blue-light: #1976d2;
  --color-blue-lighter: #90caf9;
  --color-blue-bg: #e3f2fd;
  --color-orange: #e65100;
  --color-orange-light: #ffb74d;
  --color-orange-bg: #fff3e0;
  --color-yellow: #ffc107;
  --color-yellow-bg: #fff3cd;
  --color-yellow-text: #856404;
  --color-gray: #959595;
  
  /* Font Sizes */
  --font-size-xs: 0.8125rem;     /* 13px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 0.9375rem;    /* 15px */
  --font-size-md: 1rem;           /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.375rem;      /* 22px */
}

/* ========================================
   Smooth Scroll
   ======================================== */
html {
  scroll-behavior: smooth;
}

/* ========================================
   Typography
   ======================================== */
.boxPageTitle .ttlMain {
  font-size: min(6.5vw, 2.625rem);
}

.voiceHgroup .ttlMain {
  font-weight: 400;
}

.voiceHgroup .ttlMain .brand-sub {
  font-size: 1rem;
  font-weight: 700;
}

.ttlSub01 {
  font-size: clamp(1.125rem, 0.8233rem + 1.1494vw, 1.375rem);
  padding-inline: 1rem;
}

.boxSubTitle p:not(.entry-fin) {
  margin: 0;
}

/* ========================================
   Layout
   ======================================== */
.content {
  padding: 1.125rem 0 5rem;
}

.content.entryDetail {
  padding: 1.125rem 0 5rem;
}

.boxMainVisual {
  max-width: var(--content-width);
}

.boxMainVisual.entryDetail {
  margin: 0 auto;
  padding: 0 20px;
}

.boxMainVisual.entryDetail > .boxPageTitle,
.boxMainVisual.entryDetail > .boxPageTitle .ttlSub01 {
  text-align: left;
}

.boxInner {
  min-width: min-content;
}

.boxPageTitle.ttlFreshBasicInfo {
  margin-top: 0;
}

.content.entryDetail > .boxSubTitle > p {
  font-size: var(--font-size-lg);
  text-align: left;
}

#entry {
  --content-width: 1200px;
}

section.boxInner {
  max-width: var(--content-width);
  margin: 4rem auto;
  padding: 0 20px;
}

section.boxInner-midashi {
  max-width: var(--content-width);
  margin: 1rem auto;
  padding: 0 20px;
}

/* 固定ヘッダーの高さ分だけ余白をあける */
:target {
  scroll-margin-top: var(--header-height); /* ヘッダーの高さ */
}

/* ========================================
   Accessibility
   ======================================== */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ========================================
   Brand Logo
   ======================================== */
.brandLogo {
  display: flex;
  margin: 0 auto 0.75rem;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.brand-main {
  font-weight: 40;
  color: var(--color-brand-main);
}

.brand-sub {
  color: var(--color-black);
}

/* ========================================
   Tab Navigation
   ======================================== */
.boxMainNavigation {
  --content-width: 1200px;
  max-width: var(--content-width);
  margin: 2.5rem auto;
}

.tabNavigation {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-light);
  border-radius: 0.25rem;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.tabList {
  display: flex;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabItem {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
}

.tabItem.is-pending a {
  background-color: #cecece;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

.tabItem.is-pending :is(.tabText, .tabIcon) {
  color: #666;
}

@media screen and (min-width: 769px) {
  .tabItem:not(:first-child):hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background-color: var(--color-border-light);
  }
}

@media screen and (max-width: 768px) {
  .tabNavigation {
    border-radius: 0;
  }
}

.tabItem:hover::after {
  opacity: 0;
}

.tabLink {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: var(--color-bg-light);
  color: var(--color-black);
  font-weight: 500;
  text-decoration: none;
}

.tabLink:visited {
  color: var(--color-black);
}

.tabLink:hover,
.tabLink:focus,
.tabLink.active {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

.tabText {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: center;
  color: var(--color-black);
  white-space: nowrap;
}

.tabText wbr {
  display: inline-block;
  white-space: normal;
}

.tabLink:hover > .tabText,
.tabLink:focus > .tabText,
.tabLink.active > .tabText {
  color: var(--color-white);
}

.tabIcon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tabLink:hover .tabIcon,
.tabLink.active .tabIcon{
  background-color: var(--color-white);
}

.tabLink.active .tabIcon {
  transform: rotate(90deg);
}

/* ========================================
   Category Tag
   ======================================== */
.categoryTag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 1rem;
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: 4px;
}

.categoryTag::after {
  content: '正社員';
  display: inline-block;
}

.detailArticle .categoryTag {
  background-color: var(--color-blue);
}

.not-recruiting > .categoryTag {
  background-color: var(--color-gray);
  color: var(--color-white);
}

.not-recruiting > .categoryTag::after {
  content: '現在募集しておりません';
  display: inline-block;
}

/* ========================================
   Job Cards Grid
   ======================================== */
.jobCards {
  padding: 60px 20px;
}

.cardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 3.125rem;
}

.jobCard {
  position: relative;
  padding: 24px;
  background-color: var(--color-bg-blue);
  border-radius: 0.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

:not(.not-recruiting).jobCard:hover {
  opacity: .6;
}

.cardTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.cardTitle::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  transition: transform 0.3s ease, background-color 0.3s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.491 31.491"><path d="M34.866,19.12A15.745,15.745,0,1,0,19.12,34.866,15.746,15.746,0,0,0,34.866,19.12ZM17.909,25.183l4.813-4.852H11.4V17.909H22.722l-4.813-4.852,1.719-1.706,7.708,7.769L19.628,26.89Z" transform="translate(-3.375 -3.375)"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.491 31.491"><path d="M34.866,19.12A15.745,15.745,0,1,0,19.12,34.866,15.746,15.746,0,0,0,34.866,19.12ZM17.909,25.183l4.813-4.852H11.4V17.909H22.722l-4.813-4.852,1.719-1.706,7.708,7.769L19.628,26.89Z" transform="translate(-3.375 -3.375)"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.card-link,
.staffLink {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.cardLead {
  margin: 0 0 1rem;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

.cardImageWrapper {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.cardImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

:not(.not-recruiting).jobCard:hover .cardImage {
  transform: scale(1.03);
}

.cardDetailBox {
  padding: 16px;
  background-color: var(--color-white);
  borde-radius: 4px;
}

.cardDetailBox p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ========================================
   Detail Article
   ======================================== */
.detailArticle {
  padding: 60px 20px;
}

.articleCard {
  display: flex;
  gap: 2.25rem;
  padding: 40px;
  background-color: var(--color-bg-blue);
  color: var(--color-white);
  border-radius: 0.25rem;
}

.articleLeft {
  flex: 1;
}

.articleTitle {
  margin: 0 0 16px;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.articleLead {
  margin: 0 0 24px;
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}

.articleText {
  margin-top: 24px;
}

.articleText p {
  margin: 0 0 16px;
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.articleText p:last-child {
  margin-bottom: 0;
}

.articleRight {
  flex: 0 0 440px;
}

.articleImages {
  display: flex;
  gap: 2rem 0.625rem;
}

.articleImageItem {
  position: relative;
  flex: 1;
}

.articleImageItem img {
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 13 / 9;
}

.imageButton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 12px 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-light);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.imageButton::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  transition: transform 0.3s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.imageButton:hover,
.imageButton:focus {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

/* ========================================
   CTA Section
   ======================================== */
.ctaSection {
  padding: 60px 20px;
  text-align: center;
}

a.ctaButton {
  color: var(--color-white);
}

.ctaButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
  padding: 0.625rem 2rem;
  background-color: var(--color-white);
  border: solid 1px var(--color-border);
  border-radius: 50px;
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ctaButton:hover,
.ctaButton:focus {
  opacity: .7;
}

.ctaButton:hover .ctaIcon {
  opacity: .5;
  transform: translateX(4px);
}

.flex-child-img {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.ctaIcon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-black);
  transition: transform 0.3s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.491 31.491"><path d="M34.866,19.12A15.745,15.745,0,1,0,19.12,34.866,15.746,15.746,0,0,0,34.866,19.12ZM17.909,25.183l4.813-4.852H11.4V17.909H22.722l-4.813-4.852,1.719-1.706,7.708,7.769L19.628,26.89Z" transform="translate(-3.375 -3.375)"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.491 31.491"><path d="M34.866,19.12A15.745,15.745,0,1,0,19.12,34.866,15.746,15.746,0,0,0,34.866,19.12ZM17.909,25.183l4.813-4.852H11.4V17.909H22.722l-4.813-4.852,1.719-1.706,7.708,7.769L19.628,26.89Z" transform="translate(-3.375 -3.375)"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ctaIcon {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.ctaText {
  margin-top: 24px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

/* ========================================
   Fixed Entry Button
   ======================================== */
a.fixedEntryButton {
  position: fixed;
  min-width: fit-content;
  white-space: nowrap;
  top: calc(var(--header-height) + 1.25rem);
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1rem 2rem;
  background-color: #C40000;
  border-radius: 50px;
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(196, 0, 0, 0.3);
  transition: all 0.3s ease;
}

a.fixedEntryButton:hover {
  background-color: #a00000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 0, 0, 0.4);
}

.entryYear {
  font-size: 1rem;
  line-height: 1;
}

.entryLabel {
  font-size: 0.625rem; /* 10px */
  line-height: 1;
  letter-spacing: 0.05em;
}

/* スマホサイズ：画面下部中央に配置 */
@media (max-width: 768px) {
  a.fixedEntryButton {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    padding: 1rem 2rem;
  }
  
  a.fixedEntryButton:hover {
    transform: translateX(50%) translateY(-2px);
  }
  
  .entryYear {
    font-size: 1.125rem;
  }
  
  .entryLabel {
    font-size: 0.6875rem; /* 11px */
  }
}

/* 小さいスマホ */
@media (max-width: 480px) {
  a.fixedEntryButton {
    bottom: 16px;
    padding: 12px 28px;
  }
  
  .entryYear {
    font-size: 1rem;
  }
  
  .entryLabel {
    font-size: 0.625rem;
  }
}

/* ========================================
   Page Navigation
   ======================================== */
.pageNavigation {
  max-width: var(--content-width);
  padding: 40px 20px 20px;
}

.navWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.backButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.3125rem 1.5rem 0.3125rem 0.5rem;
  background-color: var(--color-primary);
  border-radius: 50px;
  color: var(--color-white);
  font-size: var(--font-size-md);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.backButton:hover,
.backButton:focus {
  opacity: .7;
}

a.backButton {
  color: var(--color-white);
}

.backIcon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-white);
  transition: transform 0.3s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.navLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

a.navLink {
  position: relative;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.3s ease;
}

a.navLink::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.navLink:hover,
.navLink:focus {
  color: var(--color-primary);
}

.navLink:hover::after,
.navLink:focus::after {
  width: 100%;
}

.navLink:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.navSeparator {
  font-weight: 700;
  color: var(--color-black);
}

/* ========================================
   notice entry End
   ======================================== */
.content.entryDetail .entry-fin {
    position: relative;
    background-color:#F9ECEC; 
    padding: 12px 12px 12px 44px;
    margin-block: 0.5rem;
    border-radius: 4px;
    font-size: var(--font-size-sm) !important;
}

.content.entryDetail .entry-fin::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-58%);
  width: 1.4rem;
  height: 1.4rem;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 3 L2 21 H22 Z' fill='none' stroke='%23d32f2f' stroke-width='2'/>\
<line x1='12' y1='9' x2='12' y2='15' stroke='%23d32f2f' stroke-width='2' stroke-linecap='round'/>\
<circle cx='12' cy='18' r='1' fill='%23d32f2f'/>\
</svg>");
}

/* ========================================
   Anchor Navigation
   ======================================== */
.anchorNavigation {
  max-width: var(--content-width);
  padding: 40px 20px 20px;
}

.anchorList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anchorItem {
  margin: 0;
}

.anchorLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1em;
  padding: 1.875rem;
  background-color: var(--color-bg-blue);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.1s ease;
}

.anchorLink:hover,
.anchorLink:focus {
  background-color: #e0f0fc;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.anchorText {
  flex: 1;
  font-weight: 700;
  text-align: center;
}

.anchorIcon {
  display: inline-block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  transition: transform 0.3s ease;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59 12 13.17 16.59 8.59 18 10l-6 6-6-6z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59 12 13.17 16.59 8.59 18 10l-6 6-6-6z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ========================================
   Section Divider
   ======================================== */
.sectionDivider {
  display: block;
  max-width: 960px;
  margin: 40px auto;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* ========================================
   Content Section
   ======================================== */
.contentSection {
  padding: 60px 20px;
}

.sectionTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2rem 0 2.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.titleBar {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 30px;
  background-color: var(--color-primary);
  border-radius: 6px;
}

.titleText {
  flex: 1;
}

/* ========================================
   Staff Grid
   ======================================== */
.staffGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.staffCard {
  position: relative;
  padding: 24px;
  background-color: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.staffCard:hover {
  opacity: .7;
}

.staffImageWrapper {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.staffImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.staffCard:hover .staffImage {
  transform: scale(1.05);
}

.staffName {
  margin: 0 0 8px;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.staffLink:hover,
.staffLink:focus {
  color: var(--color-primary);
}

.staffLink:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.staffLink::after {
  content: '';
  position: absolute;
  inset: 0;
  diplay: block;
}

.staffNameText {
  flex: 1;
}

.staffLinkIcon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-black);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.staffLink:hover .staffLinkIcon,
.staffLink:focus .staffLinkIcon {
  background-color: var(--color-primary);
}

.staffLinkIcon::after {
  content: '→';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-white);
}

.staffNameEn {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.staffNote {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-text-quaternary);
}

/* ========================================
   Data List
   ======================================== */
.dataList {
  margin: 0;
}

.dataItem {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.dataItem:first-child {
  padding-top: 0;
}

.dataItem:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.dataTitle {
  flex: 0 0 200px;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
}

.dataDescription {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* ========================================
   Highlight
   ======================================== */
.dataDescription .highlight {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--color-yellow-bg);
  border: 1px solid var(--color-yellow);
  border-radius: 4px;
  color: var(--color-yellow-text);
  font-weight: 700;
}

/* ========================================
   Requirements Table
   ======================================== */
.requirementsTable {
  width: 100%;
  background-color: var(--color-white);
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.requirementsTable th,
.requirementsTable td {
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-lighter);
}

.requirementsTable tr:last-child th,
.requirementsTable tr:last-child td {
  border-bottom: none;
}

.requirementsTable th {
  width: 200px;
  background-color: var(--color-bg-blue);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-black);
}

.requirementsTable td {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* ========================================
   Requirements Wrapper
   ======================================== */
.requirementsWrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: visible;
}

/* ========================================
   Table Block
   ======================================== */
.tableBlock {
  padding: 32px;
  background-color: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible;
}

.tableBlockTitle {
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.tableNote {
  margin: 0 0 24px;
  font-size: var(--font-size-sm);
  text-align: right;
  color: var(--color-text-tertiary);
}

.contentSection {
  overflow: visible;
}

section.boxInner {
  overflow: visible;
  min-width: 0;
}

/* ========================================
   Salary Table
   ======================================== */
.tableWrap { position: relative; }
.tableResponsive {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tableWrap::before,
.tableWrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* 左 */
.tableWrap::before {
  left: 0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
}

/* 右 */
.tableWrap::after {
  right: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
}

.tableWrap.is-left::before {
  opacity: 1;
}

.tableWrap.is-right::after {
  opacity: 1;
}

.salaryTable {
  width: auto;
  min-width: calc(var(--content-width) - 2rem * 2);
  background-color: var(--color-white);
  border-collapse: collapse;
}

.salaryTable thead {
  background-color: var(--color-bg-blue);
}

.salaryTable th,
.salaryTable td {
  padding: 16px 12px;
  border: 1px solid var(--color-border-lighter);
  font-size: var(--font-size-sm);
  text-align: left;
}

.salaryTable thead th {
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

.salaryTable tbody th {
  background-color: var(--color-bg-lightest);
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.salaryTable tbody td {
  font-weight: 600;
  text-align: center;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.payType {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

/* ========================================
   Salary Breakdown
   ======================================== */
.salaryBreakdown {
  margin-bottom: 20px;
  padding: 16px 20px;
  background-color: var(--color-bg-blue);
  border-radius: 0.25rem;
}

.salaryBreakdown p {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.salaryBreakdown p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Label List
   ======================================== */
.labelList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.label {
  display: inline-block;
  padding: 6px 16px;
  background-color: var(--color-blue-bg);
  border: 1px solid var(--color-blue-lighter);
  border-radius: 4px;
  color: var(--color-blue-light);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* ========================================
   Additional Note
   ======================================== */
.additionalNote {
  margin: 0;
  padding: 12px 16px;
  background-color: var(--color-white);
  border-left: 4px solid var(--color-yellow);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-tertiary);
}

/* ========================================
   Basic Info Table
   ======================================== */
.basicInfoTable {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border-collapse: collapse;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.basicInfoTable th,
.basicInfoTable td {
  padding: 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-lighter);
}

.basicInfoTable tr:last-child th,
.basicInfoTable tr:last-child td {
  border-bottom: none;
}

.basicInfoTable th {
  width: 200px;
  background-color: var(--color-bg-blue);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

.basicInfoTable td {
  font-size: var(--font-size-base);
  line-height: 1.9;
  color: var(--color-text-secondary);
}

.basicInfoTable td strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

.benefitsContent > p,
.benefitsContent > .featureList {
  font-size: 15px;
  line-height: 2;
}

/* ========================================
   Table Responsive
   ======================================== */

@media (max-width: 1024px) {
  .tableBlock {
    padding: 32px 20px;
    min-width: 0;
    overflow: visible;
  }
  
  .tableResponsive {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .salaryTable {
    display: table;
  }
}

@media (max-width: 768px) {
  .basicInfoTable {
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 12px 12px;
    margin-inline: -12px;
    width: calc(100% + 24px);
  }
  
  .tableBlock {
    padding: 24px 20px;
    min-width: 0;
  }
  
  .tableResponsive {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .tableBlock {
    padding: 20px 16px;
    min-width: 0;
  }
  
  .tableResponsive {
    width: 100%;
  }
}

/* ========================================
   Benefits Content
   ======================================== */
.benefitsContent p {
  margin: 0 0 20px;
}

.featureList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 20px;
  background-color: var(--color-bg-lighter);
  border-radius: 4px;
  list-style: none;
}

.featureList li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.featureIcon {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-green-light);
}

/* ========================================
   Location List
   ======================================== */
.locationList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locationTag {
  display: inline-block;
  padding: 8px 20px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ========================================
   Work Hour Detail
   ======================================== */
.workHourDetail {
  margin: 0;
}

.workHourDetail dt {
  margin-bottom: 8px;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
}

.workHourDetail dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* ========================================
   Student Type List
   ======================================== */
.studentTypeList,
.recruitFeatureList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studentTag,
.recruitTag {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-green-bg);
  border: 1px solid var(--color-green-border);
  border-radius: 4px;
  color: var(--color-green-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ========================================
   Feature Tag List
   ======================================== */
.featureTagList,
.targetTagList,
.departmentTagList,
.recruitTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.featureTag {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-blue-bg);
  border: 1px solid var(--color-blue-lighter);
  border-radius: 4px;
  color: var(--color-blue-light);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.featureTag--inactive {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-tertiary);
}

.targetTag {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease;
}

.targetTag:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.departmentTag {
  display: inline-block;
  padding: 10px 24px;
  background-color: var(--color-green-bg);
  border: 2px solid var(--color-green-lighter);
  border-radius: 4px;
  color: var(--color-green-dark);
  font-size: var(--font-size-base);
  font-weight: 700;
}

.recruitSpecialTag {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-orange-bg);
  border: 1px solid var(--color-orange-light);
  border-radius: 4px;
  color: var(--color-orange);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.recruitNote {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: var(--color-bg-lighter);
  border-left: 4px solid var(--color-primary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

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

/* ========================================
   Telephone Link
   ======================================== */
a.tel-link {
  font-size: 1.125em;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
  a.tel-link {
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
  }
}

/* ========================================
   Responsive Design - Tablet
   ======================================== */
@media (max-width: 1024px) {
  .cardGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .articleCard {
    flex-direction: column;
    padding: 32px;
  }

  .articleRight {
    flex: 1;
  }

  .articleImages {
    flex-direction: row;
  }

  .articleImageItem {
    flex: 1;
  }

  .anchorList {
    grid-template-columns: repeat(2, 1fr);
  }

  .staffGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .dataItem {
    flex-direction: column;
    gap: 12px;
  }

  .dataTitle {
    flex: none;
  }

  .requirementsTable th {
    width: 180px;
  }

  .featureList {
    grid-template-columns: 1fr;
  }

  .basicInfoTable th {
    width: 200px;
  }

  .featureTagList,
  .targetTagList,
  .recruitTagList {
    gap: 10px;
  }

  .featureTag,
  .targetTag,
  .recruitSpecialTag {
    padding: 7px 14px;
    font-size: var(--font-size-xs);
  }

  .departmentTag {
    padding: 9px 20px;
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   Voice Profile
   ======================================== */

.profileWrapper {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}

.profileImage img {
  width: 390px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.profileText {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  font-size: 1rem;
}

.profileName {
  font-weight: 700;
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.profileBio {
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .profileWrapper {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .profileImage img {
    width: 100%;
  }
}


/* ========================================
   Voice navLinkButton
   ======================================== */
.pillButtonSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-inline: 1rem;
  max-width: 100%;
  gap: 16px;
  margin: 32px 0;
}

a.pillButton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 2rem;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 9999px;
  font-size: min(4vw, 1rem);
  font-weight: 700;
  min-width: 0px;
  max-width: 268px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

a.pillButton:hover,
a.pillButton:focus-visible {
  opacity: .7;
  transform: translateY(-1px);
  outline: none;
}

a.pillButton:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.pillButtonText {
  line-height: 1.4;
  margin-inline: auto;
}

@media (max-width: 768px) {
  a.pillButtonSection {
    flex-direction: column;
  }

  a.pillButton {
    width: 100%;
  }
}

/* ========================================
   Responsive Design - Mobile
   ======================================== */
@media (max-width: 768px) {
  .tabList {
    flex-direction: column;
  }

  .tabItem {
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .tabItem:not(:last-child)::after {
    display: none;
  }

  .tabItem:last-child {
    border-bottom: none;
  }

  .tabLink {
    padding: 14px 20px;
    font-size: var(--font-size-base);
  }

  .cardGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .jobCard {
    padding: 20px;
  }

  .articleCard {
    gap: 24px;
    padding: 24px;
  }

  .articleTitle {
    font-size: 22px;
  }

  .articleLead {
    font-size: var(--font-size-base);
  }

  .articleImages {
    flex-direction: column;
  }

  .entryBoxInner {
    padding: 32px 24px;
  }

  .entryLead {
    font-size: var(--font-size-md);
  }

  .entryButton {
    font-size: min(4vw, 1.2rem);
    width: 100%;
    max-width: fit-content;
  }

  .entryLinks ul {
    flex-direction: column;
    gap: 16px;
  }

  .navWrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .backButton {
    width: fit-content;
    justify-content: center;
  }

  .navLinks {
    width: 100%;
    gap: 1rem 0.5rem;
    justify-content: center;
  }

  .anchorList {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .anchorLink {
    min-height: 50px;
    padding: 14px 16px;
  }

  .staffGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sectionTitle {
    font-size: var(--font-size-xl);
  }

  .titleBar {
    width: 10px;
    height: 24px;
  }

  .requirementsTable {
    display: block;
    overflow-x: auto;
  }

  .requirementsTable th,
  .requirementsTable td {
    display: block;
    width: 100%;
    padding: 16px;
  }

  .requirementsTable th {
    padding-bottom: 8px;
    border-bottom: none;
  }

  .requirementsTable td {
    padding-top: 0;
  }

  .requirementsTable tr {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
  }

  .requirementsTable tr:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .tableBlock {
    min-width: 0;
    padding: 24px 20px;
  }

  .salaryTable {
    font-size: var(--font-size-xs);
  }

  .salaryTable th,
  .salaryTable td {
    padding: 12px 8px;
  }

  .basicInfoTable th,
  .basicInfoTable td {
    display: block;
    width: auto;
    padding: 16px;
    border: none;
  }

  .basicInfoTable th {
    padding-bottom: 8px;
    background-color: var(--color-bg-blue);
    border-bottom: none;
  }

  .basicInfoTable tr {
    display: block;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
  }

  .basicInfoTable tr:last-child {
    margin-bottom: 0;
  }

  .featureList {
    padding: 16px;
  }

  .locationList,
  .studentTypeList,
  .recruitFeatureList {
    flex-direction: column;
  }

  .locationTag,
  .studentTag,
  .recruitTag {
    text-align: center;
  }

  .featureTagList,
  .targetTagList,
  .departmentTagList,
  .recruitTagList {
    flex-direction: column;
  }

  .featureTag,
  .targetTag,
  .departmentTag,
  .recruitSpecialTag {
    text-align: center;
  }

  .targetTag:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
  }

  .recruitNote {
    padding: 10px 14px;
    font-size: var(--font-size-xs);
  }
}


/* ========================================
   Responsive Design - Small Mobile
   ======================================== */
@media (max-width: 480px) {
  section.boxInner {
    max-width: 100%;
    padding: 0 16px;
  }

  .jobCards,
  .detailArticle,
  .ctaSection,
  .entryBox {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tabLink {
    padding: 12px 16px;
    font-size: var(--font-size-sm);
  }

  .cardTitle {
    font-size: var(--font-size-lg);
  }

  .articleTitle {
    font-size: var(--font-size-xl);
  }

  .pageNavigation {
    padding: 20px 16px 16px;
  }

  .navLink {
    font-size: var(--font-size-sm);
  }

  .navSeparator {
    font-size: var(--font-size-sm);
  }

  .anchorLink {
    padding: 12px 14px;
    font-size: var(--font-size-sm);
  }

  .contentSection {
    padding: 40px 16px;
  }

  .sectionDivider {
    margin: 30px auto;
  }

  .dataItem {
    padding: 20px 0;
  }

  .dataTitle {
    font-size: var(--font-size-base);
  }

  .dataDescription {
    font-size: var(--font-size-sm);
  }

  .tableBlock {
    padding: 20px 16px;
  }

  .tableBlockTitle {
    font-size: var(--font-size-lg);
  }

  .salaryTable th,
  .salaryTable td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .salaryBreakdown {
    padding: 12px 16px;
  }

  .salaryBreakdown p {
    font-size: var(--font-size-xs);
  }

  .labelList {
    flex-direction: column;
  }

  .label {
    text-align: center;
  }

  .basicInfoTable th,
  .basicInfoTable td {
    padding: 14px;
    font-size: var(--font-size-sm);
  }

  .featureList li {
    font-size: var(--font-size-xs);
  }

  .highlight {
    padding: 4px 10px;
    font-size: var(--font-size-sm);
  }

  .featureTag,
  .targetTag,
  .recruitSpecialTag {
    padding: 6px 12px;
    font-size: 12px;
  }

  .departmentTag {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .tabNavigation,
  .ctaButton,
  .entryButton,
  .pageNavigation,
  .anchorNavigation {
    display: none;
  }

  .jobCard,
  .articleCard,
  .entryBoxInner,
  .contentSection {
    page-break-inside: avoid;
  }

  .featureTag--inactive {
    display: none;
  }

  .featureTagList,
  .targetTagList,
  .departmentTagList,
  .recruitTagList {
    gap: 8px;
  }

  .tableResponsive {
    overflow: visible;
  }

  .salaryTable {
    min-width: auto;
  }

  .tableBlock,
  .basicInfoTable {
    border: 1px solid var(--color-border);
    box-shadow: none;
  }
}