@charset "utf-8";

/* Web Components(site-header/site-footer)がボックスモデルに影響しないようにする */
site-header,
site-footer {
  display: contents;
}

/* =========================================================
   Design tokens — values taken from the XD artboard 02_PC_SGP
   (artboard width 1400px / content column 1050px at x=175)
   ========================================================= */
:root {
  --navy: #16314f;
  --navy-strong: #183554;
  --gold: #9c7e39;
  --gold-light: #9d803c;
  --gold-dark: #836e3e;
  --gold-text: #977935;
  --bg-grey: #eaedf0;
  --bg-grey-2: #f5f6f8;
  --bg-grey-3: #f7f7f7;
  --line: #eaeaea;

  --font-gothic: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Meiryo", sans-serif;
  --font-mincho: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", serif;
  --font-en: "EB Garamond", "Garamond", "Times New Roman", serif;
  --font-num: "Times New Roman", "Times", serif;

  --card-shadow: 15px 15px 15px rgba(0, 0, 0, .102);

  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.09 13.52'%3E%3Cpath d='M3.34 6.76 0 13.52 13.09 6.76 0 0Z'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h20v14H7l-5 4Z'/%3E%3C/svg%3E");

  /* footer SNSアイコン(YouTube/Facebook/X/LINE)は自己完結した実ロゴ形状のSVGを
     HTML側に直接埋め込む方式に変更したため、ここでのmask用アイコン定義は廃止 */

  /* artboard width used as the layout reference */
  --canvas: 1400px;
  --inner: 1050px;
  --gutter: clamp(16px, 3.5vw, 30px);
}

/* ---------------------------------------------------------
   base
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-gothic);
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}



a {
  color: inherit;
  text-decoration: none;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sp-only {
  display: none;
}

.inner {
  width: var(--inner);
  max-width: calc(100% - 60px);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   shared: gold / beige buttons
   XD: outer 342x72 (2px gradient border) / inner 338x68 / radius 10
   --------------------------------------------------------- */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 342px);
  height: 72px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  overflow: hidden;
  transition: filter .25s, transform .25s;
}

.btn::before {
  /* top sheen — XD rect 338x36, radius [10,10,100,100] */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 36px;
  border-radius: 3px 3px 33px 33px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  pointer-events: none;
}

/* 矢印は原本 SVG（金色のグローが焼き込まれた 31.084x31.515。
   中の三角は従来と同じ 13.085x13.515 なので、矢印の中心位置は変えずに
   キャンバス分だけ広げる: right 31 → 22 (=37.5 - 31.084/2) */
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 31.084px;
  height: 31.515px;
  transform: translateY(-50%);
  background: url("/service/crossborder/img/btn_arrow_white.svg") no-repeat center / contain;
}

.btn--beige::after {
  background-image: url("/service/crossborder/img/btn_arrow_brown.svg");
}

.btn__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.btn--gold {
  color: #fff;
  background:
    radial-gradient(ellipse 53.1% 159.3% at 50% 50%, #cead62 0%, #937532 100%) padding-box,
    linear-gradient(82.5deg, #fff 0%, #e2c98f 19.2%, #fff 35.5%, #e3cb92 57.1%, #fff 76.4%, #ddc99a 97%, #ffe4a3 100%) border-box;
  box-shadow: var(--card-shadow);
}

.btn--gold::before {
  opacity: .168;
}

.btn--beige {
  color: var(--gold);
  background:
    linear-gradient(81.4deg, #e3d5c9 0%, #faf6f2 47.2%, #e0d0c3 100%) padding-box,
    linear-gradient(78.7deg, #fff 0%, #e3d2c3 21.7%, #fff 45.8%, #e0d4c9 69.5%, #fff 86.2%, #e3d5c9 100%) border-box;
  box-shadow: var(--card-shadow);
}

.btn--beige::before {
  opacity: .497;
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* small header variant — XD 122x34 (gold) / 160x34 (beige) */
.btn--sm {
  width: min(100%, 122px);
  height: 34px;
  border-width: 1px;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 0;
  box-shadow: none;
}

.btn--sm::before {
  height: 17px;
  border-radius: 2px 2px 16px 16px;
}

.btn--sm::after {
  content: none;
}

.btn--beige.btn--sm {
  width: 160px;
}

.btn--beige:not(.btn--sm) {
  padding-right: 20px;
}

/* ---------------------------------------------------------
   shared: decorative English headline (EB Garamond + rule)
   --------------------------------------------------------- */
.deco-en {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 103px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* Case見出しのみテキスト実装のまま(単数形"Case"のsvgが先方から未支給のため)。
   他ラベルは画像化済みで下線もsvgに内包されるため、imgタグには適用しない。 */
img.deco-en {
  display: block;
  width: auto;
  height: clamp(42px, 7.02vw, 98px);
}

.deco-en::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -7px;
  width: 38px;
  height: 3px;
  background: currentColor;
}

/* ---------------------------------------------------------
   shared: section titles
   --------------------------------------------------------- */
.sec-label {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
}

.sec-title {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--navy);
  text-align: center;
}

.sec-title--gold {
  color: var(--gold);
  font-size: 39px;
}

/* ---------------------------------------------------------
   shared: white content cards
   --------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 33px;
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 42px 30px;
}

.card {
  background: #fff;
  box-shadow: var(--card-shadow);
  padding: 27.5px 31px 29px 33px;
}

.card--wide {
  grid-column: 1 / -1;
}

.card__no {
  position: absolute;
  top: -15px;
  left: 5px;
  font-family: var(--font-en);
  font-size: 33px;
  line-height: 1;
  color: var(--gold-light);
}

.card--num {
  position: relative;
  padding-top: 42.5px;
}

.card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--navy-strong);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 20px;
}

.card__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  color: var(--navy);
}

/* ---------------------------------------------------------
   shared: icons
   --------------------------------------------------------- */
.icon-plus,
.icon-toggle {
  position: relative;
  display: block;
  flex: none;
}

.icon-plus {
  width: 17px;
  height: 17px;
}

.icon-plus::before,
.icon-plus::after {
  content: "";
  position: absolute;
  background: var(--navy);
}

.icon-plus::before {
  inset: 8px 0 auto;
  height: 1px;
}

.icon-plus::after {
  inset: 0 8px auto;
  width: 1px;
  height: 100%;
}

.icon-toggle {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  background: url("/service/crossborder/img/section07_qa_open.svg") no-repeat center / contain;
}

.is-open>.faq-item__q .icon-toggle {
  background-image: url("/service/crossborder/img/section07_qa_close.svg");
}

.icon-arrow {
  position: absolute;
  right: 23px;
  bottom: 26px;
  width: 19px;
  height: 9px;
}

.icon-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 11px;
  width: 19px;
  height: 1px;
  background: var(--navy);
}

.icon-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  transform: translateY(-2px) rotate(45deg);
  transform-origin: right center;
}

/* =========================================================
   header — XD y 0..80
   ========================================================= */
.header {
  position: relative;
  z-index: 30;
  height: 80px;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .16);
}

.header__inner {
  display: flex;
  align-items: center;
  width: var(--canvas);
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.header__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.header__logo {
  /* logo-mark.svg(61x29)の実比率で固定。TOP側のwidth:min(100%,223px)+
     aspect-ratio:223/26は旧ロゴ(ワードマーク)比率のままで新ロゴでは縦横比が
     崩れるため、ここは意図的にTOPへ合わせず正しい比率のまま維持 */
  width: 60px;
  height: 26px;
}

/* FV(スクロール前)はフル版ロゴ、追従ヘッダー(.is-fixed)化でショート版へ切り替え。
   コーポレートサイト(nihon-ma.co.jp)のFV/スクロール挙動に合わせる要望対応。
   TOP側と同一の見た目になるよう複合セレクタでサイズを明示指定する。
   タブレット/SP(1119px以下)は元々.header__serviceが非表示になる省スペース仕様のため
   対象外とし、常時ショート版のまま(従来の見た目を維持)。 */
.header__logo--short {
  display: none;
}

@media (min-width: 1120px) {
  .header__logo.header__logo--full {
    width: 225px;
    height: 26px;
  }

  .header__logo.header__logo--short {
    width: 60px;
    height: 26px;
  }

  .header.is-fixed .header__logo--full {
    display: none;
  }

  .header.is-fixed .header__logo--short {
    display: block;
  }
}

@media (max-width: 1119px) {
  .header__logo--full {
    display: none;
  }

  .header__logo--short {
    display: block;
  }
}

.header__service {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.gnav {
  margin-left: auto;
}

.gnav__list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gnav__item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  transition: opacity .2s;
}

.gnav__item a:hover {
  opacity: .65;
}

.gnav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* 国別M&Aポイント サブメニュー（P4・PC hover）— 仮の見た目。XDのベクターデータから正確な数値が読み取れないため後日調整 */
.gnav__item--has-child {
  position: relative;
}

/* サブメニューはマウスホバー時のみ表示。クリック時はfocus-withinで開閉させず、
   href="#"の標準動作(ページ最上部へ戻る)をそのまま使わせる */
.gnav__item--has-child:hover .gnav__sub,
.gnav__item--has-child:focus-within .gnav__sub {
  display: block;
}

.gnav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: 4px;
  z-index: 10;
}

.gnav__sub li:not(:last-child) {
  border-bottom: 1px solid var(--bg-grey);
}

.gnav__sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  background: #fff;
}

.gnav__sub a:hover {
  background: var(--bg-grey-3);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 15px;
}

/* header内のボタンはTOPと同じ固定pxで再指定する。.header__actionsは幅指定を持たない
   flexアイテムのため、.btn/.btn--smのwidth: min(100%, Npx)の"100%"の参照先が不定幅になり、
   ブラウザによってはflex-shrinkで意図せず縮んでしまう（実測: 1400px幅でbtn--smが
   122px→106pxまで縮小）。TOPはこれを避けるため.header__actions配下だけ固定pxで
   上書きしている（他セクションのKV/CTAボタンのmin(100%,Npx)はSP時の可変幅に必要なため
   そのまま） */
.header__actions .btn {
  width: 342px;
}

/* header内の矢印は本文CTAの実画像(31x31.5)ではなく、従来の小さいmask版(13x14)を使う。
   SP幅で.header__actions .btn--sm::after{content:""}により再表示された時もこれを継承する */
.header__actions .btn::after {
  right: 31px;
  width: 13px;
  height: 14px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.09 13.52'%3E%3Cpath d='M3.34 6.76 0 13.52 13.09 6.76 0 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.09 13.52'%3E%3Cpath d='M3.34 6.76 0 13.52 13.09 6.76 0 0Z'/%3E%3C/svg%3E");
}

.header__actions .btn--sm {
  width: 122px;
  box-shadow: none;
}

.header__actions .btn--beige {
  color: var(--gold-text);
}

.header__actions .btn--beige.btn--sm {
  width: 160px;
}

/* 追従ヘッダー（P5）— JSでスクロール量に応じて .header に付与 */
.header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.header.is-fixed+.breadcrumb {
  margin-top: 80px;
  /* .header の height(80px) と同値。固定化によるレイアウトのズレを吸収 */
}

/* =========================================================
   breadcrumb — XD bar y 69..125 (45px visible under header)
   ========================================================= */
.breadcrumb {
  display: flex;
  align-items: center;
  height: 45px;
  background: var(--bg-grey);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  width: var(--canvas);
  max-width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) 0 var(--gutter);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb__item+.breadcrumb__item::before {
  content: ">";
  margin: 0 9px;
}

.breadcrumb__item a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__item--current {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   key visual — XD y 125..662 (h 537)
   ========================================================= */
.kv {
  position: relative;
  /* バッジ追加分(margin-top 24px + 高さ40px = 64px)を確保するため537pxから拡張。
     下の余白がボタンぎりぎりまで詰まっていた問題の対策 */
  /* height ではなく min-height + padding-bottom にしている。固定高さ+overflow:hidden
     だと、ビューポートを狭めてリード文が1行増えた瞬間にボタンがKV下端まで下がり、
     次セクションと隙間なくくっつく（さらに狭いと切れる）。実測でシンガポールは
     790px未満、ベトナム/マレーシアは320px前後で発生していた。
     padding-bottom 42px = 1400px設計時のボタン下端からKV下端までの余白実測値。
     content 559px + 42px = 601px なので、設計幅での見た目は従来と1pxも変わらない。 */
  min-height: 601px;
  padding-bottom: 42px;
  overflow: hidden;
  color: #fff;
}

.kv__media {
  position: absolute;
  inset: 0;
}

.kv__photo {
  /* XD: image box x -6, y -115, 1406x959 with the KV band starting 240px in.
     Expressed relatively so the photo stays full-bleed above 1400px. */
  position: absolute;
  left: -.43%;
  top: -44.7%;
  width: 100.43%;
  height: auto;
  max-width: none;
}

.kv__overlay {
  position: absolute;
  inset: 0;
  opacity: .857;
  background: radial-gradient(ellipse 794px 304px at 50% 50%, #194b83 0%, #06182c 100%);
}

/* タイ/マレーシア/ベトナム/インドネシア：背景は先方PDFの埋め込み画像
   （1400x525、文字が乗る前の状態）をそのまま使用している。この画像には
   青のティント（.kv__overlay 相当）と網掛け（.kv__dots 相当）が既に
   焼き込み済みなので、CSS側で重ねると二重適用になる（チェックリスト(3)）。
   そのため両レイヤーを止め、写真のみを cover で敷く。
   シンガポールだけは無加工の元写真＋CSSオーバーレイの構成なので対象外。 */
.kv--baked-bg .kv__photo {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kv--baked-bg .kv__overlay,
.kv--baked-bg .kv__dots {
  display: none;
}

/* 支給デザインPNGではKVバッジの文字・枠線とも淡いクリーム #fde2a7 だが、
   実装は濃い金(--gold #9c7e39)になっていた。写真の明るい空が背景に来ると
   ほとんど読めなくなるため、デザイン実測値に合わせる。
   シンガポールも同じ不一致だが、確定済みページのため今回は対象外
   （先方確認事項として保留）。 */
.kv--baked-bg .kv__badge {
  border-color: #fde2a7;
  color: #fde2a7;
}

.kv__dots {
  /* 網掛け画像は XD 側の opacity .11 を書き出し時に焼き込み済み。
     ここで opacity を重ねると二重適用でほぼ見えなくなるため付けない。 */
  position: absolute;
  max-width: none;
  mix-blend-mode: soft-light;
}

.kv__dots--l1 {
  /* XD ファイル内に、ほぼ同一パターンの網掛けレイヤーが7〜9pxずれた
     状態で2つ重複配置されていた（作業中の複製し忘れと推定）。
     両方を描画すると正方形同士が重なって見えてしまうため、
     1つのみを採用している。 */
  /* 1400px キャンバス基準の絶対値のままだと、それより広い/狭いビューポート
     で中央寄せされた .inner とズレて左に流れて見えるため、キャンバス中心
     からの相対位置に変換している（.kv__watermark 等も同様）。 */
  left: calc((100% - var(--canvas)) / 2);
  top: 2px;
  width: 563px;
}

.kv__dots--r {
  left: calc((100% - var(--canvas)) / 2 + 839px);
  top: 1px;
  width: 562px;
}

.kv__watermark {
  position: absolute;
  left: calc((100% - var(--canvas)) / 2 + 1090px);
  height: 122px;
  width: auto;
  pointer-events: none;
}

.kv__inner {
  position: relative;
  z-index: 2;
  width: var(--canvas);
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
  padding: 0 30px;
  text-align: center;
}

.kv__title {
  /* XD baselines 261 / 329, YuMincho Extrabold 52/68 */
  padding-top: 85px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 52px;
  line-height: 68px;
}

.kv__badge {
  display: inline-block;
  margin-top: 24px;
  padding: 11px 28px;
  border: 1px solid var(--gold);
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
}

.kv__badge strong {
  margin-right: 6px;
  font-weight: 700;
}

.kv__lead {
  /* XD baselines 389.. , 16/27 */
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}

.kv__actions {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 35px;
}

/* シンガポールのみ：KVがテキスト左寄せ＋右側の正方形画像枠という左右分割構成
   （支給デザイン シンガポール.png 実測 / 先方回答「設立10周年という事で画像記載を予定」）。
   他4ヶ国はテキスト全幅のままなので .kv--split を付けたページだけに効かせる。
   1400pxキャンバス実測：テキスト左端 x=336、画像枠 x=792..1065・y=201..474（274x274）。
   336+1066≒1400 なので、テキスト+画像を幅730pxのブロックとして中央寄せすれば再現できる。
   ボタン(.kv__actions)は分割前と同じく全幅中央のままで正しい。 */
.kv--split .kv__inner {
  text-align: left;
}

.kv--split .kv__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  width: 790px;
  max-width: 100%;
  margin-inline: auto;
  /* 画像枠の上端 y=201（KV上端 y=125 から 76px） */
  padding-top: 76px;
}

.kv--split .kv__body {
  flex: 0 1 480px;
  min-width: 0;
}

.kv--split .kv__title {
  /* .kv__cols 側で 76px 確保済み。タイトルは画像枠より 17px 下がる */
  padding-top: 17px;
}

/* 支給デザインではバッジは1行（実測 x=336..755 の419px）。テキスト列が426pxしか
   ないため既定の左右パディング28pxのままだと2行に折り返してしまう。
   実測幅に合わせてパディングを詰め、折り返しを禁止する。 */
.kv--split .kv__badge {
  padding-inline: 17px;
  white-space: nowrap;
}

/* 先方から本番画像を受領したら、この枠の中身を img に差し替えるだけで済むよう
   枠側でアスペクト比と背景（プレースホルダー色）を持たせている。
   .kv__cols は align-items:flex-start のため、本番写真が上端に張り付いて
   テキストブロックより低い位置で浮いて見える。align-selfでこの枠だけ
   テキストブロックの高さに対して縦中央に揃える */
.kv--split .kv__figure {
  flex: 0 0 274px;
  align-self: center;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: #ededed;
  overflow: hidden;
}

.kv--split .kv__figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   stage: shared grey backdrop + decorative layers
   ========================================================= */
.stage {
  position: relative;
  overflow: hidden;
}

.stage--environment {
  background: var(--bg-grey);
}

.stage--regulation {
  /* 株主関係〜その他留意点の全体背景。section04_bg01/02(各1400x1050)を
     縦に交互タイル(1050pxずつ位置をずらして重ねる)。
     2026-08-13: Excel指摘により、1400px上限で中央に敷き左右を単色で埋める
     方式をやめ、常にwidth100%(画面幅いっぱい)に敷く方式に変更 */
  background-color: var(--bg-grey-3);
  background-image: url("/service/crossborder/img/section04_bg01.webp"), url("/service/crossborder/img/section04_bg02.webp");
  background-repeat: repeat-y, repeat-y;
  background-size: 100% 1050px, 100% 1050px;
  background-position: center 0, center 1050px;
}

/* 2026-08-13: KV直後の継ぎ目を無くすため、個別のradial-gradient(.stage__glow)3枚を
   廃止し、TOPページと同じ手法(service_cases_bg.webp 1枚をEnvironment〜Pointsの
   背景全体にobject-fit:fillで敷く)に統一 */
.stage__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.stage__dots {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.stage__dots--env {
  left: calc((100% - var(--canvas)) / 2 + 46px);
  top: 66.5px;
  width: 1307px;
}

/* =========================================================
   business environment — XD y 664..1290
   ========================================================= */
.environment {
  position: relative;
  padding-top: 80px;
}

.deco-en--environment {
  left: calc((100% - min(var(--canvas), 100%)) / 2 + 50px);
  top: 50px;
}

.deco-en--environment::after {
  content: none;
}

.environment .sec-label {
  /* PC(≧1120px)ではdeco-enが通常フロー化しmargin-bottom:50pxを持つため0。
     SP/タブレットの絶対配置deco-enを避けるための旧値(136px)は
     @media (max-width: 1119px)で復元 */
  padding-top: 0;
  text-align: center;
}

.environment .sec-title--gold {
  margin-top: 11px;
  text-align: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 245px);
  justify-content: space-between;
  margin-top: 35px;
}

.stats__item {
  height: 195px;
  padding-top: 25px;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.stats__label {
  /* ラベルが1行のカードと2行のカードが混在すると、この下の.stats__valueの
     開始位置が1行ぶん(27px)ズレてガタつくため、常に2行ぶんの高さを確保して
     1行の場合は縦中央に寄せる(2行のラベルは元々ぴったり収まるので見た目は変わらない) */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: 18px;
  font-weight: 700;
  /* line-height: 27px; */
      line-height: 20px;
  color: var(--navy-strong);
}

/* FMCG市場成長率のように別行の.stats__captionで2行相当になっているラベルは、
   ラベル自体は1行のままでよい(中央寄せすると逆にキャプション込みの合計高さがズレる) */
.stats__label:has(+ .stats__caption) {
  display: block;
  min-height: 0;
}

.stats__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-top: 11px;
  color: var(--gold-dark);
}

/* ベトナムの人口(「約」＋6桁＋「万人」)は5px×2箇所のgapを含めると245px幅の
   カードに対し約6px横にはみ出すため、gapだけ詰める(数値自体は他カードと同じ
   stats__num--smを使用) */
.stats__value--tight {
  gap: 1px;
}

.stats__num {
  font-family: var(--font-en);
  font-size: 66px;
  line-height: 1;
  /* 数値の途中(「3〜5」の波ダッシュの後ろ等)で折り返すと、.stats__itemは
     height固定なので2行目がカードの外へはみ出す */
  white-space: nowrap;
}

/* 「3〜5」のような範囲表記のダッシュ。全角の「〜」は欧文フォント(--font-en)に
   グリフが無く和文フォントの全角幅(=font-sizeと同じ86px)で描かれるため、
   数値全体が幅245pxのカードに収まらずタブレット幅で折り返していた。
   支給PDFでも数字より小さい欧文チルダで組まれているので、それに合わせる */
.stats__tilde {
  font-size: .5em;
  margin: 0 .02em;
}

.stats__num--sm {
  /* フォントサイズが小さい分、文字上部の空き(アセント)も比例して小さくなり、
     ボックスの上端(.stats__value)は他カードと揃っていても文字の見た目の開始位置が
     上にずれて見える。position:relativeでの微調整はレイアウト(baseline整列)に
     影響しないため、見た目だけを実測値ぶん(6px)下げて揃える */
  position: relative;
  top: 6px;
  font-size: 62px;
}

.stats__unit {
  white-space: nowrap;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}

.stats__caption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy-strong);
}

.environment__note {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  text-align: center;
}

/* =========================================================
   reasons — XD y 1300..1830
   ========================================================= */
.reasons {
  position: relative;
  /* PC(≧1120px): 前セクション(environment)からの内部遷移も80pxに統一。
     旧値(177px)は@media (max-width: 1119px)で復元 */
  padding-top: 80px;
}

.deco-en--reasons {
  right: calc((100% - min(var(--canvas), 100%)) / 2 + 50px);
  top: 60px;
}

.deco-en--reasons::after {
  content: none;
}

.reasons .sec-title--gold {
  margin-bottom: 45px;
}

.reasons .card {
  padding-left: 35px;
  padding-right: 29px;
}

/* =========================================================
   points — XD y 1830..2555
   ========================================================= */
.points {
  position: relative;
  /* PC(≧1120px): 前セクション(reasons)からの内部遷移も80pxに統一。
     旧値(188px)は@media (max-width: 1119px)で復元 */
  padding: 80px 0 80px;
}

.deco-en--points {
  left: calc((100% - min(var(--canvas), 100%)) / 2 + 50px);
  top: 60px;
}

.deco-en--points::after {
  content: none;
}

.points .sec-title--gold {
  margin-bottom: 45px;
}

.points .card--num {
  padding-top: 43.5px;
  padding-left: 29px;
  padding-right: 37px;
}

.points .card__title {
  text-align: left;
}

.points .card__no {
  left: 5px;
}

.points .card__title {
  margin-bottom: 15px;
}

/* =========================================================
   case — XD y 2555..3020 (white)
   ========================================================= */
.case {
  position: relative;
  padding: 80px 0 80px;
  background: #fff;
  overflow: hidden;
}

.deco-en--case {
  right: calc((100% - min(var(--canvas), 100%)) / 2 + 57px);
  top: 32.5px;
  color: var(--bg-grey);
}

.deco-en--case::after {
  content: none;
  left: auto;
  right: 0;
  bottom: -7.5px;
}

.case .sec-title {
  position: relative;
  z-index: 2;
  margin-bottom: 54px;
}

.case-card {
  display: flex;
  flex-wrap: wrap;
  min-height: 243px;
  background: var(--bg-grey-2);
  box-shadow: var(--card-shadow);
}

.case-card__img {
  flex: none;
  width: 330px;
  /* 高さ固定だと.case-card__bodyの実際の高さ(可変)と揃わなくなるため、
     行の高さに合わせて伸縮させる(align-items:stretchのデフォルト挙動を利用) */
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

.case-card__body {
  position: relative;
  flex: 1;
  /* 「続きを読む」の下に余白がなくカード端に接していたため下paddingを追加 */
  padding: 47px 0 28px 39px;
}

.case-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 37px;
  color: var(--navy);
}

.case-card__text {
  width: 552px;
  max-width: 100%;
  margin-top: 9px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}

.case-card__more {
  display: flex;
  align-items: center;
  gap: 12.5px;
  margin: 5px 32.5px 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-strong);
}

.case-card__more:hover {
  opacity: .7;
}

/* 事例カード展開時の記事本文（XD: 02_PC_SGP_ACCORD） */
.case-detail__inner {
  padding: 42px 41px 46px 55px;
}

.case-detail__tables {
  display: grid;
  grid-template-columns: repeat(2, 450px);
  justify-content: space-between;
  margin-bottom: 30px;
}

/* 「※M&A実行当時の情報」注記(.case-detail__a)がテーブル直後に来るページでは、
   注記がテーブルの脚注だと分かるようテーブル側へ寄せる(下のイントロ文との間隔は
   .case-detail__a + .case-detail__intro側で確保済み) */
.case-detail__tables:has(+ .case-detail__a) {
  margin-bottom: 8px;
}

.case-detail__tables + .case-detail__a {
  margin-top: 8px;
}

.case-table {
  width: 450px;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
  text-align: left;
}

.case-table__caption {
  padding: 6px 14px;
  background: #fff;
  border-bottom: 1px solid var(--bg-grey);
  font-weight: 700;
  text-align: left;
}

.case-table th,
.case-table td {
  padding: 5px 10px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: top;
}

.case-table th {
  width: 110px;
  text-align: center;
  border-right: 1px solid var(--bg-grey);
}

.case-detail__intro {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/* 「※M&A実行当時の情報」注記(.case-detail__a)が譲受/譲渡テーブル直後に来るページ
   (タイ・マレーシア)では、注記の下に間隔が無いとイントロ文の一部に見えてしまい、
   どのテーブルへの注記か伝わりにくいため、イントロ文側に余白を追加して切り離す */
.case-detail__a + .case-detail__intro {
  margin-top: 30px;
}

.case-detail__heading {
  position: relative;
  margin: 40px 0 22px;
  padding-left: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 31px;
}

.case-detail__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--navy);
}

.case-detail__q {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}

.case-detail__a {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.case-detail__figure {
  margin: 40px 0 0;
  text-align: center;
}

.case-detail__figure img {
  /* インドネシアのように1つのfigureに写真を2枚積む場合があるため block 中央寄せにする
     （inline のままだと画像間に行送り分の隙間が入り、PDFの「隙間なく縦積み」と合わない） */
  display: block;
  margin-inline: auto;
  width: 600px;
  max-width: 100%;
  height: auto;
}

.case-detail__figure figcaption {
  width: 600px;
  max-width: 100%;
  margin-top: 14px;
  margin-inline: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

.consultant {
  display: flex;
  gap: 30px;
  margin-top: 48px;
  padding: 23px 30px 25px 29px;
  background: #fff;
}

.consultant__photo {
  flex: none;
  width: 120px;
  height: 144px;
  object-fit: cover;
}

.consultant__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
}

.consultant__text {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.consultant__note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
}

.is-open>.case-card__body .case-card__more {
  display: none;
}

.case-detail__close {
  display: flex;
  align-items: center;
  gap: 12.5px;
  width: fit-content;
  margin: 30px 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-strong);
}

.case-detail__close:hover {
  opacity: .7;
}

.is-open .icon-plus::after {
  transform: scaleY(0);
}

.icon-plus::after {
  transition: transform .3s;
}

.js-accordion-panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.is-open>.js-accordion-panel {
  max-height: none;
}

/* =========================================================
   support — XD y 3020..3695
   ========================================================= */
.support {
  position: relative;
  padding: 80px 0 80px;
  background: var(--bg-grey-2);
  overflow: hidden;
}

.deco-en--support {
  left: calc((100% - min(var(--canvas), 100%)) / 2 + 42px);
  top: 29.5px;
}

.deco-en--support::after {
  content: none;
}

.support .sec-title {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.support__main {
  display: flex;
  gap: 48px;
}

.support__photo {
  position: relative;
  z-index: 2;
  flex: none;
  width: 510px;
  height: 341px;
  object-fit: cover;
}

.support__body {
  flex: 1;
}

.support__text {
  margin-top: -5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}

.member {
  display: flex;
  gap: 20px;
  width: 490px;
  margin-top: 14px;
  padding: 26px 26px 26px 29px;
  background: #fff;
}

.member__photo {
  position: relative;
  z-index: 2;
  flex: none;
  width: 126px;
  height: 169px;
  background: #ededed;
  object-fit: cover;
}

.member__name {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 18px;
  /* line-height: 1; */
  line-height: 0.8rem;
  padding-top: 1px;
}

.member__text {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.office {
  margin-top: 34px;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  text-align: center;
}

.office__label {
  margin-top: 9px;
}

.office__name {
  margin-top: 9px;
}

.office__label a,
.office__name a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   CTA band — XD y 3692..3919 (h 227)
   ========================================================= */
/* 帯画像は1440pxを100%として扱い、1440pxを超える幅では拡大せず中央で固定する。
   （以前は cover だったため、広い画面ほど画像が引き伸ばされていた）
   はみ出した左右は #224e83 → #19375a の縦グラデーションで伸ばす。
   帯画像の左右端自体が上#224e82→下#193a5fの縦グラデなので、単色で伸ばすと
   上側に横方向の継ぎ目が出る。同じグラデーションで伸ばせばどの高さでも一致する。 */
.cta {
  position: relative;
  height: 235px;
  overflow: hidden;
  background:
    url("/service/crossborder/img/ct_bg.webp") center top / min(100%, 1440px) 100% no-repeat,
    linear-gradient(180deg, #224e83 0%, #19375a 100%) center top / 100% 100% no-repeat;
  background-color: #19375a;
  color: #fff;
}

.cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta__title {
  padding-top: 50px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
}

.cta__actions {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 29px;
}

/* =========================================================
   regulation specs — XD y 3919..6304
   ========================================================= */
.spec {
  padding-top: 75px;
}

.spec .sec-title {
  margin-bottom: 50px;
}

.spec--shareholder {
  padding-top: 80px;
}

.spec--shareholder .card {
  min-height: 158px;
}

.spec--organ .card {
  padding-top: 32.5px;
  padding-left: 35px;
  padding-right: 31px;
}

.spec--organ .card:not(.card--wide) .card__title {
  margin-right: 24px;
}

.spec--organ .card:nth-child(3),
.spec--organ .card:nth-child(4) {
  min-height: 170px;
}

.spec--organ .card--wide {
  min-height: 143px;
}

.spec--others .card {
  min-height: 247px;
}

/* ベトナムの3カード(言語の規制/労働関係/土地)はいずれも1行程度の短文で、
   共通のmin-height(247px)だと下部に大きな空白ができるため、実際の
   テキスト量(約158px)に合わせて上書き(このページのみ適用) */
.spec--others .card.card--sm {
  min-height: 158px;
}

.spec--others {
  /* PC(≧1120px): 前セクション(spec--foreign)からの内部遷移も80pxに統一。
     旧値(88px)は@media (max-width: 1119px)で復元 */
  padding-top: 80px;
  padding-bottom: 80px;
}

.spec--organ {
  /* PC(≧1120px): 前セクション(spec--shareholder)からの内部遷移も80pxに統一。
     旧値(73px)は@media (max-width: 1119px)で復元 */
  padding-top: 80px;
}

.spec--foreign {
  /* PC(≧1120px): 前セクション(spec--organ)からの内部遷移も80pxに統一
     (従来は.specの75pxを継承していた)。旧値は@media (max-width: 1119px)で復元 */
  padding-top: 80px;
}

.spec--organ .card-grid {
  grid-auto-rows: min-content;
  row-gap: 33px;
}

.spec--organ .sec-title {
  margin-bottom: 50px;
}

.spec--shareholder .sec-title {
  margin-bottom: 50px;
}

.spec--others .sec-title {
  margin-bottom: 50px;
}

.card--tall {
  min-height: 354px;
}

/* タイのみ会社組織/設置機関の文章量が短く、共通のmin-height(354px)だと
   下部に大きな空白ができるため、実際のテキスト量(約244px)に合わせて上書き */
.card--tall-sm {
  min-height: 244px;
}

.notes {
  margin-top: 66px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/* FAQ末尾の「ご利用にあたって」枠。その他留意点セクションの.notesは枠なしのまま流用 */
.notes-box {
  position: relative;
  z-index: 2;
  margin-top: 66px;
  padding: 32px 40px;
  background: var(--bg-grey-3);
  border: 1px solid var(--navy);
  text-align: center;
}

.notes-box__title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-strong);
}

.notes-box .notes {
  margin-top: 0;
}

/* =========================================================
   column — XD y 6531..7226
   ========================================================= */
.column {
  position: relative;
  padding: 80px 0 80px;
  background: var(--bg-grey);
  overflow: hidden;
}

.column__dots {
  /* opacity は書き出し時に焼き込み済み（.kv__dots と同様） */
  position: absolute;
  left: 0;
  top: 0;
  width: 622px;
  max-width: none;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.deco-en--column {
  left: calc((100% - min(var(--canvas), 100%)) / 2 + 39px);
  top: 42.5px;
}

.deco-en--column::after {
  content: none;
}

.column__title {
  position: relative;
  z-index: 2;
  margin-bottom: 37px;
  padding-left: 8px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
}

.column__grid {
  display: grid;
  grid-template-columns: 400px 615px;
  gap: 35px;
}

.col-card {
  position: relative;
  display: block;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

.col-card:hover {
  transform: translateY(-3px);
}

.col-card--lead .col-card__img {
  width: 360px;
  height: 259px;
  object-fit: cover;
  object-position: 34% 50%;
  margin: 20px 0 0 20px;
}

.col-card--lead .col-card__body {
  padding: 0 23px 28px;
}

.col-card--lead .icon-arrow {
  right: 33px;
  bottom: 41px;
}

.col-card--lead .col-card__excerpt {
  width: 314px;
  margin-top: 7px;
}

.col-card--row {
  display: flex;
  gap: 16px;
  height: 133px;
  padding: 19px 23px 19px 19px;
}

.col-card--row .col-card__img {
  flex: none;
  width: 133px;
  height: 95px;
  object-fit: cover;
}

.col-card--row .col-card__body {
  flex: 1;
}

.col-card--row .col-card__title {
  margin-top: 4px;
}

.column__list {
  display: grid;
  gap: 20px;
}

.col-card__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.col-card__title {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.col-card__excerpt {
  width: 398px;
  max-width: 100%;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--navy);
}

/* =========================================================
   FAQ — XD y 7226..7877
   ========================================================= */
.faq {
  position: relative;
  padding: 70px 0 80px;
  background: var(--bg-grey-3);
  overflow: hidden;
}

.faq__dots {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 1513px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.deco-en--faq {
  left: 50%;
  top: 40.5px;
  transform: translateX(-50%);
}

.deco-en--faq::after {
  content: none;
}

.faq__title {
  position: relative;
  z-index: 2;
  margin-bottom: 70px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.faq__list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.faq-item {
  background: #fff;
  box-shadow: var(--card-shadow);
}

.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 21px 21px 23px 27px;
  text-align: left;
  transition: padding-bottom .35s ease;
}

.is-open>.faq-item__q {
  padding-bottom: 17.5px;
}

.faq-item__mark {
  flex: none;
  display: block;
  width: 21px;
  height: auto;
  margin-top: 2px;
}

.faq-item__mark--a {
  width: 26px;
}

.faq-item__q .faq-item__text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--navy);
}

.faq-item__a-inner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 27px;
  padding: 11.5px 0 19px;
  border-top: 1px solid var(--line);
}

/* インドネシアのみ回答に要約(lead)があり、lead+本文をラップする無名divが
   flex子要素になる。flex:1/min-width:0がないと中の.faq-item__textの
   max-width:100%がこのdivの幅を正しく参照できず、コンテナ幅を超えてしまう */
.faq-item__a-inner>div {
  flex: 1;
  min-width: 0;
}

.faq-item__a-inner .faq-item__text {
  width: 957px;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.faq-item__lead {
  width: 957px;
  max-width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 24px;
}

.faq-item__highlight {
  padding: 2px 4px;
  background: var(--bg-grey);
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   footer — XD y 7875..8437
   ========================================================= */
/* CTAと同じく、帯画像は1440pxを100%として扱い、それ以上の幅では拡大せず中央で固定。
   はみ出した左右は背景色 #16314f (--navy) で伸ばす。 */
.footer__nav-area {
  position: relative;
  /* height: 345px; */
  background:
    url("/service/crossborder/img/section_crossborder_fotter_bg.webp") center top / min(100%, 1440px) 100% no-repeat,
    var(--navy);
  overflow: hidden;
  color: #fff;
}

.footer__nav-area .inner {
  position: relative;
  z-index: 2;
  /* 汎用.innerクラスのタブレット/SP用オーバーライド(--inner:100%、max-width:100%+
     padding-inline:24px)はコンテンツセクション向けであり、フッターは常にTOPと同じ
     固定幅(1050px、60px=左右30pxずつを上限に縮小)にしたいため、詳細度の高い
     このセレクタで明示的に固定する */
  width: 1050px;
  max-width: calc(100% - 60px);
  padding-inline: 0;
  margin-inline: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}

.footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 39px;
}

.footer__logo {
  width: 268px;
  height: 31px;
}

.footer__service {
  font-size: 20px;
  font-weight: 700;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 33px;
}

.footer-nav__item {
  grid-column: span 2;
}

.footer-nav__item--sm {
  grid-column: span 1;
}

.footer-nav__item a {
  display: flex;
  align-items: center;
  height: 79px;
  background: rgba(255, 255, 255, .1);
  transition: background-color .25s;
}

.footer-nav__item a:hover {
  background: rgba(255, 255, 255, .22);
}

.footer-nav__item img {
  /* XD thumbnail widths vary per country image (116-142px) */
  flex: none;
  width: 100px;
  height: 79px;
  object-fit: cover;
}

.footer-nav__item span {
  flex: 1;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* タブレット幅：固定140px画像+nowrapテキストのままだとグリッドが縮まずはみ出すため縮小 */
.footer__info {
  padding: 50px 0 50px;
  overflow: hidden;
  background: #fff;
  color: #000;
}

.footer__info-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 1050px;
  max-width: calc(100% - 60px);
  margin-inline: auto;
}

.footer__info-col {
  display: flex;
  flex-direction: column;
}

.footer__info-col--left {
  flex: none;
  align-items: flex-start;
  gap: 20px;
}

.footer__info-logo img {
  display: block;
  width: 223px;
  height: auto;
}

.footer__badges {
  display: flex;
  flex: none;
  align-items: center;
  gap: 21px;
  height: 76px;
}

/* JPX PRIME(61x72) / M&A支援機関協会(176.38x92.63) / ISMS+ISO27001(208x144, @2x)を
   高さ72pxで横並びにすると、旧footer_badges.svg(345x76)と同じ見た目になる */
.footer__badge {
  display: block;
  width: auto;
  height: 72px;
}

.footer__notes {
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
}

.footer__info-col--right {
  align-items: flex-end;
  gap: 50px;
}

.footer-links {
  display: flex;
  align-items: flex-start;
  width: min(100%, 476px);
  font-size: 11px;
  line-height: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.footer-links__col:first-child {
  flex: none;
  width: 230px;
}

.footer-links__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 1000px) and (min-width: 769px) {
  .footer-links {
    flex-direction: column;
    align-self: flex-start;
    width: min(100%, 476px);
    gap: 8px;
  }

  .footer-links__col:first-child {
    width: auto;
  }

  .footer-links__col ul {
    gap: 8px;
  }

  .footer__info-col--right {
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 0%;
    min-width: 0;
  }

  .footer__meta {
    align-self: flex-end;
  }
}

.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.footer__sns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.footer__sns-link {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

/* 各アイコンSVGは背景色込みで自己完結しているため、
   linkそのものには背景色/角丸を持たせず、画像をそのまま表示する */
.footer__sns-link img {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__copy {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* SP専用パーツ（PCでは非表示） */
.header__menu,
.header__consult,
.drawer__close {
  display: none;
}

.header__nav-area {
  display: contents;
}

.gnav__sub {
  display: none;
}

a.footer-nav-img {
  width: 100%;
}

a.footer-nav-img-vi {
  width: 100%;
}


a.footer-nav-img>img {
  width: 100px;
}



/* =========================================================
   responsive
   PC は XD アートボード 02_PC_SGP（1400px）
   SP は XD アートボード 05_SP_SGP（375px）に準拠
   ========================================================= */
@media (max-width: 1399px) {
  .kv__watermark {
    left: calc(100vw - 335px);
  }
}

/* ---------- タブレット：PCレイアウトを流動化 ---------- */
@media (max-width: 1119px) and (min-width: 769px) {
  /* 2026-08-13: 固定height:227pxだと、幅が狭くなりcta__titleが2行に折り返した際に
     ボタン下の余白(42px)が潰れる不具合があったため、SP同様paddingベースの
     可変高さに変更(1行時は従来と同じ227px相当になる値) */
  .cta {
    height: auto;
    padding-bottom: 42px;
  }

  /* 譲受/譲渡テーブルが固定450px×2列のため、幅が900px+パディングを下回るとくっつく */
  .case-detail__tables {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .case-table {
    width: 100%;
  }

  /* .column__gridは下の1fr 1.4fr指定で既にタブレット対応済みだが、
     lead画像側が固定360px幅のままはみ出すため合わせて縮小 */
  .col-card--lead .col-card__img {
    width: calc(100% - 30px);
    height: 217px;
    margin: 15px 0 0 15px;
    object-position: center;
  }

  :root {
    --inner: 100%;
  }

  .inner {
    max-width: 100%;
    padding-inline: 24px;
  }

  /* TOPページのタブレット専用パッチをポート。gap/font-sizeを縮めないと
     .header{height:80px固定}+.gnav__list{display:flex, nowrap}のままでは
     ナビ項目・ヘッダーボタンが収まりきらずはみ出す（ロゴはTOPと違い常に
     60x26固定の意図的な仕様のため、ここでは上書き不要） */
  .header__inner {
    padding-inline: 16px;
  }

  .gnav__list {
    gap: 10px;
  }

  .gnav__item a {
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  .gnav__caret {
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 4px;
  }

  .header__actions {
    gap: 6px;
    margin-left: 8px;
  }

  .header__actions .btn--sm {
    width: 96px;
    font-size: 10px;
  }

  .header__actions .btn--beige.btn--sm {
    width: 132px;
  }

  /* 同上：footer-nav__item(国別サムネイル5枚)もPC用の140x79固定のままだと
     5枚分の幅が.innerに収まらない */
  .footer-nav__item img {
    width: 100px;
    height: 61px;
  }

  .footer-nav__item a {
    height: 61px;
  }

  .footer-nav__item span {
    font-size: 13px;
    white-space: normal;
  }

  /* .footer__nav-area .inner / .footer__info の上下余白はPC(≧1120px)のみ50pxに
     統一(TOPと同じ)。タブレットはTOPと同じく旧値のまま維持する */
  .footer__nav-area .inner {
    padding-top: 46px;
  }

  .footer__info {
    padding: 31px 0 47px;
  }

  .environment .sec-label,
  .environment .sec-title--gold {
    margin-left: 0;
    text-align: center;
  }

  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* シンガポールKVの金枠バッジは.kv--splitでnowrap指定のため、タブレット下限
     （769〜774px）でテキスト枠が本文カラムから数pxはみ出す。収まらない時だけ
     2行に折り返させる（収まる幅では従来どおり1行のまま） */
  .kv--split .kv__badge {
    white-space: normal;
  }

  /* カードが狭くなるとラベルが3行になり(例：シンガポール「（2030年代に700万目標）」、
     タイ「（ASEAN第1位、世界第3位）」)、その分だけ数値が押し下げられて
     固定高さ195pxのカードの外へはみ出す。gridなので高さを可変にしても
     4枚とも行の最大高さに揃う。padding-bottomは元の余白(195-176=19px)を維持する値 */
  .stats__item {
    height: auto;
    min-height: 195px;
    padding-inline: 8px;
    padding-bottom: 19px;
  }

  .column__grid {
    grid-template-columns: 1fr 1.4fr;
  }

  /* 右カラムが狭くなりタイトル/抜粋が固定高さ133pxに収まらず、
     カード外(白背景の外)に文字が溢れるため、高さを可変にする */
  .col-card--row {
    height: auto;
    min-height: 133px;
  }

  .case-card__text,
  .faq-item__a-inner .faq-item__text,
  .col-card--lead .col-card__excerpt,
  .col-card--row .col-card__excerpt {
    width: auto;
  }

  .support__photo {
    width: 42%;
    height: auto;
  }

  .member {
    width: 100%;
  }
}

/* タブレット帯の破綻対策。閾値960pxは実測から決めた値：
   .stats：4カラムのmin-content合計が最も大きいマレーシア（3~5% / 約3,400万人 /
   約120万社 / 約160件）で、4カラムを維持するにはビューポート928px以上が必要。
   それ未満だとカードが.innerからはみ出して右端の余白が消える。
   （.footer__infoは.footer__info-gridのflex-wrapと各カラムの内包幅で
   自然に折り返すため、専用の破綻対策は不要になった） */
@media (max-width: 960px) and (min-width: 769px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC/タブレット(≦1119px)の共通余白。SPは下の@media(max-width:768px)ブロックで
   個別に上書きされるため、SP専用ルールより前(source order上)に置く必要がある
   （後にあるルールが同specificityで勝つため、逆順だとSP側の調整が無効化される） */
@media (max-width: 1119px) {
  .environment {
    padding-top: 100px;
  }

  .environment .sec-label {
    padding-top: 20px;
  }

  .reasons {
    padding-top: 150px;
  }

  .points {
    padding: 150px 0 75px;
  }

  .case {
    padding: 64px 0 64px;
  }

  .support {
    padding: 80px 0 50px;
  }

  .spec--shareholder {
    padding-top: 67px;
  }

  .spec--organ {
    padding-top: 50px;
  }

  .spec--foreign {
    padding-top: 50px;
  }

  .spec--others {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .column {
    padding: 50px 0 50px;
  }

  /* 背景の"Column"あしらい(top:42.5px起点)の下端が769〜1119px幅で最大121px(1119px時)
     まで達し、.column__titleには元々top方向の余白指定がないため重なる。タイトル側に
     クリアランスを追加する */
  .column__title {
    padding-top: 90px;
  }

  .faq {
    padding: 81px 0 72px;
  }
}

/* =========================================================
   SP（XD 05_SP_SGP / 375px 基準）
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --inner: 100%;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: inline;
  }

  .inner {
    width: 100%;
    max-width: 100%;
    padding-inline: 19px;
  }

  /* ---------- ヘッダー：XD 375x59 ---------- */
  .header {
    height: 59px;
    box-shadow: 0 10px 5px rgba(0, 0, 0, .16);
  }

  .header__inner {
    position: relative;
    justify-content: center;
    padding: 0;
  }

  .header__menu {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    background: #214d75;
    z-index: 2;
  }

  .header__menu-bars,
  .header__menu-bars::before {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff;
    transition: transform .25s;
  }

  /* 2本目(::before)は transform で下へずらすだけでレイアウト上の高さを持たない。
     そのため flex の中央寄せが1本目だけを基準にしてしまい、アイコン全体が
     ボタン中心より 5.5px 下がる。2本目の分の余白を持たせて、2本合わせた
     見た目の中心をボタンの中心に合わせる（レビュー指摘 SP TOP：menuが中央でない） */
  .header__menu-bars {
    margin-bottom: 11px;
  }

  .header__menu-bars::before {
    content: "";
    transform: translateY(11px);
  }

  /* ×印は2本を「ボタン中心」で交差させる。1本目は中心より 5.5px 上にあるので
     5.5px 下げてから回す。rotate を先に書くと translateY が回転後のローカル軸に
     沿ってしまい、画面上では左下(-3.89, +3.89)へずれるため、順序は translateY が先。 */
  .is-drawer-open .header__menu-bars {
    transform: translateY(5.5px) rotate(45deg);
  }

  .is-drawer-open .header__menu-bars::before {
    transform: rotate(-90deg) translateY(0);
  }

  .header__brand {
    flex-direction: column;
    gap: 4px;
  }

  .header__logo {
    /* 2026-08-13: logo-mark.svg差し替え(旧ロゴ比8.6:1→新ロゴ比2.1:1)により、
       width指定のみ(height:auto)だと縦が引き伸ばされるため両方明示 */
    width: 60px;
    height: 26px;
  }

  .header__service {
    font-size: 10px;
    line-height: 1;
  }

  /* 右上の金色「無料相談」ボタン：XD 59x59 #9c7e39 */
  .header__consult {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 59px;
    height: 59px;
    background: var(--gold);
    color: #fff;
    z-index: 2;
  }

  .header__consult-icon {
    width: 23px;
    height: 23px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: var(--icon-chat);
    mask-image: var(--icon-chat);
  }

  .header__consult-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .068em;
    line-height: 1;
  }

  /* ---------- ドロワー：XD 06_SP_NAVI ---------- */
  .header__nav-area {
    display: block;
    position: fixed;
    left: 0;
    top: 59px;
    width: 100%;
    height: calc(100dvh - 59px);
    padding: 36px 25px 40px;
    background: #214d75;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 40;
  }

  .is-drawer-open .header__nav-area {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .gnav {
    margin: 0;
  }

  .gnav__list {
    display: block;
  }

  .gnav__item>a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid #2d6291;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .gnav__item:not(.gnav__item--has-child)>a::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: var(--icon-arrow);
    mask-image: var(--icon-arrow);
  }

  .gnav__item--has-child>a {
    border-bottom: 0;
    margin-bottom: 8px;
    padding-bottom: 0;
  }

  .gnav__caret {
    display: none;
  }

  .gnav__sub {
    position: static;
    display: block;
    padding-left: 37px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    z-index: auto;
  }

  /* PC のドロップダウン用の区切り線はドロワーでは不要 */
  .gnav__sub li:not(:last-child) {
    border-bottom: 0;
  }

  .gnav__sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: none;
  }

  .gnav__sub a:hover {
    background: rgba(255, 255, 255, .15);
  }

  .gnav__sub a::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: var(--icon-arrow);
    mask-image: var(--icon-arrow);
  }

  .header__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* ボタンはmax-width:325pxで頭打ちになるため、トラック幅が広い端末では
       左寄せのまま残る。中央に置く */
    justify-items: center;
    gap: 17px;
    margin: 44px 0 0;
  }

  /* TOPと同じくSP(ドロワー内)のヘッダーボタンはフルワイド+シャドウ+矢印付きにする
     （デスクトップ/タブレットの小型ボタンとは別の見た目） */
  .header__actions .btn:not(.btn--sm) {
    width: 100%;
    max-width: 325px;
    height: 67px;
    margin-inline: auto;
  }

  .header__actions .btn--sm,
  .header__actions .btn--beige.btn--sm {
    width: 100%;
    max-width: 325px;
    height: 67px;
    margin-inline: auto;
    border-width: 2px;
    border-radius: 10px;
    font-size: 22px;
    box-shadow: var(--card-shadow);
  }

  .header__actions .btn--sm::before {
    height: 33px;
    border-radius: 3px 3px 33px 33px;
  }

  .header__actions .btn--sm::after {
    content: "";
  }

  .header__actions .btn--beige {
    padding-right: 20px;
  }

  .header__actions .btn--sm .btn__label {
    font-size: 18px;
  }

  .drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .drawer__close-icon {
    position: relative;
    width: 14px;
    height: 14px;
  }

  .drawer__close-icon::before,
  .drawer__close-icon::after {
    content: "";
    position: absolute;
    inset: 6px 0 auto;
    height: 2px;
    background: currentColor;
  }

  .drawer__close-icon::before {
    transform: rotate(45deg);
  }

  .drawer__close-icon::after {
    transform: rotate(-45deg);
  }

  /* ---------- 共通ボタン：XD 325x67 ---------- */
  .btn:not(.btn--sm) {
    width: 100%;
    max-width: 325px;
    height: 67px;
    margin-inline: auto;
  }

  .btn--sm,
  .btn--beige.btn--sm {
    width: 100%;
    max-width: 325px;
    height: 67px;
    margin-inline: auto;
    border-width: 2px;
    border-radius: 10px;
    font-size: 22px;
    box-shadow: var(--card-shadow);
  }

  .btn--sm::before {
    height: 33px;
    border-radius: 3px 3px 33px 33px;
  }

  .btn--sm::after {
    content: "";
  }

  .btn--beige {
    padding-right: 20px;
  }

  .breadcrumb {
    display: none;
  }

  /* ---------- KV：XD 375x436 ---------- */
  .kv {
    /* バッジ追加分(margin-top 17px + 高さ27px = 44px)を確保するため拡張。
       追加前はボタンがセクション下端をはみ出してクリップされていた */
    /* PC側と同じ理由で min-height 化。29px = 375px設計時のボタン下端〜KV下端の実測余白
       （content 451px + 29px = 480px なので375pxでの見た目は従来どおり）。
       固定480pxのままだとベトナム/マレーシアが320px幅でボタンをはみ出していた */
    min-height: 480px;
    padding-bottom: 29px;
  }

  .kv__photo {
    left: -45.9%;
    top: -18.8%;
    width: 271.7%;
  }

  /* SP でも cover 指定（PC側）がそのまま効くため、位置の上書きは不要 */

  .kv__overlay {
    background: radial-gradient(ellipse 187px 218px at 50% 50%, #194b83 0%, #06182c 100%);
  }

  .kv__dots {
    display: none;
  }

  .kv__watermark {
    left: auto;
    right: -6px;
    top: 8px;
    height: 61px;
  }

  .kv__inner {
    padding: 0 19px;
  }

  .kv__title {
    padding-top: 35px;
    font-size: 34px;
    line-height: 44px;
  }

  .kv__badge {
    margin-top: 17px;
    padding: 7px 14px;
    font-size: 11px;
  }

  .kv__lead {
    margin-top: 17px;
    font-size: 12px;
    line-height: 20px;
  }

  .kv__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    margin-top: 18px;
  }

  /* シンガポールのKV画像枠（.kv--split）はPC版デザインにしか存在せず、
     SP版でどう配置するかの支給デザインが未着（先方確認事項.md ⑨）。
     SP KV は高さ480px固定で274pxの正方形を差し込む余地が無いため、
     暫定でSPのみ枠を出さず、テキスト全幅の従来レイアウトに戻す。
     SP版デザインを受領したらここを実装し直すこと。 */
  .kv--split .kv__inner {
    text-align: center;
  }

  .kv--split .kv__cols {
    display: block;
    width: auto;
    padding-top: 0;
  }

  .kv--split .kv__title {
    padding-top: 35px;
  }

  .kv--split .kv__figure {
    display: none;
  }

  /* ---------- 見出し・装飾 ---------- */
  .deco-en {
    font-size: 61px;
  }

  .deco-en::after {
    width: 24px;
    bottom: -5px;
  }

  .deco-en--environment {
    left: 20px;
    top: 40px;
  }

  .deco-en--reasons {
    right: 20px;
    top: 40px;
  }

  .deco-en--points {
    left: 20px;
    top: 40px;
  }

  .deco-en--case {
    right: 20px;
    top: 4px;
  }

  .deco-en--support {
    left: 20px;
    top: 20px;
  }

  .deco-en--column {
    left: 20px;
    top: 20px;
  }

  .deco-en--faq {
    top: 22px;
    font-size: 83px;
  }

  .sec-title,
  .sec-title--gold {
    font-size: 32px;
    line-height: 41px;
  }

  .sec-label {
    font-size: 22px;
    text-align: center;
  }

  /* ---------- ビジネス環境 ---------- */
  
  .stage__dots--env {
    display: none;
  }

  .environment {
    padding-top: 0;
  }

  .environment .sec-label {
    margin-left: 0;
    padding-top: 105px;
  }

  .environment .sec-title--gold {
    margin: 10px 0 0;
    text-align: center;
    line-height: 43px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 25px;
  }

  .stats__item {
    min-height: 164px;
    padding-top: 27px;
    padding-bottom: 27px;
  }

  .stats__num {
    font-size: 78px;
  }

  .stats__num--sm {
    font-size: 56px;
  }

  .stats__caption {
    font-size: 10px;
  }

  .environment__note {
    margin-top: 22px;
    font-size: 16px;
    line-height: 27px;
    text-align: left;
  }

  /* ---------- Reasons / Points ---------- */
  .reasons {
    padding-top: 105px;
  }

  .reasons .sec-title--gold {
    margin-bottom: 41px;
    line-height: 36px;
  }

  .points {
    padding: 105px 0 90px;
  }

  .points .sec-title--gold {
    margin-bottom: 39px;
    line-height: 37px;
  }

  .card-grid--3,
  .card-grid--2 {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .card,
  .reasons .card,
  .points .card--num,
  .spec--organ .card {
    padding: 25.5px 32px 23px 33px;
  }

  .card--num,
  .points .card--num {
    padding-top: 25.5px;
  }

  .card__no,
  .points .card__no {
    top: -14px;
    left: 5px;
    font-size: 28px;
  }

  .card__title {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 8.5px;
    text-align: center;
  }

  .points .card__title {
    text-align: center;
  }

  .card__text {
    font-size: 14px;
    line-height: 24px;
  }

  /* 規制セクションのカードは XD で見出し下の余白が広い（title 18.5 / 下 27） */
  .spec .card {
    padding-bottom: 27px;
  }

  .spec .card__title {
    margin-bottom: 18.5px;
  }

  .card--tall,
  .card--tall-sm,
  .card--wide,
  .spec--shareholder .card,
  .spec--foreign .card,
  .spec--others .card,
  .spec--others .card.card--sm,
  .spec--organ .card--wide,
  .spec--organ .card:nth-child(3),
  .spec--organ .card:nth-child(4) {
    min-height: 0;
  }

  /* ---------- 事例 ---------- */
  .case {
    margin-top: 20px;
    /* 下パディング0だとoverflow:hiddenで.case-cardの影(15px offset+15px blur)が
       完全にクリップされるため、影が収まる30pxを確保する */
    padding: 60px 0 30px;
  }

  .case .sec-title {
    margin-bottom: 28px;
    line-height: 37px;
  }

  .case-card {
    flex-direction: column;
    min-height: 0;
  }

  .case-card__img {
    width: 100%;
    height: 247px;
  }

  .case-card__body {
    padding: 30px 21px 26px;
  }

  .case-card__title {
    font-size: 20px;
    line-height: 34px;
  }

  .case-card__text {
    width: auto;
    font-size: 14px;
    line-height: 26px;
  }

  .case-card__more {
    margin: 18px 0 0 auto;
    font-size: 16px;
  }

  .case-detail__close {
    font-size: 16px;
  }

  .case-detail__inner {
    padding: 20px 21px 30px;
  }

  .case-detail__tables {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .case-table {
    width: 100%;
  }

  .case-detail__figure img {
    width: 100%;
  }

  .consultant {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* ---------- サポート体制 ---------- */
  .support {
    padding: 87px 0 36px;
  }

  .support .sec-title {
    margin-bottom: 13px;
    line-height: 37px;
  }

  .support__main {
    flex-direction: column;
    gap: 0;
  }

  .support__photo {
    width: 100%;
    height: auto;
  }

  .support__text {
    margin-top: 26px;
    font-size: 16px;
    line-height: 27px;
  }

  .member {
    width: 100%;
    margin-top: 26px;
    padding: 20px;
    gap: 14px;
  }

  .member__photo {
    width: 130px;
    height: 156px;
  }

  .member__name {
    padding-top: 8px;
    font-size: 16px;
  }

  .member__text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
  }

  .office {
    margin-top: 42px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }

  .office__address {
    text-align: left;
  }

  /* ---------- CTA帯：XD 375x278 / 375x208。
     固定height:278pxだと2行タイトル+ボタン2つ分の実コンテンツ(約289px)が
     収まらずボタン下の余白が潰れていたため、paddingベースの可変高さに変更 ---------- */
  .cta {
    height: auto;
    padding-bottom: 40px;
    background:
      url("/service/crossborder/img/sp_cta_band.webp") center top / cover no-repeat,
      linear-gradient(180deg, #224e83 0%, #16314f 100%);
  }

  .cta--single {
    background:
      url("/service/crossborder/img/sp_cta_band2.webp") center top / cover no-repeat,
      linear-gradient(180deg, #224e83 0%, #16314f 100%);
  }

  .cta__title {
    padding-top: 40px;
    font-size: 23px;
    line-height: 33px;
  }

  .cta__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    margin-top: 17px;
  }

  /* ---------- 各種規制 ---------- */
  .spec,
  .spec--organ,
  .spec--foreign,
  .spec--others {
    padding-top: 42px;
  }

  .spec--shareholder {
    padding-top: 33px;
  }

  .spec .sec-title,
  .spec--shareholder .sec-title,
  .spec--organ .sec-title,
  .spec--others .sec-title {
    margin-bottom: 14px;
    line-height: 41px;
  }

  .spec--organ .card-grid {
    row-gap: 20px;
  }

  .spec--others {
    padding-bottom: 39px;
  }

  .notes {
    margin-top: 30px;
    font-size: 12px;
    line-height: 20px;
  }

  .notes-box {
    margin-top: 30px;
    padding: 20px 18px;
  }

  .notes-box .notes {
    margin-top: 0;
  }

  /* ---------- コラム ---------- */
  .column {
    padding: 83px 0 62px;
  }

  .column__dots {
    display: none;
  }

  .column__title {
    padding-top: 0;
    margin-bottom: 24px;
    padding-left: 1px;
    font-size: 24px;
    line-height: 35px;
    text-align: left;
  }

  .column__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .col-card--lead .col-card__img {
    width: calc(100% - 30px);
    height: 217px;
    margin: 15px 0 0 15px;
    object-position: center;
  }

  .col-card--lead .col-card__body {
    padding: 18px 17px 22px;
  }

  .col-card--row {
    display: block;
    height: auto;
    padding: 16px;
  }

  .col-card--row .col-card__img {
    float: left;
    width: 119px;
    height: 85px;
    margin: 4px 15px 8px 0;
  }

  .col-card--row .col-card__body {
    overflow: hidden;
  }

  .col-card--row .col-card__title {
    margin-top: 6px;
    font-size: 12px;
    line-height: 21px;
  }

  .col-card__date {
    font-size: 12px;
  }

  .col-card__title {
    font-size: 12px;
    line-height: 22px;
  }

  .col-card__excerpt,
  .col-card--lead .col-card__excerpt,
  .col-card--row .col-card__excerpt {
    clear: both;
    width: auto;
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
  }

  .icon-arrow {
    right: 17px;
    bottom: 18px;
  }

  .col-card--lead .icon-arrow {
    right: 17px;
    bottom: 18px;
  }

  .col-card--lead .col-card__title {
    margin-top: 9px;
  }

  /* SP は抜粋を1行で省略（XD 05_SP_SGP） */
  .col-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding-right: 34px;
    overflow: hidden;
  }

  /* ---------- よくある質問 ---------- */
  .faq {
    padding: 35px 0 60px;
  }

  .faq__dots {
    display: none;
  }

  .faq__title {
    margin-bottom: 35px;
    font-size: 28px;
  }

  .faq__list {
    gap: 15px;
  }

  .faq-item__q {
    gap: 14px;
    padding: 14px 18px 14px 19px;
  }

  .is-open>.faq-item__q {
    padding-bottom: 10px;
  }

  .faq-item__mark {
    width: 18px;
  }

  .faq-item__mark--a {
    width: 22px;
  }

  .faq-item__q .faq-item__text {
    font-size: 16px;
    line-height: 24px;
  }

  .faq-item__a-inner {
    margin: 0 19px;
    padding: 12px 0 18px;
  }

  .faq-item__a-inner .faq-item__text {
    width: auto;
    font-size: 14px;
    line-height: 24px;
  }

  /* ---------- フッター：XD 375x525 + 白帯 ---------- */
  .footer__nav-area {
    height: auto;
    padding-bottom: 45px;
    background:
      url("/service/crossborder/img/sp_footer_band.webp") center top / cover no-repeat,
      var(--navy);
  }

  .footer__nav-area .inner {
    padding-top: 29px;
    padding-bottom: 0;
  }

  .footer__brand {
    gap: 12px;
    margin-bottom: 27px;
  }

  .footer__logo {
    width: 170px;
    height: auto;
  }

  .footer__service {
    font-size: 14px;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .footer-nav__item {
    grid-column: span 2;
  }

  .footer-nav__item--sm {
    grid-column: span 1;
  }

  .footer-nav__item a {
    height: 61px;
  }

  .footer-nav__item img,
  .footer-nav__item:nth-child(1) img,
  .footer-nav__item:nth-child(2) img,
  .footer-nav__item:nth-child(3) img,
  .footer-nav__item:nth-child(5) img {
    width: 100px;
    height: 61px;
  }

  .footer-nav__item span {
    padding: 0 6px;
    font-size: 12px;
    text-align: left;
    white-space: normal;
  }

  .footer-nav__item--sm span {
    text-align: center;
  }

  /* SP表示順（先方資料基準）はDOM順と異なる: リンク→バッジ→注記→SNS→コピーライト。
     .footer__info-grid/.footer__info-col--*をdisplay:contentsにして子要素を
     .footer__infoの直接のflexアイテム化し、orderで並べ替える
     （HTML構造・PC表示は変更しない） */
  .footer__info {
    display: flex;
    flex-direction: column;
    /* .footer__info-gridがdisplay:contentsになる分の左右余白をここで持つ。
       19pxはSPの.innerと同値 */
    padding: 26px 19px 24px;
  }

  .footer__info-grid,
  .footer__info-col--left,
  .footer__info-col--right {
    display: contents;
  }

  .footer__info-logo {
    display: none;
  }

  .footer-links {
    order: 1;
    flex-direction: column;
    gap: 12px 0;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    white-space: normal;
  }

  /* SP表示順(先方資料基準): ガイドライン→支援機関協会→ご利用にあたって→
     ハラスメント→個人情報保護。左カラム(ガイドライン→支援機関協会→ご利用にあたって)→
     右カラム(ハラスメント→個人情報保護)のDOM順のまま縦積みすれば正しい順序になるため、
     PC2カラム用のnth-child orderは不要（かつliが各colのul内に入れ子になった今は
     効かせると列ごとに個別採番されて崩れるため削除） */
  .footer-links__col:first-child {
    width: auto;
  }

  /* SP版XD(04_SP_TOP)ではSNSアイコン列は左寄せではなく横中央。
     XD実測は中央より約10px左(アートボード375に対し中心177.5)だが、
     可変幅では再現しようがない微差なのでcenterで揃える */
  .footer__meta {
    order: 4;
    align-items: center;
    gap: 0;
  }

  .footer__sns {
    width: auto;
    gap: 10px;
    justify-content: center;
    margin: 26px 0 0;
  }

  .footer__sns-link {
    width: 30px;
    height: 30px;
  }

  /* max-width 345px は旧footer_badges.svgの原寸(345x76)で、拡大させないための上限。
     SNSアイコン列と同じく横中央に置く（XD実測は幅333の左寄せだが先方指定で中央） */
  .footer__badges {
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 345px;
    height: auto;
    margin: 26px auto 0;
  }

  /* XDの注記は8pxで1行あたり幅343px。同じ文字列を実フォントで組むと8pxでは350px必要で、
     375px時の内容幅337pxに収まらず1行目が折り返して3行になっていた。
     XDどおり「1行1文」に見せるため7.5pxに落とす（実測328px） */
  .footer__notes {
    order: 3;
    margin-top: 24px;
    font-size: 7.5px;
    line-height: 14px;
    text-align: center;
  }

  .footer__copy {
    margin: 18px 0 0;
    font-size: 11px;
    text-align: center;
    white-space: normal;
  }

  a.footer-nav-img,
  a.footer-nav-img-vi {
    width: 100%;
  }



}

/* 2026-08-13: 先方指摘によりPC(1120px以上)のみ、各コンテンツブロック(背景の
   上下端からコンテンツまで)の余白を80pxに統一。タブレット/SPは対応済みの
   既存デザインのため、従来のXD/PDF実測値をここで明示的に維持する。 */
/* 2026-08-13: TOPページの実装(deco-enを通常フロー化しmargin-bottom:50pxで
   あしらい→タイトル間隔を確保)にならい、PC(1120px以上)のみ同じ手法を適用。
   絶対配置時代のleft/right/centerはmargin-left/right/inline:autoに置き換える。
   SP/タブレットは絶対配置のまま変更しない。 */
@media (min-width: 1120px) {
  .deco-en--environment,
  .deco-en--reasons,
  .deco-en--points,
  .deco-en--case,
  .deco-en--support,
  .deco-en--column {
    position: static;
    margin-bottom: 50px;
  }

  .deco-en--environment {
    margin-left: calc((100% - min(var(--canvas), 100%)) / 2 + 88px);
  }

  .deco-en--reasons {
    margin-left: auto;
    margin-right: calc((100% - min(var(--canvas), 100%)) / 2 + 77px);
  }

  .deco-en--points {
    margin-left: calc((100% - min(var(--canvas), 100%)) / 2 + 93px);
  }

  .deco-en--case {
    margin-left: auto;
    margin-right: calc((100% - min(var(--canvas), 100%)) / 2 + 57px);
  }

  .deco-en--support {
    margin-left: calc((100% - min(var(--canvas), 100%)) / 2 + 42px);
  }

  .deco-en--column {
    margin-left: calc((100% - min(var(--canvas), 100%)) / 2 + 39px);
  }
}

@media (max-width: 374px) {
  .kv__title {
    font-size: 30px;
    line-height: 40px;
  }

  .sec-title,
  .sec-title--gold {
    font-size: 27px;
    line-height: 36px;
  }

  .deco-en {
    font-size: 50px;
  }

}

.header__brand--sub{
    margin-left: 10px;
}


.environment__note--disc{
  font-size: 10px;
      text-align: center;
      margin-top: 10px;
}

.stats__unit-min{
  font-size: 12px;
}


.stats__num--indonesia {
    font-size: 54px;
}

.environment__note--disc-r{
      margin-top: 22px;
}

.member__name--sub{
  font-size: 12px;
  display: block;
}