:root {
  --inner-navy: #0d3f49;
  --inner-coral: #ff7a66;
  --inner-yellow: #fff6d7;
}

/* Rich public job profiles */
.detail-link.line { background: #00c403; }
.list-application-status { display: inline-block; margin-top: .35rem; color: #00a803; font-size: .75rem; font-weight: 900; }
.bulk-apply-guide { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: .9rem 1rem; color: #365962; background: #fff9df; border: 1px solid #f0dea0; border-radius: 12px; }
.bulk-apply-guide strong, .bulk-apply-guide span { display: block; }
.bulk-apply-guide span { margin-top: .2rem; font-size: .78rem; }
.bulk-apply-guide a { flex: 0 0 auto; padding: .55rem .8rem; color: #fff; background: #0d3f49; border-radius: 8px; font-size: .78rem; font-weight: 800; text-decoration: none; }
.application-status { padding: .45rem .65rem; color: #00a803; background: #e9f8ef; border: 1px solid #bfe9cf; border-radius: 8px; font-size: .8rem; font-weight: 900; text-align: center; }
.shop-title-row { display: flex; gap: .8rem; align-items: center; margin-bottom: .45rem; }
.shop-title-row small { color: #6e878e; font-size: .72rem; }
.shop-logo { width: 74px; height: 74px; object-fit: contain; background: #fff; border: 1px solid #d8edf1; border-radius: 14px; }
.apply-tel { color: #08798c; background: #fff; border: 1px solid #78d0de; }
.detail-utility-actions, .social-links, .application-methods { display: flex; flex-wrap: wrap; gap: .55rem; }
.detail-utility-actions { margin-top: .8rem; }
.detail-utility-actions a, .detail-utility-actions button, .social-links a, .inline-action { padding: .45rem .7rem; color: #08798c; background: #f1fbfd; border: 1px solid #cceaf0; border-radius: 7px; font: inherit; font-size: .78rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.application-methods .apply-action { min-width: 180px; }
.compact-address { font-size: .86rem; overflow-wrap: anywhere; }
.tag-groups { display: grid; gap: .7rem; margin-top: 1rem; }
.tag-groups section { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .7rem; align-items: start; }
.tag-groups h3 { margin: 0; padding-top: .22rem; color: #365962; font-size: .78rem; }
.tag-groups section > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-groups span { padding: .3rem .5rem; color: #08798c; background: #e8f9fb; border-radius: 5px; font-size: .74rem; font-weight: 700; }
.photo-gallery, .recommendation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.photo-gallery figure { margin: 0; overflow: hidden; background: #f3fbfc; border-radius: 12px; }
.photo-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-image { display: block; width: 100%; margin-bottom: .7rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.media-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.media-link-grid a { display: flex; justify-content: space-between; gap: .8rem; padding: 1rem; color: #123b46; background: #f5fbfc; border: 1px solid #d8edf1; border-radius: 10px; text-decoration: none; }
.media-link-grid span { color: #08798c; font-size: .8rem; font-weight: 800; }
.recommendation-grid article { overflow: hidden; border: 1px solid #d8edf1; border-radius: 12px; }
.recommendation-grid a { display: grid; gap: .35rem; padding-bottom: .75rem; color: #123b46; text-decoration: none; }
.recommendation-grid img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.recommendation-grid strong, .recommendation-grid span { padding: 0 .75rem; }
.recommendation-grid span { color: #08798c; font-size: .78rem; font-weight: 800; }
.ambiance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ambiance-grid div { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem; color: #365962; background: #f5fbfc; border-radius: 9px; font-size: .8rem; }
.ambiance-grid span { color: #22a8c0; letter-spacing: .12em; }
.age-group-row { display: flex; gap: .8rem; align-items: center; margin-top: .8rem; padding: .8rem; background: #f8fdfe; border-radius: 9px; color: #365962; font-size: .8rem; }
.age-group-row > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.age-group-row span { padding: .25rem .45rem; color: #08798c; background: #e8f9fb; border-radius: 5px; font-weight: 700; }
.section-note { margin: .8rem 0 0; padding: .8rem; background: #f8fdfe; border-radius: 9px; }
.step-list li > span { display: grid; min-height: 42px; place-items: center; color: #fff; background: #08798c; border-radius: 8px; font-size: .68rem; font-weight: 900; }
.step-list li p { margin: 0; }

@media (max-width: 680px) {
  .bulk-apply-guide { align-items: stretch; flex-direction: column; }
  .bulk-apply-guide a { text-align: center; }
  .photo-gallery, .recommendation-grid, .ambiance-grid { grid-template-columns: 1fr 1fr; }
  .tag-groups section { grid-template-columns: 1fr; gap: .35rem; }
  .application-methods .apply-action { width: 100%; min-width: 0; }
  .mobile-sticky-apply { grid-template-columns: 74px repeat(2, minmax(0, 1fr)); }
  .mobile-sticky-apply a:only-of-type { grid-column: span 2; }
  .mobile-sticky-apply .mobile-line { background: #00c403; }
}

.inner-page {
  background:
    radial-gradient(circle at 8% 3%, rgba(199, 240, 248, 0.62), transparent 24rem),
    linear-gradient(#f4fcfe, #fff 34rem);
}

.inner-page .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.inner-page .brand,
.inner-page .global-nav a,
.inner-page .menu-toggle {
  text-decoration: none;
}

.inner-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 1rem 0;
  color: #587680;
  font-size: 0.76rem;
}

.breadcrumb a {
  color: #08798c;
}

.breadcrumb span::before {
  margin-right: 0.45rem;
  color: #9bb4ba;
  content: "/";
}

.page-title-block {
  margin-bottom: 1.2rem;
  padding: 1.45rem 1.6rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #fff, #ecfbfe);
  border: 1px solid #d8edf1;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(26, 106, 120, 0.08);
}

.page-title-block::after {
  position: absolute;
  width: 180px;
  height: 180px;
  right: -56px;
  top: -80px;
  background: rgba(43, 199, 224, 0.12);
  border-radius: 50%;
  content: "";
}

.page-kicker {
  display: block;
  margin-bottom: 0.3rem;
  color: #08798c;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.page-title-block h1 {
  margin: 0;
  color: #123b46;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.35;
}

.page-title-block p {
  margin: 0.45rem 0 0;
  color: #587680;
  font-size: 0.88rem;
}

/* list */
.list-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  padding-bottom: 3rem;
}

.filter-panel {
  position: sticky;
  top: 88px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2eef1;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(29, 95, 109, 0.08);
}

.filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 1rem 1.05rem;
  color: #fff;
  background: #0d3f49;
  font-size: 1rem;
}

.filter-title span {
  font-size: 0.75rem;
  opacity: 0.72;
}

.filter-group {
  padding: 1rem 1.05rem;
  border-bottom: 1px solid #e2eef1;
}

.filter-group h2 {
  margin: 0 0 0.7rem;
  color: #123b46;
  font-size: 0.88rem;
}

.filter-options {
  display: grid;
  gap: 0.55rem;
}

.filter-options label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #43646d;
  font-size: 0.8125rem;
  cursor: pointer;
}

.filter-options input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #22bcd6;
}

.filter-actions {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}

.filter-submit,
.filter-clear,
.mobile-filter-button {
  min-height: 44px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.filter-submit {
  color: #fff;
  background: linear-gradient(135deg, #08798c, #065f70);
  border: 0;
}

.filter-clear {
  color: #587680;
  background: #fff;
  border: 1px solid #d8e7ea;
}

.listing-heading {
  margin-bottom: 1rem;
  padding: 1.25rem 1.4rem;
  background: linear-gradient(135deg, #fff, #ecfbfe);
  border: 1px solid #d8edf1;
  border-radius: 16px;
}

.listing-heading h1,
.listing-heading p {
  margin: 0;
}

.listing-heading h1 {
  color: #123b46;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.listing-heading p {
  margin-top: 0.35rem;
  color: #587680;
}

.listing-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 3rem;
}

.listing-filter-panel {
  position: sticky;
  top: 88px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbecee;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(29, 95, 109, 0.08);
}

.listing-filter-panel form {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.listing-filter-panel h2 {
  margin: -1rem -1rem 0;
  padding: 0.9rem 1rem;
  color: #fff;
  background: #0d3f49;
  font-size: 1rem;
}

.listing-filter-panel label,
.listing-filter-panel fieldset {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  color: #365962;
  font-size: 0.82rem;
  font-weight: 800;
}

.listing-filter-panel fieldset {
  padding: 0.7rem;
  border: 1px solid #dbecee;
  border-radius: 10px;
}

.listing-filter-panel fieldset label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.listing-filter-panel fieldset p {
  margin: 0;
  color: #6b858c;
  font-size: 0.75rem;
  font-weight: 500;
}

.listing-filter-panel .is-requested-filter {
  padding: 0.7rem;
  background: #edfbfd;
  border: 2px solid #53c9da;
  border-radius: 10px;
}

.listing-filter-panel input:not([type="checkbox"]),
.listing-filter-panel select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.65rem;
  color: #123b46;
  background: #fff;
  border: 1px solid #cfe3e7;
  border-radius: 8px;
  font: inherit;
}

.listing-filter-panel input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #0a8ba0;
}

.listing-filter-actions {
  display: grid;
  gap: 0.55rem;
}

.listing-filter-actions button,
.listing-filter-actions a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 9px;
  font-weight: 900;
  text-align: center;
}

.listing-filter-actions button {
  color: #fff;
  background: linear-gradient(135deg, #0a8ba0, #065f70);
  border: 0;
  cursor: pointer;
}

.listing-filter-actions a {
  color: #0a788b;
  background: #fff;
  border: 1px solid #b9dfe5;
}

.listing-results {
  min-width: 0;
}

.area-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.area-link-list a {
  padding: 0.45rem 0.75rem;
  color: #0a788b;
  background: #eaf9fb;
  border: 1px solid #c8e9ee;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
}

.area-link-list a.is-current {
  color: #fff;
  background: #08798c;
}

.listing-results .jobs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.listing-results .empty-state {
  padding: 2.5rem 1rem;
  background: #fff;
  border: 1px solid #dbecee;
  border-radius: 14px;
  text-align: center;
}

.listing-results .pagination {
  margin: 1rem 0;
  text-align: center;
}

.listing-results .pagination a {
  display: inline-grid;
  min-height: 44px;
  place-items: center;
  padding: 0 1.2rem;
  color: #fff;
  background: #08798c;
  border-radius: 9px;
  font-weight: 900;
}

.mobile-filter-button {
  display: none;
  width: 100%;
  margin-bottom: 0.8rem;
  color: #08798c;
  background: #fff;
  border: 1px solid #8edce8;
}

.result-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.result-head p {
  margin: 0;
  color: #587680;
  font-size: 0.8rem;
}

.result-head strong {
  color: #08798c;
  font-size: 1.45rem;
}

.result-head select {
  min-height: 40px;
  padding: 0 2rem 0 0.75rem;
  color: #365962;
  background: #fff;
  border: 1px solid #d8e7ea;
  border-radius: 9px;
}

.list-card {
  display: block;
  margin-bottom: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2eef1;
  border-radius: 16px;
  box-shadow: 0 9px 26px rgba(27, 98, 112, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(27, 98, 112, 0.13);
}

.list-card-image {
  display: block;
  min-height: 0;
  aspect-ratio: 3 / 1;
  position: relative;
  background: #dff6fa;
}

.list-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plan-badge,
.fresh-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.plan-badge {
  color: #5a3a00;
  background: linear-gradient(135deg, #ffe382, #ffad35);
}

.fresh-badge {
  color: #fff;
  background: #08798c;
}

.list-save {
  position: absolute;
  z-index: 2;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #c64838;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(31, 76, 84, 0.16);
  font-size: 1.35rem;
  cursor: pointer;
}

.list-save[aria-pressed="true"] {
  color: #fff;
  background: #c64838;
}

.list-card-body {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem;
}

.list-card-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.list-card-heading > img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1px solid #d8edf1;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(27, 98, 112, 0.1);
}

.shop-monogram {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #0a8ba0, #064f5d);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(27, 98, 112, 0.16);
  font-size: 2rem;
  font-weight: 900;
}

.list-card-heading .list-card-copy {
  margin-bottom: 0;
}

.list-card-meta {
  margin: 0 0 0.35rem;
  color: #08798c;
  font-size: 0.8125rem;
  font-weight: 800;
}

.list-card h2 {
  margin: 0;
  color: #123b46;
  font-size: 1.18rem;
}

.list-card h2 a {
  color: inherit;
  text-decoration: none;
}

.list-card-copy {
  margin: 0.35rem 0 0.85rem;
  color: #587680;
  font-size: 0.875rem;
  line-height: 1.65;
}

.list-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 0.8rem;
  border: 1px solid #d8edf1;
  border-radius: 10px;
  overflow: hidden;
}

.list-pay div {
  padding: 0.55rem 0.7rem;
}

.list-pay div + div {
  border-left: 1px solid #d8edf1;
}

.list-pay dt {
  color: #587680;
  font-size: 0.75rem;
}

.list-pay dd {
  margin: 0.1rem 0 0;
  color: #08798c;
  font-size: 0.92rem;
  font-weight: 900;
}

.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.mini-tags span {
  padding: 0.25rem 0.48rem;
  color: #08798c;
  background: #e8f9fb;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.list-summary {
  display: grid;
  margin: 0 0 0.9rem;
  border-top: 1px solid #e2eef1;
}

.list-summary div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  border-bottom: 1px solid #e2eef1;
}

.list-summary dt,
.list-summary dd {
  padding: 0.7rem 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.list-summary dt {
  color: #365962;
  background: #f5fbfc;
  font-weight: 800;
}

.list-summary dd {
  margin: 0;
  color: #43646d;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  margin-top: auto;
}

.card-bottom .list-save {
  position: static;
  flex: 0 0 auto;
}

.list-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.detail-link.secondary {
  color: #0d3f49;
  background: #fff;
  border: 1px solid #b9dfe5;
}

.card-bottom small {
  color: #587078;
  font-size: 0.75rem;
}

.detail-link {
  padding: 0.55rem 1rem;
  color: #fff;
  background: #0d3f49;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
}

.list-empty {
  padding: 3rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px dashed #b8dbe1;
  border-radius: 14px;
}

.seo-links {
  margin-top: 1.4rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e2eef1;
  border-radius: 14px;
}

.seo-links h2 {
  margin: 0 0 0.75rem;
  color: #123b46;
  font-size: 1rem;
}

.seo-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.seo-link-grid a {
  padding: 0.42rem 0.65rem;
  color: #08798c;
  background: #f1fbfd;
  border: 1px solid #d7edf1;
  border-radius: 7px;
  font-size: 0.8125rem;
  text-decoration: none;
}

/* detail */
.detail-page {
  background: #fbfaf7;
}

.detail-page .inner-shell {
  width: min(1200px, calc(100% - 40px));
}

.detail-layout {
  padding: 30px 30px 4rem;
  background: #fff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgba(40, 55, 60, 0.06);
}

.detail-main,
.apply-side {
  min-width: 0;
}

.detail-hero-card,
.apply-box {
  background: #fff;
  border: 1px solid #e2eef1;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(27, 98, 112, 0.08);
}

.detail-hero-card {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.detail-cover {
  display: grid;
  aspect-ratio: 3 / 1;
  min-height: 0;
  position: relative;
  place-items: center;
  overflow: hidden;
  background: #f3fbfc;
}

.detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.detail-cover .plan-badge {
  top: 1rem;
  left: 1rem;
}

.detail-profile-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.detail-profile-visual {
  min-width: 0;
}

.detail-profile-visual .shop-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  background: #f4f4f2;
  border: 0;
  border-radius: 0;
}

.detail-profile-info {
  min-width: 0;
}

.detail-profile-heading {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-start;
}

.detail-profile-heading h1 {
  margin: 0;
  color: #152d36;
  font-size: 22px;
  line-height: 1.2;
}

.detail-profile-heading .name-kana {
  margin: 0.25rem 0 0;
}

.detail-profile-heading .detail-utility-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 0;
}

.detail-profile-heading .detail-utility-actions a,
.detail-profile-heading .detail-utility-actions button {
  min-height: 50px;
  padding: 10px 25px;
  background: #fff;
  border-color: #2196f3;
  border-radius: 999px;
  color: #2196f3;
  font-size: 15px;
  font-weight: 700;
}

.detail-profile-heading .detail-utility-actions .profile-save {
  width: 50px;
  padding: 0;
  color: #d45983;
  font-size: 1.15rem;
}

.detail-profile-heading .detail-utility-actions .profile-save[aria-pressed="true"] {
  color: #fff;
  background: #d45983;
  border-color: #d45983;
}

.detail-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 1.2rem;
}

.detail-concepts span {
  padding: 0.45rem 0.7rem;
  color: #d34f7a;
  background: #fff;
  border: 1px solid #ee9db7;
  font-size: 0.78rem;
  font-weight: 800;
}

.detail-profile-info .summary-facts {
  display: block;
  border: 0;
  border-radius: 0;
}

.detail-profile-info .summary-facts div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  min-height: 55px;
  padding: 15px 0;
  border-top: 1px solid #e8e8e5;
}

.detail-profile-info .summary-facts div:last-child {
  border-bottom: 1px solid #e8e8e5;
}

.detail-profile-info .summary-facts div + div {
  border-left: 0;
}

.detail-profile-info .summary-facts dt {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  color: #142346;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.summary-fact-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fe7fb6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.detail-profile-info .summary-facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: baseline;
  padding: 0;
  color: #343b40;
  font-size: 16px;
}

.detail-profile-info .summary-facts dd small {
  color: #505960;
  font-size: 0.78rem;
  font-weight: 700;
}

.detail-profile-info .summary-facts dd strong {
  color: #e45f8b;
  font-size: 1.35rem;
}

.detail-application-panel {
  display: grid;
  grid-template-columns: 190px 380px minmax(0, 484px);
  gap: 10px;
  align-items: center;
  margin-top: 30px;
  min-height: 117px;
  padding: 20px 30px;
  background: #fff9f2;
  border: 3px solid #e2315b;
  border-radius: 0;
}

.application-status-block {
  text-align: center;
}

.application-status-block span,
.application-status-block strong,
.application-contact small,
.application-panel-actions .apply-web small,
.application-panel-actions .apply-web strong {
  display: block;
}

.application-status-block span {
  color: #70787d;
  font-size: 0.7rem;
}

.application-status-block strong {
  margin-top: 0.25rem;
  color: #d45983;
  font-size: 1rem;
}

.application-contact {
  min-width: 0;
  text-align: center;
}

.application-contact a,
.application-contact > strong {
  color: #2a3940;
  font-size: 1.25rem;
  font-weight: 900;
  text-decoration: none;
}

.application-contact small {
  margin-top: 0.25rem;
  color: #777f83;
  font-size: 0.7rem;
}

.application-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: center;
}

.application-panel-actions .apply-action {
  height: 60px;
  min-height: 60px;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
}

.application-panel-actions .apply-web {
  flex-direction: column;
  gap: 0.05rem;
}

.application-panel-actions .apply-web small {
  font-size: 12px;
}

.application-panel-actions .apply-web strong {
  font-size: 20px;
}

.detail-summary {
  padding: 1.35rem 1.5rem 1.5rem;
}

.detail-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.detail-heading-copy {
  min-width: 0;
}

.detail-primary-actions {
  display: grid;
  gap: 0.55rem;
}

.detail-brand {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.detail-brand > img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 1px solid #d8edf1;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(27, 98, 112, 0.1);
}

.detail-summary .concept-label {
  margin: 0 0 0.3rem;
  color: #08798c;
  font-size: 0.8125rem;
  font-weight: 800;
}

.detail-summary h1 {
  margin: 0;
  color: #123b46;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.name-kana {
  margin: 0.2rem 0 0.85rem;
  color: #587078;
  font-size: 0.75rem;
}

.detail-lead {
  margin: 0.55rem 0 0;
  color: #365962;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.7;
}

.detail-job-title {
  margin: 0.35rem 0 0;
  color: #123b46;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
}

.summary-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 1px solid #d8edf1;
  border-radius: 11px;
  overflow: hidden;
}

.summary-facts div {
  padding: 0.8rem 0.9rem;
}

.summary-facts div + div {
  border-left: 1px solid #d8edf1;
}

.summary-facts dt {
  color: #587680;
  font-size: 0.75rem;
}

.summary-facts dd {
  margin: 0.2rem 0 0;
  color: #08798c;
  font-size: 1.02rem;
  font-weight: 900;
}

.summary-facts .summary-location dd {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.55;
}

.detail-section {
  margin-top: 30px;
  padding: 0 0 30px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.detail-section h2 {
  display: block;
  margin: 0 0 1.4rem;
  padding: 0;
  color: #142346;
  background: transparent;
  border-left: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.detail-section h2::before {
  content: none;
}

.detail-section p {
  color: #43646d;
  font-size: 13px;
  line-height: 1.8;
}

.detail-intro-section .detail-lead {
  margin: 0;
  color: #384c54;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.feature-grid article {
  padding: 1rem;
  background: linear-gradient(145deg, #f2fcfe, #fff);
  border: 1px solid #d8edf1;
  border-radius: 12px;
}

.feature-grid b {
  display: block;
  margin-bottom: 0.35rem;
  color: #08798c;
  font-size: 0.84rem;
}

.feature-grid p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.info-table {
  margin: 0;
  border-top: 1px solid #e2eef1;
}

.info-table > div {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.15rem 0;
  border-bottom: 1px solid #e2eef1;
}

.info-table dt,
.info-table dd {
  padding: 0;
}

.info-table dt {
  color: #365962;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.info-table dd {
  margin: 0.65rem 0 0;
  color: #43646d;
  font-size: 13px;
  line-height: 1.8;
}

.detail-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.detail-tag-row span {
  padding: 0.3rem 0.55rem;
  color: #08798c;
  background: #e8f9fb;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.detail-application-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #effbfd, #fff);
  border: 1px solid #cceaf0;
  border-radius: 12px;
}

.detail-application-bar p {
  margin: 0;
}

.detail-application-bar strong,
.detail-application-bar span {
  display: block;
}

.detail-application-bar strong {
  color: #123b46;
}

.detail-application-bar span {
  margin-top: 0.2rem;
  color: #587680;
  font-size: 0.76rem;
}

.step-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem;
  color: #43646d;
  background: #f8fdfe;
  border: 1px solid #e2eef1;
  border-radius: 10px;
  font-size: 0.8rem;
}

.step-list b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: #08798c;
  border-radius: 50%;
}

.qa-list details {
  border-top: 1px solid #e2eef1;
}

.qa-list details:last-child {
  border-bottom: 1px solid #e2eef1;
}

.qa-list summary {
  padding: 0.9rem 0.2rem;
  color: #244d57;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.qa-list p {
  margin: 0 0 1rem;
  padding-left: 1.8rem;
  position: relative;
}

.qa-list p::before {
  position: absolute;
  left: 0.2rem;
  color: #08798c;
  content: "A.";
  font-weight: 900;
}

.apply-side {
  position: sticky;
  top: 88px;
}

.apply-box {
  padding: 1.2rem;
}

.apply-box .apply-label {
  display: block;
  margin-bottom: 0.3rem;
  color: #08798c;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.apply-box h2 {
  margin: 0;
  color: #123b46;
  font-size: 1.05rem;
}

.apply-box > p {
  margin: 0.45rem 0 0.9rem;
  color: #587680;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.application-meter {
  margin-bottom: 0.9rem;
  padding: 0.75rem;
  background: #fff9df;
  border-radius: 10px;
}

.application-meter div {
  display: flex;
  justify-content: space-between;
  color: #785e00;
  font-size: 0.75rem;
  font-weight: 800;
}

.meter-track {
  display: block;
  height: 7px;
  margin-top: 0.45rem;
  overflow: hidden;
  background: #f2e3a9;
  border-radius: 999px;
}

.meter-track i {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, #ffd75e, #ff9f2e);
  border-radius: inherit;
}

.apply-actions {
  display: grid;
  gap: 0.55rem;
}

.apply-action {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  align-items: center;
  min-height: 50px;
  padding: 0.5rem;
  border-radius: 10px;
  font-size: 0.83rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.apply-web {
  color: #fff;
  background: linear-gradient(135deg, #08798c, #065f70);
}

.apply-line {
  color: #fff;
  background: #00c403;
  border: 1px solid #00c403;
}

.detail-page .apply-web {
  background: linear-gradient(-20deg, #ff3333, #e2315b);
  border: 1px solid #ff3333;
}

.detail-page .line-brand-mark,
.listing-page .line-brand-mark {
  display: inline-grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #00c403;
  background: #fff;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.apply-phone {
  color: #08798c;
  background: #fff;
  border: 1px solid #78d0de;
}

.side-save {
  color: #c64838;
  background: #fff6f3;
  border: 1px solid #ffc1b7;
  cursor: pointer;
}

.side-save[aria-pressed="true"] {
  color: #fff;
  background: #c64838;
}

.privacy-note {
  margin: 0.85rem 0 0 !important;
  padding-top: 0.8rem;
  border-top: 1px solid #e2eef1;
  font-size: 0.75rem !important;
}

.mobile-sticky-apply {
  display: none;
}

@media (max-width: 900px) {
  .list-layout,
  .detail-layout,
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-filter-panel {
    position: static;
  }

  .listing-results .jobs-grid {
    grid-template-columns: 1fr;
  }

  .mobile-filter-button {
    display: block;
  }

  .filter-panel {
    display: none;
    position: static;
    margin-bottom: 1rem;
  }

  .filter-panel.is-open {
    display: block;
  }

  .detail-heading-row {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .detail-profile-row {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .detail-profile-visual .shop-logo {
    width: 240px;
    height: 240px;
  }

  .detail-profile-heading {
    display: block;
  }

  .detail-profile-heading .detail-utility-actions {
    justify-content: flex-start;
    margin-top: 0.8rem;
  }

  .detail-application-panel {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .application-panel-actions {
    grid-column: 1 / -1;
  }

  .apply-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 0.3rem 1rem;
  }

  .apply-box .apply-actions,
  .apply-box .application-meter,
  .apply-box .privacy-note {
    grid-column: 2;
  }

  .apply-box h2,
  .apply-box > p,
  .apply-box .apply-label {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  .inner-shell {
    width: min(100% - 24px, 1180px);
  }

  .detail-page .inner-shell {
    width: calc(100% - 24px);
  }

  .detail-layout {
    padding: 12px 12px 3rem;
  }

  .breadcrumb {
    padding: 0.7rem 0;
    font-size: 0.75rem;
  }

  .page-title-block {
    padding: 1.1rem;
  }

  .list-card {
    grid-template-columns: 1fr;
  }

  .list-card-image {
    min-height: 0;
    aspect-ratio: 3 / 1;
  }

  .list-card-heading {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .list-card-heading > img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }

  .shop-monogram {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    font-size: 1.55rem;
  }

  .list-summary div {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .card-bottom {
    align-items: stretch;
  }

  .list-card-actions {
    flex: 1 1 auto;
  }

  .list-card-actions .detail-link {
    display: grid;
    flex: 1 1 130px;
    min-height: 44px;
    place-items: center;
    text-align: center;
  }

  .result-head {
    align-items: center;
  }

  .result-head select {
    width: 132px;
    font-size: 0.8125rem;
  }

  .summary-facts,
  .feature-grid,
  .apply-box,
  .detail-application-bar {
    grid-template-columns: 1fr;
  }

  .summary-facts div + div {
    border-top: 1px solid #d8edf1;
    border-left: 0;
  }

  .detail-cover {
    min-height: 0;
  }

  .detail-cover img {
    max-height: none;
  }

  .detail-summary {
    padding: 1.05rem;
  }

  .detail-page .detail-section {
    margin-top: 22px;
    padding: 0 0 1.05rem;
  }

  .detail-page .detail-section h2 {
    margin: 0 0 1.1rem;
    padding: 0;
    font-size: 1.05rem;
  }

  .detail-profile-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    margin-top: 14px;
  }

  .detail-profile-info {
    display: contents;
  }

  .detail-profile-visual .shop-logo {
    width: 112px;
    height: 112px;
  }

  .detail-profile-heading h1 {
    font-size: 1.2rem;
  }

  .detail-profile-heading {
    grid-column: 2;
    min-width: 0;
  }

  .detail-profile-heading .detail-utility-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 0.5rem;
    width: 100%;
  }

  .detail-profile-heading .detail-utility-actions a,
  .detail-profile-heading .detail-utility-actions button {
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    font-size: 0.7rem;
  }

  .detail-profile-heading .detail-utility-actions .profile-save {
    width: 40px;
  }

  .detail-profile-heading .detail-utility-actions .profile-share {
    display: none;
  }

  .detail-profile-heading .detail-utility-actions .profile-shop-link {
    display: grid;
    min-width: 0;
    padding-inline: 0.5rem;
    place-items: center;
    text-align: center;
  }

  .detail-concepts {
    grid-column: 2;
    margin: 0.6rem 0 0.8rem;
  }

  .detail-concepts span {
    padding: 0.32rem 0.48rem;
    font-size: 0.68rem;
  }

  .detail-profile-info .summary-facts div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    min-height: 48px;
  }

  .detail-profile-info .summary-facts {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
  }

  .detail-profile-info .summary-facts dt,
  .detail-profile-info .summary-facts dd {
    padding: 0;
  }

  .detail-profile-info .summary-facts dt {
    font-size: 0.7rem;
  }

  .detail-profile-info .summary-facts dd {
    gap: 0.25rem;
    font-size: 0.8rem;
  }

  .detail-profile-info .summary-facts dd small {
    font-size: 0.62rem;
  }

  .detail-profile-info .summary-facts dd strong {
    font-size: 1rem;
  }

  .detail-application-panel {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 14px;
    padding: 1rem;
  }

  .application-panel-actions {
    grid-column: auto;
  }

  .detail-application-panel .application-panel-actions {
    display: none;
  }

  .application-panel-actions .apply-action {
    min-height: 58px;
  }

  .detail-heading-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .detail-primary-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }

  .detail-brand {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .detail-brand > img {
    width: 76px;
    height: 76px;
    border-radius: 14px;
  }

  .detail-page .info-table > div {
    grid-template-columns: 1fr;
    padding: 1rem 0;
  }

  .info-table dt,
  .info-table dd {
    padding: 0.75rem 0.6rem;
  }

  .apply-box .apply-actions,
  .apply-box .application-meter,
  .apply-box .privacy-note,
  .apply-box h2,
  .apply-box > p,
  .apply-box .apply-label {
    grid-column: 1;
  }

  .mobile-sticky-apply {
    display: grid;
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: 74px 1fr;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #d8e7ea;
    box-shadow: 0 -8px 25px rgba(29, 78, 88, 0.12);
  }

  .mobile-sticky-apply button,
  .mobile-sticky-apply a {
    display: grid;
    min-height: 48px;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
  }

  .mobile-sticky-apply button {
    color: #c64838;
    background: #fff6f3;
    border: 1px solid #ffc1b7;
  }

  .mobile-sticky-apply button[aria-pressed="true"] {
    color: #fff;
    background: #c64838;
  }

  .mobile-sticky-apply a {
    color: #fff;
    background: linear-gradient(135deg, #08798c, #065f70);
  }

  .detail-page .mobile-sticky-apply a:not(.mobile-line) {
    background: linear-gradient(-20deg, #ff3333, #e2315b);
    border: 1px solid #ff3333;
  }

  .detail-page .site-footer {
    padding-bottom: 72px;
  }
}

@media (max-width: 680px) {
  .mobile-sticky-apply {
    grid-template-columns: 86px repeat(2, minmax(0, 1fr));
  }

  .mobile-sticky-apply button {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .mobile-sticky-apply a:only-of-type {
    grid-column: span 2;
  }

  .mobile-sticky-apply .mobile-line {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    background: #00c403;
  }
}

@media (max-width: 360px) {
  .mobile-sticky-apply {
    grid-template-columns: 74px repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .mobile-sticky-apply a {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .detail-page .mobile-sticky-apply .line-brand-mark {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 6px;
  }
}

/* The detail page keeps the reference geometry on desktop and responds below 900px. */
.detail-page {
  min-width: 0;
}

/* Legacy fixed-canvas overrides are intentionally disabled. */
@media (max-width: 0px) {
  .detail-page .utility-line {
    display: block;
  }

  .detail-page .header-inner {
    width: min(calc(100% - 2rem), var(--page));
    grid-template-columns: auto auto 1fr;
    min-height: 78px;
    gap: 2rem;
    justify-content: normal;
  }

  .detail-page .brand {
    font-size: 1.42rem;
  }

  .detail-page .brand-mark {
    width: 2.25rem;
    height: 2.05rem;
  }

  .detail-page .menu-toggle {
    display: none;
  }

  .detail-page .global-nav,
  .detail-page .global-nav.is-open {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .detail-page .global-nav a {
    justify-content: center;
    min-height: 40px;
    padding: 0.45rem 0.85rem;
    border: 1px solid #b9d3d9;
    border-radius: 999px;
  }

  .detail-page .inner-shell {
    width: 1200px;
    max-width: none;
    margin: 0 auto;
  }

  .detail-page .breadcrumb {
    padding: 1rem 0;
    font-size: 0.76rem;
  }

  .detail-page .detail-layout {
    padding: 30px 30px 4rem;
  }

  .detail-page .detail-profile-row {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px;
  }

  .detail-page .detail-profile-visual .shop-logo {
    width: 300px;
    height: 300px;
  }

  .detail-page .detail-profile-heading {
    display: flex;
  }

  .detail-page .detail-profile-heading h1 {
    font-size: 22px;
  }

  .detail-page .detail-profile-heading .detail-utility-actions {
    justify-content: flex-end;
    margin-top: 0;
  }

  .detail-page .detail-profile-heading .detail-utility-actions a,
  .detail-page .detail-profile-heading .detail-utility-actions button {
    min-height: 50px;
    padding: 10px 25px;
    font-size: 15px;
  }

  .detail-page .detail-profile-heading .detail-utility-actions .profile-save {
    width: 50px;
  }

  .detail-page .detail-concepts {
    margin: 0.65rem 0 1.2rem;
  }

  .detail-page .detail-concepts span {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
  }

  .detail-page .detail-profile-info .summary-facts div {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 30px;
    min-height: 55px;
    padding: 15px 0;
  }

  .detail-page .detail-profile-info .summary-facts dt {
    font-size: 16px;
  }

  .detail-page .detail-profile-info .summary-facts dd {
    gap: 0.65rem;
    font-size: 16px;
  }

  .detail-page .detail-profile-info .summary-facts dd small {
    font-size: 0.78rem;
  }

  .detail-page .detail-profile-info .summary-facts dd strong {
    font-size: 1.35rem;
  }

  .detail-page .detail-application-panel {
    grid-template-columns: 190px 380px minmax(0, 484px);
    gap: 10px;
    margin-top: 30px;
    padding: 20px 30px;
  }

  .detail-page .application-panel-actions {
    grid-column: auto;
  }

  .detail-page .application-panel-actions .apply-action {
    min-height: 60px;
  }

  .detail-page .detail-section {
    margin-top: 30px;
    padding: 0 0 30px;
  }

  .detail-page .detail-section h2 {
    margin: 0 0 1.4rem;
    font-size: 20px;
  }

  .detail-page .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .detail-page .photo-gallery,
  .detail-page .recommendation-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .detail-page .ambiance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-page .tag-groups section {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0.7rem;
  }

  .detail-page .application-methods .apply-action {
    width: auto;
    min-width: 180px;
  }

  .detail-page .info-table > div {
    padding: 1.15rem 0;
  }

  .detail-page .mobile-sticky-apply {
    display: none;
  }

  .detail-page .site-footer {
    padding-bottom: 0;
  }
}

/* Reference-aligned public job listing */
.listing-page {
  --listing-pink: #fd336f;
  --listing-pink-dark: #df1754;
  --listing-ink: #142346;
  --listing-muted: #647088;
  --listing-line: #e2e6ee;
  --listing-font-sans: YakuHanJPs, "Noto Sans JP", sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: #f7f8fb;
  font-family: var(--listing-font-sans);
  font-size: 13px;
  letter-spacing: normal;
  line-height: 1.5;
}

.listing-page svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-page .inner-shell {
  width: min(1200px, calc(100% - 40px));
}

.listing-page .listing-layout {
  grid-template-columns: 295px minmax(0, 1fr);
  gap: 20px;
}

.listing-page .listing-filter-panel {
  border-color: #e0e5ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 35, 70, 0.07);
}

.listing-page .listing-filter-panel h2 {
  background: var(--listing-ink);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
}

.listing-page .listing-filter-panel input[type="checkbox"] {
  accent-color: var(--listing-pink);
}

.listing-page .listing-filter-actions button {
  display: flex;
  gap: 0.55rem;
  height: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #dc2551;
  border-color: #dc2551;
  border-radius: 5px;
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
}

.listing-page .listing-filter-actions button svg {
  width: 1.15rem;
  height: 1.15rem;
}

.listing-page .listing-heading {
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.listing-page .listing-heading h1 {
  color: var(--listing-ink);
  font-family: inherit;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
}

.listing-page .listing-heading p {
  margin-top: 0.65rem;
  color: var(--listing-muted);
  font-size: 0.875rem;
  line-height: 1.8;
}

.popular-keywords {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--listing-line);
  border-radius: 12px;
}

.popular-keywords h2 {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 12px;
  color: var(--listing-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}

.popular-keywords h2 svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--listing-pink);
}

.popular-keywords > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.popular-keywords a {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  color: #e2315b;
  background: #fff;
  border: 1.5px solid #e2315b;
  border-radius: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-decoration: none;
}

.popular-keywords a:hover {
  color: #fff;
  background: var(--listing-pink);
  border-color: var(--listing-pink);
}

.listing-result-count {
  margin: 0 0 10px;
  color: var(--listing-muted);
  font-size: 0.82rem;
}

.listing-result-count strong {
  margin-right: 0.12rem;
  color: var(--listing-pink-dark);
  font-size: 1.35rem;
}

.listing-page .area-link-list a {
  color: #506078;
  background: #fff;
  border-color: #dfe5ed;
}

.listing-page .area-link-list a.is-current {
  color: #fff;
  background: var(--listing-ink);
  border-color: var(--listing-ink);
}

.listing-page .bulk-apply-guide {
  color: #4d4b5f;
  background: #fff9df;
  border-color: #f0d98c;
}

.listing-page .bulk-apply-guide a {
  background: var(--listing-ink);
}

.listing-page .list-card {
  display: block;
  margin-bottom: 25px;
  padding: 20px 20px 25px;
  overflow: visible;
  background: #fff;
  border: 0;
  border-top: 4px solid var(--listing-pink);
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.listing-page .list-card:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(20, 35, 70, 0.13);
}

.list-card-header {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  min-height: 120px;
  align-items: center;
  margin-bottom: 20px;
}

.list-card-logo {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: #f4f4f4;
  border: 0;
  border-radius: 0;
}

.list-card-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.list-card-head-info {
  min-width: 0;
}

.listing-page .list-card-meta {
  margin-bottom: 0.35rem;
  color: var(--listing-ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
}

.listing-page .list-card h2 {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
}

.listing-page .list-card h2 a {
  color: var(--listing-ink);
}

.listing-page .list-card-copy {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.55rem 0 0;
  color: #59667d;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.list-card-more,
.list-card-highlights > a {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--listing-pink-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.list-card-more svg,
.list-card-highlights > a svg {
  width: 1rem;
  height: 1rem;
}

.listing-page .list-card-image {
  width: 100%;
  aspect-ratio: 3 / 1;
  margin-bottom: 20px;
  overflow: hidden;
  background: #f4f4f4;
  border-radius: 0;
}

.listing-page .list-card-image img {
  object-fit: cover;
}

.listing-page .fresh-badge {
  top: 12px;
  left: 12px;
  color: #fff;
  background: var(--listing-pink);
  box-shadow: 0 4px 12px rgba(223, 23, 84, 0.2);
}

.list-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr);
  gap: 20px;
  align-items: stretch;
}

.list-card-info {
  display: grid;
  align-content: start;
  margin: 0;
  border-top: 1px solid var(--listing-line);
}

.list-card-info > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 58px;
  border-bottom: 1px solid var(--listing-line);
}

.list-card-info dt,
.list-card-info dd {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.7rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.55;
}

.list-card-info dt {
  gap: 0.5rem;
  color: var(--listing-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}

.list-info-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--listing-pink-dark);
  background: #fff0f5;
  border-radius: 50%;
}

.list-info-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.list-card-info dd {
  color: #4f5c73;
}

.list-card-info dd small,
.list-card-info dd strong {
  display: block;
}

.list-card-info dd {
  display: block;
}

.list-card-info dd small {
  color: #7a8496;
  font-size: 0.7rem;
  font-weight: 700;
}

.list-card-info dd strong {
  color: var(--listing-pink-dark);
  font-size: 1.08rem;
  font-weight: 900;
}

.list-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.list-card-highlights {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(145deg, #fff7fa, #fff);
  border: 1px solid #ffd6e2;
  border-radius: 10px;
}

.list-card-highlights h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.8rem;
  color: var(--listing-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}

.list-card-highlights h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--listing-pink);
}

.listing-page .mini-tags {
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.listing-page .mini-tags span {
  padding: 0.38rem 0.56rem;
  color: #59647a;
  background: #fff;
  border: 1px solid #f0c8d4;
  border-radius: 999px;
  font-size: 0.7rem;
}

.list-card-highlights > a {
  justify-content: flex-end;
  margin-top: auto;
}

.list-card-cta {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--listing-line);
}

.list-entry-status {
  display: grid;
  gap: 0.3rem;
  text-align: center;
}

.list-entry-status > span {
  color: #7b8495;
  font-size: 0.72rem;
  font-weight: 800;
}

.list-entry-status strong {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  color: var(--listing-pink-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}

.list-entry-status i {
  width: 9px;
  height: 9px;
  background: #34bd66;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #e6f8ec;
}

.listing-page .list-card-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(130px, 0.7fr);
  gap: 10px;
}

.listing-page .list-card-actions.has-line {
  grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(130px, 0.7fr);
}

.listing-page .detail-link,
.listing-page .list-save {
  display: flex;
  position: static;
  width: auto;
  height: 50px;
  min-height: 50px;
  gap: 0.15rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border-radius: 5px;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
}

.listing-page .detail-link.web {
  flex-direction: column;
  color: #fff;
  background: #f33;
  border: 1px solid #f33;
  box-shadow: none;
}

.listing-page .detail-link.web small {
  font-size: 0.65rem;
  line-height: 1;
}

.listing-page .detail-link.web strong,
.listing-page .detail-link.line strong {
  font-size: 16px;
}

.listing-page .detail-link.line {
  color: #fff;
  background: #00c403;
  border: 1px solid #00c403;
  box-shadow: none;
}

.listing-page .list-save {
  color: var(--listing-ink);
  background: #fff;
  border: 1px solid #a8afbd;
  border-radius: 25px;
  cursor: pointer;
}

.listing-page .list-save svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.25rem;
}

.listing-page .list-save[aria-pressed="true"] {
  color: #fff;
  background: var(--listing-pink);
}

@media (max-width: 900px) {
  .listing-page .inner-shell {
    width: min(1180px, calc(100% - 40px));
  }

  .listing-page .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-page .listing-filter-panel {
    position: static;
  }
}

@media (max-width: 680px) {
  .listing-page .inner-shell {
    width: min(100% - 24px, 1180px);
  }

  .listing-page .mobile-filter-button {
    min-height: 50px;
    color: #fff;
    background: var(--listing-ink);
    border-color: var(--listing-ink);
  }

  .listing-page .listing-heading h1 {
    font-size: 25px;
  }

  .popular-keywords {
    padding: 14px;
  }

  .popular-keywords h2 {
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
  }

  .listing-page .list-card {
    padding: 12px;
    border-radius: 0;
  }

  .list-card-header {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    min-height: 88px;
    margin-bottom: 12px;
  }

  .list-card-logo {
    width: 88px;
    height: 88px;
  }

  .listing-page .list-card h2 {
    font-size: 16px;
  }

  .listing-page .list-card-copy {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
  }

  .list-card-more {
    display: none;
  }

  .listing-page .list-card-image {
    margin-bottom: 12px;
    border-radius: 0;
  }

  .list-card-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .list-card-info > div {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .list-card-info dt,
  .list-card-info dd {
    padding: 0.65rem 0.55rem;
    font-size: 0.76rem;
  }

  .list-card-info dt {
    font-size: 14px;
  }

  .list-info-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .list-card-highlights {
    padding: 13px;
  }

  .list-card-cta {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
  }

  .list-entry-status {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
  }

  .listing-page .list-card-actions,
  .listing-page .list-card-actions.has-line {
    grid-template-columns: 1fr 1fr;
  }

  .listing-page .list-card-actions:not(.has-line) .list-save {
    grid-column: 1 / -1;
  }

  .listing-page .detail-link.web {
    grid-column: 1 / -1;
    min-height: 50px;
  }

  .listing-page .detail-link.line,
  .listing-page .list-save {
    min-height: 50px;
  }

  .listing-page .detail-link.line:only-child {
    grid-column: 1 / -1;
  }
}


/* Reference-polished job detail */
.detail-page {
  --detail-ink: #142346;
  --detail-pink: #e2315b;
  --detail-pink-soft: #fe7fb6;
  --detail-blue: #2196f3;
  --detail-green: #00c403;
  --detail-line: #e4e6eb;
  color: var(--detail-ink);
  background-color: #faf9f5;
  background-image:
    linear-gradient(45deg, rgba(226, 49, 91, 0.018) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(33, 150, 243, 0.018) 25%, transparent 25%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  font-family: YakuHanJPs, "Noto Sans JP", sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 13px;
  letter-spacing: normal;
}

.detail-page .site-header {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: #e7e8ec;
}

.detail-page .breadcrumb {
  color: #6d768a;
}

.detail-page .breadcrumb a {
  color: #39798d;
}

.detail-page .detail-layout {
  box-shadow: 0 0 0 1px #dedfe4, 0 10px 28px rgba(20, 35, 70, 0.06);
}

.detail-page .detail-profile-visual .shop-logo {
  object-position: center;
}

.detail-page .detail-profile-visual.is-banner-fallback .shop-logo {
  object-position: 76% center;
}

.detail-page .detail-profile-visual.is-brand-fallback {
  overflow: hidden;
  background:
    linear-gradient(rgba(8, 28, 62, 0.16), rgba(8, 28, 62, 0.16)),
    url("/assets/images/crown-tiara-recruit.webp") 12% center / auto 100%;
}

.detail-page .detail-profile-visual.is-brand-fallback .shop-logo {
  padding: 24px;
  object-fit: contain;
  background: rgba(7, 24, 55, 0.18);
}

.detail-page .detail-profile-heading h1,
.detail-page .detail-section h2,
.detail-page .info-table dt {
  color: var(--detail-ink);
}

.detail-page .detail-profile-heading .detail-utility-actions {
  display: grid;
  grid-template-columns: auto 50px;
  gap: 10px;
}

.detail-page .detail-profile-heading .detail-utility-actions .profile-shop-link {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
}

.detail-page .detail-profile-heading .detail-utility-actions .profile-save {
  color: #cfd4dd;
  background: #fff;
  border-color: #dfe2e8;
}

.detail-page .detail-profile-heading .detail-utility-actions .profile-save[aria-pressed="true"] {
  color: #fff;
  background: #d45983;
  border-color: #d45983;
}

.detail-page .detail-concepts span {
  color: #d34f7a;
  background: #fff;
  border-color: #e899b3;
  border-radius: 0;
}

.detail-page .summary-fact-icon {
  stroke: var(--detail-pink-soft);
}

.detail-page .detail-profile-info .summary-facts dt,
.detail-page .detail-profile-info .summary-facts dd {
  color: var(--detail-ink);
}

.detail-page .detail-profile-info .summary-facts dd strong {
  color: #e45f8b;
}

.detail-page .detail-application-panel {
  background: #fff9f2;
  border-color: var(--detail-pink);
  box-shadow: 0 8px 20px rgba(226, 49, 91, 0.06);
}

.detail-page .detail-section p,
.detail-page .detail-intro-section .detail-lead,
.detail-page .info-table dd {
  color: #3f4c61;
}

.detail-page .detail-intro-section .detail-lead {
  line-height: 1.95;
}

.detail-page .info-table {
  border-top-color: var(--detail-line);
}

.detail-page .info-table > div {
  border-bottom-color: var(--detail-line);
}

.detail-page .detail-tag-row span,
.detail-page .tag-groups span {
  color: #d34f7a;
  background: #fff8fa;
  border: 1px solid #efc2d0;
  border-radius: 3px;
}

.detail-page .job-info-table > div {
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  padding: 0;
}

.detail-page .job-info-table dt {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 18px 20px;
  background: #fff8fa;
}

.detail-page .job-info-table dd {
  padding: 18px 0;
}

.detail-page .info-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.detail-page .info-row-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  color: #cf3f68;
  background: #fff;
  border: 1px solid #df6689;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.detail-page .inline-action,
.detail-page .social-links a {
  color: var(--detail-blue);
}

@media (max-width: 680px) {
  .detail-page .site-header {
    position: relative;
  }

  .detail-page .header-inner {
    min-height: 62px;
  }

  .detail-page .brand {
    color: var(--detail-ink);
    font-size: 1.08rem;
  }

  .detail-page .brand-mark {
    width: 30px;
    height: 30px;
    background: var(--detail-ink);
    border-radius: 50%;
    font-size: 0.86rem;
  }

  .detail-page .inner-shell {
    width: 100%;
  }

  .detail-page .breadcrumb {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 12px;
    padding-left: 12px;
    overflow: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .detail-page .detail-layout {
    margin: 0 12px;
    padding: 12px 12px 5.5rem;
    border-radius: 8px;
  }

  .detail-page .detail-cover {
    border-radius: 2px;
  }

  .detail-page .detail-profile-row {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .detail-page .detail-profile-visual .shop-logo {
    width: 106px;
    height: 106px;
    box-shadow: none;
  }

  .detail-page .detail-profile-visual.is-brand-fallback {
    width: 106px;
    height: 106px;
  }

  .detail-page .detail-profile-visual.is-brand-fallback .shop-logo {
    padding: 8px;
  }

  .detail-page .detail-profile-heading h1 {
    font-size: 1rem;
    line-height: 1.3;
  }

  .detail-page .detail-profile-heading .name-kana {
    color: #7a8190;
    font-size: 0.68rem;
  }

  .detail-page .detail-profile-heading .detail-utility-actions {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
  }

  .detail-page .detail-profile-heading .detail-utility-actions a,
  .detail-page .detail-profile-heading .detail-utility-actions button {
    min-height: 36px;
    border-width: 1px;
    font-size: 0.64rem;
  }

  .detail-page .detail-profile-heading .detail-utility-actions .profile-save {
    width: 36px;
    font-size: 0.95rem;
  }

  .detail-page .detail-concepts {
    margin: 0.42rem 0 0.45rem;
  }

  .detail-page .detail-concepts span {
    padding: 0.25rem 0.42rem;
    font-size: 0.62rem;
  }

  .detail-page .detail-profile-info .summary-facts {
    margin-top: 0.15rem;
  }

  .detail-page .detail-profile-info .summary-facts div {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 44px;
    padding: 7px 0;
  }

  .detail-page .detail-profile-info .summary-facts dt {
    font-size: 0.78rem;
  }

  .detail-page .detail-profile-info .summary-facts dd {
    font-size: 0.86rem;
  }

  .detail-page .detail-profile-info .summary-facts dd strong {
    font-size: 1.1rem;
  }

  .detail-page .detail-application-panel {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px 10px;
    margin-top: 12px;
    min-height: 0;
    padding: 12px;
  }

  .detail-page .application-status-block {
    text-align: left;
  }

  .detail-page .application-status-block span {
    font-size: 0.72rem;
  }

  .detail-page .application-status-block strong {
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .detail-page .application-contact a,
  .detail-page .application-contact > strong {
    font-size: 1.15rem;
  }

  .detail-page .application-contact small {
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .detail-page .detail-application-panel .application-panel-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .detail-page .application-panel-actions .apply-action {
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 0.35rem;
    font-size: 0.84rem;
  }

  .detail-page .application-panel-actions .apply-web small {
    font-size: 0.65rem;
  }

  .detail-page .application-panel-actions .apply-web strong {
    font-size: 0.86rem;
  }

  .detail-page .detail-section {
    margin-top: 18px;
    padding-bottom: 20px;
  }

  .detail-page .detail-section h2 {
    margin-bottom: 14px;
    font-size: 1.08rem;
  }

  .detail-page .detail-intro-section .detail-lead {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 0.8rem;
    line-height: 1.85;
  }

  .detail-page .info-table > div {
    padding: 0.9rem 0;
  }

  .detail-page .job-info-table > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 0;
  }

  .detail-page .job-info-table dt {
    min-height: 100%;
    padding: 14px 10px;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .detail-page .job-info-table dd {
    margin-top: 0;
    padding: 14px 0;
  }

  .detail-page .info-row-tags {
    gap: 6px;
    margin-top: 10px;
  }

  .detail-page .info-row-tags span {
    min-height: 27px;
    padding: 4px 8px;
    font-size: 0.66rem;
  }

  .detail-page .info-table dt {
    font-size: 0.9rem;
  }

  .detail-page .info-table dd {
    margin-top: 0.45rem;
    font-size: 0.79rem;
    line-height: 1.75;
  }

  .detail-page .mobile-sticky-apply {
    grid-template-columns: 82px repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top-color: #e1e2e7;
    box-shadow: 0 -8px 24px rgba(20, 35, 70, 0.14);
  }

  .detail-page .mobile-sticky-apply button,
  .detail-page .mobile-sticky-apply a {
    min-height: 50px;
    border-radius: 6px;
  }
}

@media (max-width: 360px) {
  .detail-page .detail-profile-row {
    grid-template-columns: 106px minmax(0, 1fr);
  }

  .detail-page .detail-profile-visual .shop-logo {
    width: 106px;
    height: 106px;
  }

  .detail-page .detail-profile-heading h1 {
    font-size: 1rem;
  }

  .detail-page .detail-application-panel {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .detail-page .application-contact a,
  .detail-page .application-contact > strong {
    font-size: 1rem;
    white-space: nowrap;
  }

  .detail-page .application-contact small {
    font-size: 0.56rem;
  }

  .detail-page .job-info-table > div {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  .detail-page .mobile-sticky-apply {
    grid-template-columns: 72px repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
  }
}


/* Smartphone layout matched to the reference job site (baito.concafe-ranking.jp) */
.header-icon-nav,
.save-tip-banner,
.application-sp-extras,
.apply-tel-sp,
.filter-panel-close {
  display: none;
}

.listing-search-box {
  display: contents;
}

.filter-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entry-gauge {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.entry-gauge b {
  width: 11px;
  height: 12px;
  background: #ddd;
  border-radius: 2px;
}

.entry-gauge b:first-child {
  background: #fec343;
}

.list-entry-status .entry-gauge,
.application-status-block .entry-gauge {
  justify-self: center;
  align-self: center;
}

.list-entry-status i.entry-gauge {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 680px) {
  body.inner-page.listing-page,
  body.inner-page.detail-page {
    --sp-ink: #142346;
    --sp-pink: #e2315b;
    --sp-pink-soft: #fff6f9;
    --sp-blue: #3b87d4;
    --sp-line: #00c403;
    --sp-tel: #2196f3;
    --sp-rainbow: linear-gradient(to right, #f8bbd0 0%, #bbdefb 50%, #ffecb3 100%);
    color: var(--sp-ink);
    background: #fef9f4;
    background-image: none;
    font-family: YakuHanJPs, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
  }

  /* Header */
  body.inner-page .utility-line {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5px 10px;
    color: var(--sp-ink);
    background: #fff;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
  }

  body.inner-page .site-header {
    position: relative;
    background: #fff;
    border: 0;
    border-bottom: 4px solid transparent;
    border-image: var(--sp-rainbow) 1;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.inner-page .site-header .header-inner {
    display: flex;
    width: 100%;
    min-height: 58px;
    padding: 10px 15px;
    align-items: center;
    justify-content: space-between;
  }

  body.inner-page .site-header .brand {
    gap: 6px;
    color: var(--sp-ink);
    font-size: 17px;
    font-weight: 800;
  }

  body.inner-page .site-header .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  body.inner-page .site-header .menu-toggle,
  body.inner-page .site-header .global-nav {
    display: none;
  }

  body.inner-page .header-icon-nav {
    display: flex;
    gap: 6px;
    margin-right: -4px;
  }

  body.inner-page .header-icon-nav a {
    display: flex;
    width: 38px;
    flex-direction: column;
    align-items: center;
    color: var(--sp-ink);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
  }

  body.inner-page .header-icon-nav svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--sp-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.inner-page .header-icon-nav .is-favorite svg {
    fill: #fe7fb6;
    stroke: #fe7fb6;
  }

  /* Breadcrumb */
  body.inner-page .inner-shell {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.inner-page .breadcrumb {
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 8px 0 8px 8px;
    overflow-x: auto;
    color: var(--sp-ink);
    background: #fff;
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
    scrollbar-width: none;
  }

  body.inner-page .breadcrumb a {
    color: var(--sp-blue);
    text-decoration: none;
  }

  body.inner-page .breadcrumb > * + *::before {
    margin: 0 6px;
    color: #fe7fb6;
    content: "▶";
    font-size: 8px;
  }

  body.inner-page .breadcrumb span::before {
    color: #fe7fb6;
  }

  /* Listing: heading and search box */
  body.listing-page .listing-layout {
    display: block;
    padding: 15px 15px 30px;
  }

  body.listing-page .listing-heading {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  body.listing-page .listing-heading h1 {
    margin: 0 0 15px;
    color: var(--sp-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
  }

  body.listing-page .listing-heading p {
    margin: 0 0 15px;
    color: var(--sp-ink);
    font-size: 12px;
    line-height: 1.5;
  }

  body.listing-page .listing-search-box {
    display: block;
    margin: 0 0 20px;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  body.listing-page .listing-search-box .mobile-filter-button {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 30px;
    color: #fff;
    background: #dc2551;
    border: 1px solid #dc2551;
    border-radius: 5px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.listing-page .popular-keywords {
    margin: 15px 0 0;
    padding: 15px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid #cdd6dd;
    border-radius: 0;
    box-shadow: none;
  }

  body.listing-page .popular-keywords h2 {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0 0 8px;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 700;
  }

  body.listing-page .popular-keywords h2 svg {
    width: 18px;
    height: 18px;
    fill: #fec343;
    stroke: none;
  }

  body.listing-page .popular-keywords > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  body.listing-page .popular-keywords a {
    padding: 4px 6px;
    color: var(--sp-pink);
    background: #fff;
    border: 1.5px solid var(--sp-pink);
    border-radius: 0;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
  }

  body.listing-page .listing-result-count {
    margin: 0 0 15px;
    color: var(--sp-ink);
    font-size: 15px;
    font-weight: 400;
  }

  body.listing-page .listing-result-count strong {
    margin: 0 2px;
    color: var(--sp-pink);
    font-size: 20px;
    font-weight: 700;
  }

  body.listing-page .area-link-list,
  body.listing-page .bulk-apply-guide {
    display: none;
  }

  /* Listing: filter drawer */
  body.listing-page .listing-filter-panel.filter-panel {
    display: none;
  }

  body.listing-page .listing-filter-panel.filter-panel.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    margin: 0;
    padding: 0 15px 30px;
    overflow-y: auto;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.listing-page .filter-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -15px 10px;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  body.listing-page .listing-filter-panel .filter-panel-head h2 {
    margin: 0;
    padding: 0;
    color: var(--sp-ink);
    background: none;
    border: 0;
    font-size: 16px;
    font-weight: 700;
  }

  body.listing-page .filter-panel-close {
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--sp-ink);
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  /* Listing: job card */
  body.listing-page .listing-results .jobs-grid {
    display: block;
  }

  body.listing-page .list-card {
    display: block;
    margin: 0 0 25px;
    padding: 15px;
    overflow: visible;
    background: #fff;
    border: 0;
    border-top: 4px solid transparent;
    border-image: var(--sp-rainbow) 1;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  body.listing-page .list-card::before,
  body.listing-page .list-card::after {
    display: none;
  }

  body.listing-page .list-card-header {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    margin: 0 0 15px;
    padding: 0;
    border: 0;
  }

  body.listing-page .list-card-logo {
    width: 115px;
    height: 115px;
    margin: 0;
    overflow: hidden;
    background: #f4f4f4;
    border: 0;
    border-radius: 0;
  }

  body.listing-page .list-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  body.listing-page .list-card-meta {
    margin: 0 0 2px;
    color: var(--sp-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.listing-page .list-card-head-info h2 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.listing-page .list-card-head-info h2 a {
    color: var(--sp-ink);
    text-decoration: none;
  }

  body.listing-page .list-card-copy {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--sp-blue);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.listing-page .list-card-more,
  body.listing-page .fresh-badge,
  body.listing-page .list-card-highlights {
    display: none;
  }

  body.listing-page .list-card-image {
    display: block;
    width: 100%;
    margin: 0 0 15px;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 0;
  }

  body.listing-page .list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  body.listing-page .list-card-content {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  body.listing-page .list-card-info {
    display: block;
    margin: 0;
  }

  body.listing-page .list-card-info > div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0;
    align-items: start;
    min-height: 0;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px dotted #ccc;
  }

  body.listing-page .list-card-info > div:first-child {
    border-top: 1px dotted #ccc;
  }

  body.listing-page .list-card-info dt {
    min-height: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--sp-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.listing-page .list-info-icon {
    display: inline-flex;
    flex: 0 0 16px;
    min-width: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  body.listing-page .list-info-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fe7fb6;
    stroke-width: 2.4;
  }

  body.listing-page .list-card-info dd {
    min-height: 0;
    padding: 0;
    margin: 0;
    color: var(--sp-ink);
    font-size: 12px;
    line-height: 1.5;
  }

  body.listing-page .list-card-info dd small {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 1px 8px;
    color: var(--sp-pink);
    background: #fff;
    border: 1px solid var(--sp-pink);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    vertical-align: middle;
  }

  body.listing-page .list-card-info dd strong {
    display: inline;
    color: var(--sp-ink);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
  }

  body.listing-page .list-card-info dd strong::before {
    content: "時給";
  }

  body.listing-page .list-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.listing-page .list-card-cta {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.listing-page .list-entry-status {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 15px 0 10px;
  }

  body.listing-page .list-entry-status > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
  }

  body.listing-page .list-entry-status strong {
    padding: 0 10px;
    color: #fd006e;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.listing-page .list-card-actions,
  body.listing-page .list-card-actions.has-line {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 22px 0 0;
  }

  body.listing-page .list-card-actions .detail-link {
    display: flex;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 45px;
    min-height: 45px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  body.listing-page .list-card-actions .detail-link strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.listing-page .list-card-actions .detail-link.web {
    background: linear-gradient(-20deg, #f33, #e2315b);
    border: 1px solid #f33;
  }

  body.listing-page .list-card-actions .detail-link.web small {
    position: absolute;
    top: -14px;
    left: 50%;
    padding: 3px 10px;
    color: #f33;
    background: #fff;
    border: 1px solid #f33;
    border-radius: 25px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  body.listing-page .list-card-actions .detail-link.line {
    gap: 6px;
    background: var(--sp-line);
    border: 1px solid var(--sp-line);
  }

  body.listing-page .list-card-actions .line-brand-mark {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 6px;
  }

  body.listing-page .list-card-actions .list-save,
  body.listing-page .list-card-actions:not(.has-line) .list-save {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin-left: 5px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #bcbccb;
    border-radius: 50%;
    box-shadow: none;
  }

  body.listing-page .list-card-actions .list-save svg {
    width: 20px;
    height: 20px;
    fill: #ddd;
    stroke: none;
  }

  body.listing-page .list-card-actions .list-save[aria-pressed="true"] svg {
    fill: #fe7fb6;
  }

  body.listing-page .list-card-actions .list-save [data-save-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.listing-page .save-tip-banner {
    display: flex;
    position: relative;
    gap: 10px;
    align-items: center;
    margin: -10px 0 25px;
    padding: 12px 15px 12px 5px;
    background: #fdeaf0;
  }

  body.listing-page .save-tip-banner::before {
    position: absolute;
    top: -12px;
    right: 30px;
    border: 12px solid transparent;
    border-top: 0;
    border-bottom-color: #fdeaf0;
    content: "";
  }

  body.listing-page .save-tip-banner img {
    width: 84px;
    height: auto;
    margin: -24px 0 -12px;
  }

  body.listing-page .save-tip-banner strong {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin: 0 0 6px;
    padding: 2px 14px;
    color: var(--sp-pink);
    background: #fff;
    border: 1px solid var(--sp-pink);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
  }

  body.listing-page .save-tip-banner strong svg {
    width: 13px;
    height: 13px;
    fill: var(--sp-pink);
  }

  body.listing-page .save-tip-banner p {
    margin: 0;
    color: var(--sp-ink);
    font-size: 13px;
    line-height: 1.6;
  }

  body.listing-page .save-tip-banner em {
    color: var(--sp-pink);
    font-style: normal;
    font-weight: 700;
  }

  body.listing-page .pagination a {
    border-radius: 5px;
  }

  /* Detail: hero */
  body.detail-page .detail-layout {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 30px;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.detail-page .detail-main {
    display: block;
    padding: 0;
  }

  body.detail-page .detail-hero-card {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.detail-page .detail-cover {
    margin: 0;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 0;
  }

  body.detail-page .detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  body.detail-page .detail-profile-row {
    display: grid;
    grid-template-columns: 99px minmax(0, 1fr);
    gap: 0 15px;
    margin: 0;
    padding: 15px 15px 0;
  }

  body.detail-page .detail-profile-visual {
    width: 99px;
    height: 99px;
    margin: 0;
    overflow: hidden;
    background: #f4f4f4;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.detail-page .detail-profile-visual .shop-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  body.detail-page .detail-profile-info {
    display: contents;
  }

  body.detail-page .detail-profile-heading {
    display: block;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  body.detail-page .detail-profile-heading h1 {
    margin: 0;
    color: var(--sp-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
  }

  body.detail-page .detail-profile-heading .name-kana {
    margin: 5px 0 0;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
  }

  body.detail-page .detail-profile-heading .detail-utility-actions {
    display: none;
  }

  body.detail-page .detail-concepts {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: 5px;
    margin: 0;
    padding-top: 70px;
  }

  body.detail-page .detail-concepts span {
    padding: 8px;
    color: var(--sp-pink);
    background: var(--sp-pink-soft);
    border: 1px solid var(--sp-pink);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  body.detail-page .detail-profile-heading {
    position: relative;
    z-index: 1;
  }

  body.detail-page .detail-profile-info .summary-facts {
    display: block;
    grid-column: 1 / -1;
    margin: 20px 0 15px;
    padding: 0;
    background: none;
    border: 0;
  }

  body.detail-page .detail-profile-info .summary-facts > div {
    display: flex;
    gap: 0 20px;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }

  body.detail-page .detail-profile-info .summary-facts > div:first-child {
    border-top: 1px solid #ccc;
  }

  body.detail-page .detail-profile-info .summary-facts dt {
    display: flex;
    flex: 0 0 75px;
    gap: 5px;
    align-items: center;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 700;
  }

  body.detail-page .summary-fact-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fe7fb6;
    stroke-width: 2.2;
  }

  body.detail-page .detail-profile-info .summary-facts dd {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 400;
  }

  body.detail-page .detail-profile-info .summary-facts dd small {
    padding: 1px 8px;
    color: var(--sp-pink);
    background: #fff;
    border: 1px solid var(--sp-pink);
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
  }

  body.detail-page .detail-profile-info .summary-facts dd strong {
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
  }

  body.detail-page .detail-profile-info .summary-facts dd strong::before {
    content: "時給";
  }

  /* Detail: application block */
  body.detail-page .detail-application-panel {
    display: block;
    margin: 0;
    padding: 15px;
    background: #fff9f2;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.detail-page .application-status-block {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 0 35px;
    background: none;
    border: 0;
  }

  body.detail-page .application-status-block span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
  }

  body.detail-page .application-status-block strong {
    padding: 0 10px;
    color: #fd006e;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.detail-page .application-contact {
    display: none;
  }

  body.detail-page .application-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
  }

  body.detail-page .application-panel-actions .apply-action {
    display: flex;
    position: relative;
    min-height: 50px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    border-radius: 10px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  body.detail-page .application-panel-actions .apply-web {
    grid-column: 1 / -1;
    background: linear-gradient(-20deg, #f33, #e2315b);
    border: 1px solid #f33;
  }

  body.detail-page .application-panel-actions .apply-web strong {
    font-size: 13px;
  }

  body.detail-page .application-panel-actions .apply-web small {
    position: absolute;
    top: -14px;
    left: 50%;
    padding: 3px 10px;
    color: #f33;
    background: #fff;
    border: 1px solid #f33;
    border-radius: 25px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  body.detail-page .application-panel-actions .apply-line {
    background: var(--sp-line);
    border: 1px solid var(--sp-line);
  }

  body.detail-page .application-panel-actions .apply-tel-sp {
    display: flex;
    background: var(--sp-tel);
    border: 1px solid var(--sp-tel);
  }

  body.detail-page .application-panel-actions .apply-action:last-child:nth-child(2) {
    grid-column: 1 / -1;
  }

  body.detail-page .application-sp-extras {
    display: grid;
    gap: 10px;
  }

  body.detail-page .application-tel-note {
    margin: 8px 0 0;
    color: var(--sp-ink);
    font-size: 12px;
    text-align: center;
  }

  body.detail-page .application-tel-note em {
    color: var(--sp-pink);
    font-style: normal;
    font-weight: 700;
  }

  body.detail-page .application-save,
  body.detail-page .application-shop-link {
    display: flex;
    min-height: 40px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: var(--sp-ink);
    background: #fff;
    border: 1px solid #bcbccb;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  body.detail-page .application-sp-extras > :first-child:not(.application-tel-note) {
    margin-top: 10px;
  }

  body.detail-page .application-save[aria-pressed="true"] {
    color: var(--sp-pink);
    border-color: var(--sp-pink);
  }

  body.detail-page .application-shop-link {
    color: var(--sp-tel);
    border-color: var(--sp-tel);
  }

  /* Detail: content sections */
  body.detail-page .detail-section {
    margin: 0 0 30px;
    padding: 0 15px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.detail-page .detail-intro-section {
    margin-top: 0;
    padding-top: 15px;
  }

  body.detail-page .detail-section h2 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 15px;
    padding: 0;
    color: var(--sp-ink);
    background: none;
    border: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
  }

  body.detail-page .detail-section h2::before {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    background: url("/assets/images/icon-section-sparkle.svg") center / contain no-repeat;
    content: "";
  }

  body.detail-page .detail-intro-section h2 {
    display: block;
    font-size: 16px;
    line-height: 1.5;
  }

  body.detail-page .detail-intro-section h2::before {
    display: none;
  }

  body.detail-page .detail-lead {
    margin: 5px 0 0;
    color: var(--sp-ink);
    font-size: 14px;
    line-height: 1.5;
  }

  body.detail-page .feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.detail-page .feature-grid article {
    padding: 15px;
    background: var(--sp-pink-soft);
    border: 0;
    border-radius: 5px;
    box-shadow: none;
  }

  body.detail-page .feature-grid h3 {
    margin: 0 0 5px;
    color: var(--sp-pink);
    font-size: 15px;
  }

  body.detail-page .feature-grid p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  body.detail-page .photo-gallery {
    scroll-padding-inline: 15px;
    display: flex;
    gap: 15px;
    margin: 0 -15px;
    padding: 0 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.detail-page .photo-gallery figure {
    flex: 0 0 121px;
    width: 121px;
    height: 215px;
    margin: 0;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 0;
    scroll-snap-align: start;
  }

  body.detail-page .photo-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* Detail: stacked tables with pink headings, full-bleed like the reference */
  body.detail-page .info-table {
    display: block;
    margin: 0 -15px;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  body.detail-page .info-table > div {
    display: block;
    margin: 0;
    padding: 0 0 15px;
    background: none;
    border: 0;
  }

  body.detail-page .info-table dt {
    display: block;
    width: auto;
    margin: 0 0 15px;
    padding: 10px 15px;
    color: var(--sp-ink);
    background: var(--sp-pink-soft);
    border: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.detail-page .info-table dd {
    display: block;
    margin: 0;
    padding: 0 15px;
    color: var(--sp-ink);
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  body.detail-page .info-table dd strong {
    font-size: 16px;
    font-weight: 700;
  }

  body.detail-page .tag-groups {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  body.detail-page .tag-groups h3 {
    margin: 0 -15px 15px;
    padding: 10px 15px;
    background: var(--sp-pink-soft);
    font-size: 14px;
    font-weight: 700;
  }

  body.detail-page .tag-groups div,
  body.detail-page .info-table dd .mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.detail-page .tag-groups span,
  body.detail-page .info-table dd .mini-tags span {
    padding: 5px 10px;
    color: var(--sp-pink);
    background: var(--sp-pink-soft);
    border: 1px solid var(--sp-pink);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.detail-page .inline-action {
    color: var(--sp-blue);
    font-size: 13px;
    font-weight: 700;
  }

  body.detail-page .application-methods {
    display: grid;
    gap: 8px;
  }

  body.detail-page .application-methods .apply-action {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    background: linear-gradient(-20deg, #f33, #e2315b);
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  body.detail-page .application-methods .apply-line {
    background: var(--sp-line);
  }

  body.detail-page .application-methods .apply-tel {
    background: var(--sp-tel);
  }

  body.detail-page .step-list {
    display: grid;
    gap: 15px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
  }

  body.detail-page .step-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  body.detail-page .step-list li span {
    display: grid;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    place-items: center;
    color: #fff;
    background: linear-gradient(#ff8fb8, #fe5f9a);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  body.detail-page .step-list li p {
    margin: 0;
    font-size: 14px;
  }

  body.detail-page .qa-list details {
    border-bottom: 1px dotted #ccc;
  }

  body.detail-page .recommendation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.detail-page .recommendation-grid article {
    background: #fff;
    border: 0;
    border-top: 4px solid transparent;
    border-image: var(--sp-rainbow) 1;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  body.detail-page .ambiance-grid {
    gap: 10px;
  }

  body.detail-page .ambiance-grid div,
  body.detail-page .age-group-row {
    color: var(--sp-ink);
    background: var(--sp-pink-soft);
    border-radius: 5px;
    font-size: 13px;
  }

  body.detail-page .ambiance-grid span {
    color: #fe7fb6;
  }

  body.detail-page .age-group-row span {
    color: var(--sp-pink);
    background: #fff;
    border: 1px solid var(--sp-pink);
    border-radius: 50px;
  }

  /* Detail: floating CTA bar */
  body.detail-page .mobile-sticky-apply {
    gap: 5px;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
    background: #fff9f2;
    border-top: 1px solid #f3e4d4;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
  }

  body.detail-page .mobile-sticky-apply button,
  body.detail-page .mobile-sticky-apply a {
    min-height: 46px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
  }

  body.detail-page .mobile-sticky-apply a:not(.mobile-line) {
    background: linear-gradient(-20deg, #f33, #e2315b);
  }

  body.detail-page .mobile-sticky-apply .mobile-line {
    background: var(--sp-line);
  }

  body.inner-page .site-footer {
    background: #fff;
    border-top: 4px solid transparent;
    border-image: var(--sp-rainbow) 1;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  body.listing-page .listing-search-box .mobile-filter-button {
    color: #fff;
    background: #dc2551;
    border: 1px solid #dc2551;
    border-radius: 5px;
    font-weight: 700;
  }
}

.list-card-copy a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.list-card-copy a:hover {
  text-decoration: underline;
}

@media (max-width: 680px) {
  body.listing-page .list-card-copy a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.listing-results .empty-state img {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 12px;
}

.listing-results .empty-state p {
  margin: 0;
}

.application-mascot {
  display: none;
}

@media (max-width: 680px) {
  body.detail-page .detail-application-panel {
    position: relative;
  }

  body.detail-page .application-mascot {
    display: block;
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 14px;
    width: 56px;
    height: auto;
  }

  body.detail-page .application-status-block {
    padding-right: 56px;
  }

  body.detail-page .application-panel-actions {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 681px) {
  .list-card-info > div {
    grid-template-columns: 136px minmax(0, 1fr);
  }

  .list-card-info dt {
    white-space: nowrap;
  }
}

/* Avoid stray one- or two-character lines in headings and copy */
.inner-page h1,
.inner-page h2,
.inner-page h3 {
  text-wrap: balance;
}

.inner-page p,
.inner-page dd {
  text-wrap: pretty;
}