/* =========================================================================
   magonote-common.css / CSS design system foundation
   Refactor: 2026-07-13 / spacing-typography + breakpoint/dedup pass 3
   Responsibility: tokens, typography, shared layout/components, theme fixes.
   Compatibility: existing JSON class names and legacy variables are retained.
   Values remain provisional until visual review.
   =========================================================================
*/

.magonote-page {
  /* Brand / core colors */
  --mn-brand-blue: #0058D8;
  --mn-brand-blue-dark: #072760;
  --mn-brand-blue-hover: #0048B8;
  --mn-brand-blue-soft: #EAF3FF;
  --mn-brand-blue-pale: #F6FAFF;
  --mn-brand-green: #19834D;
  --mn-brand-green-dark: #12633A;
  --mn-brand-green-soft: #EAF8F1;
  --mn-brand-white: #FFFFFF;
  --mn-brand-bg: #F7FBFF;
  --mn-brand-border: #D9E6F7;
  --mn-brand-text: #0D275A;
  --mn-brand-muted: #52637A;
  --mn-brand-warning: #F59E0B;
  --mn-brand-warning-soft: #FFF7E6;
  --mn-brand-danger: #EF4444;
  --mn-brand-danger-soft: #FFF1F1;
  /* Semantic surfaces / readable text */
  --mn-surface-card: #FFFFFF;
  --mn-surface-page: #F7FBFF;
  --mn-surface-blue: #F6FAFF;
  --mn-surface-blue-pale: #F5F9FF;
  --mn-surface-muted: #F4F7FB;
  --mn-surface-support: #F7F9FC;
  --mn-text-readable: #43566F;
  /* Free / commercial / monthly roles */
  --mn-free: #19834D;
  --mn-free-dark: #12633A;
  --mn-free-soft: #EAF8F1;
  --mn-free-bg: #F2FBF6;
  --mn-free-bg-strong: #ECF9F2;
  --mn-free-border: rgba(25, 131, 77, 0.28);
  --mn-commercial: #B55D00;
  --mn-commercial-hover: #934A00;
  --mn-commercial-dark: #7A3E00;
  --mn-commercial-soft: #FFF7E6;
  --mn-commercial-bg: #FFF9EF;
  --mn-commercial-bg-strong: #FFF4DF;
  --mn-commercial-border: rgba(181, 93, 0, 0.30);
  --mn-monthly: #A74635;
  --mn-monthly-soft: #FFF0ED;
  --mn-monthly-border: rgba(167, 70, 53, 0.24);
  /* Icon palette (shape rules live in magonote-icons.css) */
  --mn-icon-blue: #0058D8;
  --mn-icon-blue-dark: #073B7A;
  --mn-icon-blue-soft: #EAF4FF;
  --mn-icon-green: #1F9B5B;
  --mn-icon-green-dark: #16613B;
  --mn-icon-green-soft: #EAF8F0;
  --mn-icon-orange: #F59E0B;
  --mn-icon-orange-dark: #92400E;
  --mn-icon-orange-soft: #FFF6E5;
  --mn-icon-gray: #64748B;
  --mn-icon-gray-soft: #F1F5F9;
  /* Compatibility aliases (do not remove until all page CSS has migrated) */
  --mn-blue: var(--mn-brand-blue);
  --mn-blue-dark: var(--mn-brand-blue-dark);
  --mn-blue-hover: var(--mn-brand-blue-hover);
  --mn-blue-soft: var(--mn-brand-blue-soft);
  --mn-blue-pale: var(--mn-brand-blue-pale);
  --mn-green: var(--mn-brand-green);
  --mn-green-dark: var(--mn-brand-green-dark);
  --mn-green-soft: var(--mn-brand-green-soft);
  --mn-white: var(--mn-brand-white);
  --mn-bg: var(--mn-brand-bg);
  --mn-border: var(--mn-brand-border);
  --mn-text: var(--mn-brand-text);
  --mn-muted: var(--mn-brand-muted);
  --mn-warning: var(--mn-brand-warning);
  --mn-warning-soft: var(--mn-brand-warning-soft);
  --mn-danger: var(--mn-brand-danger);
  --mn-danger-soft: var(--mn-brand-danger-soft);
  /* Radius / border / shadow scale (provisional) */
  --mn-radius-sm: 8px;
  --mn-radius-md: 14px;
  --mn-radius-image: 14px;
  --mn-radius-card: 16px;
  --mn-radius-panel: 18px;
  --mn-radius-lg: 22px;
  --mn-radius-banner: 24px;
  --mn-radius-pill: 999px;
  --mn-card-radius: var(--mn-radius-md);
  --mn-panel-radius: var(--mn-radius-lg);
  --mn-button-radius: var(--mn-radius-sm);
  --mn-shadow-subtle: 0 6px 16px rgba(25, 78, 126, 0.055);
  --mn-shadow-card: 0 8px 22px rgba(7, 39, 96, 0.07);
  --mn-shadow-soft: 0 6px 18px rgba(7, 39, 96, 0.08);
  --mn-shadow-normal: 0 10px 28px rgba(7, 39, 96, 0.10);
  --mn-shadow-panel: 0 16px 36px rgba(7, 39, 96, 0.12);
  --mn-shadow-panel-strong: 0 16px 36px rgba(7, 39, 96, 0.13);
  --mn-shadow-strong: 0 18px 44px rgba(7, 39, 96, 0.14);
  --mn-shadow: var(--mn-shadow-normal);
  /* Width / typography scale (provisional) */
  --mn-width-normal: 1120px;
  --mn-width-hero: 1180px;
  --mn-width-read: 760px;
  --mn-font-main: "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mn-font-base: 15px;
  --mn-font-page: 16px;
  --mn-font-small: 13px;
  --mn-font-lead: 16px;
  --mn-font-card-title: 18px;
  --mn-font-caption: 12px;
  --mn-font-label: 13px;
  --mn-font-note: 14px;
  --mn-font-subheading: 20px;
  --mn-line-heading: 1.35;
  --mn-line-compact: 1.4;
  --mn-line-card: 1.65;
  --mn-line-readable: 1.7;
  --mn-line-body: 1.75;
  --mn-line-relaxed: 1.8;
  /* Spacing / control scale (provisional) */
  --mn-space-1: 4px;
  --mn-space-2: 8px;
  --mn-space-3: 10px;
  --mn-space-4: 12px;
  --mn-space-5: 16px;
  --mn-space-6: 18px;
  --mn-space-7: 20px;
  --mn-space-8: 22px;
  --mn-space-9: 24px;
  --mn-space-10: 28px;
  --mn-space-11: 34px;
  --mn-space-12: 42px;
  --mn-space-13: 48px;
  --mn-space-14: 54px;
  --mn-space-15: 56px;
  --mn-space-16: 64px;
  --mn-section-y-sm: 28px;
  --mn-section-y: 34px;
  --mn-section-y-lg: 42px;
  --mn-hero-y: 54px;
  --mn-hero-y-lg: 64px;
  --mn-section-x: 20px;
  --mn-gap: 18px;
  --mn-card-padding-sm: 16px;
  --mn-card-padding: 20px;
  --mn-card-padding-lg: 22px;
  --mn-button-height: 44px;
  --mn-button-height-strong: 46px;
  /* mgtop-v8 shared vertical rhythm; pages may override only when their layout requires it */
  --mn-mgtop-section-y: 56px;
  --mn-mgtop-section-y-compact: 38px;
  --mn-mgtop-section-nav-top: 48px;
  --mn-mgtop-section-nav-bottom: 56px;
  --mn-mgtop-hero-top: 54px;
  --mn-mgtop-hero-bottom: 44px;
  --mn-mgtop-mobile-y: 42px;
  /* Breakpoint reference only (custom properties cannot be used directly in @media queries) */
  --mn-breakpoint-wide: 1024px;
  --mn-breakpoint-tablet: 960px;
  --mn-breakpoint-mobile: 760px;
  --mn-breakpoint-small: 640px;
  --mn-breakpoint-compact: 520px;
  /* Base page typography */
  font-family: var(--mn-font-main);
  font-size: var(--mn-font-base);
  color: var(--mn-text);
  line-height: var(--mn-line-body);
  letter-spacing: 0.02em;
}

.magonote-page,
.magonote-page * {
  box-sizing: border-box;
}

.magonote-page a {
  color: inherit;
}

.magonote-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.magonote-page .mn-section {
  padding: var(--mn-section-y) var(--mn-section-x);
}

.magonote-page .mn-section--gray,
.magonote-page .mn-section--blue {
  background: var(--mn-bg);
}

.magonote-page .mn-section--green {
  background: var(--mn-green-soft);
}

.magonote-page .mn-section__inner {
  width: 100%;
  max-width: var(--mn-width-normal);
  margin: 0 auto;
}

.magonote-page .mn-section__label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: var(--mn-radius-pill);
  background: var(--mn-blue-soft);
  color: var(--mn-blue);
  font-size: var(--mn-font-label, 13px);
  font-weight: 900;
  line-height: 1.45;
}

.magonote-page .mn-section__title {
  margin: 0;
  color: var(--mn-blue-dark);
  font-size: clamp(24px, 3vw, 34px);
  line-height: var(--mn-line-heading, 1.35);
  font-weight: 900;
}

.magonote-page .mn-section__lead {
  max-width: var(--mn-width-read);
  margin: 14px 0 0;
  color: var(--mn-muted);
  font-size: var(--mn-font-base, 15px);
  font-weight: 700;
}

.magonote-page .mn-grid {
  display: grid;
  gap: var(--mn-gap);
}

.magonote-page .mn-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.magonote-page .mn-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.magonote-page .mn-card {
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-4, 12px);
  min-width: 0;
  height: 100%;
  padding: var(--mn-card-padding);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md);
  background: var(--mn-white);
  box-shadow: var(--mn-shadow-soft);
}

.magonote-page .mn-card--sm {
  padding: var(--mn-card-padding-sm);
}

.magonote-page .mn-card--emphasis {
  border-radius: var(--mn-radius-lg);
  box-shadow: var(--mn-shadow-normal);
}

.magonote-page .mn-card h3,
.magonote-page .mn-card__title {
  margin: 0;
  color: var(--mn-blue-dark);
  font-size: var(--mn-font-card-title, 18px);
  line-height: var(--mn-line-compact, 1.4);
  font-weight: 900;
}

.magonote-page .mn-card p,
.magonote-page .mn-card__text {
  margin: 0;
  color: var(--mn-muted);
  font-size: var(--mn-font-note, 14px);
  font-weight: 700;
  line-height: var(--mn-line-card, 1.65);
}

.magonote-page .mn-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-4, 12px);
  align-items: center;
  margin-top: var(--mn-space-8, 22px);
}

.magonote-page .mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--mn-radius-sm);
  font-size: var(--mn-font-base, 15px);
  font-weight: 900;
  line-height: var(--mn-line-compact, 1.4);
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}

.magonote-page .mn-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.magonote-page .mn-btn--primary {
  background: var(--mn-blue);
  color: var(--mn-white);
  box-shadow: 0 10px 20px rgba(0, 88, 216, 0.22);
}

.magonote-page .mn-btn--primary:hover {
  background: var(--mn-blue-hover);
  color: var(--mn-white);
}

.magonote-page .mn-btn--secondary {
  background: var(--mn-white);
  color: var(--mn-blue);
  border-color: var(--mn-blue);
}

.magonote-page .mn-btn--secondary:hover {
  background: var(--mn-blue-soft);
  color: var(--mn-blue-dark);
}

.magonote-page .mn-btn--free {
  background: var(--mn-green);
  color: var(--mn-white);
}

.magonote-page .mn-btn--free:hover {
  background: var(--mn-green-dark);
  color: var(--mn-white);
}

.magonote-page .mn-btn--ghost {
  background: transparent;
  color: var(--mn-blue);
  border-color: transparent;
}

.magonote-page .mn-btn--ghost:hover {
  background: var(--mn-blue-soft);
  color: var(--mn-blue-dark);
}

.magonote-page .mn-btn--warning {
  background: var(--mn-commercial);
  color: var(--mn-white);
}

.magonote-page .mn-btn--warning:hover {
  background: var(--mn-commercial-hover);
  color: var(--mn-white);
}

.magonote-page .mn-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--mn-border);
  background: var(--mn-white);
  color: var(--mn-blue-dark);
  font-size: var(--mn-font-label, 13px);
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 760px) {
  .magonote-page {
    --mn-section-y: 28px;
    --mn-section-x: 16px;
    --mn-gap: 16px;
    --mn-card-padding: 18px;
  }

  .magonote-page .mn-grid--3,
  .magonote-page .mn-grid--4 {
    grid-template-columns: 1fr;
  }

  .magonote-page .mn-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .magonote-page .mn-btn {
    width: 100%;
  }
}

body:has(.magonote-page) #breadcrumb {
  display: none !important;
}

body:has(.magonote-page) .magonote-page:first-child {
  margin-top: 0 !important;
}

.magonote-page .mn-icon--tool,
.magonote-page .mn-icon--category,
.magonote-page .mn-icon--feature,
.magonote-page .mn-icon--local,
.magonote-page .mn-icon--drag,
.magonote-page .mn-icon--danger {
  object-fit: contain;
}

.magonote-page .magonote-shortcode-slot {
  display: block;
  width: 100%;
}

.magonote-page .magonote-shortcode-slot + .magonote-shortcode-slot {
  margin-top: var(--mn-space-6, 18px);
}

.magonote-page .magonote-page-image-wrap .mn-card-media__image,
.magonote-page .magonote-page-image .mn-card-media__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mn-radius-lg);
  box-shadow: var(--mn-shadow-soft);
}

.magonote-page .is-active {
  font-weight: 900;
}

.magonote-page .has-image img {
  display: block;
}

.magonote-page .mn-container {
  width: min(var(--mn-width-normal), calc(100% - 32px));
  margin-right: auto;
  margin-left: auto;
}

.magonote-page .mn-tool-card-grid,
.magonote-page .mn-icon-grid {
  display: grid;
  gap: var(--mn-gap);
}

.magonote-page .mn-icon-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.magonote-page .mn-tool-card {
  color: inherit;
  text-decoration: none;
}

.magonote-page .mn-image-frame {
  width: min(var(--mn-width-normal), calc(100% - 32px));
  margin: 24px auto;
}

.magonote-page .mn-image-frame__figure {
  margin: 0;
}

.magonote-page .mn-image-frame__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mn-radius-lg);
  box-shadow: var(--mn-shadow-soft);
}

@media (max-width: 960px) {
  .magonote-page .mn-icon-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .magonote-page .mn-container,
  .magonote-page .mn-image-frame {
    width: min(var(--mn-width-normal), calc(100% - 24px));
  }
}

.magonote-page .mn-tag--blue,
.magonote-page .mn-tag--search {
  border-color: rgba(0, 88, 216, 0.24);
  background: var(--mn-blue-soft);
  color: var(--mn-blue-dark);
}

.magonote-page .mn-tag--csv,
.magonote-page .mn-tag--excel {
  border-color: rgba(31, 155, 91, 0.24);
  background: var(--mn-green-soft);
  color: var(--mn-green-dark);
}

.magonote-page .mn-tag--pdf {
  border-color: rgba(239, 68, 68, 0.24);
  background: var(--mn-danger-soft);
  color: #B42318;
}

.magonote-page .mn-tag {
  border-radius: var(--mn-radius-pill);
}

.magonote-page .mn-btn {
  min-height: var(--mn-button-height, 44px);
}

@media (max-width: 760px) {
  .magonote-page .mn-btn-row {
    gap: var(--mn-space-3, 10px);
  }

  .magonote-page .mn-tag {
    white-space: normal;
  }
}

.magonote-page img.mn-card-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.magonote-page .magonote-page-image-wrap {
  overflow: hidden;
  border-radius: var(--mn-radius-lg, 22px);
}

.magonote-page .magonote-page-image {
  width: 100%;
  height: auto;
}

.magonote-page .mn-icon,
.magonote-page img.mn-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

.magonote-page .mn-icon--sm,
.magonote-page img.mn-icon--sm {
  width: 40px;
  height: 40px;
}

.magonote-page .mn-icon--md,
.magonote-page img.mn-icon--md {
  width: 56px;
  height: 56px;
}

.magonote-page .mn-icon--lg,
.magonote-page img.mn-icon--lg {
  width: 72px;
  height: 72px;
}

.magonote-page .mn-icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: var(--mn-space-3, 10px);
  border: 1px solid var(--mn-border);
  border-radius: 20px;
  background: var(--mn-white);
  box-shadow: var(--mn-shadow-soft);
  flex: 0 0 auto;
}

.magonote-page .mn-icon-frame--blue {
  border-color: rgba(0, 88, 216, 0.22);
  background: var(--mn-blue-soft);
}

.magonote-page .mn-icon-frame--green {
  border-color: rgba(31, 155, 91, 0.22);
  background: var(--mn-green-soft);
}

.magonote-page .mn-icon-frame--red {
  border-color: rgba(239, 68, 68, 0.22);
  background: var(--mn-danger-soft);
}

.magonote-page .mn-icon--csv,
.magonote-page .mn-icon--excel,
.magonote-page .mn-icon-frame--csv,
.magonote-page .mn-icon-frame--excel {
  border-color: rgba(31, 155, 91, 0.24);
  background: var(--mn-green-soft);
}

.magonote-page .mn-icon--pdf,
.magonote-page .mn-icon-frame--pdf {
  border-color: rgba(239, 68, 68, 0.24);
  background: var(--mn-danger-soft);
}

.magonote-page .mn-icon--search,
.magonote-page .mn-icon--windows,
.magonote-page .mn-icon--download,
.magonote-page .mn-icon--file,
.magonote-page .mn-icon--lock,
.magonote-page .mn-icon--info,
.magonote-page .mn-icon-frame--search,
.magonote-page .mn-icon-frame--windows,
.magonote-page .mn-icon-frame--download,
.magonote-page .mn-icon-frame--file,
.magonote-page .mn-icon-frame--lock,
.magonote-page .mn-icon-frame--info {
  border-color: rgba(0, 88, 216, 0.24);
  background: var(--mn-blue-soft);
}

/* =========================================================
   CSS icon layout helpers
   実アイコンの形・色・サイズは magonote-icons.css 側で一元管理する。
   =========================================================
*/

.magonote-page .mn-has-css-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--mn-space-2, 8px);
}

.magonote-page .mn-card--with-icon .mn-icon-frame {
  margin-bottom: 2px;
}

.magonote-page .mn-card--with-icon,
.magonote-page .mn-feature-card,
.magonote-page .mn-tool-card,
.magonote-page .mn-category-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.magonote-page .mn-tool-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 4px;
}

.magonote-page .mn-feature-card {
  min-width: 0;
  height: 100%;
  padding: var(--mn-card-padding);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  background: var(--mn-white);
  box-shadow: var(--mn-shadow-soft);
}

.magonote-page .mn-feature-card h3 {
  margin: 0;
  color: var(--mn-blue-dark);
  font-size: var(--mn-font-card-title, 18px);
  line-height: 1.45;
  font-weight: 900;
}

.magonote-page .mn-feature-card p {
  margin: 0;
  color: var(--mn-muted);
  font-size: var(--mn-font-note, 14px);
  font-weight: 700;
  line-height: var(--mn-line-body, 1.75);
}

.magonote-page .mn-banner {
  width: 100%;
  margin: 28px auto;
}

.magonote-page .mn-banner__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--mn-radius-lg);
}

.magonote-page .mn-banner__link:hover {
  text-decoration: none;
}

.magonote-page .mn-banner__image,
.magonote-page img.mn-banner__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  background: var(--mn-white);
  box-shadow: var(--mn-shadow-soft);
  object-fit: cover;
}

.magonote-page .mn-banner--wide {
  max-width: var(--mn-width-normal);
}

.magonote-page .mn-banner--compact {
  max-width: 860px;
  margin-top: var(--mn-space-7, 20px);
  margin-bottom: var(--mn-space-7, 20px);
}

.magonote-page .mn-banner--hover .mn-banner__link {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.magonote-page .mn-banner--hover .mn-banner__link:hover {
  transform: translateY(-2px);
  filter: brightness(1.01);
}

.magonote-page .mn-icon-grid {
  display: grid;
  gap: var(--mn-space-5, 16px);
}

@media (max-width: 760px) {
  .magonote-page .mn-icon,
  .magonote-page img.mn-icon {
    width: 48px;
    height: 48px;
  }

  .magonote-page .mn-icon--sm,
  .magonote-page img.mn-icon--sm {
    width: 36px;
    height: 36px;
  }

  .magonote-page .mn-icon--lg,
  .magonote-page img.mn-icon--lg {
    width: 64px;
    height: 64px;
  }

  .magonote-page .mn-icon-frame {
    width: 64px;
    height: 64px;
    border-radius: var(--mn-radius-panel, 18px);
  }

  .magonote-page .mn-banner {
    margin-top: var(--mn-space-7, 20px);
    margin-bottom: var(--mn-space-7, 20px);
  }

  .magonote-page .mn-banner__image,
  .magonote-page img.mn-banner__image {
    border-radius: var(--mn-radius-md);
  }
}

.magonote-page figure.mn-lightbox-image {
  position: relative;
  cursor: zoom-in;
}

.magonote-page figure.mn-lightbox-image img {
  cursor: zoom-in;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}

.magonote-page figure.mn-lightbox-image:hover img,
.magonote-page figure.mn-lightbox-image:focus-within img {
  transform: scale(1.014);
  filter: brightness(1.025);
}

.magonote-page figure.mn-lightbox-image::after {
  content: "🔍";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 88, 216, 0.22);
  border-radius: var(--mn-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(7, 39, 96, 0.14);
  color: var(--mn-blue, #0058D8);
  font-size: var(--mn-font-page, 16px);
  line-height: 1;
  pointer-events: none;
  opacity: 0.88;
  transform: scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.magonote-page figure.mn-lightbox-image:hover::after,
.magonote-page figure.mn-lightbox-image:focus-within::after {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 24px rgba(7, 39, 96, 0.18);
}

.magonote-page figure.mn-lightbox-image > button.lightbox-trigger,
.magonote-page figure.mn-lightbox-image .lightbox-trigger {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: zoom-in !important;
  opacity: 0.01 !important;
}

.magonote-page figure.mn-lightbox-image > button.lightbox-trigger svg,
.magonote-page figure.mn-lightbox-image .lightbox-trigger svg {
  opacity: 0 !important;
}

.magonote-page figure.mn-lightbox-image > button.lightbox-trigger:focus-visible,
.magonote-page figure.mn-lightbox-image .lightbox-trigger:focus-visible {
  inset: auto 12px 12px auto !important;
  width: 40px !important;
  height: 40px !important;
  border: 2px solid var(--mn-blue, #0058D8) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--mn-blue, #0058D8) !important;
  opacity: 1 !important;
  outline: 3px solid rgba(0, 88, 216, 0.18) !important;
  outline-offset: 3px !important;
}

.magonote-page figure.mn-lightbox-image > button.lightbox-trigger:focus-visible svg,
.magonote-page figure.mn-lightbox-image .lightbox-trigger:focus-visible svg {
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .magonote-page figure.mn-lightbox-image::after {
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    font-size: var(--mn-font-note, 14px);
  }

  .magonote-page figure.mn-lightbox-image:hover img,
  .magonote-page figure.mn-lightbox-image:focus-within img {
    transform: scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  .magonote-page figure.mn-lightbox-image img,
  .magonote-page figure.mn-lightbox-image::after {
    transition: none;
  }

  .magonote-page figure.mn-lightbox-image:hover img,
  .magonote-page figure.mn-lightbox-image:focus-within img {
    transform: none;
  }
}

/* JSON整理後の共通受け皿 */

.magonote-page .mn-page-title {
  margin: 0;
  color: var(--mn-text);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.magonote-page .mn-section-head {
  margin: 0 0 18px;
}

.magonote-page .wp-block-image.size-large {
  margin: 0;
}

/* =========================================================
   セクション役割別デザイン正本 / role based section design
   役割: 見せる・読ませる・確認してもらう・強調不要
   =========================================================
*/

.magonote-page {
  --mn-role-showcase-bg: linear-gradient(135deg, #F1F8FF 0%, #FFFFFF 54%, #EAF3FF 100%);
  --mn-role-showcase-border: rgba(0, 88, 216, 0.26);
  --mn-role-read-bg: #F7F9FC;
  --mn-role-read-border: rgba(0, 88, 216, 0.18);
  --mn-role-check-bg: #F6F8FB;
  --mn-role-check-border: rgba(245, 158, 11, 0.28);
  --mn-role-plain-bg: transparent;
  --mn-role-mint: var(--mn-green, #19834D);
  --mn-role-mint-soft: var(--mn-green-soft, #EAF8F1);
  --mn-role-orange: var(--mn-commercial, #B55D00);
  --mn-role-orange-soft: var(--mn-commercial-soft, #FFF7E6);
}

.magonote-page .mn-section--showcase {
  background: var(--mn-role-showcase-bg);
}

.magonote-page .mn-section--read {
  background: var(--mn-role-read-bg);
}

.magonote-page .mn-section--check {
  background: var(--mn-role-check-bg);
}

.magonote-page .mn-section--plain {
  background: var(--mn-role-plain-bg);
}

.magonote-page .mn-section--showcase .mn-section__label {
  border: 1px solid var(--mn-role-showcase-border);
  background: var(--mn-blue-soft);
  color: var(--mn-blue-dark);
}

.magonote-page .mn-section--read .mn-section__label {
  border: 1px solid var(--mn-role-read-border);
  background: var(--mn-white);
  color: var(--mn-blue-dark);
}

.magonote-page .mn-section--check .mn-section__label {
  border: 1px solid var(--mn-role-check-border);
  background: var(--mn-role-orange-soft);
  color: #92400E;
}

.magonote-page .mn-section--plain .mn-section__label {
  background: var(--mn-white);
  color: var(--mn-muted);
}

.magonote-page .mn-section--read .mn-section__title,
.magonote-page .mn-section--check .mn-section__title {
  padding-left: 14px;
  border-left: 5px solid var(--mn-blue);
}

.magonote-page .mn-section--showcase .mn-card:not(.mn-card--plain),
.magonote-page .mn-card--showcase {
  border-color: var(--mn-role-showcase-border);
  background: linear-gradient(135deg, var(--mn-white) 0%, #F7FBFF 100%);
}

.magonote-page .mn-section--read .mn-card:not(.mn-card--plain),
.magonote-page .mn-card--read {
  border-color: var(--mn-role-read-border);
  background: var(--mn-white);
}

.magonote-page .mn-section--check .mn-card:not(.mn-card--plain),
.magonote-page .mn-card--check {
  border-color: var(--mn-role-check-border);
  background: var(--mn-white);
}

.magonote-page .mn-card--read {
  border-left: 5px solid var(--mn-blue);
}

.magonote-page .mn-card--check {
  border-top: 5px solid var(--mn-role-orange);
}

.magonote-page .mn-label--free,
.magonote-page .mn-label--mint {
  border-color: rgba(31, 155, 91, 0.24);
  background: var(--mn-role-mint-soft);
  color: var(--mn-green-dark);
}

.magonote-page .mn-label--notice,
.magonote-page .mn-label--orange {
  border-color: rgba(245, 158, 11, 0.28);
  background: var(--mn-role-orange-soft);
  color: #92400E;
}

.magonote-page .mn-label--paid,
.magonote-page .mn-label--blue {
  border-color: rgba(0, 88, 216, 0.24);
  background: var(--mn-blue-soft);
  color: var(--mn-blue-dark);
}

/* =========================================================
   まごの手ツール: WordPressテーマ側ページタイトル帯の抑制
   目的: カスタムHTML内のヒーローを正本とし、テーマ自動出力の見出し帯を重複表示しない
   =========================================================
*/

body:has(.magonote-page) .site-main > article > .entry-header,
body:has(.magonote-page) .site-main > .entry-header,
body:has(.magonote-page) main > article > .entry-header,
body:has(.magonote-page) main > .entry-header,
body:has(.magonote-page) .content-area .entry-header,
body:has(.magonote-page) .site-main > .page-header,
body:has(.magonote-page) main > .page-header,
body:has(.magonote-page) .page-title-bar,
body:has(.magonote-page) .page-title-section,
body:has(.magonote-page) .page-hero,
body:has(.magonote-page) .wp-block-post-title {
  display: none !important;
}

body:has(.magonote-page) .entry-content,
body:has(.magonote-page) .wp-block-post-content {
  margin-top: 0 !important;
}

/* =========================================================
   まごの手ツール 正本追加: WordPress自動UI/ヘッダー直下余白の抑制
   追加日: 2026-07-05
   目的:
   1. 目次プラグイン/テーマ/ブロック由来の自動目次を、まごの手ページではCSS側で非表示にする。
   2. Lightning/WordPressテーマ側のページタイトル・パンくず・本文ラッパー上余白を抑制する。
   3. ヘッダー直下からヒーローまでの間延びを防ぐため、ヒーロー上余白を共通で圧縮する。
   =========================================================
*/

body:has(.magonote-page) .magonote-page {
  --mn-hero-y: 22px;
  --mn-hero-y-lg: 28px;
  margin-top: 0 !important;
}

/* 自動目次の非表示: 目次系プラグイン・ブロックの代表class/idを正本CSS側で吸収 */

body:has(.magonote-page) #ez-toc-container,
body:has(.magonote-page) .ez-toc-container,
body:has(.magonote-page) #toc_container,
body:has(.magonote-page) .toc_container,
body:has(.magonote-page) .toc-container,
body:has(.magonote-page) .toc-wrapper,
body:has(.magonote-page) .table-of-contents,
body:has(.magonote-page) .toc,
body:has(.magonote-page) .tocplus,
body:has(.magonote-page) .lwptoc,
body:has(.magonote-page) .rtoc-mokuji,
body:has(.magonote-page) .rtoc-mokuji-content,
body:has(.magonote-page) #rtoc-mokuji-wrapper,
body:has(.magonote-page) .p-toc,
body:has(.magonote-page) .simpletoc,
body:has(.magonote-page) .wp-block-rank-math-toc-block,
body:has(.magonote-page) .wp-block-aioseo-table-of-contents,
body:has(.magonote-page) .vk-blocks-table-of-contents,
body:has(.magonote-page) .vk_toc,
body:has(.magonote-page) .vk-toc {
  display: none !important;
}

/* Lightning/WordPress側のページタイトル・パンくず抑制 */

body:has(.magonote-page) #breadcrumb,
body:has(.magonote-page) .breadcrumb,
body:has(.magonote-page) .breadcrumbs,
body:has(.magonote-page) .breadcrumb-list,
body:has(.magonote-page) .breadcrumb-container,
body:has(.magonote-page) .vk_breadcrumb,
body:has(.magonote-page) .vk-breadcrumb,
body:has(.magonote-page) .page-header,
body:has(.magonote-page) .pageHeader,
body:has(.magonote-page) .page-title-bar,
body:has(.magonote-page) .page-title-section,
body:has(.magonote-page) .page-hero,
body:has(.magonote-page) .vk_pageHeader,
body:has(.magonote-page) .vk-page-header,
body:has(.magonote-page) .entry-header,
body:has(.magonote-page) .wp-block-post-title {
  display: none !important;
}

/* ヘッダー下〜本文先頭までのテーマ由来上余白を抑制 */

body:has(.magonote-page) .site-body,
body:has(.magonote-page) .siteBody,
body:has(.magonote-page) .site-body-container,
body:has(.magonote-page) .siteBody-container,
body:has(.magonote-page) .site-content,
body:has(.magonote-page) .siteContent,
body:has(.magonote-page) #content,
body:has(.magonote-page) .content-area,
body:has(.magonote-page) .main-section,
body:has(.magonote-page) .mainSection,
body:has(.magonote-page) .site-main,
body:has(.magonote-page) #main,
body:has(.magonote-page) #primary,
body:has(.magonote-page) main,
body:has(.magonote-page) article,
body:has(.magonote-page) .entry-body,
body:has(.magonote-page) .entry-content,
body:has(.magonote-page) .wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.magonote-page) .entry-content > *:first-child,
body:has(.magonote-page) .wp-block-post-content > *:first-child,
body:has(.magonote-page) .magonote-page > *:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   mgtop-v8 共通コンポーネント
   対象: home / tools / free-tools / tool-finder / first-guide /
   how-to-use-tools / tool-search-guide
   目的: 旧統合CSS廃止後も、mgtop-v8系JSONを共通CSSで受ける。
   =========================================================
*/

.mgtop-v8 {
  --mgtop-blue: var(--mn-blue, #0058D8);
  --mgtop-blue-dark: var(--mn-blue-dark, #072760);
  --mgtop-blue-soft: var(--mn-blue-soft, #EAF3FF);
  --mgtop-ink: var(--mn-text, #0D275A);
  --mgtop-muted: var(--mn-muted, #52637A);
  --mgtop-border: var(--mn-border, #D9E6F7);
  --mgtop-bg: var(--mn-surface-page, #F7FBFF);
  --mgtop-white: var(--mn-white, #FFFFFF);
  --mgtop-mint: var(--mn-free, #19834D);
  --mgtop-mint-dark: var(--mn-free-dark, #12633A);
  --mgtop-mint-soft: var(--mn-free-soft, #EAF8F1);
  --mgtop-orange: var(--mn-commercial, #B55D00);
  --mgtop-orange-dark: var(--mn-commercial-dark, #7A3E00);
  --mgtop-orange-soft: var(--mn-commercial-soft, #FFF7E6);
  --mgtop-gray-soft: var(--mn-surface-muted, #F4F7FB);
  --mgtop-line-blue: rgba(0, 88, 216, 0.62);
  --mgtop-line-mint: rgba(31, 155, 91, 0.58);
  --mgtop-line-orange: rgba(245, 158, 11, 0.62);
  --mgtop-wrap: var(--mn-width-normal, 1120px);
  --mgtop-hero-width: var(--mn-width-hero, 1180px);
  color: var(--mgtop-ink);
  line-height: 1.66;
}

.mgtop-v8 *,
.mgtop-v8 *::before,
.mgtop-v8 *::after {
  box-sizing: border-box;
}

.mgtop-v8 p {
  margin-top: 0;
  color: var(--mgtop-muted);
  line-height: 1.72;
}

.mgtop-v8 h2 {
  margin: 0 0 14px;
  color: var(--mgtop-ink);
  font-size: clamp(25px, 2.8vw, 36px);
  line-height: 1.34;
  letter-spacing: -0.02em;
}

.mgtop-v8 h3 {
  margin: 0 0 10px;
  color: var(--mgtop-ink);
}

.mgtop-v8 .mgtop-wrap.mn-container,
.mgtop-v8 .mgtop-wrap {
  width: min(var(--mgtop-wrap), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

.mgtop-v8 .mgtop-hero .mgtop-wrap.mn-container,
.mgtop-v8 .mgtop-hero .mgtop-wrap {
  width: min(var(--mgtop-hero-width), calc(100% - 32px));
}

.mgtop-v8 .mgtop-section.mn-section,
.mgtop-v8 .mgtop-section {
  padding: var(--mn-mgtop-section-y) 0;
}

.mgtop-v8 .mgtop-section--compact.mn-section,
.mgtop-v8 .mgtop-section--compact {
  padding: var(--mn-mgtop-section-y-compact) 0;
}

.mgtop-v8 .mgtop-section--nav.mn-section,
.mgtop-v8 .mgtop-section--nav {
  padding: var(--mn-mgtop-section-nav-top) 0 var(--mn-mgtop-section-nav-bottom);
}

.mgtop-v8 .mgtop-section--soft {
  background: var(--mgtop-bg);
}

.mgtop-v8 .mgtop-hero {
  padding: var(--mn-mgtop-hero-top) 0 var(--mn-mgtop-hero-bottom);
}

.mgtop-v8 .mgtop-hero.mn-section--showcase {
  background: radial-gradient(circle at 18% 16%, rgba(0, 88, 216, 0.10) 0, rgba(0, 88, 216, 0) 32%),
    linear-gradient(135deg, #EEF7FF 0%, #FFFFFF 54%, #EAF3FF 100%);
}

.mgtop-v8 .mgtop-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: var(--mn-space-11, 34px);
  align-items: center;
  max-width: var(--mgtop-hero-width);
}

.mgtop-v8 .mgtop-hero__text {
  max-width: 640px;
  margin: 0;
  text-align: left;
}

.mgtop-v8 .mgtop-hero__title {
  margin: 0 0 16px;
  color: var(--mgtop-blue-dark);
  font-size: clamp(36px, 4.7vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.mgtop-v8 .mgtop-hero__lead {
  max-width: 620px;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.78;
}

.mgtop-v8 .mgtop-eyebrow,
.mgtop-v8 .mgtop-kicker {
  margin: 0 0 10px;
  color: var(--mgtop-blue);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mgtop-v8 .mgtop-hero__visual,
.mgtop-v8 .mgtop-image-box {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--mn-space-4, 12px);
  border: 1px solid var(--mgtop-border);
  border-radius: 26px;
  background: var(--mgtop-white);
  box-shadow: 0 18px 44px rgba(25, 78, 126, 0.11);
}

.mgtop-v8 .mgtop-image-link {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--mgtop-blue-soft) 0%, var(--mgtop-white) 100%);
  text-decoration: none !important;
}

.mgtop-v8 .mgtop-image-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mgtop-v8 .mgtop-section-head {
  max-width: var(--mn-width-read, 760px);
  margin: 0 auto 28px;
  text-align: center;
}

.mgtop-v8 .mgtop-section-head--sub {
  max-width: 900px;
  text-align: left;
}

.mgtop-v8 .mgtop-section-head p {
  margin-bottom: 0;
}

.mgtop-v8 .mgtop-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mn-space-5, 16px);
  margin-top: var(--mn-space-8, 22px);
}

.mgtop-v8 .mgtop-entry-grid--main-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mgtop-v8 .mgtop-entry-grid--purpose,
.mgtop-v8 .mgtop-entry-grid--anchor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mgtop-v8 .mgtop-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-height: 148px;
  padding: var(--mn-space-8, 22px);
  border: 1px solid var(--mgtop-border);
  border-radius: var(--mn-radius-lg, 22px);
  background: var(--mgtop-white);
  color: var(--mgtop-ink);
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(25, 78, 126, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mgtop-v8 .mgtop-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 111, 191, 0.42);
  box-shadow: 0 18px 34px rgba(25, 78, 126, 0.14);
}

.mgtop-v8 .mgtop-entry-card__label {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(0, 88, 216, 0.14);
  border-radius: var(--mn-radius-pill, 999px);
  background: var(--mgtop-blue-soft);
  color: var(--mgtop-blue-dark);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: var(--mn-line-heading, 1.35);
}

.mgtop-v8 .mgtop-entry-card strong {
  display: block;
  color: var(--mgtop-ink);
  font-size: 1.1rem;
  line-height: 1.42;
}

.mgtop-v8 .mgtop-entry-card small {
  color: var(--mgtop-muted);
  font-size: 0.92rem;
  line-height: var(--mn-line-card, 1.65);
}

.mgtop-v8 .mgtop-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mn-space-5, 16px);
  margin-top: var(--mn-space-8, 22px);
}

.mgtop-v8 .mgtop-feature-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mgtop-v8 .mgtop-mini-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mn-space-2, 8px);
  min-height: 150px;
  padding: var(--mn-space-8, 22px);
  border: 1px solid rgba(0, 88, 216, 0.16);
  border-left: 5px solid var(--mgtop-line-blue);
  border-radius: var(--mn-radius-lg, 22px);
  background: var(--mgtop-white);
  box-shadow: 0 10px 26px rgba(25, 78, 126, 0.07);
}

.mgtop-v8 .mgtop-mini-card--diagnosis {
  border-left-color: var(--mgtop-line-orange);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mgtop-orange-soft) 100%);
}

.mgtop-v8 .mgtop-mini-card strong {
  display: block;
  margin: 0;
  color: var(--mgtop-blue-dark);
  font-size: 1.05rem;
  line-height: 1.45;
}

.mgtop-v8 .mgtop-mini-card span:not(.mn-css-icon) {
  color: var(--mgtop-muted);
  font-size: 0.94rem;
  line-height: var(--mn-line-card, 1.65);
}

.mgtop-v8 .mgtop-steps {
  display: grid;
  gap: var(--mn-space-4, 12px);
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
  counter-reset: step;
}

.mgtop-v8 .mgtop-steps--compact {
  gap: var(--mn-space-3, 10px);
  margin-top: var(--mn-space-6, 18px);
}

.mgtop-v8 .mgtop-steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 18px 16px 56px;
  border: 1px solid var(--mgtop-border);
  border-radius: var(--mn-radius-panel, 18px);
  background: var(--mgtop-white);
}

.mgtop-v8 .mgtop-steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mgtop-blue);
  color: var(--mn-white, #FFFFFF);
  font-weight: 800;
}

.mgtop-v8 .mgtop-steps strong,
.mgtop-v8 .mgtop-steps span {
  display: block;
}

.mgtop-v8 .mgtop-steps span {
  color: var(--mgtop-muted);
  font-size: 0.95rem;
}

.mgtop-v8 .mgtop-linkline {
  margin-top: var(--mn-space-5, 16px);
}

.mgtop-v8 .mgtop-linkline a {
  color: var(--mgtop-blue-dark);
  font-weight: 800;
}

.mgtop-v8 .mgtop-btn,
.mgtop-v8 .mgtop-primary-button,
.mgtop-v8 .mgtop-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: var(--mn-radius-pill, 999px);
  font-weight: 800;
  line-height: var(--mn-line-heading, 1.35);
  text-decoration: none !important;
}

.mgtop-v8 .mgtop-btn--primary,
.mgtop-v8 .mgtop-primary-button {
  border: 1px solid var(--mgtop-blue);
  background: var(--mgtop-blue);
  color: #FFFFFF !important;
}

.mgtop-v8 .mgtop-btn--ghost,
.mgtop-v8 .mgtop-secondary-button {
  border: 1px solid rgba(0, 88, 216, 0.22);
  background: #FFFFFF;
  color: var(--mgtop-blue-dark) !important;
}

.mgtop-v8 .mgtop-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3, 10px);
  margin-top: var(--mn-space-7, 20px);
}

.mgtop-v8 .mgtop-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-2, 8px);
  margin-top: var(--mn-space-4, 12px);
}

.mgtop-v8 .mgtop-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(31, 111, 191, 0.22);
  border-radius: var(--mn-radius-pill, 999px);
  background: var(--mgtop-blue-soft);
  color: var(--mgtop-blue-dark);
  font-size: 0.9rem;
  font-weight: 800;
}

.mgtop-v8 .mgtop-chip--choice,
.mgtop-v8 .mgtop-purpose-choice {
  cursor: pointer;
}

.mgtop-v8 .mgtop-chip-count {
  margin-left: 6px;
  color: var(--mgtop-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.mgtop-v8 .mgtop-chip-group--check,
.mgtop-v8 .mgtop-chip-group--radio {
  gap: var(--mn-space-3, 10px);
}

.mgtop-v8 .mgtop-card-link {
  color: inherit;
  text-decoration: none !important;
}

.mgtop-v8 .mgtop-wide-banner {
  display: grid;
  gap: 6px;
  min-height: 125px;
  padding: 24px 28px;
  border: 1px solid rgba(0, 88, 216, 0.16);
  border-radius: var(--mn-radius-banner, 24px);
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F9FF 100%);
  color: var(--mgtop-ink);
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(25, 78, 126, 0.08);
}

.mgtop-v8 .mgtop-wide-banner--large {
  min-height: 150px;
  padding: 30px 34px;
}

.mgtop-v8 .mgtop-wide-banner--consider,
.mgtop-v8 .mgtop-wide-banner--plans,
.mgtop-v8 .mgtop-wide-banner--plan,
.mgtop-v8 .mgtop-wide-banner--trial,
.mgtop-v8 .mgtop-wide-banner--tools,
.mgtop-v8 .mgtop-wide-banner--guide,
.mgtop-v8 .mgtop-wide-banner--support,
.mgtop-v8 .mgtop-wide-banner--request {
  border-left: 6px solid var(--mgtop-line-blue);
}

.mgtop-v8 .mgtop-wide-banner--trial,
.mgtop-v8 .mgtop-wide-banner--request {
  border-left-color: var(--mgtop-line-orange);
}

.mgtop-v8 .mgtop-wide-banner__label {
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--mn-radius-pill, 999px);
  background: var(--mgtop-blue-soft);
  color: var(--mgtop-blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.mgtop-v8 .mn-section--faq {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
}

@media (max-width: 960px) {
  .mgtop-v8 .mgtop-hero__inner {
    grid-template-columns: 1fr;
  }

  .mgtop-v8 .mgtop-hero__text {
    max-width: var(--mn-width-read, 760px);
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .mgtop-v8 .mgtop-wrap.mn-container,
  .mgtop-v8 .mgtop-hero .mgtop-wrap.mn-container,
  .mgtop-v8 .mgtop-wrap,
  .mgtop-v8 .mgtop-hero .mgtop-wrap {
    width: min(100% - 24px, var(--mgtop-wrap));
  }

  .mgtop-v8 .mgtop-hero,
  .mgtop-v8 .mgtop-section.mn-section,
  .mgtop-v8 .mgtop-section,
  .mgtop-v8 .mgtop-section--compact.mn-section,
  .mgtop-v8 .mgtop-section--compact,
  .mgtop-v8 .mgtop-section--nav.mn-section,
  .mgtop-v8 .mgtop-section--nav {
    padding-top: var(--mn-mgtop-mobile-y);
    padding-bottom: var(--mn-mgtop-mobile-y);
  }

  .mgtop-v8 .mgtop-entry-grid,
  .mgtop-v8 .mgtop-entry-grid--main-two,
  .mgtop-v8 .mgtop-entry-grid--purpose,
  .mgtop-v8 .mgtop-entry-grid--anchor,
  .mgtop-v8 .mgtop-feature-grid,
  .mgtop-v8 .mgtop-feature-grid--three {
    grid-template-columns: 1fr;
  }

  .mgtop-v8 .mgtop-entry-card,
  .mgtop-v8 .mgtop-mini-card {
    min-height: auto;
    padding: var(--mn-space-7, 20px);
  }
}

/* =========================================================
   Shared CTA / button / back-link helpers
   JSON側で共通利用される補助UI。個別ページへ重複させず共通化。
   =========================================================
*/

.magonote-page .mgt-shortcode-section {
  width: 100%;
}

.magonote-page .mgt-kicker {
  margin: 0 0 8px;
  color: var(--mn-blue);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.magonote-page .mgt-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3, 10px);
  align-items: center;
  margin-top: var(--mn-space-6, 18px);
}

.magonote-page .mgt-button-row--center {
  justify-content: center;
}

.magonote-page .mgt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mn-button-height, 44px);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--mn-radius-pill, 999px);
  font-weight: 900;
  line-height: var(--mn-line-heading, 1.35);
  text-decoration: none !important;
}

.magonote-page .mgt-button-primary {
  background: var(--mn-blue);
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(0, 88, 216, 0.20);
}

.magonote-page .mgt-button-secondary {
  border-color: rgba(0, 88, 216, 0.22);
  background: #FFFFFF;
  color: var(--mn-blue-dark) !important;
}

.magonote-page .mgt-button-primary:hover,
.magonote-page .mgt-button-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(7, 39, 96, 0.14);
}

.magonote-page .mgt-cta {
  margin-top: var(--mn-space-9, 24px);
  border: 1px solid rgba(0, 88, 216, 0.16);
  border-radius: var(--mn-radius-banner, 24px);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mn-blue-soft) 100%);
  box-shadow: var(--mn-shadow-soft);
  overflow: hidden;
}

.magonote-page .mgt-cta--trial {
  border-color: rgba(31, 155, 91, 0.18);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mn-green-soft) 100%);
}

.magonote-page .mgt-cta--final {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(135deg, rgba(0, 88, 216, 0.94) 0%, rgba(7, 39, 96, 0.96) 100%);
}

.magonote-page .mgt-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mn-space-7, 20px);
  align-items: center;
  padding: var(--mn-space-9, 24px);
}

.magonote-page .mgt-cta__body h2 {
  margin: 0 0 8px;
  color: var(--mn-blue-dark);
  line-height: var(--mn-line-heading, 1.35);
}

.magonote-page .mgt-cta__body p {
  margin: 0;
}

.magonote-page .mgt-cta__action {
  display: grid;
  gap: var(--mn-space-2, 8px);
  justify-items: start;
}

.magonote-page .mgt-cta__note {
  margin: 0;
  color: var(--mn-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.magonote-page .mgt-cta--final .mgt-kicker,
.magonote-page .mgt-cta--final .mgt-cta__body h2,
.magonote-page .mgt-cta--final .mgt-cta__body p,
.magonote-page .mgt-cta--final .mgt-cta__note {
  color: #FFFFFF !important;
}

.magonote-page .mgt-cta--final .mgt-button-primary {
  background: #FFFFFF;
  color: var(--mn-blue-dark) !important;
}

.magonote-page .mgt-back-links {
  padding: 28px 0 0;
}

.magonote-page .mgt-back-links .mgt-button-row {
  justify-content: center;
}

.magonote-page .mgt-hero-badges {
  margin: 0 0 18px;
}

@media (max-width: 760px) {
  .magonote-page .mgt-cta__inner {
    grid-template-columns: 1fr;
    padding: var(--mn-space-7, 20px);
  }

  .magonote-page .mgt-button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .magonote-page .mgt-button {
    width: 100%;
  }
}

/* JSON modifier hooks */

.magonote-page--mogura {
  min-height: auto;
}

.magonote-page .mgt-cta--action {
  margin-top: var(--mn-space-8, 22px);
}

.magonote-page .mgt-cta__button {
  white-space: nowrap;
}

.magonote-page .mgt-back-links--free {
  margin-top: var(--mn-space-2, 8px);
}

.magonote-page .mgt-hero-badges--free {
  display: block;
}

.magonote-page .mgt-hero-badges__group--right {
  justify-content: flex-end;
}

.magonote-page .mgt-lp-final__cta {
  max-width: 100%;
}

/* =========================================================================
   Icon placement helpers moved from magonote-icons.css
   Only card/SVG placement lives here; icon shapes remain icon-only.
   =========================================================================
*/

.magonote-page .mn-card--with-css-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.magonote-page .mn-card--with-css-icon .mn-css-icon {
  margin-bottom: var(--mn-space-3, 10px);
}

.magonote-page .mn-card--with-css-icon > .mn-svg-icon,
.magonote-page .mgtop-entry-card > .mn-svg-icon {
  margin-bottom: var(--mn-space-3, 10px);
}

.magonote-page .mgtop-mini-card > .mn-svg-icon {
  margin-bottom: var(--mn-space-2, 8px);
}

.magonote-page .mgtop-split-banner__item > .mn-svg-icon {
  margin: 2px 0 0;
}