/* top-page.css — Figma-faithful styles for feature-201-top-page
 * Lifecycle: initial-visual-review (figma-baseline-driven-modification)
 * Iteration: impl-iteration-03-01
 *
 * Design tokens are sourced from /css/foundation/_tokens.css and
 * /css/foundation/_typography.css (loaded via foundation/index.css in _Layout).
 * This file must not redeclare :root tokens; it only uses var(--sjmn-*).
 */

/* ============================================================
 * 1. Utility helpers
 * ============================================================ */

.hidden,
.sp-menu-back[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * 3. Dialog/modal resets (shared by logout + token-error)
 * ============================================================ */

dialog.logout-modal,
dialog.token-error-modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  overflow: visible;
}

dialog.logout-modal[open],
dialog.token-error-modal[open] {
  width: min(100%, 560px);
}

dialog.logout-modal::backdrop,
dialog.token-error-modal::backdrop {
  background: rgb(49 60 94 / 60%);
  background: rgb(from var(--sjmn-color-overlay-primary) r g b / 60%);
}

/* ============================================================
 * 3. Body-level overrides for top-page
 * ============================================================ */

body.top-page {
  background-color: var(--sjmn-color-base-white);
}

body.top-page main {
  padding: 24px 0 0;
  overflow-x: clip; /* Prevent full-bleed section (calc(50% - 50vw)) from triggering horizontal scroll when a vertical scrollbar is present */
}

body.top-page .footer-container {
  border-top: 0;
}

body.top-page .info-filter-btn {
  line-height: normal;
}

/* ============================================================
 * 4. Page wrapper
 * ============================================================ */

.top-page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--sjmn-color-text-color-primary);
}

/* ============================================================
 * 5. Message area (login error banner)
 * ============================================================ */

.message-area {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 24px;
  border-radius: 6px;
  background-color: var(--sjmn-color-alart-bg);
  border: 1px solid var(--sjmn-color-alart-arart);
}

.message-area.error {
  background-color: var(--sjmn-color-alart-bg);
  border-color: var(--sjmn-color-alart-arart);
}

.message-area-text {
  margin: 0;
  font-size: var(--sjmn-size-14);
  line-height: 1.5;
  color: var(--sjmn-color-alart-arart);
  font-weight: 700;
}

/* ============================================================
 * 6. Emergency notices section
 * Figma: pink/light-red background card with warning icon, border
 * ============================================================ */

.emergency-notices-section {
  margin-bottom: 39px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.emergency-notices-heading-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.emergency-notice-item {
  padding: 12px 16px;
  border-radius: 12px;
  background-color: var(--sjmn-color-alart-bg);
}

.emergency-notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.emergency-notice-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.emergency-notice-label {
  font-size: var(--sjmn-size-20);
  font-weight: 700;
  color: var(--sjmn-color-alart-arart);
}

.emergency-notice-title {
  margin: 0 0 8px;
  font-size: var(--sjmn-size-16);
  line-height: 1.5;
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
}

.emergency-notice-body {
  margin: 0;
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
  color: var(--sjmn-color-text-color-primary);
  font-weight: 400;
}

.emergency-notice-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.emergency-notice-date {
  font-size: var(--sjmn-size-14);
  color: var(--sjmn-color-text-color-gray);
}

.emergency-notice-link {
  font-size: var(--sjmn-size-14);
  color: var(--sjmn-color-text-color-link);
  text-decoration: underline;
}

.emergency-notice-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* ============================================================
 * 7. Main guidance cards (2-column grid)
 * Figma: dark navy card (MyPage) + white outlined card (New Application)
 * ============================================================ */

.main-guidance-cards-section {
  margin-bottom: 29px;
  padding-top: 34px;
}

.guidance-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 570px));
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 40px;
  align-items: stretch;
}

@media (width <= 767px) {
  .guidance-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.guidance-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 32px 32px 28px;
  border-radius: 14.5px;
}

.guidance-card--mypage {
  background-color: var(--sjmn-color-mypage-bg-light);
  border: 3px solid var(--sjmn-color-site-main-color-main-color);
}

.guidance-card--mypage .guidance-card-title {
  color: var(--sjmn-color-text-color-primary);
}

.guidance-card--mypage .guidance-card-description {
  color: var(--sjmn-color-text-color-primary);
  text-align: center;
}

/* White / outlined new application card */
.guidance-card--new-application {
  background-color: var(--sjmn-color-mypage-bg-light);
  border: 3px solid var(--sjmn-color-site-main-color-main-color);
}

.guidance-card--new-application .guidance-card-title {
  color: var(--sjmn-color-text-color-primary);
}

.guidance-card--new-application .guidance-card-description {
  color: var(--sjmn-color-text-color-primary);
  text-align: center;
}

.guidance-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.guidance-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.guidance-card-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.guidance-card-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.guidance-card-description {
  margin: 0 0 24px;
  font-size: var(--sjmn-size-16);
  line-height: 1.6;
  min-height: 32px;
}

/* Primary button (white text on dark bg) */
.guidance-card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  width: min(100%, 340px);
  min-height: 64px;
  align-self: center;
  padding: 14px 24px;
  border-radius: 30px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  margin-bottom: 16px;
}

.guidance-card-button:hover {
  opacity: 0.85;
}

.guidance-card-button--primary {
  background: #1e02ac;
  color: var(--sjmn-color-text-color-white);
  border: 2px solid #1e02ac;
}

.guidance-card-button--primary:hover {
  background-color: var(--sjmn-color-button-main-hover-color);
  border-color: var(--sjmn-color-button-main-hover-color);
  opacity: 1;
}

.guidance-card-button--secondary {
  background: #fff;
  color: var(--sjmn-color-button-main-color);
  border: 1px solid #2d3657;
}

.guidance-card-button--secondary:hover {
  background: #ecf2ff;
  border: 1px solid #1e02ac;
  opacity: 1;
}

.guidance-card-button--primary:visited {
  color: var(--sjmn-color-text-color-white);
}

/* Authenticated MyPage button uses the site main navy (Figma loggedin state) */
.guidance-card-button--mypage,
.guidance-card-button--mypage:visited {
  background-color: var(--sjmn-color-site-main-color-main-color);
  border-color: var(--sjmn-color-site-main-color-main-color);
}

.guidance-card-button--mypage:hover {
  background-color: var(--sjmn-color-button-main-hover-color);
  border-color: var(--sjmn-color-button-main-hover-color);
  opacity: 1;
}

.guidance-card-button--secondary:visited {
  color: var(--sjmn-color-button-main-color);
}

.guidance-card-button-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.guidance-card-sub-link-list {
  display: flex;
  justify-content: center;
  min-height: 48px;
}

.guidance-card-sub-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: var(--sjmn-size-16);
  color: var(--sjmn-color-text-color-link);
  text-decoration: underline;
  margin-top: 4px;
  font-weight: 700;
}

.guidance-card-sub-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.guidance-card-sub-link:hover {
  text-decoration: none;
}

.guidance-card-sub-text {
  margin: 4px 0 0;
  padding-top: 10px;
  font-size: var(--sjmn-size-16);
  line-height: 1.5;
  color: var(--sjmn-color-text-color-gray);
  text-align: center;
  min-height: 48px;
}

.guidance-card-prep-link {
  color: var(--sjmn-color-text-color-link);
  text-decoration: underline;
  font-weight: 700;
}

.guidance-card-prep-link:hover {
  text-decoration: none;
}

.maintenance-notice {
  margin: 8px 0 0;
  font-size: var(--sjmn-size-14);
  font-weight: 700;
  color: var(--sjmn-color-background-color-primary);
  text-align: center;
}

/* ============================================================
 * 8. Section headings (shared .section-heading for h2)
 * Figma: bold with left blue/navy border accent
 * ============================================================ */

.section-heading {
  margin: 0 0 24px;
  font-size: var(--sjmn-size-24);
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
  line-height: 1.4;
  padding-left: 16px;
  border-left: 4px solid var(--sjmn-color-site-main-color-main-color);
}

/* ============================================================
 * 9. Important notices accordion
 * ============================================================ */

.important-notices-section {
  margin-bottom: 40px;
}

.important-notices-section .section-heading {
  margin-bottom: 29px;
}

.legacy-applicant-guidance-section {
  margin-bottom: 60px;
}

.legacy-guidance-details {
  padding: 30px 32px;
  border: 1px solid var(--sjmn-color-border-color-gray);
  border-radius: 16px;
  background-color: var(--sjmn-color-basic-background-color-white);
}

.legacy-guidance-details .legacy-guidance-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sjmn-color-text-color-primary);
  list-style: none;
}

.legacy-guidance-summary::-webkit-details-marker {
  display: none;
}

.legacy-guidance-summary::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  margin-left: auto;
  border-right: 2px solid var(--sjmn-color-text-color-gray);
  border-bottom: 2px solid var(--sjmn-color-text-color-gray);
  transform: rotate(-135deg);
  flex-shrink: 0;
}

.legacy-guidance-details:not([open]) .legacy-guidance-summary::after {
  margin-top: 4px;
  transform: rotate(45deg);
}

.legacy-guidance-body {
  margin-top: 19px;
  padding-left: 0;
}

.legacy-guidance-body p {
  margin: 0 0 16px;
  font-size: var(--sjmn-size-16);
  line-height: 1.8;
  color: var(--sjmn-color-text-color-primary);
}

.legacy-guidance-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.legacy-guidance-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sjmn-color-text-color-link);
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
  text-decoration: underline;
}

.legacy-guidance-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.legacy-guidance-link:hover {
  text-decoration: none;
}

.accordion-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sjmn-color-border-color-gray);
  border-radius: 8px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--sjmn-color-border-color-gray);
}

.accordion-item:last-child {
  border-bottom: 0;
}

.accordion-empty {
  padding: 18px 20px;
  background-color: var(--sjmn-color-basic-background-color-white);
  font-size: var(--sjmn-size-16);
  line-height: 1.6;
  color: var(--sjmn-color-text-color-gray);
}

.accordion-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: var(--sjmn-color-basic-background-color-white);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--sjmn-size-16);
  font-weight: 400;
  color: var(--sjmn-color-text-color-primary);
  transition: background-color 0.1s ease;
}

.accordion-toggle:hover {
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

.accordion-toggle[aria-expanded="true"] {
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

.accordion-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.accordion-toggle-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.accordion-toggle-text {
  flex: 1;
  font-size: var(--sjmn-size-18);
  line-height: 1.5;
  color: var(--sjmn-color-text-color-primary);
  font-weight: 700;
}

.accordion-toggle-chevron {
  flex-shrink: 0;
  width: 70px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sjmn-color-text-color-gray);
}

/* Down chevron using CSS border */
.accordion-toggle-chevron::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sjmn-color-text-color-gray);
  border-bottom: 2px solid var(--sjmn-color-text-color-gray);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.2s ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-toggle-chevron::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.accordion-panel {
  padding: 16px 20px 20px 54px;
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
  border-top: 1px solid var(--sjmn-color-border-color-gray);
}

.accordion-panel[hidden] {
  display: none;
}

.accordion-panel-body {
  margin: 0 0 12px;
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
  color: var(--sjmn-color-text-color-primary);
}

.accordion-panel-link {
  font-size: var(--sjmn-size-14);
  color: var(--sjmn-color-text-color-link);
  text-decoration: underline;
}

.accordion-panel-link:hover {
  text-decoration: none;
}

/* ============================================================
 * 10. Pre-application preparation steps
 * Figma: numbered circles (navy bg, white text) + content
 * ============================================================ */

.pre-application-preparation-section {
  margin: 0 calc(50% - 50vw) 48px;
  padding: 40px max(16px, calc((100vw - 1200px) / 2)) 47px;
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

.preparation-section-description {
  margin: -12px 0 10px 20px;
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
  color: var(--sjmn-color-text-color-primary);
}

.preparation-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preparation-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 28px;
  background-color: var(--sjmn-color-basic-background-color-white);
  border-radius: 16px;
}

.preparation-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background-color: var(--sjmn-color-site-main-color-main-color);
  color: var(--sjmn-color-text-color-white);
  font-size: var(--sjmn-size-24);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.preparation-step-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  width: 100%;
}

.preparation-step-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
  line-height: 1.4;
}

.preparation-step-desc {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: var(--sjmn-size-16);
  line-height: 1.6;
  color: var(--sjmn-color-text-color-primary);
}

.preparation-step-period {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding: 2px 12px 2px 16px;
  font-size: var(--sjmn-size-16);
  line-height: 1.5;
  color: var(--sjmn-color-text-color-primary);
  background-color: var(--sjmn-color-basic-background-color-peach);
  border-radius: 4px;
  font-weight: 700;
}

.preparation-step-link {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 4px;
  font-size: var(--sjmn-size-16);
  color: var(--sjmn-color-text-color-link);
  text-decoration: underline;
  font-weight: 700;
}

.preparation-step-link-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentcolor;
  mask-image: url("/img/icons/icon-external-link.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.preparation-step-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

.preparation-step-link--centered {
  grid-row: 1 / span 2;
  align-self: center;
  margin-top: 0;
}

.preparation-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.preparation-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-height: 60px;
  padding: 12px 44px 12px 20px;
  border: 1px solid var(--sjmn-color-background-color-primary);
  border-radius: 8px;
  background-color: var(--sjmn-color-basic-background-color-white);
  color: var(--sjmn-color-text-color-primary);
  font-size: var(--sjmn-size-18);
  font-weight: 700;
  text-decoration: none;
}

.preparation-top-link:hover {
  background: #ecf2ff;
  border: 1px solid #1e02ac;
}

.preparation-top-link-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ============================================================
 * 11. Procedure notices (4-tab section)
 * Figma: horizontal tab strip, scrollable notice list inside bordered box
 * ============================================================ */

.procedure-notices-section {
  margin-bottom: 27px;
}

.procedure-notices-section .section-heading {
  margin-bottom: 16px;
}

.procedure-tabs {
  display: flex;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.procedure-tabs::-webkit-scrollbar {
  display: none;
}

.procedure-tab {
  flex: 1;
  min-width: 120px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-right: 1px solid var(--sjmn-color-border-color-gray);
  cursor: pointer;
  font-size: var(--sjmn-size-14);
  font-weight: 400;
  color: var(--sjmn-color-text-color-primary);
  white-space: nowrap;
  text-align: center;
  transition: background-color 0.15s ease;
}

.procedure-tab:last-child {
  border-right: none;
}

.procedure-tab:hover:not(.active) {
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

/* Active tab — from Figma: tab-state-2/3 */
/* "all" tab has no --waku-color; fall back to site main color */
.procedure-tab.active,
.procedure-tab[aria-selected="true"] {
  background-color: var(
    --waku-color-bg-light,
    var(--sjmn-color-site-main-color-main-color-bg-l)
  );
  color: var(--waku-color, var(--sjmn-color-site-main-color-main-color));
  font-weight: 700;
}

.procedure-panels {
  border: 1px solid var(--sjmn-color-border-color-gray);
  border-radius: 8px;
  overflow: hidden;
}

.procedure-panel {
  padding: 19px 0 8px;
  background-color: var(--sjmn-color-basic-background-color-white);
  max-height: 580px;
  overflow-y: auto;
  scrollbar-color: var(--sjmn-color-border-color-gray)
    var(--sjmn-color-basic-background-color-white);
  scrollbar-width: thin;
}

.procedure-panel[hidden] {
  display: none;
}

.procedure-notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.procedure-notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--sjmn-color-basic-background-color-grayplus1);
  flex-wrap: wrap;
  line-height: 1.5;
}

.procedure-notice-item:last-child {
  border-bottom: none;
}

.procedure-notice-date {
  flex-shrink: 0;
  min-width: 90px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
}

.procedure-notice-title-cell {
  flex: 1;
  display: block;
  min-width: 0;
}

.procedure-notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: var(--sjmn-size-12);
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}

.procedure-notice-badge--important {
  color: var(--sjmn-color-alart-arart);
  border-color: var(--sjmn-color-alart-arart);
  background-color: transparent;
}

.procedure-notice-badge--new {
  margin-left: 0.35rem;
  width: 48px;
  height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: var(--sjmn-size-16);
  box-sizing: border-box;
  color: var(--sjmn-color-basic-background-color-black);
  border-color: var(--sjmn-color-functional-color-sky-blue-1);
  background-color: var(--sjmn-color-functional-color-sky-blue-1);
}

.notice-badge-icon {
  display: inline-flex;
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
  object-fit: contain;
}

.procedure-notice-link {
  display: inline;
  font-size: var(--sjmn-size-16);
  color: var(--sjmn-color-text-color-primary);
  text-decoration: underline;
  line-height: 1.5;
  word-break: break-word;
}

.procedure-notice-link:hover {
  text-decoration: none;
}

.procedure-notice-empty {
  padding: 24px;
  margin: 0;
  font-size: var(--sjmn-size-14);
  color: var(--sjmn-color-text-color-gray);
  text-align: center;
}

.procedure-notices-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
  margin-top: 0;
}

.procedure-notices-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  width: 298px;
  padding: 10px 24px;
  border: 2px solid var(--sjmn-color-background-color-primary);
  border-radius: 30px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.procedure-notices-all-link:hover {
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

.procedure-notices-all-link:visited {
  color: var(--sjmn-color-text-color-primary);
}

/* ============================================================
 * 12. Support section (3-column cards)
 * Figma: equal-width cards with icon + title + desc + link
 * ============================================================ */

.support-section {
  margin-bottom: 28px;
}

.support-section .section-heading {
  margin-bottom: 30px;
}

.support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.support-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 327px;
  padding: 28px;
  background-color: var(--sjmn-color-basic-background-color-white);
  border: 1px solid var(--sjmn-color-site-main-color-main-color);
  border-radius: 16px;
  box-sizing: border-box;
  gap: 16px;
}

.support-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.support-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgb(from var(--sjmn-color-button-main-color) r g b / 10%);
}

.support-card-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.support-card-title {
  margin: 0;
  font-size: var(--sjmn-size-18);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sjmn-color-text-color-primary);
  word-break: break-word;
}

.support-card-desc {
  margin: 0;
  font-size: var(--sjmn-size-14);
  line-height: 1.6;
  color: var(--sjmn-color-text-color-primary);
}

.support-card-desc--faq {
  min-height: calc(14px * 1.6 * 4);
}

/* FAQ・電話サポートは行を固定してボタン位置を揃える */
.support-card--faq,
.support-card--phone {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 40px 18px;
  row-gap: 16px;
  align-items: stretch;
}

.support-card--faq .support-card-heading,
.support-card--phone .support-card-heading {
  grid-row: 1;
}

.support-card--faq .support-card-desc,
.support-card--phone .support-card-desc {
  grid-row: 2;
  align-self: start;
}

.support-card--faq .support-card-link,
.support-card--phone .support-card-link {
  grid-row: 3;
}

.support-card--faq .support-card-note-spacer,
.support-card--phone .support-card-note {
  grid-row: 4;
}

.support-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 44px 0 24px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: var(--sjmn-color-site-main-color-main-color);
  color: var(--sjmn-color-text-color-white);
  font-size: var(--sjmn-size-14);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.support-card-link:hover {
  background-color: var(--sjmn-color-button-main-hover-color);
  opacity: 1;
}

.support-card-link-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.support-card-note,
.support-card-note-spacer {
  width: 100%;
  min-height: 18px;
  margin: 0;
}

.support-card-note {
  font-size: var(--sjmn-size-12);
  line-height: 1.5;
  color: var(--sjmn-color-text-color-gray);
  text-align: center;
  overflow-wrap: anywhere;
}

.support-card-chatbot-image {
  width: min(219px, 100%);
  height: auto;
  max-height: 130px;
  margin-top: auto;
  align-self: center;
  object-fit: contain;
}

@media (width <= 900px) {
  .support-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
 * 13. Subsidy information section (3 buttons)
 * ============================================================ */

.subsidy-information-section {
  margin-bottom: 48px;
}

.subsidy-information-description {
  margin: -12px 0 24px;
  font-size: var(--sjmn-size-14);
  line-height: 1.7;
  color: var(--sjmn-color-text-color-primary);
}

.subsidy-buttons {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

@media (width <= 767px) {
  .subsidy-buttons {
    flex-direction: column;
    gap: 20px;
  }

  .subsidy-information-section {
    margin-right: 0;
    margin-left: 0;
  }

  .subsidy-information-description {
    margin-top: -4px;
    margin-bottom: 20px;
  }
}

.subsidy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 1;
  min-width: 180px;
  min-height: 64px;
  padding: 14px 48px 14px 20px;
  background-color: var(--waku-color);
  border: 2px solid var(--waku-color);
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.subsidy-button:hover,
.subsidy-button:focus-visible {
  text-decoration: none;
  opacity: 0.85;
}

.subsidy-button-label {
  font-size: var(--sjmn-size-14);
  font-weight: 700;
  color: var(--sjmn-color-text-color-white);
  text-align: center;
}

.subsidy-button-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ============================================================
 * 14. E-application notices section
 * ============================================================ */

.e-application-notices-section {
  margin-bottom: 48px;
}

.e-application-notices-section .section-heading {
  margin-bottom: 31px;
}

.e-application-notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--sjmn-color-border-color-gray);
  border-radius: 8px;
  background-color: var(--sjmn-color-basic-background-color-white);
  scrollbar-color: var(--sjmn-color-border-color-gray)
    var(--sjmn-color-basic-background-color-white);
  scrollbar-width: thin;
}

.e-application-notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--sjmn-color-basic-background-color-grayplus1);
  flex-wrap: wrap;
}

.e-application-notice-item:last-child {
  border-bottom: none;
}

.e-application-notice-date {
  flex-shrink: 0;
  min-width: 90px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
}

.e-application-notice-title-cell {
  flex: 1;
  display: block;
  min-width: 0;
}

.e-application-notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: var(--sjmn-size-12);
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.e-application-notice-badge--important {
  color: var(--sjmn-color-alart-arart);
  border-color: var(--sjmn-color-alart-arart);
  background-color: transparent;
}

.e-application-notice-badge--new {
  margin-left: 0.35rem;
  width: 48px;
  height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: var(--sjmn-size-16);
  box-sizing: border-box;
  color: var(--sjmn-color-basic-background-color-black);
  border-color: var(--sjmn-color-functional-color-sky-blue-1);
  background-color: var(--sjmn-color-functional-color-sky-blue-1);
}

.e-application-notice-link {
  display: inline;
  font-size: var(--sjmn-size-16);
  color: var(--sjmn-color-text-color-primary);
  text-decoration: underline;
  line-height: 1.5;
  word-break: break-word;
}

.e-application-notice-link:hover {
  text-decoration: none;
}

.e-application-notice-empty {
  padding: 24px;
  margin: 0;
  font-size: var(--sjmn-size-14);
  color: var(--sjmn-color-text-color-gray);
  border: 1px solid var(--sjmn-color-border-color-gray);
  border-radius: 8px;
  text-align: center;
  background-color: var(--sjmn-color-basic-background-color-white);
  margin-bottom: 16px;
}

.e-application-notices-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
}

.e-application-notices-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  width: 298px;
  padding: 10px 24px;
  border: 2px solid var(--sjmn-color-background-color-primary);
  border-radius: 30px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  color: var(--sjmn-color-text-color-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.e-application-notices-all-link:hover {
  background-color: var(--sjmn-color-site-main-color-main-color-bg-l);
}

.procedure-notices-all-link span[aria-hidden="true"],
.e-application-notices-all-link span[aria-hidden="true"] {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  font-size: 0;
  background-color: currentcolor;
  mask-image: url("/img/icons/icon-chevron-right.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* ============================================================
 * 15. Operations footer section
 * Figma: light grey background, centered text, 3 ministry logos in a row
 * ============================================================ */

.operations-footer-section {
  padding: 40px 0 48px;
  margin: 0 -24px;
  text-align: center;
}

.operations-footer-description {
  margin: 0 auto 28px;
  max-width: 1200px;
  padding: 0 24px;
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
  color: var(--sjmn-color-text-color-primary);
}

.operations-footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 0 24px;
}

.operations-footer-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.operations-footer-logo-link:hover {
  opacity: 1;
}

.operations-footer-logo {
  width: 285px;
  height: 99px;
  object-fit: contain;
}

/* ============================================================
 * 16. Section spacing — all top-level sections
 * ============================================================ */

.procedure-notices-section,
.e-application-notices-section {
  padding-top: 12px;
}

.support-section,
.subsidy-information-section {
  padding-top: 0;
}

/* ============================================================
 * 17. Responsive adjustments
 * ============================================================ */

@media (width <= 600px) {
  .procedure-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow-x: visible;
    margin-bottom: 18px;
  }

  .procedure-tab {
    flex: unset;
    min-width: 0;
    border: 1px solid var(--sjmn-color-border-color-gray);
    border-radius: 4px;
    padding: 16px 12px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    background-color: var(--sjmn-color-basic-background-color-white);
  }

  .procedure-tabs .procedure-tab:last-child {
    border-right: 1px solid var(--sjmn-color-border-color-gray);
  }

  .procedure-notice-date,
  .e-application-notice-date {
    flex-basis: 100%;
  }

  .procedure-notice-title-cell,
  .e-application-notice-title-cell {
    flex-basis: 100%;
  }
}

@media (width <= 767px) {
  body.top-page main {
    padding-top: 48px;
  }

  .top-page-wrapper {
    padding: 0 16px;
  }

  .main-guidance-cards-section,
  .pre-application-preparation-section {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .section-heading {
    font-size: var(--sjmn-size-18);
  }

  .guidance-card {
    padding: 24px 20px 20px;
  }

  .guidance-card-title {
    font-size: var(--sjmn-size-22);
  }

  .accordion-toggle {
    padding: 14px 16px;
  }

  .accordion-panel {
    padding: 14px 16px 16px 48px;
  }

  .preparation-step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 18px 16px;
    gap: 8px 14px;
  }

  .preparation-step-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .preparation-step-content {
    display: contents;
  }

  .preparation-step-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .preparation-step-desc {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .preparation-step-period {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: auto;
  }

  .preparation-step-link {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0;
  }

  .preparation-step-link--centered {
    grid-row: auto;
    align-self: auto;
  }

  .preparation-link-grid {
    grid-template-columns: 1fr;
  }

  .procedure-panel {
    max-height: 586px;
  }

  .support-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .support-card {
    height: auto;
    min-height: 280px;
    padding: 28px;
    gap: 12px;
  }

  .support-card--faq,
  .support-card--phone {
    grid-template-rows: 44px minmax(0, 1fr) 40px auto;
    row-gap: 12px;
  }

  .support-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .support-card-link {
    width: min(100%, 280px);
    justify-self: center;
  }

  .operations-footer-section {
    margin: 0 -16px;
  }

  .operations-footer-logos {
    gap: 20px;
  }

  .operations-footer-logo {
    width: 285px;
    height: 99px;
  }

  .procedure-notices-footer {
    justify-content: center;
  }

  .e-application-notices-footer {
    justify-content: center;
  }
}