/*
 * 内ページ共通のPOPデザイン設定
 *
 * .pop-content を main に付与して利用する。既存コンテンツの構造を保ち、
 * 見出し・本文パネル・カード・リンクだけを同じ視覚言語に揃える。
 */
.pop-content {
  --pop-ink: #17384a;
  --pop-copy: #425967;
  --pop-accent: #0ea5e9;
  --pop-accent-deep: #0875ab;
  --pop-accent-soft: #e8faff;
  --pop-line: #cfeaf2;
  --pop-dot: #55cbe4;
  --pop-stripe: rgba(14, 165, 233, 0.18);
  --pop-shadow: rgba(18, 104, 142, 0.1);
}

.pop-content--gold {
  --pop-accent: #d7a62d;
  --pop-accent-deep: #9c6908;
  --pop-accent-soft: #fff6dd;
  --pop-line: #efdfab;
  --pop-dot: #f3c24d;
  --pop-stripe: rgba(243, 194, 77, 0.23);
  --pop-shadow: rgba(162, 112, 17, 0.1);
}

.pop-content--green {
  --pop-accent: #76b82a;
  --pop-accent-deep: #4f8615;
  --pop-accent-soft: #f1fae6;
  --pop-line: #d8ebc2;
  --pop-dot: #8fdc30;
  --pop-stripe: rgba(143, 220, 48, 0.22);
  --pop-shadow: rgba(84, 133, 29, 0.1);
}

.pop-content .content_body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 97% 20%, rgba(85, 203, 228, 0.1) 0 6px, transparent 6.5px),
    radial-gradient(circle at 99% 22%, rgba(85, 203, 228, 0.06) 0 13px, transparent 13.5px),
    linear-gradient(180deg, #ffffff 0%, #fafeff 100%);
}

.pop-content--gold .content_body {
  background:
    radial-gradient(circle at 97% 20%, rgba(243, 194, 77, 0.12) 0 6px, transparent 6.5px),
    radial-gradient(circle at 99% 22%, rgba(243, 194, 77, 0.07) 0 13px, transparent 13.5px),
    linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}

/* Main section heading: label, top-right dots, lower-left stripes. */
.pop-content .content_body h2:not(.cancel),
.pop-content.section-page .content_body h2.c-heading._stylish {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  margin: clamp(52px, 7vw, 82px) 0 clamp(24px, 3vw, 34px) !important;
  padding: clamp(24px, 3.4vw, 34px) clamp(24px, 4vw, 42px) !important;
  overflow: hidden !important;
  border: 1px solid var(--pop-line) !important;
  border-radius: 21px !important;
  background:
    repeating-linear-gradient(135deg, var(--pop-stripe) 0 5px, transparent 5px 12px) left bottom / 130px 68px no-repeat,
    linear-gradient(118deg, var(--pop-accent-soft) 0%, #ffffff 72%) !important;
  box-shadow: 8px 9px 0 color-mix(in srgb, var(--pop-dot) 22%, transparent) !important;
  color: var(--pop-ink) !important;
  font-family: inherit !important;
  font-size: clamp(1.42rem, 2.45vw, 1.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.45 !important;
  text-align: left !important;
  animation: none !important;
  translate: none !important;
}

.pop-content .content_body h2:not(.cancel)::before,
.pop-content.section-page .content_body h2.c-heading._stylish::before {
  position: static !important;
  display: block !important;
  width: fit-content !important;
  height: auto !important;
  margin: 0 0 9px !important;
  padding: 4px 9px !important;
  border: 1px solid color-mix(in srgb, var(--pop-accent) 25%, white) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--pop-accent-soft) 82%, white) !important;
  color: var(--pop-accent-deep) !important;
  content: attr(data-pop-label) !important;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic Antique", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.35 !important;
  transform: none !important;
}

.pop-content .content_body h2:not(.cancel):not([data-pop-label])::before {
  content: "SECTION" !important;
}

.pop-content .content_body h2:not(.cancel)::after,
.pop-content.section-page .content_body h2.c-heading._stylish::after {
  position: absolute !important;
  top: 21px !important;
  right: 25px !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--pop-dot) !important;
  box-shadow:
    -23px 18px 0 -3px color-mix(in srgb, var(--pop-dot) 45%, transparent),
    8px 30px 0 -5px color-mix(in srgb, var(--pop-dot) 35%, transparent) !important;
  content: "" !important;
  transform: none !important;
}

.pop-content .content_body h3.pop-sub-heading,
.pop-content .content_body .wp-block-heading:not(.cancel) {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
  margin: clamp(31px, 5vw, 46px) 0 17px !important;
  padding: 0 0 0 18px !important;
  align-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pop-ink) !important;
  font-size: clamp(1.08rem, 1.8vw, 1.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.55 !important;
  animation: none !important;
  translate: none !important;
}

.pop-content .content_body h3.pop-sub-heading::before,
.pop-content .content_body .wp-block-heading:not(.cancel)::before {
  position: absolute !important;
  top: 0.67em !important;
  left: 0 !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--pop-dot) !important;
  content: "" !important;
  transform: none !important;
}

.pop-content .content_body h3.pop-sub-heading::after,
.pop-content .content_body .wp-block-heading:not(.cancel)::after {
  display: none !important;
  content: none !important;
}

.pop-content .pop-lead {
  margin: 0 0 26px !important;
  padding: clamp(20px, 3vw, 28px) clamp(21px, 3.2vw, 34px) !important;
  border: 1px solid var(--pop-line) !important;
  border-radius: 17px !important;
  background: linear-gradient(118deg, var(--pop-accent-soft), #ffffff 74%) !important;
  box-shadow: 0 10px 22px var(--pop-shadow) !important;
  color: var(--pop-copy) !important;
}

.pop-content .pop-lead::before {
  display: inline-block;
  margin-right: 9px;
  color: var(--pop-accent);
  content: "●";
  font-size: 0.72em;
  vertical-align: 0.06em;
}

/* Existing and new card containers share the expanding-dot hover behavior. */
.pop-content .pop-card,
.pop-content .box._important,
.pop-content .set.normal,
.pop-content .privacy_section,
.pop-content .news_detail_box,
.pop-content .welfare_salary_text_grid .salary_text_card,
.pop-content .welfare_condition_group .welfare_job_card,
.pop-content .welfare_summary_grid .welfare_summary_card,
.pop-content .welfare_feature_section {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border: 1px solid var(--pop-line) !important;
  border-radius: 18px !important;
  background-color: #ffffff !important;
  box-shadow: 0 12px 26px var(--pop-shadow) !important;
  transition: translate 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease, border-color 0.26s ease;
}

.pop-content .pop-card::after,
.pop-content .box._important::after,
.pop-content .set.normal::after,
.pop-content .privacy_section::after,
.pop-content .news_detail_box::after,
.pop-content .welfare_salary_text_grid .salary_text_card::after,
.pop-content .welfare_condition_group .welfare_job_card::after,
.pop-content .welfare_summary_grid .welfare_summary_card::after,
.pop-content .welfare_feature_section::after {
  position: absolute !important;
  right: -15px !important;
  bottom: -15px !important;
  z-index: 0 !important;
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--pop-dot) 32%, transparent) !important;
  box-shadow: -18px -18px 0 -7px color-mix(in srgb, var(--pop-dot) 28%, transparent) !important;
  content: "" !important;
  transform: scale(1) !important;
  transform-origin: center !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}

.pop-content .pop-card > *,
.pop-content .box._important > *,
.pop-content .set.normal > *,
.pop-content .privacy_section > *,
.pop-content .news_detail_box > *,
.pop-content .welfare_salary_text_grid .salary_text_card > *,
.pop-content .welfare_condition_group .welfare_job_card > *,
.pop-content .welfare_summary_grid .welfare_summary_card > *,
.pop-content .welfare_feature_section > * {
  position: relative;
  z-index: 1;
}

/* The nursing-director message is a long-form card. Give its heading and both
   float images a shared inner gutter so they do not sit on the card edge. */
.pop-content .c-message-section {
  padding: clamp(24px, 3.5vw, 42px) !important;
}

.pop-content .c-message-section > h2:not(.cancel) {
  margin: 0 0 clamp(24px, 3vw, 34px) !important;
}

.pop-content .c-message-section .message_wrap {
  margin: 0 0 clamp(28px, 4vw, 46px) !important;
}

.pop-content .c-message-section .message_wrap + .message_wrap {
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px dashed color-mix(in srgb, var(--pop-accent) 30%, white);
}

.pop-content .c-message-section .img_in_text {
  width: clamp(246px, 27vw, 320px) !important;
  border: 5px solid #ffffff;
  outline: 1px solid color-mix(in srgb, var(--pop-accent) 28%, white);
  border-radius: 17px;
  box-shadow: 0 12px 26px var(--pop-shadow);
}

.pop-content .c-message-section .right_img {
  margin: 0 0 18px clamp(22px, 3vw, 34px) !important;
}

.pop-content .c-message-section .left_img {
  margin: 0 clamp(22px, 3vw, 34px) 18px 0 !important;
}

@media screen and (max-width: 767px) {
  .pop-content .c-message-section {
    padding: 24px !important;
  }

  .pop-content .c-message-section .img_in_text,
  .pop-content .c-message-section .right_img,
  .pop-content .c-message-section .left_img {
    float: none !important;
    width: 100% !important;
    max-width: 330px !important;
    box-sizing: border-box;
    margin: 0 auto 18px !important;
  }
}

/* The recovery-ward panel has an inner white sheet. Keep the POP dot above that sheet,
   while its text remains on top, so the decoration is visible at rest and on hover. */
.pop-content.section-page .set.normal::after {
  z-index: 2 !important;
}

.pop-content.section-page .set.normal .right {
  position: relative;
  z-index: 1;
  border: 0 !important;
}

.pop-content.section-page .set.normal .right > * {
  position: relative;
  z-index: 3;
}

@media screen and (max-width: 999px) {
  /* The shared stacked-set rule clears direct-child gutters on mobile. Restore
     a comfortable reading inset inside this recovery-ward card. */
  .pop-content.section-page .set.normal .right {
    box-sizing: border-box;
    padding: 24px clamp(18px, 5vw, 24px) !important;
  }
}

/* The interview list keeps its existing illustration and "Voice" badge, then joins the shared dot-hover language. */
.pop-content--interview .interview_section_header .en_title {
  display: none !important;
}

.pop-content--interview .interview_bubble_item {
  position: relative;
  z-index: 0;
  border-color: var(--pop-line) !important;
  box-shadow: 0 12px 26px var(--pop-shadow) !important;
  transition: translate 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease, border-color 0.26s ease;
}

.pop-content--interview .interview_bubble_item::after {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pop-dot) 30%, transparent);
  box-shadow: -16px -16px 0 -7px color-mix(in srgb, var(--pop-dot) 27%, transparent);
  content: "";
  transform: scale(1);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.pop-content--interview .interview_bubble_item > * {
  position: relative;
  z-index: 1;
}

.pop-content .box._important::before,
.pop-content .privacy_section::before,
.pop-content .news_detail_box::before {
  position: absolute;
  top: 0;
  left: 21px;
  z-index: 1;
  width: 93px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--pop-accent);
  content: "";
}

.pop-content .privacy_section {
  padding: clamp(22px, 3.2vw, 31px) !important;
}

.pop-content .privacy_section h2 {
  margin-top: 0 !important;
}

.pop-content .privacy_intro {
  margin-bottom: 28px;
}

/* News keeps its article title compact; the surrounding article card carries the POP decoration. */
main.pop-content.pop-content--news .content_body .news_detail_box h2:not(.cancel) {
  margin: 0 0 14px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pop-ink) !important;
  font-size: clamp(1.12rem, 1.8vw, 1.36rem) !important;
  line-height: 1.65 !important;
}

main.pop-content.pop-content--news .content_body .news_detail_box h2:not(.cancel)::before,
main.pop-content.pop-content--news .content_body .news_detail_box h2:not(.cancel)::after {
  display: none !important;
  content: none !important;
}

/* News articles use the same soft card, tag, and dot language as the other
   interior pages, while keeping their reading order compact. */
main.pop-content.pop-content--news .content_body .news_detail_box {
  padding: clamp(24px, 4vw, 36px) !important;
  border-color: #cfeaf2 !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f3fcff 0%, #ffffff 45%) !important;
  box-shadow: 8px 9px 0 rgba(85, 203, 228, 0.12), 0 12px 26px rgba(18, 104, 142, 0.07) !important;
}

main.pop-content.pop-content--news .news_detail_meta {
  gap: 9px;
  margin-bottom: 18px;
  padding-bottom: 13px;
  border-bottom-color: #d8eef3;
}

main.pop-content.pop-content--news .news_detail_date {
  color: var(--pop-accent-deep);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

main.pop-content.pop-content--news .news_detail_label {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--pop-accent) 28%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pop-accent-soft) 80%, white);
  color: var(--pop-accent-deep);
  font-size: 0.72rem;
  line-height: 1.35;
}

main.pop-content.pop-content--news .news_detail_label._red {
  border-color: #ffc7bf;
  background: #fff1ee;
  color: #bd594a;
}

main.pop-content.pop-content--news .news_detail_content h3 {
  position: relative;
  margin: 22px 0 16px !important;
  padding-left: 1.45rem !important;
  color: var(--pop-ink) !important;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem) !important;
  line-height: 1.6 !important;
}

main.pop-content.pop-content--news .news_detail_content h3::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--pop-dot);
  box-shadow: 0 0 0 7px rgba(85, 203, 228, 0.14);
  content: "";
}

main.pop-content.pop-content--news .news_detail_content > p {
  color: var(--pop-copy) !important;
  line-height: 1.9 !important;
}

main.pop-content.pop-content--news .news_detail_content .right_text {
  margin-top: 22px !important;
  text-align: left;
}

.pop-content .privacy_intro > p,
.pop-content .content_body p.c-mission-text {
  padding: 14px 17px !important;
  border: 1px solid color-mix(in srgb, var(--pop-accent) 17%, white) !important;
  border-radius: 13px !important;
  background-color: color-mix(in srgb, var(--pop-accent-soft) 56%, white) !important;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--pop-dot) 40%, transparent) 1.15px, transparent 1.7px) !important;
  background-position: 2px 2px !important;
  background-size: 11px 11px !important;
  box-shadow: none !important;
  color: var(--pop-copy) !important;
}

.pop-content .large_link:not(.cancel),
.pop-content .privacy_contact_btn .btn-shiny-navy {
  display: inline-flex !important;
  min-height: 46px;
  padding: 10px 19px !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--pop-accent) !important;
  border-radius: 999px !important;
  background: var(--pop-accent) !important;
  box-shadow: 0 8px 17px color-mix(in srgb, var(--pop-accent) 22%, transparent) !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.pop-content .large_link:not(.cancel)::after {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  content: "→" !important;
}

/* A long job-title label should remain a compact article action, not become
   a full-width call-to-action panel on smaller screens. */
main.pop-content.pop-content--news .news_detail_content .large_link:not(.cancel) {
  box-sizing: border-box;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 15px !important;
  font-size: clamp(0.75rem, 3.2vw, 0.9rem) !important;
  line-height: 1.35;
  white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
  .pop-content .pop-card:hover,
  .pop-content .box._important:hover,
  .pop-content .set.normal:hover,
  .pop-content .privacy_section:hover,
  .pop-content .news_detail_box:hover,
  .pop-content .welfare_salary_text_grid .salary_text_card:hover,
  .pop-content .welfare_condition_group .welfare_job_card:hover,
  .pop-content .welfare_summary_grid .welfare_summary_card:hover,
  .pop-content .welfare_feature_section:hover {
    z-index: 2;
    border-color: color-mix(in srgb, var(--pop-accent) 55%, white) !important;
    box-shadow: 0 19px 34px color-mix(in srgb, var(--pop-accent) 18%, transparent) !important;
    translate: 0 -5px;
  }

  .pop-content--interview .interview_bubble_item:hover {
    z-index: 2;
    border-color: color-mix(in srgb, var(--pop-accent) 55%, white) !important;
    box-shadow: 0 19px 34px color-mix(in srgb, var(--pop-accent) 18%, transparent) !important;
    translate: 0 -5px !important;
  }

  .pop-content .pop-card:hover::after,
  .pop-content .box._important:hover::after,
  .pop-content .set.normal:hover::after,
  .pop-content .privacy_section:hover::after,
  .pop-content .news_detail_box:hover::after,
  .pop-content .welfare_salary_text_grid .salary_text_card:hover::after,
  .pop-content .welfare_condition_group .welfare_job_card:hover::after,
  .pop-content .welfare_summary_grid .welfare_summary_card:hover::after,
  .pop-content .welfare_feature_section:hover::after {
    transform: scale(5.3) !important;
  }

  .pop-content--interview .interview_bubble_item:hover::after {
    transform: scale(5.3) !important;
  }
}

@media screen and (max-width: 767px) {
  .pop-content .content_body h2:not(.cancel),
  .pop-content.section-page .content_body h2.c-heading._stylish {
    margin-top: 50px !important;
    padding: 21px 22px 21px 25px !important;
    border-radius: 16px !important;
    box-shadow: 5px 6px 0 color-mix(in srgb, var(--pop-dot) 22%, transparent) !important;
  }

  .pop-content .content_body h2:not(.cancel)::after,
  .pop-content.section-page .content_body h2.c-heading._stylish::after {
    top: 17px !important;
    right: 18px !important;
    width: 12px !important;
    height: 12px !important;
  }

  .pop-content .privacy_section {
    padding: 21px !important;
  }

  /* Keep horizontally scrollable anchor chips from widening the document on small screens. */
  main.pop-content {
    overflow-x: clip;
  }

  .pop-content .pagelink_area {
    contain: paint;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pop-content .pop-card,
  .pop-content .box._important,
  .pop-content .set.normal,
  .pop-content .privacy_section,
  .pop-content .news_detail_box,
  .pop-content .welfare_salary_text_grid .salary_text_card,
  .pop-content .welfare_condition_group .welfare_job_card,
  .pop-content .welfare_summary_grid .welfare_summary_card,
  .pop-content .welfare_feature_section,
  .pop-content .pop-card::after,
  .pop-content .box._important::after,
  .pop-content .set.normal::after,
  .pop-content .privacy_section::after,
  .pop-content .news_detail_box::after,
  .pop-content .welfare_salary_text_grid .salary_text_card::after,
  .pop-content .welfare_condition_group .welfare_job_card::after,
  .pop-content .welfare_summary_grid .welfare_summary_card::after,
  .pop-content .welfare_feature_section::after {
    transition: none !important;
  }

  .pop-content--interview .interview_bubble_item,
  .pop-content--interview .interview_bubble_item::after {
    transition: none !important;
  }
}