@charset "UTF-8";
/*
 * 2026年リニューアル
 *
 * Loaded after style.css, which is compiled from Sass sources that aren't in the
 * theme; that file is never edited by hand. Same conventions: mobile first, one
 * breakpoint at 744px, sizes as calc(N * var(--vw)) (390px wide on SP, 1440px on PC).
 */

/* ── ロゴ: "andre visa-support" (logo_main2.webp, 480×209) */
.l-header__logo-link {
  width: calc(88 * var(--vw));
}
.l-footer__logo-link {
  width: calc(150 * var(--vw));
}
@media all and (min-width: 744px) {
  .l-header__logo-link {
    width: calc(145 * var(--vw));
  }
  .l-footer__logo-link {
    width: calc(190 * var(--vw));
  }
}

/* ── 登録支援機関様向けバナー (bnr_tsk1.webp). The image has transparent shadow margins:
   618px of image gives the 570px box of the PC design. */
.c-tsk-banner {
  display: block;
  width: 100%;
  max-width: calc(360 * var(--vw));
  margin-inline: auto;
}
.c-tsk-banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media all and (min-width: 744px) {
  .c-tsk-banner {
    max-width: calc(618 * var(--vw));
  }
}
.p-index-kv__recruit .c-tsk-banner {
  max-width: none;
}

/* ── 記事一覧 / Column (#22): thumbnail with a category badge, then title and excerpt */
.c-related1 {
  padding-block: calc(56 * var(--vw));
}
.c-related1__list {
  display: grid;
  gap: calc(24 * var(--vw));
  margin-top: calc(32 * var(--vw));
}
.c-related1__link {
  display: grid;
  grid-template-columns: calc(120 * var(--vw)) 1fr;
  gap: calc(14 * var(--vw));
  align-items: start;
  color: inherit;
  text-decoration: none;
}
.c-related1__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f0f0f0;
}
.c-related1__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-related1__noimage {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: serif;
  font-size: max(calc(11 * var(--vw)), calc(9.62 * var(--fmin)));
  color: #c8c8c8;
  letter-spacing: 0.05em;
}
.c-related1__badge {
  position: absolute;
  top: calc(4 * var(--vw));
  left: calc(4 * var(--vw));
  padding: calc(2 * var(--vw)) calc(6 * var(--vw));
  font-size: max(calc(10 * var(--vw)), calc(8.75 * var(--fmin)));
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background-color: #c4141c;
}
.c-related1__txts {
  display: grid;
  gap: calc(6 * var(--vw));
}
.c-related1__title {
  font-size: max(calc(15 * var(--vw)), calc(13.12 * var(--fmin)));
  font-weight: 700;
  line-height: 1.5;
}
.c-related1__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: max(calc(12 * var(--vw)), calc(10.5 * var(--fmin)));
  line-height: 1.6;
  color: #555;
}
@media all and (min-width: 744px) {
  .c-related1 {
    padding-block: calc(100 * var(--vw));
  }
  .c-related1__inner {
    max-width: calc(1100 * var(--vw));
  }
  .c-related1__list {
    gap: calc(40 * var(--vw));
    margin-top: calc(56 * var(--vw));
  }
  .c-related1__link {
    grid-template-columns: calc(300 * var(--vw)) 1fr;
    gap: calc(24 * var(--vw));
  }
  .c-related1__badge {
    top: calc(6 * var(--vw));
    left: calc(6 * var(--vw));
    padding: calc(3 * var(--vw)) calc(9 * var(--vw));
    font-size: max(calc(14 * var(--vw)), calc(12.25 * var(--fmin)));
  }
  .c-related1__noimage {
    font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  }
  .c-related1__title {
    font-size: max(calc(24 * var(--vw)), calc(18.15 * var(--fmin)));
  }
  .c-related1__excerpt {
    font-size: max(calc(18 * var(--vw)), calc(15.75 * var(--fmin)));
  }
}

/* ── フッターのサービス一覧 (#17): the longer labels stay on one line, as in the design.
   Sizes scale with --vw, so what fits at 1440px fits at every PC width; on tablets,
   where text has a minimum size, the footer is laid out differently (below). */
@media all and (min-width: 744px) {
  .l-footer__service-link {
    white-space: nowrap;
  }
}

/* ── トップページのサービスボタン (#8): 「はじめての外国人雇用」 is the longest label;
   less space before the text (and no letter-spacing) keeps it clear of the arrow. */
.p-index-kv__nav-txt {
  margin-left: calc(4 * var(--vw));
  letter-spacing: 0;
}
@media all and (min-width: 744px) {
  .p-index-kv__nav-link {
    padding-left: calc(9 * var(--vw));
  }
  .p-index-kv__nav-txt {
    margin-left: calc(9 * var(--vw));
  }
}

/* ── 下部の固定ボタン (l-fixed-btn) on translated pages (GTranslate sets <html lang="id">
   etc.): the label is several times longer than 「ご相談はこちらから」, so it spilled out
   of the 50px button and squeezed the icon. Japanese keeps the original look. */
.l-fixed-btn__link:not(:lang(ja)) {
  height: auto;
  min-height: calc(50 * var(--vw));
  padding: calc(6 * var(--vw)) calc(16 * var(--vw));
  gap: calc(14 * var(--vw));
}
.l-fixed-btn__ico:not(:lang(ja)) {
  flex-shrink: 0;
}
.l-fixed-btn__txt:not(:lang(ja)) {
  font-size: max(calc(13 * var(--vw)), calc(11.38 * var(--fmin)));
  line-height: 1.3;
}

/* Articles without an eyecatch (three of the five had none on the old site either):
   no empty band between the title and the text */
.c-single1 .c-intro1__inner:not(:has(.c-intro1__eyecatch)) {
  padding-bottom: 0;
}

/* コラム一覧: posts without an eyecatch get the same grey "NO IMAGE" box as the 記事一覧 block */
.c-archive-thumb.-noimage {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: #f2f2f2;
  font-family: serif;
  color: #c8c8c8;
  letter-spacing: 0.05em;
}

/* ── 口コミ枠 on 特定技能・家族滞在 (work instructions 1-3; 介護 had no review, so its card
   is gone): Figma 4009:3, the compact card of 家族滞在ビザ詳細 and 経営管理ビザ詳細
   (1000×235, photo 283×203). style.css's
   c-intro1__voice is the older, taller card with a 400px photo. SP keeps its stacked layout. */
.c-intro1__voice.-service .c-intro1__voice-img {
  aspect-ratio: 283 / 203;
}
.c-intro1__voice.-service .c-intro1__voice-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No emoji or one word left alone on a paragraph's last line */
.c-intro1__voice.-service p.c-intro1__voice-txt {
  text-wrap: pretty;
}
@media all and (min-width: 744px) {
  .c-intro1__voice.-service {
    margin-top: calc(60 * var(--vw));
    /* Figma's 12px top and bottom fit its two-line sample; the real reviews run to
       several paragraphs and need more room above and below */
    padding: calc(35 * var(--vw)) calc(63 * var(--vw)) calc(35 * var(--vw)) calc(43 * var(--vw));
    /* Figma's 417px text column and centred photo suit two lines; with a real review
       the text takes the rest of the width and the photo stays at the top, by the name */
    grid-template-columns: 1fr calc(283 * var(--vw));
    align-items: start;
    gap: calc(30 * var(--vw)) calc(56 * var(--vw));
  }
  .c-intro1__voice.-service .c-intro1__voice-head {
    padding-bottom: calc(20 * var(--vw));
  }
  .c-intro1__voice.-service .c-intro1__voice-img {
    align-self: start;
  }
  .c-intro1__voice.-service .c-intro1__voice-txt {
    font-size: max(calc(16 * var(--vw)), calc(14 * var(--fmin)));
    font-weight: 500;
  }
}

/* ── Tablets (744–1439px): the font floor (style.css, --fmin) makes text larger than
   the scaled boxes some of it sits in. The STEP badges of ご相談の流れ grow with their
   text instead of breaking it; short labels and table headers split evenly when they
   wrap (no 「ト」 or 「更」 alone on a line). */
@media all and (min-width: 744px) and (max-width: 1439px) {
  .c-flow1__head-num {
    width: auto;
    min-width: calc(110 * var(--vw));
    padding-inline: 0.5em;
    white-space: nowrap;
  }
  .p-index-kv__nav-txt,
  th {
    text-wrap: balance;
  }
}

/* ── Tablets up to 1199px: the header's language switcher (GTranslate, fixed in px) sat
   top right over 「サービス」 (less than 8px apart below 1180px, overlapping below
   1024px), the header being too low there for it. It goes in the gap between the logo
   and the menu, centred, a size smaller (130px, 14px). */
@media all and (min-width: 744px) and (max-width: 1199px) {
  .l-header__lang {
    /* centred in the 160 × vw header while closed; open, it grows downwards as before */
    top: calc(80 * var(--vw) - 16px);
    right: auto;
    left: calc(349 * var(--vw));
    translate: -50% 0;
  }
  .l-header__lang .gtranslate_wrapper .gt_switcher {
    width: 130px;
  }
  .l-header__lang .gtranslate_wrapper .gt_switcher a {
    font-size: 14px;
  }
  .l-header__lang .gtranslate_wrapper .gt_switcher a img {
    width: 20px;
    height: 20px;
  }
  .l-header__lang .gtranslate_wrapper .gt_switcher .gt_selected a {
    width: 118px;
  }
  .l-header__lang .gtranslate_wrapper .gt_switcher .gt_option {
    width: 128px;
  }
}

/* ── The footer on tablets up to 1199px: its three columns in a row (logo, menu, サービス),
   sized for the PC design scaled down, can't hold text at its tablet minimum without
   breaking labels (代表プロフ/ィール). The logo goes on top; the menu and サービス share
   the full width below, their columns as wide as their labels, which stay on one line. */
@media all and (min-width: 744px) and (max-width: 1199px) {
  .l-footer__inner {
    padding: calc(60 * var(--vw)) calc(50 * var(--vw)) calc(50 * var(--vw));
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 24px calc(100 * var(--vw));
  }
  .l-footer__logo {
    grid-column: 1 / -1;
  }
  .l-footer__nav,
  .l-footer__service-list {
    grid-template-columns: auto auto;
  }
  .l-footer__nav {
    margin-top: 0;
    gap: 0 24px;
  }
  .l-footer__service {
    margin-top: 0;
  }
  .l-footer__service-list {
    gap: 0 24px;
  }
  .l-footer__nav-link,
  .l-footer__service-link {
    white-space: nowrap;
  }
}

/* ── Small tablets (744–1023px), where .u-inner has only 30 × vw at the sides: the top
   page's review slider arrows, 55 × vw outside it, were half off the screen (the → one
   made the page scroll sideways); the slider moves in by as much. */
@media all and (min-width: 744px) and (max-width: 1023px) {
  .p-index-review__slider {
    margin-inline: calc(55 * var(--vw));
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Page styles, one section per page (page ID in the heading). Each rule is scoped
   to a class that only that page uses.
   ══════════════════════════════════════════════════════════════════════ */

/* ── page 46: トップページ (46-index) ──────────────────────────────── */
/*
 * トップページ (page 46)
 */

/* ── KV (#7): 「在留ビザ・外国人雇用サポート」 is longer than the old copy.
 * PC: one line, as in the frame (it is wider than the 635px copy box).
 * SP: 「在留ビザ・」/「外国人雇用サポート」, each line kept whole.
 * Japanese only: translated by GTranslate (<html lang="id"> etc.), the line is a long
 * sentence that must wrap, or it widens the page and the fixed header on phones. */
.p-index-kv__copy-main.-nowrap:lang(ja) {
  white-space: nowrap;
}
/* Translated, the 「在留ビザ」「外国人雇用」 phrases wrap, and the yellow line (an absolute
 * ::before) sits under the last line only. Drawn as a background instead, it repeats
 * under every line. */
.p-index-kv__copy-em:not(:lang(ja)) {
  background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 100% 6px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.p-index-kv__copy-em:not(:lang(ja))::before {
  content: none;
}

/* ── 代表挨拶 (#12): three titles above the name, 14px/500 as in the frame */
.p-index-message__role.-titles {
  font-size: max(calc(14 * var(--vw)), calc(12.25 * var(--fmin)));
  font-weight: 500;
  line-height: 1.7;
}

/* ── KV on phones (#7): below 744px nothing offsets the fixed header (on live too:
 * WordPress prints body{padding-top:0}, and only PC is corrected, by Additional CSS).
 * Kept to this page, as the renewal leaves that site-wide issue alone (see
 * PRODUCTION-NOTES.md); without it the new first line 「アジア人雇用をしたい企業様へ」
 * sits under the header. Remove this rule if body padding is ever fixed for phones. */
@media all and (max-width: 743px) {
  .p-index-kv {
    padding-top: calc(60 * var(--vw));
  }
}

/* ── Breadcrumb on phones: the same missing offset hid half of 「ホーム ＞ …」 under the
 * 60-unit header (its list started 45 units from the top). Every other page starts with
 * a breadcrumb, so starting it below the header (60 + 20) fixes them all: pages use
 * .l-breadcrumb, column posts .breadcrumb.-post (functions.php, no top spacing at all, so
 * it was hidden entirely). Remove with the rule above if body padding is ever fixed for
 * phones. */
@media all and (max-width: 743px) {
  .l-breadcrumb ul,
  .breadcrumb.-post {
    padding-top: calc(80 * var(--vw));
  }
  .breadcrumb.-post {
    display: block;
  }
}

/* ── page 51: 代表挨拶 (51-profile) ──────────────────────────────── */
/**
 * 51-profile (代表挨拶), 2026 renewal
 * The story is the text of company.andre-law.jp/profile/ (#1), which has two heading levels:
 * section headings use c-head2 at a smaller size, sub-headings keep the page's lead style.
 */

/* Line under "Andreas Marina": the role text is gone in the 2026 design, the line stays */
.p-profile-message__info .p-profile-rule {
  min-height: calc(21 * var(--vw));
}
.p-profile-message__info .p-profile-rule::before {
  width: calc(190 * var(--vw));
  flex-grow: 0;
}

/* h2/h3 in the lead style keep the lead's regular weight */
.p-profile-story__lead {
  font-weight: inherit;
}
/* first heading under the photo block: same gap the first paragraph had */
.p-profile-story__lead.-first {
  margin-top: calc(50 * var(--vw));
}

/* section headings (代表挨拶　アンドレアス茉里名 / 外国人雇用に携わろうと思ったきっかけ) */
.p-profile-story__head {
  margin-top: calc(40 * var(--vw));
}
.p-profile-story__head .c-head2__ja {
  font-size: max(calc(22 * var(--vw)), calc(17.35 * var(--fmin)));
}
.p-profile-story__head + .p-profile-message__txt {
  margin-top: calc(16 * var(--vw));
}
.p-profile-story__head + .p-profile-story__lead {
  margin-top: calc(20 * var(--vw));
}

/* 「Soto ayamとEs cendolが好きです。」 is one line in the design (it runs slightly into the card padding) */
.p-profile-office__nowrap {
  white-space: nowrap;
}

@media all and (min-width: 744px) {
  .p-profile-message__info .p-profile-rule::before {
    width: calc(306 * var(--vw));
  }
  .p-profile-story__lead.-first {
    margin-top: calc(80 * var(--vw));
  }
  .p-profile-story__head {
    margin-top: calc(64 * var(--vw));
  }
  .p-profile-story__head .c-head2__ja {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
  }
  .p-profile-story__head + .p-profile-message__txt {
    margin-top: calc(20 * var(--vw));
  }
  .p-profile-story__head + .p-profile-story__lead {
    margin-top: calc(24 * var(--vw));
  }
}

/* ── page 55: 料金詳細 (55-price) ──────────────────────────────── */
/*
 * 料金詳細 (page 55)
 * Same conventions as renewal-2026.css: mobile first, one breakpoint at 744px,
 * sizes as calc(N * var(--vw)) (390px wide on SP, 1440px on PC).
 */

/* ── Anchor buttons (#19): on SP, small enough for 「はじめての外国人雇用」 to stay on one line */
@media all and not (min-width: 744px) {
  .p-price-details__anchor.-sp-compact .p-price-details__anchor-link {
    padding-right: calc(14 * var(--vw));
    padding-left: calc(16 * var(--vw));
  }
  .p-price-details__anchor.-sp-compact .p-price-details__anchor-txt {
    font-size: max(calc(13 * var(--vw)), calc(11.38 * var(--fmin)));
  }
}

/* ── 登録支援機関様向けバナー between the 特定技能ビザ and 技人国ビザ tables (#24) */
.p-price-details__tsk {
  margin-top: calc(35 * var(--vw));
}
.p-price-details__tsk + .p-price-details__sec {
  margin-top: calc(20 * var(--vw));
}

/* ── 印紙代 note under the price tables */
.p-price-note {
  padding-bottom: calc(40 * var(--vw));
}
.p-price-note__txt {
  font-size: max(calc(15 * var(--vw)), calc(13.12 * var(--fmin)));
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

@media all and (min-width: 744px) {
  /* PC price tables: header row 70px high as in the frame, with one or two lines */
  .p-price-table thead th {
    height: calc(70 * var(--vw));
    padding-block: calc(11 * var(--vw));
  }
  /* 4 value columns (技人国・介護): 「別のビザから変更」 stays on one line as in the frame */
  .p-price-table.-col4 thead th {
    padding-inline: calc(12 * var(--vw));
  }
  .p-price-details__tsk {
    margin-top: calc(85 * var(--vw));
  }
  .p-price-details__tsk + .p-price-details__sec {
    margin-top: calc(50 * var(--vw));
  }
  .p-price-note {
    padding-top: calc(30 * var(--vw));
    padding-bottom: calc(55 * var(--vw));
  }
  .p-price-note__txt {
    font-size: max(calc(24 * var(--vw)), calc(18.15 * var(--fmin)));
    line-height: 1.5;
  }
}

/* ── page 59: 特定技能ビザ (59-ssw-visa) ──────────────────────────────── */
/*
 * 59 特定技能ビザ (SSW visa): Figma frame 「配偶者ビザ詳細」 (413:2)
 *
 * The lead under the H1 (catch copy + text), the price table's distance from its
 * heading, and the TSK banner closing the intro. Same conventions as style.css:
 * mobile first, one breakpoint at 744px, sizes as calc(N * var(--vw)).
 */

/* ── リード: 「現場の人手不足解消に。…」 and the four paragraphs under it */
.p-ssw-visa-lead__head {
  font-size: max(calc(22 * var(--vw)), calc(17.35 * var(--fmin)));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--red);
}
.p-ssw-visa-lead__txts {
  margin-top: calc(25 * var(--vw));
}
.p-ssw-visa-lead__txt {
  font-weight: 500;
  line-height: 1.75;
}
.p-ssw-visa-lead__txt + .p-ssw-visa-lead__txt {
  margin-top: 1.75em;
}

/* ── 登録支援機関様向けバナー under the 相談予約 button */
.p-ssw-visa-intro__banner {
  margin-top: calc(40 * var(--vw));
}

@media all and (min-width: 744px) {
  .c-intro1__sec.p-ssw-visa-lead {
    margin-top: calc(58 * var(--vw));
  }
  .p-ssw-visa-lead__head {
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-ssw-visa-lead__txts {
    margin-top: calc(54 * var(--vw));
  }
  .p-ssw-visa-lead__txt {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's 1.2 */
  }
  .p-ssw-visa-lead__txt + .p-ssw-visa-lead__txt {
    margin-top: 1.2em;
  }
  /* 料金表: 114px under its heading, 70px high header cells, button 81px below */
  .c-intro1__table.p-ssw-visa-price__table {
    margin-top: calc(114 * var(--vw));
  }
  .c-table1.p-ssw-visa-price__table thead th {
    padding-block: calc(23 * var(--vw));
  }
  .c-intro1__btn.p-ssw-visa-price__btn {
    margin-top: calc(81 * var(--vw));
  }
  /* The banner image has ~9px of transparent shadow above the figure and ~26px
     below the white box: 65px from the button to the figure, and the flow block
     (pulled up 50px by c-flow1) 62px under the white box, as in the frame. */
  .p-ssw-visa-intro__banner {
    margin-top: calc(56 * var(--vw));
  }
  .p-ssw-visa-intro .c-intro1__inner {
    padding-bottom: calc(86 * var(--vw));
  }
}

/* ── page 64: 技術・人文知識・国際業務ビザ (64-engineer-visa) ──────────────────────────────── */
/*
 * 64 技術・人文知識・国際業務ビザ (Engineer visa): Figma frame 「永住ビザ詳細」 (444:2)
 *
 * The lead under the H1 (catch copy + text) and the four-column price table.
 * Same conventions as style.css: mobile first, one breakpoint at 744px,
 * sizes as calc(N * var(--vw)).
 *
 * The long H1 needs no CSS: c-head1's side lines are flex items that shrink around the
 * title (the frame's lines ran through it, #23). The title sits in a <span> so that on SP
 * it breaks after 「技術・人文知識・」 (<br class="u-hidden-md">) inside one flex item.
 */

/* ── リード: 「その採用、知らずに…」 and the four paragraphs under it */
.p-engineer-visa-lead__head {
  font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--red);
}
.p-engineer-visa-lead__txts {
  margin-top: calc(25 * var(--vw));
}
.p-engineer-visa-lead__txt {
  font-weight: 500;
  line-height: 1.75;
}
.p-engineer-visa-lead__txt + .p-engineer-visa-lead__txt {
  margin-top: calc(15 * var(--vw));
}

@media all and (min-width: 744px) {
  .c-intro1__sec.p-engineer-visa-lead {
    margin-top: calc(46 * var(--vw));
  }
  .p-engineer-visa-lead__head {
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-engineer-visa-lead__txts {
    margin-top: calc(120 * var(--vw));
  }
  .p-engineer-visa-lead__txt {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's 1.2 */
    letter-spacing: 0;
  }
  .p-engineer-visa-lead__txt + .p-engineer-visa-lead__txt {
    margin-top: 0;
  }

  /* ── 料金: the table and the button sit closer to the heading than c-intro1's 70px */
  .p-engineer-visa-price .c-intro1__table {
    margin-top: calc(54 * var(--vw));
  }
  .p-engineer-visa-price .c-intro1__btn {
    margin-top: calc(55 * var(--vw));
  }
  /* Four price columns: with c-table1's 18px side padding 「別のビザから変更」 breaks
     before its last character; the frame's header row is 70px high. */
  .p-engineer-visa-price thead th {
    height: calc(70 * var(--vw));
    padding: calc(9 * var(--vw)) calc(10 * var(--vw));
    line-height: 1.3;
  }
}

/* ── page 68: 特定技能　自社支援サポート (68-ssw-in-house-support) ──────────────────────────────── */
/*
 * 特定技能 自社支援サポート（page 68, Figma 「帰化詳細」 445:417）
 * Mobile first, one breakpoint at 744px, sizes as calc(N * var(--vw)).
 * The intro keeps c-intro1 (-sp-wider, 10px gutter on SP), so the text blocks add
 * 10px on SP to sit on the usual 20px gutter, like the c-table1 next to them.
 */

/* ── リード: 見出し + 本文 + 月次顧問の料金 */
.p-ssw-in-house-support-lead__head {
  font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  line-height: 1.5;
  text-align: center;
  color: var(--red);
}
.p-ssw-in-house-support-lead__txts {
  margin-top: calc(20 * var(--vw));
  padding-inline: calc(10 * var(--vw));
}
.p-ssw-in-house-support-lead__txt {
  font-weight: 500;
}
.p-ssw-in-house-support-lead__txt + .p-ssw-in-house-support-lead__txt {
  margin-top: calc(15 * var(--vw));
}
/* one row only: round both outer corners (c-table1 rounds by first/last row) */
.c-table1.p-ssw-in-house-support-lead__table tbody tr th {
  border-radius: calc(5 * var(--vw)) 0 0 calc(5 * var(--vw));
}
.c-table1.p-ssw-in-house-support-lead__table tbody tr td {
  border-radius: 0 calc(5 * var(--vw)) calc(5 * var(--vw)) 0;
}

/* ── 自社支援サポートの内容: 左線の見出し + 赤い「・」のリスト */
.p-ssw-in-house-support-content {
  padding-inline: calc(10 * var(--vw));
}
.p-ssw-in-house-support-content__head {
  padding-left: calc(12 * var(--vw));
  position: relative;
  font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  line-height: 1.5;
  color: var(--red);
}
.p-ssw-in-house-support-content__head::before {
  content: "";
  width: 3px;
  height: 80%;
  border-radius: calc(infinity * 1px);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  background-color: var(--red);
}
.p-ssw-in-house-support-content__list {
  margin-top: calc(20 * var(--vw));
}
.p-ssw-in-house-support-content__item {
  display: grid;
  grid-template-columns: auto 1fr;
  font-weight: 500;
  line-height: 1.6;
}
.p-ssw-in-house-support-content__item + .p-ssw-in-house-support-content__item {
  margin-top: calc(8 * var(--vw));
}
.p-ssw-in-house-support-content__item::before {
  content: "・";
  color: var(--red);
  font-feature-settings: normal;
}

/* ── 登録支援機関のご紹介 / インドネシア人材の採用 */
.p-ssw-in-house-support-info {
  margin-top: calc(40 * var(--vw));
  padding-inline: calc(10 * var(--vw));
}
.p-ssw-in-house-support-info__sec + .p-ssw-in-house-support-info__sec {
  margin-top: calc(30 * var(--vw));
}
.p-ssw-in-house-support-info__head {
  font-size: max(calc(18 * var(--vw)), calc(15.75 * var(--fmin)));
  font-weight: 500;
  line-height: 1.5;
  color: var(--red);
}
.p-ssw-in-house-support-info__txt {
  margin-top: calc(15 * var(--vw));
}

/*
 * #5 IDN様・TSUBASA様との写真（未着）. When they arrive: save them as WebP under
 * assets/images/renewal/ssw-in-house-support/ and add, after the インドネシア paragraph:
 *
 *   <div class="p-ssw-in-house-support-info__photos">
 *     <figure class="p-ssw-in-house-support-info__photo">
 *       <img src="[theme_url]/assets/images/renewal/ssw-in-house-support/partner-idn.webp" alt="" loading="lazy" width="960" height="640">
 *       <figcaption>IDN様と</figcaption>
 *     </figure>
 *     <figure class="p-ssw-in-house-support-info__photo"> … TSUBASA様と … </figure>
 *   </div>
 *
 * One photo alone also works (it keeps the half width on PC).
 */
.p-ssw-in-house-support-info__photos {
  display: grid;
  margin-top: calc(25 * var(--vw));
  gap: calc(20 * var(--vw));
}
.p-ssw-in-house-support-info__photo {
  margin: 0;
}
.p-ssw-in-house-support-info__photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(10 * var(--vw));
}
.p-ssw-in-house-support-info__photo figcaption {
  margin-top: calc(8 * var(--vw));
  font-size: max(calc(14 * var(--vw)), calc(12.25 * var(--fmin)));
  line-height: 1.5;
  text-align: center;
}

@media all and (min-width: 744px) {
  .p-ssw-in-house-support-lead {
    margin-top: calc(53 * var(--vw));
  }
  .p-ssw-in-house-support-lead__head {
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-ssw-in-house-support-lead__txts {
    margin-top: calc(32 * var(--vw));
    padding-inline: 0;
  }
  .p-ssw-in-house-support-lead__txt {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's calc(30 / 26) */
  }
  .p-ssw-in-house-support-lead__txt + .p-ssw-in-house-support-lead__txt {
    margin-top: calc(30 * var(--vw));
  }
  .p-ssw-in-house-support-lead__table {
    margin-top: calc(51 * var(--vw));
  }

  .p-ssw-in-house-support-content {
    padding-inline: 0;
  }
  .p-ssw-in-house-support-content__head {
    padding-left: calc(18 * var(--vw));
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-ssw-in-house-support-content__head::before {
    height: 100%;
  }
  .p-ssw-in-house-support-content__list {
    margin-top: calc(44 * var(--vw));
  }
  .p-ssw-in-house-support-content__item {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's calc(30 / 26) */
  }
  .p-ssw-in-house-support-content__item + .p-ssw-in-house-support-content__item {
    margin-top: 0;
  }

  .p-ssw-in-house-support-info {
    margin-top: calc(83 * var(--vw));
    padding-inline: 0;
  }
  .p-ssw-in-house-support-info__sec + .p-ssw-in-house-support-info__sec {
    margin-top: calc(41 * var(--vw));
  }
  .p-ssw-in-house-support-info__head {
    font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  }
  .p-ssw-in-house-support-info__txt {
    margin-top: calc(27 * var(--vw));
  }

  .p-ssw-in-house-support-info__photos {
    margin-top: calc(40 * var(--vw));
    grid-template-columns: 1fr 1fr;
    gap: calc(40 * var(--vw));
  }
  .p-ssw-in-house-support-info__photo figcaption {
    margin-top: calc(10 * var(--vw));
    font-size: max(calc(16 * var(--vw)), calc(14 * var(--fmin)));
  }
}

/* ── page 72: 家族滞在ビザ (72-dependent-visa) ──────────────────────────────── */
/*
 * 72 家族滞在ビザ (Dependent visa): Figma frame 「家族滞在ビザ詳細」 (448:1200)
 *
 * The new lead under the H1 (catch copy + three paragraphs, the employee-benefit angle)
 * and the price block's spacing, which is tighter in the frame than c-intro1's default
 * (no estimator any more). Same conventions as style.css: mobile first, one breakpoint
 * at 744px, sizes as calc(N * var(--vw)).
 */

/* ── リード: 「家族と一緒に、日本で働く」を外国人従業員の福利厚生に。 and the text under it */
.c-intro1__sec.p-dependent-visa-lead {
  margin-top: calc(25 * var(--vw));
}
.p-dependent-visa-lead__head {
  font-size: max(calc(22 * var(--vw)), calc(17.35 * var(--fmin)));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--red);
}
.p-dependent-visa-lead__txts {
  margin-top: calc(20 * var(--vw));
  padding-inline: calc(10 * var(--vw));
}
.p-dependent-visa-lead__txt {
  font-weight: 500;
  line-height: 1.75;
}

@media all and (min-width: 744px) {
  .c-intro1__sec.p-dependent-visa-lead {
    margin-top: calc(27 * var(--vw));
  }
  .p-dependent-visa-lead__head {
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-dependent-visa-lead__txts {
    margin-top: calc(48 * var(--vw));
    padding-inline: 0;
  }
  .p-dependent-visa-lead__txt {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's 1.2 */
  }

  /* ── 料金: heading, table and button sit closer together than c-intro1's default */
  .p-dependent-visa-price .c-intro1__table {
    margin-top: calc(46 * var(--vw));
  }
  .p-dependent-visa-price .c-intro1__btn {
    margin-top: calc(37 * var(--vw));
  }
  /* 54px from the button to ご相談の流れ, which overlaps the intro by 50px */
  .p-dependent-visa-intro .c-intro1__inner {
    padding-bottom: calc(104 * var(--vw));
  }

  /* ── 記事一覧 right after the explanation: both are white, so its top padding would
     double the explanation's 90px bottom padding */
  .p-dependent-visa-explain + .c-related1 {
    padding-top: calc(10 * var(--vw));
  }
}

/* The frame's catch (1100px) and text (1061px) are wider than the 1000px column */
@media all and (min-width: 1024px) {
  .p-dependent-visa-lead__head {
    margin-inline: calc(-50 * var(--vw));
  }
  .p-dependent-visa-lead__txts {
    margin-inline: calc(-31 * var(--vw)) calc(-30 * var(--vw));
  }
}

/* ── page 75: 介護ビザ (75-nursing-care-visa) ──────────────────────────────── */
/*
 * 75 介護ビザ (Nursing Care visa): Figma frame 「経営管理ビザ詳細」 (447:817)
 *
 * The lead under the H1 (catch copy 4009:54 + the loose text layer 4013:199 that sits
 * in the frame's empty area under it) and the 4-column price table's distances.
 * Same conventions as style.css: mobile first, one breakpoint at 744px,
 * sizes as calc(N * var(--vw)).
 */

/* ── リード: 「面倒な手続きはお任せ。…」 and the two paragraphs under it */
.c-intro1__sec.p-nursing-care-visa-lead {
  margin-top: calc(25 * var(--vw));
}
.p-nursing-care-visa-lead__catch {
  font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--red);
}
.p-nursing-care-visa-lead__txts {
  display: grid;
  gap: calc(16 * var(--vw));
  margin-top: calc(20 * var(--vw));
}
.p-nursing-care-visa-lead__txt {
  font-weight: 700;
  line-height: 1.75;
}

@media all and (min-width: 744px) {
  .c-intro1__sec.p-nursing-care-visa-lead {
    margin-top: calc(29 * var(--vw));
  }
  .p-nursing-care-visa-lead__catch {
    font-size: max(calc(36 * var(--vw)), calc(22.95 * var(--fmin)));
    line-height: 1.2;
  }
  .p-nursing-care-visa-lead__txts {
    gap: calc(31 * var(--vw));
    margin-top: calc(28 * var(--vw));
  }
  .p-nursing-care-visa-lead__txt {
    font-size: max(calc(26 * var(--vw)), calc(18.95 * var(--fmin)));
    line-height: 1.5; /* 1-4: a little more room than the frame's 1.2 */
  }

  /* ── 料金: the table and the button sit closer to the heading than c-intro1's 70px */
  .p-nursing-care-visa-price .c-intro1__table {
    margin-top: calc(34 * var(--vw));
  }
  .p-nursing-care-visa-price .c-intro1__btn {
    margin-top: calc(48 * var(--vw));
  }
  /* 4 value columns: 「別のビザから変更」 stays on one line, header row 70px as in the frame */
  .p-nursing-care-visa-price .c-table1 thead th {
    padding: calc(11 * var(--vw)) calc(10 * var(--vw));
  }
}

/* ── page 79: 登録支援機関様向け (79-for-tsk) ──────────────────────────────── */
/*
 * 79 登録支援機関様向け (For TSK), Figma PC frame 「就労・特定技能ビザ詳細」 (452:1588).
 * The price block reuses c-intro1 / c-head3 / c-table1; only what those can't do is here.
 */

/* ── 特定技能ビザ: red ※ note under the price table */
.p-for-tsk-price__note {
  margin-top: calc(20 * var(--vw));
  font-size: max(calc(14 * var(--vw)), calc(12.25 * var(--fmin)));
  font-weight: 700;
  line-height: 1.6;
  color: var(--red);
}

@media all and (min-width: 744px) {
  .p-for-tsk-price {
    margin-top: calc(117 * var(--vw));
  }
  .p-for-tsk-price__lead {
    margin-top: calc(64 * var(--vw));
    font-size: max(calc(24 * var(--vw)), calc(18.15 * var(--fmin)));
    font-weight: 500;
    line-height: 1.5; /* 1-4: a little more room than the frame's 1.25 */
  }
  .p-for-tsk-price__table {
    margin-top: calc(95 * var(--vw));
  }
  .p-for-tsk-price__table thead th {
    padding-block: calc(23 * var(--vw));
  }
  /* Row labels: a left-aligned block centred in the cell, 2 lines within the 88px row. */
  .p-for-tsk-price__table tbody th {
    line-height: 1.2;
    text-align: center;
  }
  .p-for-tsk-price__label {
    display: inline-block;
    text-align: left;
  }
  .p-for-tsk-price__note {
    max-width: calc(843 * var(--vw));
    margin: calc(57 * var(--vw)) auto 0;
    font-size: max(calc(20 * var(--vw)), calc(16.55 * var(--fmin)));
    line-height: 1.2;
  }
}