/* Gajumaru Design System 1.3 — 2026-09-19.
 * Corporate accent: #349f51. Existing typefaces are deliberately inherited.
 * Canonical specification: project / DESIGN_SYSTEM.md.
 */
:root {
  --gjm-brand-green: #349f51;
  --gjm-color-primary: var(--gjm-brand-green);
  --gjm-color-on-primary: #ffffff;
  --gjm-color-ink: #1d1d1f;
  --gjm-color-muted: #626266;
  --gjm-color-page: #ecece7;
  --gjm-color-surface: #ffffff;
  --gjm-color-surface-group: #f5f5f7;
  --gjm-color-border: #d2d2d7;
  --gjm-color-control-border: #86868b;
  --gjm-space-1: 4px;
  --gjm-space-2: 8px;
  --gjm-space-3: 12px;
  --gjm-space-4: 16px;
  --gjm-space-6: 24px;
  --gjm-space-8: 32px;
  --gjm-space-12: 48px;
  --gjm-space-18: 72px;
  --gjm-space-24: 96px;
  --gjm-radius-control: 999px;
  --gjm-radius-card: 16px;
  --gjm-radius-panel: 24px;
  --gjm-control-height: 48px;
  --gjm-content-width: 1120px;
  --gjm-shadow-hover: 0 3px 10px rgb(0 0 0 / 12%);
  --gjm-motion-duration: 200ms;
  --gjm-motion-ease: cubic-bezier(.22,1,.36,1);
  --gjm-motion-enter: 560ms;
  /* Compatibility aliases: no independent lime, dark green or tinted green. */
  --gjm-color-deep: var(--gjm-color-ink);
  --gjm-color-primary-soft: var(--gjm-color-surface-group);
  --gjm-color-on-brand: var(--gjm-color-on-primary);
  --gjm-white: var(--gjm-color-surface);
  --gjm-mist: var(--gjm-color-surface-group);
  --gjm-green: var(--gjm-color-ink);
  --gjm-lime: var(--gjm-brand-green);
  --gjm-text: var(--gjm-color-ink);
  --gjm-muted: var(--gjm-color-muted);
  --gjm-border: var(--gjm-color-border);
  /* SWELL tokens cover works and blog even when body has no theme class. */
  --color_main: var(--gjm-brand-green);
  --color_main_thin: var(--gjm-color-surface-group);
  --color_main_dark: var(--gjm-brand-green);
  --color_htag: var(--gjm-color-ink);
  --color_list_check: var(--gjm-brand-green);
  --color_list_num: var(--gjm-color-ink);
  --color_bg: var(--gjm-color-page);
  --color_content_bg: var(--gjm-color-surface);
  --color_header_bg: var(--gjm-color-page);
  --color_header_text: var(--gjm-color-ink);
  --color_footer_bg: var(--gjm-color-surface-group);
  --color_footer_text: var(--gjm-color-ink);
  --color_text: var(--gjm-color-ink);
  --color_link: var(--gjm-color-ink);
}

body { color: var(--gjm-color-ink); background-color: var(--gjm-color-page); }
::selection { color: var(--gjm-color-ink); background: var(--gjm-brand-green); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--gjm-color-ink); outline-offset: 4px;
}

/* Existing portfolio pages: common surfaces, headings and site furniture. */
.wp-theme-portfolio :is(h1,h2,h3,.content_title span,.works_title,.siten) { color: var(--gjm-color-ink); }
.wp-theme-portfolio :is(h3,.works_title,.siten) { border-color: var(--gjm-brand-green); }
.wp-theme-portfolio .fa-circle-check { color: var(--gjm-brand-green); }
.wp-theme-portfolio :is(.skill_h3,.comment-title,.category,.news-cat,.green_back) {
  background-color: var(--gjm-color-surface-group); color: var(--gjm-color-ink);
}
.wp-theme-portfolio .skill_h3 { border-left: 4px solid var(--gjm-brand-green); }
.wp-theme-portfolio .news-cat { border-color: var(--gjm-color-border); }
.wp-theme-portfolio .maru .circle4 {
  background-color: var(--gjm-color-surface-group); color: var(--gjm-color-ink);
  border: 2px solid var(--gjm-brand-green);
}
.wp-theme-portfolio .maru .circle4 :is(p,span) { color: inherit; }
.wp-theme-portfolio :is(.works_title,.news-area) { background-color: var(--gjm-color-page); }
.wp-theme-portfolio .logo_h3 { background-image: none; border-bottom: 3px solid var(--gjm-brand-green); }
.wp-theme-portfolio #footer { background-color: var(--gjm-color-surface-group); color: var(--gjm-color-ink); }
/* Include address and copyright: the legacy theme explicitly colors them beige. */
.wp-theme-portfolio #footer :is(.footer_wrap,.footer_nap,p,address,small,a,span) { color: var(--gjm-color-ink); }

/* One primary button style across the three WordPress installations. */
.wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]),
.gj-service .gj-button,
.swell-block-button .swell-block-button__link {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; height: auto; max-width: 100%;
  padding: 12px 24px; border: 1px solid var(--gjm-color-control-border);
  border-radius: var(--gjm-radius-control);
  background: var(--gjm-brand-green); color: var(--gjm-color-on-primary);
  font-size: 1.25rem; line-height: 1.5; font-weight: 700; text-align: center; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere;
  box-shadow: none; transform: none;
  transition: box-shadow var(--gjm-motion-duration) ease, translate var(--gjm-motion-duration) var(--gjm-motion-ease), scale 120ms ease;
}
.wp-theme-portfolio :is(.btn_green,.action_button) :is(span,i,p) {
  color: inherit; margin-top: 0; line-height: inherit;
}
.wp-theme-portfolio :is(.btn_green,.action_button) :is(span,p),
.swell-block-button .swell-block-button__link :is(span,p) {
  color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
}
.wp-theme-portfolio .btn_green.bgleft::before { content: none; }
.wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]):hover,
.gj-service .gj-button:hover,
.swell-block-button .swell-block-button__link:hover {
  background: var(--gjm-brand-green); color: var(--gjm-color-on-primary);
  border-color: var(--gjm-color-control-border); box-shadow: var(--gjm-shadow-hover);
  transform: none; filter: none; opacity: 1;
}
.wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]):active,
.gj-service .gj-button:active,
.swell-block-button .swell-block-button__link:active { box-shadow: inset 0 0 0 2px var(--gjm-color-ink); }
.wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]):focus-visible,
.gj-service .gj-button:focus-visible,
.swell-block-button .swell-block-button__link:focus-visible {
  outline: 3px solid var(--gjm-color-ink); outline-offset: 4px;
}
.gj-service .gj-button--outline, .gj-service .gj-button--outline:hover {
  background: var(--gjm-color-surface); color: var(--gjm-color-ink);
  border-color: var(--gjm-color-control-border);
}
.wp-theme-portfolio .fv_right_wrapper .btn_green:not([href*="/contact/"]),
.wp-theme-portfolio .fv_right_wrapper .btn_green:not([href*="/contact/"]):hover {
  background: var(--gjm-color-surface); color: var(--gjm-color-ink);
  border-color: var(--gjm-color-control-border);
}

/* Standalone CTAs need a block-level flex box for auto margins to center them. */
.wp-theme-portfolio .btn_green.contetn_btn,
.wp-theme-portfolio .btn_green.qa_btn,
.wp-theme-portfolio input.action_button {
  display: flex;
  margin-inline: auto;
}
.wp-theme-portfolio .action_button { letter-spacing: normal; }

/* Service / FAQ: restrained surfaces, readable hierarchy and 8px rhythm. */
.gj-service { max-width: var(--gjm-content-width); padding: 48px 24px 96px; }
.gj-service :is(h1,h2,h3) { color: var(--gjm-color-ink); letter-spacing: 0; }
.gj-service h1 { max-width: none; text-wrap: balance; margin: 16px 0 24px; font-size: clamp(2rem,4vw,3rem); line-height: 1.35; }
.gj-service h2 { margin: 8px 0 16px; font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.45; }
.gj-service h3 { margin: 8px 0 16px; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.5; }
.gj-service :is(.gj-eyebrow,.gj-card-number,.gj-process span) { color: var(--gjm-color-muted); }
.gj-service .gj-hero { padding: 48px; border-radius: var(--gjm-radius-panel); background: var(--gjm-color-surface-group); }
.gj-service .gj-hero .gj-lead { max-width: 44em; line-height: 1.8; }
.gj-service .gj-actions { gap: 16px; margin-top: 32px; }
.gj-service :is(.gj-panel,.gj-section,.gj-split,.gj-related,.gj-cta) { margin-top: 72px; }
.gj-service :is(.gj-panel,.gj-split--panel) { padding: 32px; border-radius: var(--gjm-radius-panel); }
.gj-service .gj-section-heading { margin-bottom: 24px; }
.gj-service .gj-card-grid { gap: 24px; }
.gj-service .gj-card { padding: 24px; border-radius: var(--gjm-radius-card); border-color: var(--gjm-color-border); }
.gj-service .gj-text-link { margin-top: 24px; color: var(--gjm-color-ink); text-decoration-line: underline; text-decoration-color: var(--gjm-brand-green); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.gj-service .gj-text-link:hover { text-decoration-thickness: 3px; }
.gj-service .gj-split { gap: 32px; }
.gj-service .gj-check-list { gap: 16px; }
.gj-service .gj-check-list li { padding: 16px 16px 16px 48px; border-radius: var(--gjm-radius-card); }
.gj-service .gj-check-list li::before { top: 16px; left: 20px; color: var(--gjm-brand-green); }
.gj-service .gj-process { gap: 16px; }
.gj-service .gj-process li { padding: 24px; }
.gj-service :is(.gj-note,.gj-breadcrumb), .gj-service .gj-breadcrumb li + li::before { color: var(--gjm-color-muted); }
.gj-service .gj-faq-list { gap: 16px; }
.gj-service .gj-faq-list details { border-radius: var(--gjm-radius-card); }
.gj-service .gj-faq-list summary { padding: 24px 56px 24px 24px; color: var(--gjm-color-ink); }
.gj-service .gj-faq-list summary::after { color: var(--gjm-color-ink); right: 24px; }
.gj-service .gj-faq-list details[open] { border-color: var(--gjm-color-control-border); }
.gj-service .gj-faq-list details > div { padding: 0 24px 24px; }
.gj-service :is(.gj-related-links,.gj-faq-nav) { gap: 16px; }
.gj-service :is(.gj-related-links a,.gj-faq-nav a) {
  display: inline-flex; align-items: center; min-height: var(--gjm-control-height);
  padding: 12px 16px; border-color: var(--gjm-color-control-border); color: var(--gjm-color-ink);
}
.gj-service :is(.gj-text-link,summary,.gj-faq-nav a,.gj-related-links a):focus-visible { outline: 3px solid var(--gjm-color-ink); outline-offset: 4px; }
.gj-service .gj-cta { padding: 48px; background: var(--gjm-color-surface-group); color: var(--gjm-color-ink); border-radius: var(--gjm-radius-panel); }
.gj-service .gj-cta :is(h2,p) { color: var(--gjm-color-ink); }
.gj-service .gj-cta .gj-eyebrow { color: var(--gjm-color-muted); }
.gj-service .gj-cta .gj-button:hover { color: var(--gjm-color-on-primary); background: var(--gjm-brand-green); }

/* Shared service links, pagination and forms. */
.gjr-next { padding: 32px; background: var(--gjm-color-surface-group); color: var(--gjm-color-ink); border-radius: var(--gjm-radius-panel); }
.gjr-next h2 { color: var(--gjm-color-ink); }
:is(.gjr-next a,.gjr-service-link) { color: var(--gjm-color-ink); background: var(--gjm-color-surface); border-color: var(--gjm-color-control-border); border-radius: var(--gjm-radius-control); padding: 12px 24px; }
:is(.gjr-next a,.gjr-service-link):hover { background: var(--gjm-color-surface); color: var(--gjm-color-ink); box-shadow: var(--gjm-shadow-hover); }
:is(.gjr-next a,.gjr-service-link):focus-visible { outline: 3px solid var(--gjm-color-ink); outline-offset: 4px; }
.wp-theme-portfolio .wp-pagenavi :is(a,span) { color: var(--gjm-color-ink); background: var(--gjm-color-surface); border-color: var(--gjm-color-control-border); }
.wp-theme-portfolio .wp-pagenavi :is(a:hover,span.current) { color: var(--gjm-color-ink); background: var(--gjm-brand-green); border-color: var(--gjm-brand-green); }
.wp-theme-portfolio :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),textarea,select) {
  color: var(--gjm-color-ink); background-color: var(--gjm-color-surface);
  border: 1px solid var(--gjm-color-control-border); border-radius: 8px; min-height: 48px;
}
.wp-theme-portfolio :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--gjm-brand-green); }

/* SWELL common chrome. Article artwork and client brand imagery are untouched. */
:is(.c-postThumb__cat,.c-categoryList__link) { background: var(--gjm-color-surface-group); color: var(--gjm-color-ink); }
:is(.c-fixBtn,.p-pager__item) { color: var(--gjm-color-ink); border-color: var(--gjm-color-control-border); }
:is(.c-fixBtn:hover,.p-pager__item.is-current) { color: var(--gjm-color-ink); background: var(--gjm-brand-green); }
.l-footer, .l-footer__foot { color: var(--gjm-color-ink); background: var(--gjm-color-surface-group); }
.l-footer :is(a,p) { color: inherit; }
.c-gnav > li > a::after, .c-listMenu a::before { border-color: var(--gjm-brand-green); }
.post_content h2 { background-color: var(--gjm-color-surface-group); color: var(--gjm-color-ink); border-color: var(--gjm-brand-green); }
.post_content h2::before, .post_content h2::after { border-color: var(--gjm-brand-green); }
.swl-marker.mark_green { background: none; border-bottom: 2px solid var(--gjm-brand-green); }
.post_content .is-style-big_icon_good { border-color: var(--gjm-brand-green); }
.post_content .is-style-big_icon_good::before { background: var(--gjm-brand-green); color: var(--gjm-color-on-primary); }
.c-shareBtns .c-shareBtns__item, .c-shareBtns .c-shareBtns__btn { color: var(--gjm-color-ink); background: var(--gjm-color-surface); border-color: var(--gjm-color-control-border); }

/* Feedback motion: color and text remain stable throughout the interaction. */
.gj-service .gj-card:has(a[href]) {
  transition: translate 240ms var(--gjm-motion-ease), box-shadow 240ms ease, border-color 240ms ease;
}
.gj-service .gj-card:focus-within { border-color: var(--gjm-brand-green); }
.wp-theme-portfolio .btn_green i, .swell-block-button__link :is(i,.__icon) {
  transition: translate 200ms var(--gjm-motion-ease); color: inherit;
}
.gj-service .gj-text-link { transition: text-underline-offset 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]):hover,
  .gj-service .gj-button:hover,
  .swell-block-button .swell-block-button__link:hover { translate: 0 -2px; }
  .gj-service .gj-card:has(a[href]):hover {
    translate: 0 -4px; box-shadow: 0 8px 24px rgb(0 0 0 / 8%); border-color: var(--gjm-brand-green);
  }
  .wp-theme-portfolio .btn_green:hover i,
  .swell-block-button__link:hover :is(i,.__icon) { translate: 3px 0; }
  .gj-service .gj-text-link:hover { text-underline-offset: 8px; }
}
.wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]):active,
.gj-service .gj-button:active,
.swell-block-button .swell-block-button__link:active { translate: 0 0; scale: .98; }

@media (max-width: 640px) {
  .gj-service { padding: 32px 16px 72px; }
  .gj-service :is(.gj-hero,.gj-panel,.gj-split--panel,.gj-cta) { padding: 32px 24px; border-radius: var(--gjm-radius-card); }
  .gj-service h1 { font-size: 2rem; }
  .gj-service :is(.gj-panel,.gj-section,.gj-split,.gj-related,.gj-cta) { margin-top: 48px; }
  .gj-service .gj-card { padding: 24px; }
  .gj-service :is(.gj-card-grid,.gj-split) { gap: 16px; }
  .gj-service .gj-actions { gap: 16px; margin-top: 24px; }
  .gj-service .gj-faq-list summary { padding: 20px 48px 20px 20px; }
  .gj-service .gj-faq-list details > div { padding: 0 20px 20px; }
  .gjr-next { padding: 24px; border-radius: var(--gjm-radius-card); }
}
@media (max-width: 340px) {
  .gj-service :is(.gj-hero,.gj-panel,.gj-split--panel,.gj-cta,.gj-card) { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-theme-portfolio :is(.btn_green,.action_button,input[type="submit"]),
  .gj-service .gj-button, .swell-block-button .swell-block-button__link,
  .gj-service .gj-card, .gj-service .gj-text-link,
  .wp-theme-portfolio .btn_green i, .swell-block-button__link :is(i,.__icon) {
    transition: none !important; translate: none !important; scale: none !important;
  }
}

@media (min-width: 960px) and (max-width: 1100px) {
  .l-header .swell-block-button .swell-block-button__link { padding-inline: 12px; min-width: max-content; white-space: nowrap; }
  .l-header .swell-block-button__link :is(i,.__icon) { display: none; }
}

/* Process diagrams: a single reading direction, with a visible next step. */
:root { --gjm-step-size: max(48px, 3rem); }
.gj-service .gj-process {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.gj-service .gj-process > li {
  position: relative; display: grid; grid-template-columns: var(--gjm-step-size) minmax(0, 1fr);
  align-items: start; gap: 20px; min-width: 0; min-height: calc(var(--gjm-step-size) + 40px);
  margin: 0; padding: 0; border: 0; background: transparent;
}
.gj-service .gj-process > li > span {
  box-sizing: border-box; display: grid; place-items: center;
  width: var(--gjm-step-size); height: var(--gjm-step-size); margin: 20px 0 0; padding: 0;
  border: 1px solid var(--gjm-color-control-border); border-radius: 50%;
  background: var(--gjm-brand-green); color: var(--gjm-color-on-primary);
  font-size: 1.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.gj-service .gj-process > li > strong {
  box-sizing: border-box; display: flex; align-items: center;
  min-width: 0; min-height: calc(var(--gjm-step-size) + 40px); padding: 20px 24px;
  border: 1px solid var(--gjm-color-border); border-radius: var(--gjm-radius-card);
  background: var(--gjm-color-surface); color: var(--gjm-color-ink);
  font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; text-wrap: balance;
}
.gj-service .gj-process > li:not(:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  left: calc(var(--gjm-step-size) / 2 - 1px); top: calc(var(--gjm-step-size) + 28px); bottom: -28px; width: 0;
  border-left: 2px solid var(--gjm-color-muted);
}
.gj-service .gj-process > li:not(:last-child)::before {
  content: ""; position: absolute; pointer-events: none;
  left: calc(var(--gjm-step-size) / 2 - 5px); bottom: -31px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--gjm-color-muted);
}

/* Home: preserve the existing numbered titles and explanations as linked cards. */
.wp-theme-portfolio .list_maru {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  width: 100%; margin-inline: auto; padding: 0; opacity: 1; transform: none;
}
.wp-theme-portfolio .list_maru .maru {
  position: relative; display: block; width: auto; height: auto; min-width: 0; margin: 0; padding: 0;
}
.wp-theme-portfolio .list_maru .maru .circle4 {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  position: static; width: 100%; height: 100%; min-height: 0; padding: 24px; margin: 0;
  border: 1px solid var(--gjm-color-border); border-top: 3px solid var(--gjm-brand-green);
  border-radius: var(--gjm-radius-card); background: var(--gjm-color-surface);
  color: var(--gjm-color-ink); text-align: left;
}
.wp-theme-portfolio .list_maru :is(.circle-txt1,.circle-txt2) {
  position: static; display: block; inset: auto; transform: none;
  width: auto; height: auto; padding: 0; margin: 0; color: var(--gjm-color-ink); overflow-wrap: anywhere; text-wrap: balance;
}
.wp-theme-portfolio .list_maru .circle-txt1 { font-size: 1.125rem; line-height: 1.6; font-weight: 700; }
.wp-theme-portfolio .list_maru .circle-txt2 { margin-top: 12px; font-size: 1rem; line-height: 1.8; }
.wp-theme-portfolio .list_maru .triangle1 {
  position: absolute; display: block; left: calc(50% - 1px); top: auto; bottom: -25px;
  width: 2px; height: 18px; margin: 0; padding: 0; border: 0;
  background: var(--gjm-color-muted); transform: none;
}
.wp-theme-portfolio .list_maru .triangle1::after {
  content: ""; position: absolute; left: -4px; bottom: -2px;
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--gjm-color-muted);
}
.wp-theme-portfolio .list_maru .maru:last-child .triangle1 { display: none; }

/* Case studies: long explanations stay in one vertical timeline. */
.post_content .swell-block-step > .swell-block-step__item {
  position: relative; padding: 0 0 32px calc(var(--gjm-step-size) + 24px); border: 0; min-width: 0;
}
.post_content .swell-block-step > .swell-block-step__item::before {
  content: ""; display: block !important; pointer-events: none; position: absolute; left: calc(var(--gjm-step-size) / 2 - 1px); top: calc(var(--gjm-step-size) + 24px); bottom: -8px;
  width: 0; height: auto; border: 0; border-left: 2px solid var(--gjm-color-muted); transform: none;
}
.post_content .swell-block-step > .swell-block-step__item::after {
  content: ""; position: absolute; left: calc(var(--gjm-step-size) / 2 - 5px); bottom: -12px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--gjm-color-muted);
}
.post_content .swell-block-step > .swell-block-step__item:last-child::before,
.post_content .swell-block-step > .swell-block-step__item:last-child::after { content: none; }
.post_content .swell-block-step .swell-block-step__number {
  box-sizing: border-box; position: absolute; display: flex; align-items: center; justify-content: center;
  flex-direction: column; top: 16px; left: 0; width: var(--gjm-step-size); height: var(--gjm-step-size); margin: 0; padding: 0;
  border: 1px solid var(--gjm-color-control-border); border-radius: 50%;
  background: var(--gjm-brand-green); color: var(--gjm-color-on-primary);
  font-size: max(20px, 1.25rem); font-weight: 700; line-height: 1;
}
.post_content .swell-block-step .swell-block-step__number .__label { display: none; }
.post_content .swell-block-step .swell-block-step__number::after {
  font-size: max(20px, 1.25rem); font-weight: 700; line-height: 1; opacity: 1; color: inherit;
}
.post_content .swell-block-step > .swell-block-step__item > .swell-block-step__title {
  box-sizing: border-box; min-height: 80px; padding: 20px 24px; margin: 0;
  border: 1px solid var(--gjm-color-border); border-bottom: 0;
  border-radius: var(--gjm-radius-card) var(--gjm-radius-card) 0 0;
  background: var(--gjm-color-surface); color: var(--gjm-color-ink);
  text-align: left; line-height: 1.5; overflow-wrap: anywhere; text-wrap: balance;
}
.post_content .swell-block-step > .swell-block-step__item > .swell-block-step__body {
  box-sizing: border-box; min-width: 0; width: auto; margin: 0 !important; padding: 0 24px 24px;
  border: 1px solid var(--gjm-color-border); border-top: 0;
  border-radius: 0 0 var(--gjm-radius-card) var(--gjm-radius-card);
  background: var(--gjm-color-surface); color: var(--gjm-color-ink);
}
.post_content .swell-block-step__body > :last-child { margin-bottom: 0; }

@media (min-width: 1200px) {
  .gj-service .gj-process { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gj-service .gj-process > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--gjm-step-size) 1fr; gap: 24px; }
  .gj-service .gj-process > li > span { margin: 0 auto; }
  .gj-service .gj-process > li > strong { min-height: 112px; height: 100%; padding: 16px; justify-content: center; text-align: center; }
  .gj-service .gj-process > li:not(:last-child)::after {
    left: calc(50% + var(--gjm-step-size) / 2 + 8px); top: calc(var(--gjm-step-size) / 2 - 1px); bottom: auto; width: calc(100% - var(--gjm-step-size)); height: 0;
    border-left: 0; border-top: 2px solid var(--gjm-color-muted);
  }
  .gj-service .gj-process > li:not(:last-child)::before {
    left: calc(150% + 6px - var(--gjm-step-size) / 2); top: calc(var(--gjm-step-size) / 2 - 5px); bottom: auto; border: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 6px solid var(--gjm-color-muted);
  }
  .wp-theme-portfolio .list_maru { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .wp-theme-portfolio .list_maru .maru .circle4 { padding: 20px 16px; }
  .wp-theme-portfolio .list_maru .triangle1 { left: auto; right: -20px; top: calc(50% - 1px); bottom: auto; width: 16px; height: 2px; }
  .wp-theme-portfolio .list_maru .triangle1::after {
    left: auto; right: -1px; top: -4px; bottom: auto; border: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--gjm-color-muted);
  }
}
@media (max-width: 640px) {
  .gj-service .gj-process > li { gap: 16px; }
  .gj-service .gj-process > li > strong { padding: 20px 16px; }
  .post_content .swell-block-step > .swell-block-step__item { padding-left: calc(var(--gjm-step-size) + 16px); }
  .post_content .swell-block-step > .swell-block-step__item > .swell-block-step__title { padding: 16px; }
  .post_content .swell-block-step > .swell-block-step__item > .swell-block-step__body { padding: 0 16px 16px; }
}