/* japan-service: 共通ヘッダー/フッターを使う固定ページ。
   本文は標準ブロック（見出し・段落・画像・カラム）で編集するため、CSSは
   Gutenbergの標準マークアップに「追加CSSクラス」で付与したクラス名を組み合わせて対象を絞る。 */
.entry-content > .wp-block-group,
main .wp-block-group.js-intro,
main .wp-block-group.js-icon-section,
main .wp-block-group.js-lead-cta,
main .wp-block-group.js-recruit-intro,
main .wp-block-group.js-support,
main .wp-block-group.js-talents {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.js-intro > *, .js-icon-section > *, .js-lead-cta > *,
.js-recruit-intro > *, .js-support > *, .js-talents > * {
  max-width: 1040px; margin-left: auto; margin-right: auto;
}

.article h2.js-heading { margin-top: 0; margin-bottom: 40px; padding: 0; border: none; background: none; font-family: "Shippori Mincho B1", serif; font-size: 40px; font-weight: 600; line-height: 1.4; letter-spacing: .2em; color: #333; text-align: left; }
.article .entry-content p { font-family: "Noto Serif JP", serif; }
.article .entry-content > .wp-block-group > p { font-size: 20px; font-weight: 500; line-height: 32px; color: #333; }
.article :is(.js-intro, .js-icon-section, .js-lead-cta, .js-recruit-intro, .js-support, .js-talents) > p { margin-left: auto; margin-right: auto; }
/* 欄どうしを隙間なくつなげる（Cocoonの .entry-content > * の下マージンで白い帯が出る） */
.article .entry-content > :is(.js-intro, .js-icon-section, .js-lead-cta, .js-recruit-intro, .js-support, .js-talents) { margin-bottom: 0; }
.js-support h2.js-heading { font-weight: 500; letter-spacing: 0; }
.js-talents h2.js-heading { font-weight: 500; letter-spacing: .1em; text-align: center; }
.article .js-talents h4 { display: inline-block; margin: 0 0 16px; padding: 0 0 19px; border: none; background: linear-gradient(#ffff80, #ffff80) left bottom / 100% 15px no-repeat; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; color: #333; }


/* ===== 中国マーケティング支援事業 ===== */
.js-intro { padding: 60px 24px; }
.js-intro > .wp-block-paragraph { line-height: 2; margin: 0 0 32px; }
.js-intro img { border-radius: 4px; }

/* ===== 3アイコンカード（元サイト: 291×460px・画像枠186px） ===== */
.js-icon-section { background: #f6f6f6; padding: 152px 0 151px; }
.article .js-icon-cards { flex-wrap: nowrap !important; justify-content: center; align-items: stretch; gap: 30px; }
.js-icon-cards > .wp-block-column { flex: 0 1 291px !important; }
.js-icon-card { display: flex; flex-direction: column; height: 100%; min-height: 460px; padding: 24px; background: #fff; text-align: left; }
.js-icon-card > * { margin: 0 !important; }
.js-icon-card .wp-block-image { height: 186px; margin-bottom: 16px !important; }
.js-icon-card img { width: 100%; height: 100%; object-fit: contain; }
.article .js-icon-card :is(h4, p) { padding: 0; border: none; background: none; font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: normal; color: #333; }

/* ===== リード文＋CTA ===== */
.js-lead-cta { padding: 20px 24px 56px; text-align: center; }
.article .js-lead-cta > p.js-lead-center { margin: 0 auto 48px; font-size: 22px; font-weight: 500; line-height: 1.4; }
.js-cta-btn { justify-content: center; }
.js-cta-btn .wp-block-button { width: min(500px, 100%); }
.js-cta-btn .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; padding: 0; border-radius: 4px; background: #333; font-family: "Lato", sans-serif; font-size: 18px; font-weight: 700; line-height: 1; color: #fff; }

/* ===== 中国人人材紹介事業 ===== */
.js-recruit-intro { padding: 24px 24px 60px; }
.js-recruit-intro > .wp-block-paragraph { line-height: 2; margin: 0 0 16px; }
.js-recruit-intro:has(> .wp-block-image) { padding-bottom: 23px; }
.article .js-recruit-intro > .wp-block-image { margin-top: 40px; margin-bottom: 0; }

/* ===== サポート内容（元サイト: 291×312px・角丸24px、2段目も同じ幅で中央） ===== */
.js-support { background: #f6f6f6; padding: 80px 0; }
.article .js-support h2.js-heading { margin-bottom: 60px; }
.article .js-sup-row { flex-wrap: nowrap !important; justify-content: center; gap: 30px; margin-bottom: 30px; }
.article .js-sup-row-2 { margin-bottom: 60px; }
.js-sup-row > .wp-block-column { flex: 0 1 291px !important; }
.js-sup-card { display: flex; flex-direction: column; height: 312px; padding: 24px; border-radius: 24px; background: #fff; text-align: center; }
.article .js-sup-card h4 { min-height: calc(2 * 1.6em + 17px); margin: 0 0 16px; padding: 0 0 16px; border: none; border-bottom: 1px solid #d5d5d5; background: none; font-family: "Noto Serif JP", serif; font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: normal; color: #333; }
.js-sup-card .wp-block-image { flex: 1; min-height: 0; margin: 0; }
.js-sup-card img { width: 100%; height: 100%; object-fit: contain; }
.article .js-support > p.js-sup-note { max-width: 1040px; margin: 0 auto !important; padding: 0; font-size: 20px; line-height: 28px; text-align: left; }

/* ===== こんな人材を求めています（元サイト: 列498px・間隔24px、写真は高さ205pxで切りそろえ） ===== */
.js-talents { padding: 124px 24px 134px; }
.article .js-talents h2.js-heading { margin-bottom: 70px; }
.article .js-talents > .wp-block-columns.js-talent-row { flex-wrap: nowrap !important; justify-content: center; align-items: flex-start; gap: 24px; margin: 0 auto 24px; }
.article .js-talents > .wp-block-columns.js-talent-row:last-child { margin-bottom: 0; }
.js-talent-row > .wp-block-column { flex: 0 1 498px !important; }
.js-talent-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.js-talent-card > * { margin: 0 !important; }
.js-talent-card .wp-block-image { width: min(430px, 100%); }
.js-talent-card img { width: 100%; height: 205px; object-fit: cover; }
.article .js-talent-card p { max-width: 420px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #333; }


@media screen and (max-width: 480px) {
  .article h2.js-heading:not(.js-support h2) { font-size: 28px; }
  .js-icon-section { padding: 70px 0; }
  .js-icon-cards, .js-sup-row { flex-direction: column; }
  .js-icon-cards > .wp-block-column, .js-sup-row > .wp-block-column { flex-basis: auto !important; }
  .js-icon-card { min-height: 370px; }
  .article .js-icon-card :is(h4, p) { font-size: 15px; }
  .article .js-support > p.js-sup-note { font-size: 18px; line-height: 1.4; }
  .js-lead-cta { padding: 56px 24px 35px; }
  .js-recruit-intro { padding-top: 103px; }
  .article .js-lead-cta > p.js-lead-center { font-size: 17px; }
  .article .js-talents > .wp-block-columns.js-talent-row { flex-direction: column; }
  .article :is(.js-intro, .js-recruit-intro) > p { font-size: 18px; line-height: 28.8px; }
  /* 最初の写真は元サイトどおり縦長に切り抜く */
  .js-intro .wp-block-image img { aspect-ratio: 353 / 481; height: auto; object-fit: cover; }
  .js-talent-row > .wp-block-column { flex-basis: auto !important; width: 100%; }
}