@charset "utf-8";

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

/* =========================================================
   tokens (reused from singapore/css/style.css)
   ========================================================= */
:root {
  --navy: #16314F;
  --navy-strong: #183554;
  --gold: #9C7E39;
  /* indonesia の .btn--beige が参照 */
  --gold-text: #977935;
  --grey: #EAEDF0;
  --font-mincho: "Yu Mincho", "YuMincho", "游明朝体", "Hiragino Mincho ProN", serif;
  --font-gothic: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Meiryo", sans-serif;
  --font-en: "EB Garamond", "Garamond", "Times New Roman", serif;
  --card-shadow: 15px 15px 15px rgba(0, 0, 0, .102);
  --canvas: 1400px;
  --inner: 1050px;
  /* あしらい英字(.deco-en)の高さ。98 / 1400。
     見出しとの間隔を calc で算出するため変数化している */
  /* あしらい英字(.deco-en)の高さ。80px などの余白と同じく px 固定 */
  --deco-en-h: 98px;
  /* レスポンシブ基盤
     --gutter     : 画面端の最小余白。固定 px の代わりにこれを使う
     --canvas-gap : 「1400px キャンバス左端からの距離」を表す絶対配置用の起点。
                    ビューポートが 1400px 未満でも --gutter を下回らないので
                    装飾要素が画面外へ飛び出さない。
                    使い方: left: calc(var(--canvas-gap) + 81px);
     いずれも calc/min/max の中で使う前提。新規に px 直値を書かないこと。 */
  --gutter: clamp(16px, 3.5vw, 30px);
  --canvas-gap: max(var(--gutter), calc((100% - 1400px) / 2));
  --bg-grey: #eaedf0;
  --bg-grey-2: #f5f6f8;
  --bg-grey-3: #f7f7f7;
  --line: #eaeaea;
  --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");
  --icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8l6 4-6 4V8Z'/%3E%3C/svg%3E");
  --icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-7.5H16l.4-3H13.5V8.4c0-.87.24-1.46 1.49-1.46H16.5V4.35A20 20 0 0 0 14.3 4.2c-2.2 0-3.7 1.34-3.7 3.8v2.5H8v3h2.6V21h2.9Z'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 4.5l14 14M19.5 4.5l-14 14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --icon-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5c-4.14 0-7.5 2.73-7.5 6.1 0 3.02 2.66 5.55 6.26 6.03.24.05.58.16.66.37.08.2.05.5.03.7l-.11.66c-.03.2-.16.77.67.42.83-.35 4.5-2.65 6.14-4.54 1.13-1.24 1.67-2.5 1.67-3.64 0-3.37-3.36-6.1-7.5-6.1Z'/%3E%3C/svg%3E");
}

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

body {
  margin: 0;
  font-family: var(--font-gothic);
  background: var(--navy);
}

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

.sp-only {
  display: none;
}

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

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

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

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

/* =========================================================
   shared: gold / beige CTA buttons (reused from singapore/css/style.css)
   ========================================================= */
.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 {
  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--beige:not(.btn--sm) {
  padding-right: 20px;
}

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

/* =========================================================
   kv-hero — layered hero section
   canvas reference: 1400 x 625 (XD artboard "01_PC_TOP" hero)
   ========================================================= */
.kv-hero {
  position: relative;
  width: 100%;
  /* XD の 1400x625 に対し、リード文と注釈が各1行増えたぶん中身が 104.73% に達したため
     箱の高さを拡張。文字サイズ・余白は据え置き。
     stack は top:12%（高さ比）なので、必要高 H は 0.12H + 中身(579.6px) = 0.97H → H≈682 */
  aspect-ratio: 1400 / 525; /* 背景画像(1400x525)と同比率。画像が100%で収まる */
  overflow: hidden;
  background: var(--navy);
  /* ヒーロー内のサイズを全て cqw（= ヒーロー幅の%）で表現するための基準。
     1400px 時に 0.8000cqw = 14px なので「XDのpx ÷ 14」でそのまま比率化できる。
     clamp(px) を使うと下限で比率が崩れて構図が変わるため、ここでは使わない。
     SP(≤767px)は別構図のため後段のメディアクエリで上書きしている。 */
  container-type: inline-size;
  container-name: kvhero;
  max-width: 1400px;
    margin: auto;
    min-height: 560px;
}

/* layer 1 — auto-rotating background photos, crossfade every 5s */
.kv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kv-hero__bg-img {
  position: absolute;
  /* 箱と画像が同比率なので cover でも切れない */
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.kv-hero__bg-img.is-active {
  opacity: 1;
}

/* layer 2 — fixed decorative dotted globe (does not rotate) */
.kv-hero__globe {
  position: absolute;
  z-index: 1;
  left: 0%;
  top: 13.28%;
  width: 38.79%;
  height: 82.72%;
  max-width: none;
  mix-blend-mode: soft-light;
  opacity: .11;
  pointer-events: none;
}

/* slide pager — bottom-right dot/pill indicators, synced with .kv-hero__bg-img */
.kv-hero__pager {
  position: absolute;
  z-index: 3;
  right: 3.2%;
  bottom: 5.6%;
  display: flex;
  align-items: center;
  gap: 0.4571cqw; /* 8 / 14 */
}

.kv-hero__pager-btn {
  width: 0.4571cqw;
  height: 0.4571cqw;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.kv-hero__pager-btn:hover {
  background: rgba(255, 255, 255, .7);
}

.kv-hero__pager-btn.is-active {
  width: 1.7143cqw; /* 30 / 14 */
  background: #fff;
}

/* layer 3 — fixed headline / lead / guinness badge / stats + CTAs */
.kv-hero__inner {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.kv-hero__inner .kv-hero__ctas {
  pointer-events: auto;
}

.kv-hero__stack {
  position: absolute;
  left: 12.5%;
  top: 8%;
  width: 62%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kv-hero__copy {
  width: 100%;
  color: #fff;
}

.kv-hero__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 2.7429cqw; /* 48 / 14 */
  font-size: 38px;
  line-height: 1.4;
  margin: 0 0 1.1429cqw; /* 20 / 14 */
}

.kv-hero__accent {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 2em;
  background: linear-gradient(82.5deg, #fff 0%, #f6dfa8 19.2%, #fff 35.5%, #f2d597 57.1%, #fff 76.4%, #e8c87e 97%, #ffe4a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.kv-hero__lead {
  font-family: var(--font-gothic);
  font-size: 0.9143cqw; /* 16 / 14 */
  font-size: 13px;
  line-height: 1.9;
  margin: 0;
}

.kv-hero__achievements {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.8286cqw 2.2857cqw; /* 32 / 40 ÷ 14 */
  list-style: none;
  margin: 2.2857cqw 0 0; /* 40 / 14（下端が箱を超えないよう 48→40 に圧縮） */
  padding: 0;
}

.kv-hero__achievement img {
  display: block;
  height: 6.1714cqw; /* 108 / 14 */
  height: 86px;
  width: auto;
}

.kv-hero__achievement--guinness img {
  height: 7.4286cqw; /* 130 / 14 */
  height: 104px;
}

.kv-hero__ctas {
  display: flex;
  /* wrap は .kv-hero__footnote を次行へ送るために必要（ボタン自体は折り返さない） */
  flex-wrap: wrap;
  /* 幅の基準を .kv-hero__stack(62%) に固定する。
     shrink-to-fit のままだと下の 50% がボタン自身の幅を参照して縮み続ける */
  width: 100%;
  gap: 0.9143cqw; /* 16 / 14 */
  margin: 1.6000cqw 0 0; /* 28 / 14（同上：40→28） */
}

/* ボタン2つは常に横並び。
   .btn の 342px 固定のままだと .kv-hero__stack(62%) に入りきらない幅で
   flex-wrap が働き縦積みになってしまうため、半分幅を上限にして必ず1行に収める */
.kv-hero__ctas .btn {
  /*flex: 0 1 auto;*/
  /*width: 19.5429cqw; /* 342 / 14 */
  /*height: 4.1143cqw; /* 72 / 14 */
  /*border-radius: 0.5714cqw;
  /*font-size: 1.2571cqw; /* 22 / 14 */
}

.kv-hero__ctas .btn::before {
  /*height: 2.0571cqw; /* 36 / 14 */
}

.kv-hero__ctas .btn::after {
  /*right: 1.2571cqw; /* 22 / 14 * 0.8 */
  /*width: 1.7762cqw; /* 31.084 / 14 * 0.8 */
  /*height: 1.8009cqw;*/
}

.kv-hero__footnote {
  width: 100%;
  margin: 0.4571cqw 0 0; /* 8 / 14（同上：16→8） */
  color: rgba(255, 255, 255, .65);
  font-family: var(--font-gothic);
  font-size: 0.6286cqw; /* 11 / 14 */
  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   intro — "海外進出の選択肢として、M&Aという方法があります"
   ========================================================= */
.intro {
  padding: 0;
  background: #ffffff;
}

.intro__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  /* ビューポート幅に追随させると画像だけが伸びてテキスト側の余白が
     間延びするため、1400px の box を中央配置しその中で組む */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.intro__visual {
  position: relative;
  /* 元画像 asia_map.png(828x734) の実寸で左に固定。
     1400px 未満では縮小するが、元サイズより拡大はしない */
  flex: 0 1 828px;
  width: 828px;
  max-width: 100%;
  aspect-ratio: 828 / 734;
}

.intro__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro__routes line {
  stroke: rgb(112, 112, 112);
  stroke-width: 1;
  /* XD/PDF の原本は直線ではなく点線。vector-effect で拡大縮小しても
     線幅・点の間隔が一定になるようにする（いかなる画面幅でも同じ見え方） */
  stroke-dasharray: 1 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 拠点マーカーの脚（円の下に伸びる短い縦棒）— PDF 原本に合わせて追加 */
.intro__point line {
  stroke: var(--navy);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.intro__point circle {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.intro__point text {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 12px;
  fill: var(--navy);
}

/* 点線ルート・拠点マーカー・Cross-border M&A バッジは、差し替えた
   asia_map.png に焼き込み済みのため重ねない（二重描画になる） */
.intro__routes,
.intro__badge {
  display: none;
}

.intro__badge {
  position: absolute;
  left: 28.14%;
  top: 41.14%;
  width: 46.26%;
  height: auto;
}

.intro__body {
  /* 1400px 時は 560px。狭くなるにつれて縮む（折返しは下の 900px で明示的に行う） */
  flex: 0 1 560px;
  min-width: 0;
  max-width: 560px;
  /* 1400px box 内訳: 画像 828px + 本文 560px = 1388px（右に 12px の余り）。
     ここに gutter を足すと 1400px を超えて本文が縮み、折返し位置が変わる */
  margin-right: 0;
    padding-top: 14%;
}

/* 2カラムが成立しなくなる幅で明示的に縦積みへ。
   これを入れないと .intro__body だけが flex-wrap で下段へ落ち、
   .intro__visual が 55.75% のまま左に取り残されて右側に大きな隙間ができる。 */
@media (max-width: 900px) {
  .intro__inner {
    flex-direction: column;
  }

  .intro__visual {
    flex: 0 0 auto;
    width: 100%;
  }

  .intro__body {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 32px var(--gutter) 40px;
  }

  .intro__heading {
    white-space: normal;
  }
}

.intro__heading {
  margin: 0 0 24px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.4;
  color: var(--gold);
  /* nowrap は狭幅で必ず溢れるため撤去。折返しは幅で制御する */
}

.intro__text {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  color: var(--navy);
}

/* =========================================================
   cta-intro — "まずは、自社に合う海外進出の進め方を確認しませんか"
   background asset: 01_PC_TOP_asset_cta_intro_background.png (1400x289)
   ========================================================= */
/* 帯画像の仕様（先方指定）:
   1440px を 100% として拡縮し、1440px を超えたら画像は固定幅のまま中央に置く。
   はみ出した左右は背景色で伸ばす（CTA帯は #224E83 → #19375A のグラデーション）。 */
/* 帯画像(.cta-intro__bg)は1440pxで固定し、はみ出した左右は
   #224e83 → #19375a の縦グラデーションで伸ばす。
   帯画像の左右端自体が上#224d82→下#19395d の縦グラデなので、
   単色で伸ばすと上側に横方向の継ぎ目が出る。 */
.cta-intro {
  position: relative;
  width: 100%;
  background-image: linear-gradient(180deg, #224e83 0%, #19375a 100%);
  background-color: #19375a;
  overflow: hidden;
}

.cta-intro__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 1440px までは画面幅に追従、それ以上は 1440px で固定 */
  width: min(100%, 1440px);
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.cta-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  /* CTA の上下余白は 50px で統一 */
  padding: 50px 20px;
  text-align: center;
}

.cta-intro__heading {
  margin: 0 0 16px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.27;
  color: #fff;
}

.cta-intro__text {
  margin: 0 0 30px;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.52;
  color: #fff;
}

.cta-intro__ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* =========================================================
   service — "海外M&Aサービス"
   ========================================================= */
.section-bg-group {
  position: relative;
  width: 100%;
  /* 高さは中身に追従させる（1400px 実測値 3342px の固定値を撤去）。
     背景画像 .section-bg-group__bg は height: calc(100% - 18px) で伸縮する */
}

.section-bg-group__bg {
  position: absolute;
  /* top:18px / height:calc(100% - 18px) だと、上端 18px に背景画像が無く
     body の紺色(--navy)が帯状に露出する（CTA直下の紺色のはみ出し領域）。
     グループ全面を覆わせる。 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  z-index: 0;
}

.service {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  container-name: service;
  /* 1400px を超えても cqw が伸び続けると理想の分割比が崩れるため、
     コンテナ幅そのものをキャンバス幅で頭打ちにする（背景は親が全幅で描画） */
  max-width: var(--canvas);
  margin-inline: auto;
  /* 上: コンテンツ領域(service〜cases)の上端 → あしらい = 80px
     下: 内容の下端 → 次セクション = 80px */
  padding: 80px 0 80px;
  overflow: hidden;
}

.service__globe-bg {
  position: absolute;
  top: 26px;
  right: 0;
  width: 39.93%;
  height: auto;
  max-width: none;
  opacity: .5;
  pointer-events: none;
}

.service__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  /* 縦は持たない（上はあしらいの margin-bottom、下はセクションの padding-bottom） */
  padding: 0 4.286cqw 0 5.786cqw;
  text-align: left;
}

/* ---------------------------------------------------------
   shared: decorative English headline (reused from singapore/css/style.css)
   --------------------------------------------------------- */
.deco-en {
  position: absolute;
  z-index: 1;
  margin: 0;
  /* 文字ではなく SVG 画像。下線も SVG に含まれるため ::after は不要 */
  display: block;
  width: auto;
  height: var(--deco-en-h);
  max-width: none;
  pointer-events: none;
}

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

.deco-en--service {
  left: calc(var(--canvas-gap) + 81px);
  top: 80px;
}

/* ---------------------------------------------------------
   PC: あしらい英字を通常フローに置く（service / area / strength / achievements）

   元は position:absolute で、あしらいが場所を取らないため
   「あしらいの下に 50px」を親の padding-top で逆算する必要があり、
   CSS を読んでも 50px がどこにも出てこない状態だった。
   静的配置にして上から順に「あしらい → 50px → タイトル」と積む。
   横位置だけは元の left/right と同じ値を margin で持たせる。
   SP(768px以下)は別レイアウトのため従来どおり絶対配置のまま。
   --------------------------------------------------------- */
@media (min-width: 769px) {
  .deco-en--service,
  .deco-en--area,
  .deco-en--strength,
  .deco-en--achievements,
  .deco-en--column,
  .deco-en--news {
    position: static;
    margin-bottom: 50px;  /* あしらい下端 → タイトル */
  }

  .deco-en--column {
    margin-left: calc(var(--canvas-gap) + 39px);
  }

  .deco-en--news {
    margin-left: auto;
    margin-right: calc(var(--canvas-gap) + 55px);
  }

  .deco-en--service,
  .deco-en--strength {
    margin-left: calc(var(--canvas-gap) + 81px);
  }

  /* 右寄せの2つは margin-left:auto で右端基準にする */
  .deco-en--area {
    margin-left: auto;
    margin-right: calc(var(--canvas-gap) + 55px);
  }

  .deco-en--achievements {
    margin-left: auto;
    margin-right: calc(var(--canvas-gap) + 90px);
  }
}

.service__heading {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 30px;
  /* normal はフォント依存で行の上下に見えないアキが入り、
     あしらいとの 50px が見た目とズレるため 1 に固定する */
  line-height: 1;
  color: var(--gold);
}

.service__lead {
  margin: 0 auto 56px;
  max-width: 1100px;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  color: var(--navy);
}

.service__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 82.51%;
  margin: 0 0 0 7.307%;
  padding: 0;
  list-style: none;
  text-align: left;
}

.service__card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}

.service__card-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 24px;
}

.service__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service__card-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.service__card-label {
  margin: 0 0 8px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
}

.service__card-title {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  /* 狭幅では文字を縮めず折り返す（nowrap だと左カラムが潰れる原因になる） */
  white-space: normal;
  line-height: 1.5;
  color: var(--navy);
}

.service__card-icon {
  /* 160px → 220px に拡大（上限）。左カラムに入る範囲で最大化する */
  flex: 0 1 auto;
  width: min(220px, 45%);
  height: auto;
}

.service__card-desc {
  margin: 12px 0 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy);
}

.service__card-merit {
  /* 480px 固定だと、中の nowrap テキストが min-content の下限(約324px)を作り、
     左カラム(.service__card-main)を 0 まで潰していた。
     幅比率で持たせることで、どの画面幅でも 1400px 時と同じ分割比になる */
  flex: 0 0 34.286cqw; /* 480 / 14 — 分割比だけは全幅で一定に保つ */
  margin: 26px 20px 29px 0;
  padding: 24px clamp(14px, 2cqw, 28px) 26px;
  background: rgba(174, 153, 100, 0.1);
}

.service__merit-heading {
  margin: 0 0 15px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  /* 縮小ではなく折り返しで対応 */
  white-space: normal;
  line-height: 1.4;
  color: var(--gold);
}

.service__merit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service__merit-list li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 24px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  /* nowrap をやめる。これがメリット枠に min-content の下限を作り、
     左カラム(.service__card-main)を潰していた直接原因 */
  white-space: normal;
  color: var(--navy);
}

.service__merit-list li:last-child {
  margin-bottom: 0;
}

.service__merit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("/service/crossborder/img/icon_check.svg") no-repeat center / contain;
}

/* =========================================================
   area — "対応エリアと海外M&Aのポイント"
   ========================================================= */
.area-layer {
  position: relative;
  width: 100%;
}

.area-layer__map {
  position: absolute;
  top: 0;
  /* XD 由来の left:1px / width:99.7857% は「ビューポート幅 + 1px」になり
     ページ全体に 1px の横スクロール（右端の隙間）を生むため 0 / 100% に揃える */
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.area {
  position: relative;
  z-index: 1;
  /* 内容の下端 → 次セクション = 50px */
  padding-bottom: 50px;
}

.deco-en--area {
  right: calc(var(--canvas-gap) + 55px);
  top: 24px;
}

.area__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  /* 縦は持たない（上はあしらいの margin-bottom、下はセクションの padding-bottom） */
  padding: 0 60px 0 81px;
  text-align: center;
}

.area__heading {
  margin: 0 0 20px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 39px;
  /* normal はフォント依存で行の上下に見えないアキが入り、
     あしらいとの 50px が見た目とズレるため 1 に固定する */
  line-height: 1;
  color: var(--gold);
}

.area__lead {
  margin: 0 0 34px;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
}

.area__cards {
  /* flex-wrap だと 316px を下回った時点で 1 列に落ちるため grid に変更。
     auto-fit は max 側(316px)で列数を決めてしまい狭幅で 1 列になるので、
     列数はブレークポイントで明示する（1400px:3列 / それ未満:2列 / SP:2列）。 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 316px));
  justify-content: start;
  gap: 30px 45px;
  width: 82.51%;
  margin: 0 0 0 7.307%;
  padding: 0;
  list-style: none;
}

.area__card {
  position: relative;
  min-width: 0;
  height: 98px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

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

/* 3列(316*3 + gap45*2 = 1038px)が収まらない幅では 2 列に落とす。
   1列にはしない（カードが縦に伸びて間延びするため）。 */
@media (max-width: 1399px) {
  .area__cards {
    grid-template-columns: repeat(2, minmax(0, 316px));
    /* 3列時は左寄せ(margin-left: 7.307%)がデザインどおりだが、
       2列になるとカード群だけが左に偏るため、ブロックごと中央に置く。
       justify-content: center はトラックを中央に寄せるだけで並び順は変えない。 */
    justify-content: center;
    margin-inline: auto;
  }

  /* 版面の左右パディングが非対称(左81px/右60px)なため、中央寄せしても
     21px 右にずれる。2列時は左右を揃えて見出し・リードごと正確に中央へ。 */
  .area__inner {
    padding-inline: 60px;
  }
}

.area__card-code {
  position: absolute;
  /* カード左下隅にぴったり配置（余白は付けない） */
  left: 0;
  bottom: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.area__card-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
  text-align: left;
}

.area__card-title {
  margin: 0 0 8px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}

.area__card-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 6px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

.area__card-arrow {
  position: relative;
  width: 19px;
  height: 9px;
}

.area__card-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 19px;
  height: 1px;
  background: currentColor;
}

.area__card-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* =========================================================
   strength — "日本M&Aセンターの強み"
   ========================================================= */
.strength {
  position: relative;
  z-index: 1;
  /* 内容の下端 → 次セクション = 50px */
  padding-bottom: 50px;
}

.deco-en--strength {
  left: calc(var(--canvas-gap) + 81px);
  top: 0;
}

.strength__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  /* 縦は持たない（上はあしらいの margin-bottom、下はセクションの padding-bottom） */
  padding: 0 60px;
}

.strength__heading {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 39px;
  /* normal はフォント依存で行の上下に見えないアキが入り、
     あしらいとの 50px が見た目とズレるため 1 に固定する */
  line-height: 1;
  color: var(--gold);
}

.strength__lead {
  margin: 0 0 34px;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  color: var(--navy);
}

.strength__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 328px));
  justify-content: center;
  gap: 33px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strength__card {
  min-height: 342px;
  padding: 27px 25px 28px;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.strength__card-title {
  margin: 0 0 20px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.56;
  color: var(--navy);
}

.strength__card-img {
  display: block;
  width: min(100%, 230px);
  height: 132px;
  object-fit: contain;
  margin: 0 auto 22px;
}

.strength__card-text {
  margin: 0;
  text-align: left;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--navy);
}

/* =========================================================
   achievements — "海外M&A支援実績"
   ========================================================= */
.achievements {
  position: relative;
  z-index: 1;
  /* 内容の下端 → 次セクション = 80px */
  padding-bottom: 80px;
}

.deco-en--achievements {
  right: calc(var(--canvas-gap) + 90px);
  top: 0;
}

.deco-en--achievements::after {
  left: auto;
  right: 0;
}

.achievements__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  /* 縦は持たない（上はあしらいの margin-bottom、下はセクションの padding-bottom）。
     cases 側は事例カードの上端基準なので .cases__inner の padding-top 80px で受ける */
  padding: 0 60px;
}

.achievements__heading {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 39px;
  /* normal はフォント依存で行の上下に見えないアキが入り、
     あしらいとの 50px が見た目とズレるため 1 に固定する */
  line-height: 1;
  color: var(--gold);
}

.achievements__lead {
  margin: 0 0 36px;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  color: var(--navy);
}

.achievements__cards {
  display: grid;
  /* 2枚入らない幅になったら自動で1列へ。SP 判定を待たずに折り返す */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 510px));
  justify-content: center;
  gap: 30px;
}

.achievements__card {
  min-height: 460px;
  /* 左右パディングは幅に追従（カード内が潰れて溢れるのを防ぐ） */
  padding: 27px clamp(16px, 6.3%, 32px) 30px;
  min-width: 0;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.achievements__card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  margin: 0 8px 30px;
  padding: 4px 12px;
  text-align: center;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(15px, 4vw, 20px);
  color: var(--navy);
}

.achievements__total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--navy);
}

.achievements__total-label,
.achievements__total-unit {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(22px, 7vw, 35px);
  line-height: 1;
}

.achievements__total-number {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(44px, 14vw, 70px);
  line-height: .9;
  color: var(--gold);
}

.achievements__note {
  margin: 5px 0 7px;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 13px;
  color: var(--navy);
}

.achievements__chart-wrap {
  position: relative;
  width: min(100%, 340px);
  /* height 固定をやめ比率で追従（Chart.js は maintainAspectRatio:false で親に合わせる） */
  aspect-ratio: 340 / 226;
  min-height: 170px;
  margin: 0 auto;
}

.achievements__chart-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

.achievements__caption {
  margin: 17px 0 0;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: clamp(11px, 3vw, 12px);
  color: var(--navy);
}

.achievements__table {
  width: 100%;
  max-width: 438px;
  margin: 0 auto;
  border-collapse: collapse;
  /* fixed + 均等割りで、列が増えても幅を超えない */
  table-layout: fixed;
  font-family: var(--font-gothic);
  color: var(--navy);
}

.achievements__table th,
.achievements__table td {
  height: auto;
  min-height: 36px;
  padding: 8px 4px;
  border: 1px solid #fff;
  text-align: center;
  vertical-align: middle;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}

.achievements__table thead th {
  font-weight: 700;
  color: #fff;
}

.achievements__table-head {
  min-height: 38px;
  font-size: clamp(12px, 3.4vw, 16px);
}

.achievements__table-head--buyer {
  background: #b9d7ec;
}

.achievements__table-head--seller {
  background: #426c9b;
}

.achievements__table thead tr:nth-child(2) th {
  background: #b9d7ec;
  font-size: clamp(11px, 3vw, 14px);
}

.achievements__table thead tr:nth-child(2) th:nth-child(n+3) {
  background: #426c9b;
}

.achievements__table tbody td {
  background: #eef0f3;
  font-weight: 500;
}

.achievements__table tbody tr:nth-child(odd) td {
  background: #e2e5e9;
}

/* =========================================================
   cases — "海外展開・再編の事例 / 海外M&A案件"
   ========================================================= */
.cases {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* このセクションは絶対配置のキャンバス構成（XD 1400x… をそのまま写した座標系）。
     中の寸法を全て cqw = セクション幅の% で持たせることで、どの画面幅でも
     1400px 時の構図がそのまま相似形にスケールする。
     px 下限（min-width / clamp）を残すと相似が崩れて要素同士が重なる。 */
  container-type: inline-size;
  container-name: cases;
  max-width: var(--canvas);
  margin-inline: auto;
}

.cases__globe-bg {
  position: absolute;
  left: 0;
  top: 5.0000cqw;  /* 70px @1400 */
  width: 36.929%; /* 517 / 1400 */
  height: auto;
  max-width: none;
  opacity: .82;
  pointer-events: none;
}

.deco-en--cases {
  left: calc(var(--canvas-gap) + 6.7143cqw);  /* calc(var(--canvas-gap) + 94px) @1400 */
  top: 0;
}

.cases__inner {
  position: relative;
  z-index: 1;
  /* 絶対配置(px座標)をやめ、横位置だけ%で持つフローレイアウトにする。
     文字サイズを px のまま保つと狭幅でカードが縦に伸びるため、
     高さは常に中身に追従させる必要がある（固定高さだと切れる）。 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  max-width: 100.0000cqw;  /* 1400px @1400 */
  margin-inline: auto;
  /* 上 80px =「前セクション(achievements)のカード下端 → 事例カード上端」。
     あしらい Cases は .cases 基準 top:0 の絶対配置なのでこの余白の中に収まり、
     カードはあしらいの下から始まる */
  /* 下はコンテンツ領域(service〜cases)の下端余白 = 80px 固定。
     案件ページャーは .cases__deals の下端に絶対配置されているので、
     その下にそのまま 80px が乗る */
  padding: 80px 0 80px;
}

.cases__intro {
  flex: 0 0 25.714%; /* 360 / 1400 */
  min-width: 0;
  margin-left: 8.571%; /* 120 / 1400 */
  /* .cases__inner の上余白を 0 にした分をここで持つ。
     見出しはあしらい Cases(top:0) の下端 + 50px に置き、他セクションと揃える */
  padding-top: calc(var(--deco-en-h) + 50px);
}

.cases__heading,
.cases__deal-heading {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.6;
  color: var(--navy);
}

.cases__lead {
  margin: 3.0000cqw 0 0;  /* 42px 0 0 @1400 */
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: var(--navy);
}

.cases__story {
  position: relative;
  /* 508 - (120 + 360) = 28px 分だけ intro の右に置く */
  flex: 0 0 63.714%; /* 892 / 1400 */
  margin-left: 2%;
  min-width: 0;
  /* height は指定しない（中身の高さに追従）。overflow はカルーセルの横クリップ用 */
  overflow: hidden;
}

.cases__story-cards,
.cases__deal-cards {
  display: flex;
  gap: 39px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases__story-cards {
  padding-right: 19.7857cqw;  /* 277px @1400 */
  transition: transform .35s ease;
  will-change: transform;
}

.cases__story-card {
  flex: 0 0 24.1429cqw;  /* 0 0 338px @1400 */
  min-width: 0;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

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

.cases__card-link {
  display: block;
  height: 100%;
}

.cases__thumb-wrap {
  position: relative;
  height: 12.7143cqw;  /* 178px @1400 */
  overflow: hidden;
  background: #d9e4ec;
}

.cases__thumb {
  display: block;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.cases__thumb--story {
  height: 12.7143cqw;  /* 178px @1400 */
}

.cases__thumb--story-1 {
  object-position: center 42%;
}

.cases__thumb--story-2 {
  object-position: center 34%;
}

.cases__thumb--story-3 {
  object-position: center 43%;
}

.cases__tag {
  position: absolute;
  left: 0;
  top: 10px;
  /* 文字が 14px 固定なので、ラベルの箱・アイコンも px で揃える
     （cqw のままだと幅によって文字とアイコンの位置がずれる） */
  min-width: 67px;
  height: 30px;
  padding: 0 12px 0 27px;
  background: #1b5391;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
}

.cases__tag--wide {
  min-width: 106px;
}

/* 位置ピン。丸(::before)と三角(::after)を組み合わせた擬似アイコンをやめ、
   XD原本から抽出した単一パスの SVG を使う */
.cases__tag::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 10px;
  height: 13px;
  transform: translateY(-50%);
  background: url("/service/crossborder/img/icon_pin.svg") no-repeat center / contain;
}

/* ラベル左下の折り返し（原本の rgb(14,34,56) 8x9 の三角） */
.cases__tag::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 9px 0;
  border-color: transparent #0e2238 transparent transparent;
}

.cases__card-body {
  padding: 2.0714cqw 1.9286cqw 1.7143cqw;  /* 29px 27px 24px @1400 */
}

.cases__story-title {
  margin: 0 0 1.7857cqw;  /* 0 0 25px @1400 */
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.68;
  color: var(--navy);
}

.cases__profile {
  margin: 0 0 1.4286cqw;  /* 0 0 20px @1400 */
  font-family: var(--font-gothic);
  font-size: 12px;
  color: var(--navy);
}

.cases__profile div {
  display: grid;
  grid-template-columns: 47px 1fr;
  background: #f2f4f7;
  border-bottom: 1px solid #fff;
}

.cases__profile dt,
.cases__profile dd {
  margin: 0;
  padding: 0.6429cqw 0.7143cqw;  /* 9px 10px @1400 */
  line-height: 1.55;
}

.cases__profile dt {
  font-weight: 700;
  border-right: 1px solid #fff;
}

.cases__text {
  margin: 0 0 1.3571cqw;  /* 0 0 19px @1400 */
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.8;
  color: var(--navy);
}

.cases__more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8571cqw;  /* 12px @1400 */
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

.cases__arrow {
  position: relative;
  width: 1.3571cqw;  /* 19px @1400 */
  height: 0.6429cqw;  /* 9px @1400 */
}

.cases__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2857cqw;  /* 4px @1400 */
  width: 1.3571cqw;  /* 19px @1400 */
  height: 0.0714cqw;  /* 1px @1400 */
  background: currentColor;
}

.cases__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.0714cqw;  /* 1px @1400 */
  width: 0.4286cqw;  /* 6px @1400 */
  height: 0.4286cqw;  /* 6px @1400 */
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.cases__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8571cqw;  /* 12px @1400 */
  margin-top: 2.5000cqw;  /* 35px @1400 */
  width: min(100%, 24.1429cqw);  /* min(100%, 338px) @1400 */
}

/* ドットは支給素材をそのまま使う。
   非アクティブ: carousel_nextpoint.svg (7×7 円 / #16314f opacity .2)
   アクティブ  : carousel_startingpoint.svg (30×7 角丸 rx3.5 / #16314f)
   いずれも形状・不透明度がファイル側に含まれるので CSS では色を持たせない。 */
.cases__pager-dot {
  width: 0.5000cqw;  /* 7px @1400 */
  height: 0.5000cqw;  /* 7px @1400 */
  padding: 0;
  border: 0;
  background: url("/service/crossborder/img/carousel_nextpoint.svg") no-repeat center / 100% 100%;
  cursor: pointer;
}

.cases__pager-dot.is-active {
  width: 2.1429cqw;  /* 30px @1400 */
  background-image: url("/service/crossborder/img/carousel_startingpoint.svg");
}

.cases__pager-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1429cqw;  /* 16px @1400 */
  height: 1.1429cqw;  /* 16px @1400 */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

/* 矢印も支給素材 carousel_arrow.svg (13.084×13.515 / #16314f)。
   高さは intrinsic 比率のまま auto で出す（縦に潰さない）。 */
.cases__pager-arrow img {
  display: block;
  width: 0.9346cqw;  /* 13.084px @1400 */
  height: auto;
}

/* 支給素材は左向きの1点のみのため、「次へ」は水平反転で使う */
.cases__pager-arrow--next img {
  transform: scaleX(-1);
}

.cases__pager--story {
  /* カードの直後に流す（固定 top だとカードが伸びた時に重なる） */
  position: static;
  justify-content: flex-start;
  width: auto;
  margin-top: 5.1429cqw;  /* 72px @1400 */
}

.cases__deals {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 0 0 100%;
  /* min-width:auto のままだと、ビューポート内の固定幅トラック(236px×4+gap=1061px)が
     この行の min-content 幅として伝播し、行全体がセクション幅を超えて膨らむ。
     その結果 右側のコピーがセクション外へ押し出されて消える。 */
  min-width: 0;
  max-width: 100%;
  /* 事例カルーセル下端 → 案件ブロック上端 = 80px */
  margin-top: 80px;
  /* 下端に絶対配置するページャーの居場所を確保（元デザインの 20px 空き相当） */
  padding-bottom: 2.5714cqw;  /* 36px @1400 */
}

.cases__deal-viewport {
  position: relative;
  flex: 0 0 69.5%; /* 973 / 1400 */
  min-width: 0;
  /* height は中身に追従。overflow はカルーセルの横クリップ用だが縦にも効くため、
     カード影(box-shadow: 15px 15px 15px)が下端で切れる。影が収まる余白を確保する。 */
  padding-bottom: 30px;  /* 影のオフセット15px + ぼかし15px。影は px 固定なので余白も px で持つ */
  overflow: hidden;
}

.cases__deal-cards {
  /* 1番目のカードを左端に置き、溢れは右方向へ出す（左始まり）。
     カード236px×4 + gap39px×3 = 1061px はビューポート(973px)より広いので、
     4枚目は右端で欠けた状態で見える＝常に4枚の情報が視界に入る。 */
  width: max-content;
  transition: transform .35s ease;
  will-change: transform;
}

.cases__deal-card {
  /* 縮小せず px 固定。狭幅では文字を小さくせず折り返しで吸収する */
  flex: 0 0 236px;
  /* min-width:auto のままだと、中の px 指定テキスト(nowrap のタイトル等)の
     min-content がカード幅の下限になり、flex-basis(cqw)より広くなる。
     幅を狭めるほどトラックだけが縮まず、右端のカードがビューポート外へ押し出される。 */
  min-width: 0;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

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

.cases__thumb--deal {
  height: 122px;
}

.cases__thumb--deal-1 {
  object-position: center 48%;
}

.cases__thumb--deal-2 {
  object-position: center 55%;
}

.cases__thumb--deal-3 {
  object-position: center 50%;
}

.cases__thumb--deal-4 {
  object-position: center 46%;
}

.cases__deal-body {
  padding: 18px 16px;
}

.cases__deal-title {
  overflow: hidden;
  margin: 0 0 18px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cases__point {
  min-height: 82px;
  margin-bottom: 17px;
  padding: 13px 12px;
  background: rgba(174, 153, 100, .1);
}

.cases__point-label {
  margin: 0 0 8px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 12px;
  color: var(--gold);
}

.cases__point-text {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.55;
  color: var(--navy);
}

/* 下部カード内は px 固定に統一（共有ルールの cqw を打ち消す） */
.cases__deal-card .cases__more {
  gap: 12px;
}

.cases__deal-card .cases__arrow {
  width: 19px;
  height: 9px;
}

.cases__deal-copy {
  flex: 0 0 24.643%; /* 345 / 1400 */
  min-width: 0;
  margin-left: auto;
  margin-right: 3.857%; /* 54 / 1400 */
  padding-top: 4.1429cqw;  /* 58px @1400 */
  text-align: right;
}

.cases__deal-heading {
  font-size: 39px;
  line-height: 1.35;
}

.cases__deal-lead {
  margin: 2.8571cqw 0 0;  /* 40px 0 0 @1400 */
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: var(--navy);
}

.cases__pager--deals {
  /* カルーセルの下端に追従させる（固定 top だと伸びた時に重なる） */
  position: absolute;
  left: 57.071%; /* 799 / 1400 */
  bottom: 0;
  justify-content: flex-end;
  width: 10.429%; /* 146 / 1400 */
  margin-top: 0;
}

/* 案件コピーは <br> で改行位置を指定しているため、列幅が最長行(実測287px)を
   下回ると意図しない位置で再折返しする（「事業の」の「の」だけが落ちる等）。
   24.643% が 287px を割るのが約 1219px なので、そこからカルーセルとコピーの
   配分を変えて、コピー側に必要な幅を確保する。 */
@media (max-width: 1219px) {
  .cases__deal-viewport {
    flex-basis: 52%;
  }

  .cases__deal-copy {
    flex-basis: 40%;
  }

  .cases__pager--deals {
    /* 幅を変えたビューポートの右端に合わせる */
    left: 39.5%;
  }
}

/* アンカーリンクの着地位置。追従ヘッダー(80px)が装飾英字(Service/Achievement/
   Cases…)を隠してしまうため、その分だけ手前で止める。
   .deco-en--service は top:82px で元々隠れないが、他は top:0 のため必須。 */
#service,
#area,
#strength,
#achievements,
#cases,
#deals,
#column,
#download {
  /* 追従ヘッダーの高さと同値。これより大きいと直前セクションの下端が覗く */
  scroll-margin-top: 80px;
}

/* =========================================================
   process — 海外M&Aの進め方
   ========================================================= */
.process {
  width: 100%;
  background: #fff;
}

.process__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  /* コンテンツ上下余白 = 80px */
  padding: 80px clamp(var(--gutter), 12.5%, 175px); /* 175 / 1400 = 12.5% */
}

.process__heading {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.3;
  color: var(--navy);
  text-align: center;
}

.process__lead {
  position: relative;
  z-index: 1;
  display: block;
  margin: 31px 0 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy);
  text-align: center;
  visibility: visible;
  opacity: 1;
}

.process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 190px));
  gap: 25px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}

.process__steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 93px;
  left: 9.048%; /* 95 / 1050 */
  right: 9.048%;
  height: 1px;
  background: var(--navy);
}

.process__step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.process__step-number {
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  text-align: center;
}

.process__icon {
  /* 白丸の背景ごと SVG に含まれるため、画像をそのまま置く */
  display: block;
  width: 85px;
  height: 85px;
  margin-inline: auto;
}

.process__icon svg {
  width: 50px;
  height: 50px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process__step-title {
  margin: 17px 0 0;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--navy);
  text-align: center;
}

.process__tasks {
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.45;
  color: var(--navy);
}

.process__tasks li {
  position: relative;
  margin-top: 4px;
  padding-left: 10px;
}

.process__tasks li:first-child {
  margin-top: 0;
}

.process__tasks li::before {
  content: "・";
  position: absolute;
  left: -2px;
  top: 0;
}

.process__links {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 37px;
}

.process__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 430px);
  min-height: 48px;
  padding: 10px 20px;
  background: var(--navy);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.process__link svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 14px;
  fill: currentColor;
}

/* =========================================================
   network — グローバルネットワーク
   ========================================================= */
.network {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #f7f7f7;
  overflow: hidden;
}

.network__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1050px + var(--gutter) * 2);
  margin-inline: auto;
  /* コンテンツ上下余白 = 80px */
  padding: 80px var(--gutter);
}

.network__heading {
  margin: 0 0 58px 40px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.35;
  color: var(--navy);
}

.network__alliances {
  display: grid;
  gap: 50px;
}

.network__alliance {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  align-items: center;
  gap: 45px;
}

.network__alliance-image {
  display: block;
  width: 100%;
  max-width: 360px;
  object-fit: cover;
}

.network__alliance:nth-child(1) .network__alliance-image {
  height: 272px;
}

.network__alliance:nth-child(2) .network__alliance-image {
  height: 240px;
}

.network__alliance:nth-child(3) .network__alliance-image {
  height: 302px;
  object-fit: contain;
  background: #fff;
}

.network__alliance-title {
  margin: 0 0 24px;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.35;
  color: var(--navy);
}

.network__alliance-body p {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  color: var(--navy);
}

.network__alliance-body p + p {
  margin-top: 4px;
}

.network__map {
  position: relative;
  width: 100%;
  /* 差し替えた network_map_labels.png(1050x473) の比率に合わせる */
  aspect-ratio: 1050 / 473;
  margin-top: 80px;
}

.network__map-dots,
.network__map-labels {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.network__map-dots {
  opacity: .72;
}

.network__map-logo {
  /* ロゴは差し替えた network_map_labels.png に含まれるため非表示 */
  display: none;
}

.network__office-heading {
  margin: 70px 0 41px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--navy);
  text-align: center;
}

.network__offices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 190px));
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.network__office {
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

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

.network__office a {
  display: block;
}

.network__office img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 190 / 150;
  object-fit: cover;
}

.network__office span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 16px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

.icon-arrow-line {
  display: block;
  width: 19px;
  height: 9px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* =========================================================
   docs / column / news / faq / footer
   (ported from the TOP page stylesheet — no external deps)
   ========================================================= */
.inner {
  width: var(--inner);
  max-width: calc(100% - 60px);
  margin-inline: auto;
}

.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;
}

/* ---------------------------------------------------------
   shared: icons
   --------------------------------------------------------- */

.icon-toggle {
  position: relative;
  display: block;
  flex: none;
}

.icon-toggle {
  width: 19px;
  height: 19px;
  margin-top: 3px;
}

/* 開閉アイコンは原本の SVG を使う（+ / − を CSS で描いていた） */
.icon-toggle {
  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");
}

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

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

.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;
}

/* =========================================================
   column — XD y 6531..7226
   ========================================================= */
.column {
  position: relative;
  /* コンテンツ上下余白 = 80px */
  padding: 80px 0;
  background: var(--bg-grey);
  overflow: hidden;
}

.deco-en--column {
  left: calc(var(--canvas-gap) + 39px);
  top: 42.5px;
}

.deco-en--column::after {
  left: 7px;
  bottom: -9.5px;
}

.column__title {
  position: relative;
  z-index: 2;
  /* 縦位置はあしらいの margin-bottom: 50px が決める */
  margin-top: 0;
  margin-bottom: 37px;
  padding-left: 8px;
  text-align: left;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 30px;
  /* 行の見えないアキで 50px がズレないよう固定 */
  line-height: 1;
  color: var(--navy);
}

.column__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 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__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: min(100%, 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;
  /* コンテンツ上下余白 = 80px */
  padding: 80px 0;
  background: var(--bg-grey-3);
  overflow: hidden;
}

.faq__dots {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 108.071%; /* 1513 / 1400 */
  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;
  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);
}

.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;
}

/* FAQ末尾の「ご利用にあたって」枠 */
.notes {
  margin-top: 66px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.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;
}

@media (max-width: 1119px) and (min-width: 769px) {
.column__grid {
    grid-template-columns: 1fr 1.4fr;
  }

  .faq-item__a-inner .faq-item__text,
  .faq-item__lead {
    width: auto;
  }
}


/* =========================================================
   TOP page — additions
   ========================================================= */

.deco-en--news {
  left: auto;
  right: calc(var(--canvas-gap) + 55px);
  /* コラムの padding-bottom: 80px がそのままコラムとの間隔になる */
  top: 0;
}

.deco-en--news::after {
  left: auto;
  right: 0;
}

.sec-lead {
  max-width: 900px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: var(--navy);
}

.process .sec-title {
  color: var(--navy);
}

.network .sec-title {
  color: var(--navy);
}

/* ---------------------------------------------------------
   related documents
   --------------------------------------------------------- */
.docs {
  /* コンテンツ上下余白 = 80px */
  padding: 80px 0;
  background: var(--bg-grey-2);
}

.docs .sec-title {
  color: var(--navy);
}

.docs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 55px;
}

.doc-card {
  position: relative;
  background: #fff;
  box-shadow: var(--card-shadow);
  padding-bottom: 55px;
  transition: transform .25s;
}

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

.doc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 20px 0;
}

.doc-card__tags span {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
}

.doc-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 180;
  object-fit: cover;
}

.doc-card__title {
  margin: 12px 20px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  min-height: 50px;
}

.doc-card__text {
  margin: 10px 20px 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--navy);
}

.doc-card__more {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}


/* ---------------------------------------------------------
   column grid: 6 articles, 2 columns x 3 rows (TOP page
   uses a uniform grid, unlike Singapore's lead+list layout)
   --------------------------------------------------------- */
.column__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}

/* grid item（li）の min-width:auto のままだと、抜粋の nowrap による
   min-content 幅がトラック幅を押し広げてカードがはみ出す */
.column__grid > li {
  min-width: 0;
}

.column__grid .col-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  height: 140px;
  padding: 20px;
  overflow: hidden;
}

.column__grid .col-card__img {
  flex: none;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.column__grid .col-card__body {
  flex: 1;
  min-width: 0;
}

.column__grid .col-card__title {
  margin-top: 6px;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.column__grid .col-card__excerpt {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.column__grid .icon-arrow {
  right: 20px;
  bottom: 20px;
}

/* image placeholder for the 4 slots without a topic-matched
   source asset (see project memory.md — same precedent as
   the Singapore staff-photo placeholder) */

/* ---------------------------------------------------------
   news
   --------------------------------------------------------- */
.news {
  position: relative;
  /* 上は 0（コラムの padding-bottom: 80px がコラムとの間隔 80px になる）
     下はコンテンツ下部余白 = 80px */
  padding: 0 0 80px;
  background: var(--bg-grey);
}

.news__title {
  /* 縦位置はあしらいの margin-bottom: 50px が決める */
  margin-top: 0;
  text-align: right;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 30px;
  /* 他セクションの見出しと同様、行の見えないアキで 50px がズレないよう固定 */
  line-height: 1;
  color: var(--navy);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}

.news__grid > li {
  min-width: 0;
}

.news-item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 140px;
  padding: 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .25s;
}

.news-item:hover {
  transform: translateY(-3px);
}

.news-item__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--navy);
}

.news-item__title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item__excerpt {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item .icon-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

/* =========================================================
   header (reused from indonesia/css/style.css)
   ========================================================= */
.btn--sm {
  width: min(100%, 122px);
  height: 34px;
  border-width: 1px;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 0;
}

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

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

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

.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 {
  width: min(100%, 223px);
  height: auto;
  aspect-ratio: 223 / 26;
}

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

@media (min-width: 1120px) {
  /* この幅域の.header__logoは複数箇所で重複定義されているため、
     複合セレクタで詳細度を上げてどの定義が後勝ちでも同じサイズになるようにする */
  .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: clamp(12px, 1.15vw, 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;
}

.gnav__item--has-child {
  position: relative;
}

.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;
}

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

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

/* =========================================================
   breadcrumb (reused from indonesia/css/style.css)
   ========================================================= */
.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;
}

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

.header__nav-area {
  display: contents;
}

.gnav__sub {
  display: none;
}

@media (max-width: 1119px) and (min-width: 769px) {
  .header__inner {
    padding-inline: 16px;
  }

  .header__service {
    display: none;
  }

  .header__logo {
    width: 160px;
    height: auto;
  }

  .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;
  }

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

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

/* SP専用ルール(下の@media(max-width:768px))より前に置く必要がある
   （後にあるルールが同specificityで勝つため） */
@media (max-width: 1119px) {
  .column {
    padding: 50px 0 50px;
  }
}

@media (max-width: 768px) {
  .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 {
    width: 118px;
    height: auto;
  }

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

  .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;
  }

  .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;
  }

  /* SP のヘッダーは 59px */
  #service,
  #area,
  #strength,
  #achievements,
  #cases,
  #deals,
  #column,
  #download {
    scroll-margin-top: 59px;
  }

  .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;
  }

  .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);
  }

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

  /* 基本の padding-right: 20px は .btn--beige:not(.btn--sm) 限定のため、
     btn--sm を持つドロワーのボタンには効かず、文字と矢印が重なる。
     ヒーロー側と同じ余白を当てる */
  .header__actions .btn--beige.btn--sm {
    padding-right: 20px;
  }

  /* 上の padding-right だけでは足りない（レビュー指摘 TOP No.3）。
     矢印は支給アセット(31px)が right:22px に固定されているのに対し、
     「資料をダウンロードする」は22pxで組むとラベル幅が240pxになり、
     中央揃えの結果その右端が矢印へ1px食い込む（実測 gap -1px）。
     2つのボタンで文字サイズがずれると不揃いに見えるため両方まとめて落とす。 */
  .header__actions .btn--sm .btn__label {
    font-size: 18px;
  }

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

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

  .breadcrumb {
    display: none;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: inline;
  }

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

  /* ---------- kv-hero ----------
     SP版XD（アートボード 06_SP_KV_1〜3, 375x831）に準拠。
     PC同様「紺地の上に写真を重ねる」1枚構成だが、写真はフルブリードではなく
     帯状に置かれ、上下をナビーのグラデーションで溶け込ませる。ボタンはその上に重なる。

     アートボード座標（375x831、うち上部59pxはヘッダー）:
       ヘッダー         y   0 –  59
       写真の可視範囲   y 347 – 605
       ボタン1          y 592 – 652   （w=321, x=27）
       ボタン2          y 668 – 728
     ここでは .kv-hero をヘッダー下の 375x772 として扱い、上記からその分(59)を引いた
     値を % で指定している。 */
  .kv-hero {
    /* SP版XDの基準幅(375px)に対する拡大率。
       ヒーロー内の固定値はすべて calc(N * var(--u)) で、
       位置は「基準ボックス .kv-hero__stack に対する%」で表現しているので、
       375px〜767px のどの幅でもXDと同じ配置のまま相似形で拡大縮小する。
       480pxで頭打ちにして、タブレット幅で文字が巨大化するのを防ぐ。 */
    --u: calc(min(100vw, 480px) / 375);
    aspect-ratio: 375 / 772;
    /* aspect-ratio のままだと幅が広がるほど縦に伸びて余白だらけになるため、
       基準ボックスの相似形（772 * k）で頭打ちにする */
    max-height: calc(772 * var(--u));
  }

  .kv-hero__globe {
    left: 0.11%;
    top: 0;
    width: 118.16%;
    height: 54.70%;
  }

  /* 写真の帯。SP用画像(kv_bg_*_sp.webp)はこの可視範囲(375/258)で書き出してあるので、
     ここの位置・比率を変える場合は画像も書き出し直すこと。 */
  .kv-hero__bg {
    top: 37.31%;
    height: 33.42%;
    bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30.6%, #000 80.2%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30.6%, #000 80.2%, transparent 100%);
  }

  .kv-hero__pager {
    right: 16px;
    bottom: auto;
    top: 65.28%;
  }

  /* SP版XDでは見出し左側にギネスマークが並び、実績ロゴは3つだけが下段に並ぶ。
     PC版のDOM（ギネスも実績リストの1件目）を変えずに再現するため、
     .kv-hero__stack をヒーロー全面の基準ボックスにして、
     ギネスだけをリストのフローから absolute で抜き出して左上へ置く。 */
  /* 中身の基準ボックス。幅は 375*k（=min(100vw,480px)）で中央寄せし、
     高さはヒーロー全高。子要素の % はすべてこのボックス基準になる */
  .kv-hero__stack {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    max-width: calc(375 * var(--u));
    margin-inline: auto;
    padding: 0;
  }

  /* レビュー指摘 SP TOP：ヘッダー下〜リード文の間で「ギネス＋見出し」を上下中央に置く。
     この帯の高さは 167u（ヘッダー下端〜リード文上端）で固定し、見出し高(133u)との差を
     上下で折半して 17u ずつの余白にする。リード文以降の位置は変えない */
  .kv-hero__copy {
    width: 100%;
    padding: calc(17 * var(--u)) 5.333% 0;
  }

  /* レビュー指摘 SP TOP：ギネスマークと見出しのかたまりを画面中央に置く。
     かたまりの幅 = ギネス 78u + 間隔 25u + 見出し 180u(6文字 × 30u) = 283u なので
     左端は (375 - 283) / 2 = 46u。見出しの文字開始位置はそこから 46+78+25 = 149u で、
     .kv-hero__copy の左パディング(5.333% = 20u)を引いた 129u が margin-left になる。
     改行位置（海外進出を、/ M&Aで / もっと速く。）はXD準拠で
     HTML側の <br class="sp-only"> が担保する */
  .kv-hero__title {
    margin: 0 0 0 calc(129 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 1.34;
  }

  .kv-hero__accent {
    font-size: 1.3em;
  }

  .kv-hero__lead {
    /* .kv-hero__copy の padding-top と同値（＝見出し上下の余白を揃える） */
    margin-top: calc(17 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: 1.56;
    text-align: center;
  }

  .kv-hero__achievements {
    margin: calc(24 * var(--u)) 0 0;
    padding: 0 5.333%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: calc(6 * var(--u));
  }

  .kv-hero__achievement img {
    /* --u は min(100vw,480px)/375 で 480px 頭打ちのため、画面が広いほど
       ロゴだけ相対的に小さく見える。px の下限を設けて水準を担保する */
    height: max(60px, calc(60 * var(--u)));
  }

  /* 見出しと横に並べて中央寄せするため、左端はかたまりの左端 46u = 12.267%。
     高さを見出しと同じ 133u にして中で上下中央に置き、見出しと天地の中心を揃える */
  .kv-hero__achievement--guinness {
    position: absolute;
    display: flex;
    align-items: center;
    left: 12.267%;
    top: calc(17 * var(--u));
    width: 20.8%;
    height: calc(133 * var(--u));
  }

  .kv-hero__achievement--guinness img {
    width: 100%;
    height: auto;
  }

  .kv-hero__ctas {
    position: absolute;
    left: 0;
    right: 0;
    top: 69.04%;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
    margin: 0;
    transform: none;
  }

  /* ドロワー（.btn:not(.btn--sm) = 325x67）と同じ寸法・デザインに揃える。
     --u スケールの独自サイズをやめ、共通ボタンの指定をそのまま使う */
  .kv-hero__ctas .btn {
    width: 100%;
    max-width: 325px;
    height: 67px;
    /* 基本スタイル側の border-radius: .7143cqw はヒーロー幅比のため、
       SP では 2〜5px まで縮んで角ばって見える。共通ボタンと同じ 10px に戻す */
    border-radius: 10px;
    font-size: 22px;
  }

  /* 基本スタイル側でヒーロー限定に cqw 指定している装飾を px に戻す
     （cqw はヒーロー幅比のため、SP では矢印が 6px まで縮む） */
  .kv-hero__ctas .btn::before {
    height: 36px;
  }

  .kv-hero__ctas .btn::after {
    right: 22px;
    width: 31.084px;
    height: 31.515px;
  }

  .kv-hero__footnote {
    position: absolute;
    left: 5.333%;
    right: 5.333%;
    top: 88.91%;
    width: auto;
    margin: 0;
    font-size: calc(10 * var(--u));
    line-height: 1.8;
  }

  /* ---------- intro ---------- */
  .intro__inner {
    flex-direction: column;
  }

  .intro__visual {
    flex: 0 0 auto;
    width: 100%;
  }

  .intro__body {
    width: 100%;
    max-width: none;
    /* PC 用の margin-right(var(--gutter)) は width:100% と足し算になり
       ビューポートを超える（右端の隙間＝横スクロールの原因）ので解除 */
    margin-right: 0;
    padding: 30px 20px 30px;
  }

  .intro__heading {
    margin: 0 0 20px;
    font-size: 24px;
    /* PC用の nowrap のままだと狭幅で見出しが折り返せず、
       ページ全体に横スクロールが発生する */
    white-space: normal;
  }

  .intro__text {
    font-size: 14px;
    line-height: 1.8;
  }

  /* ---------- cta-intro ---------- */
  .cta-intro__inner {
    padding: 40px 20px 40px;
  }

  .cta-intro__heading {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.4;
  }

  .cta-intro__text {
    margin: 0 0 24px;
    font-size: 13px;
  }

  .cta-intro__ctas {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* ドロワー／ヒーローと同じ 325x67・22px に統一（独自の 60px/18px をやめる） */
  .cta-intro__ctas .btn {
    width: 100%;
    max-width: 325px;
  }

  /* ---------- shared decorative English headline ---------- */
  .deco-en {
    height: 53px;
  }

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

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

  .deco-en--area {
    right: 20px;
    left: auto;
    top: 24px;
  }

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

  .deco-en--achievements {
    right: 20px;
    top: 0;
  }

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

  /* PC幅前提の calc((100% - 1400px)/2 + n) は SP では画面外へ飛び出して
     横スクロールを生むため、他の deco-en と同じ端基準に置き換える */
  .deco-en--column {
    left: 20px;
    top: 0;
  }

  .deco-en--news {
    left: auto;
    right: 20px;
    top: 0;
  }

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

  /* ---------- service ---------- */
  .section-bg-group {
    min-height: 0;
  }

  .section-bg-group__bg {
    top: 0;
    height: 100%;
    object-fit: cover;
  }

  .area-layer__map {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service {
    padding: 120px 0 50px;
  }

  .service__globe-bg {
    width: 70%;
    opacity: .35;
  }

  .service__inner {
    padding: 0 20px;
  }

  .service__heading {
    margin: 0 0 16px;
    font-size: 24px;
  }

  .service__lead {
    margin: 0 0 32px;
    font-size: 13px;
    line-height: 1.8;
  }

  .service__cards {
    width: 100%;
    margin: 0;
    gap: 20px;
  }

  .service__card {
    flex-direction: column;
    align-items: stretch;
  }

  .service__card-main {
    padding: 24px 20px 0;
  }

  .service__card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .service__card-title {
    font-size: 22px;
    white-space: normal;
  }

  .service__card-icon {
    align-self: center;
    width: 70%;
    max-width: 220px;
  }

  .service__card-desc {
    margin-top: 14px;
    font-size: 13px;
  }

  .service__card-merit {
    flex: none;
    width: auto;
    margin: 20px 20px 24px;
    padding: 20px 20px 22px;
  }

  .service__merit-list li {
    font-size: 14px;
    white-space: normal;
  }

  /* ---------- area ---------- */
  .area__inner {
    padding: 80px 20px 0px;
  }

  .area__heading {
    font-size: 26px;
  }

  .area__lead {
    font-size: 13px;
    line-height: 1.7;
  }

  .area__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0;
    gap: 14px;
  }

  .area__card {
    flex: unset;
    height: 108px;
  }

  /* SP も左下隅にぴったり（PC と同じ）。font-size 指定は画像には効かないため撤去 */
  .area__card-code {
    left: 0;
    bottom: 0;
  }

  .area__card-link {
    padding: 0 16px;
  }

  .area__card-title {
    font-size: 14px;
  }

  .area__card-more {
    font-size: 12px;
  }

  /* ---------- strength ---------- */
  .strength__inner {
    padding: 80px 20px 0px;
  }

  .strength__heading {
    font-size: 26px;
  }

  .strength__lead {
    font-size: 13px;
    line-height: 1.7;
  }

  .strength__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* SPは M&Aサービス（.service__card）と同じく「タイトル→画像→文言」の縦積み。
     以前はアイコンとタイトルを横並びにしていたが、他セクションと揃える */
  .strength__card {
    display: block;
    min-height: 0;
    padding: 22px 20px 24px;
    text-align: left;
  }

  .strength__card-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }

  .strength__card-img {
    /* .service__card-icon と同じ「幅70%・中央寄せ」。高さはPCの132px固定を解除し
       元画像(500x235)の比率のまま出す */
    width: 70%;
    max-width: 220px;
    height: auto;
    margin: 16px auto 14px;
  }

  .strength__card-text {
    font-size: 13px;
  }

  /* ---------- achievements ---------- */
  .achievements__inner {
    padding: 80px 20px 50px;
  }

  .achievements__heading {
    font-size: 26px;
  }

  .achievements__lead {
    font-size: 13px;
    line-height: 1.7;
  }

  .achievements__cards {
    gap: 20px;
  }

  .achievements__card {
    min-height: 0;
    padding: 22px clamp(12px, 4vw, 16px) 24px;
  }

  /* 幅・文字サイズは基本スタイル側の min()/clamp() が全幅で効くため、
     ここでは SP 固有の余白のみを上書きする（px の上書きは崩れの元） */
  .achievements__chart-wrap {
    width: 100%;
  }

  /* ---------- cases ---------- */
  .cases__globe-bg {
    width: 60%;
  }

  .cases__inner {
    padding: 60px 0 20px;
  }

  .cases__intro {
    /* PC の flex: 0 0 25.714% が効いたままだと幅が 1/4 のままになる */
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 0 20px;
  }

  /* SP は PC と別仕様：タイトル中央 → 説明文は左 → カード → スライドバー の縦積み */
  .cases__heading,
  .cases__deal-heading {
    font-size: 26px;
    line-height: 1.4;
    text-align: center;
  }

  .cases__lead,
  .cases__deal-lead {
    text-align: left;
  }

  .cases__lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  .cases__story {
    position: relative;
    /* PC の flex: 0 0 63.714% を打ち消す */
    flex: 0 0 100%;
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
    margin-top: 24px;
    /* 左右の見切れを作るため内側のパディングは持たせない。
       下はカード影(30px)の逃げ場 */
    padding: 0 0 30px;
    overflow: hidden;
  }

  /* カードを画面中央に1枚。左右に (100% - 72%) / 2 = 14% ずつの余白を作り、
     そこへ隣のカードが覗くことで左右スライド可能であることを示す */
  .cases__story-cards {
    /* padding だとトラックの内容幅が縮み、カードの 72% の基準まで変わってしまう。
       幅を変えない position/left で「中央1枚 + 左右14%の見切れ」を作る。 */
    position: relative;
    left: 14%;
    gap: 12px;
    padding-right: 0;
  }

  .cases__story-card {
    flex: 0 0 72%;
  }

  .cases__pager--story {
    position: static;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  .cases__deals {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    min-height: 0;
  }

  .cases__deal-copy {
    order: -1;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    text-align: left;
  }

  .cases__deal-lead {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  /* PC用の改行位置はSPでは効かせず、事例セクションと同じく幅なりに流す。
     HTML側の <br class="pc-only"> と同じ効果だが、class の付け忘れ・
     旧HTMLが残っている場合でもCSSだけで確実に効くようにここでも指定する */
  .cases__deal-lead br {
    display: none;
  }

  .cases__deal-viewport {
    position: relative;
    order: 0;
    width: 100%;
    height: auto;
    margin-top: 24px;
    /* 左右の見切れを作るため内側のパディングは持たせない。下はカード影(30px)の逃げ場 */
    padding: 0 0 30px;
    /* PC 用の direction: rtl（右端起点）は SP では使わない。
       SP は下の left: calc(-204% - 42px) で送り位置を作っているため、
       rtl のままだと二重にずれる。 */
    direction: ltr;
    overflow: hidden;
  }

  .cases__deal-cards {
    position: relative;
    /* JS は translateX(-getStep()*offset) の「左始まり・進むほど左へ送る」方式に
       変わったので、トラックを全カード分ずらしていた旧指定
       （left: calc(-202% - 36px) ＝ 末尾カードが初期表示になる）は廃止。
       事例（.cases__story-cards）と同じ +14% にして、初期表示は必ず1枚目
       （＝一番左のカード）が中央に来るようにする */
    left: 14%;
    gap: 12px;
    /* PC 用の width: max-content / margin-right: 28px を打ち消す。
       max-content のままだと「トラック幅→カード(68%)→トラック幅」が循環参照になり、
       カードがコンテンツ幅まで肥大してレイアウトが崩れる。 */
    width: auto;
    margin-right: 0;
  }

  .cases__deal-card {
    flex: 0 0 72%;
  }

  .cases__deal-title {
    white-space: normal;
  }

  .cases__pager--deals {
    position: static;
    order: 1;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  /* --- SP ではカード内部とページャーの寸法を px で持つ ---
     PC 側は cqw（＝セクション幅比）で持っているため、SP では
     カードの内側余白もページャーも 1/4 以下に潰れてしまう。 */
  .cases__thumb-wrap,
  .cases__thumb--story {
    height: auto;
    aspect-ratio: 338 / 178;
  }

  .cases__card-body {
    padding: 20px 18px 22px;
  }

  .cases__story-title {
    margin: 0 0 16px;
  }

  .cases__profile {
    margin: 0 0 16px;
  }

  .cases__profile dd {
    padding: 9px 10px;
  }

  .cases__text {
    margin: 0 0 16px;
  }

  .cases__tag {
    top: 10px;
    min-width: 67px;
    height: 30px;
    padding: 0 12px 0 27px;
  }

  .cases__tag--wide {
    min-width: 106px;
  }

  /* SP でも .cases__tag の寸法(67x30 / padding 0 12px 0 27px)は PC と同一なので、
     ピン(::before)とリボンの折り返し(::after)は基本ルールをそのまま使う。
     以前ここに旧実装（丸+三角の自作ピン）の座標が残っており、
     ::before が 8x8 に潰れ、::after の折り返しがタグ内部（「タ」の上）に
     食い込んでいたため削除した。 */

  .cases__more {
    gap: 12px;
  }

  .cases__arrow {
    width: 19px;
    height: 9px;
  }

  .cases__arrow::before {
    bottom: 4px;
    width: 19px;
    height: 1px;
  }

  .cases__arrow::after {
    bottom: 1px;
    width: 6px;
    height: 6px;
  }

  /* スライドバー：理想像に合わせて実寸で指定 */
  .cases__pager,
  .cases__pager--story,
  .cases__pager--deals {
    gap: 10px;
    width: 100%;
  }

  .cases__pager-dot {
    width: 8px;
    height: 8px;
  }

  .cases__pager-dot.is-active {
    width: 28px;
    height: 5px;
  }

  .cases__pager-arrow {
    width: 24px;
    height: 24px;
  }

  .cases__pager-arrow img {
    width: 14px;
    height: auto;
  }

  /* ---------- process ---------- */
  .process__inner {
    padding: 32px 20px 40px;
  }

  .process__heading {
    font-size: 22px;
  }

  .process__lead {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.7;
  }

  .process__steps {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }

  /* PCの横線をSPでは縦の連結線に置き換える */
  .process__steps::before {
    display: none;
  }

  .process__step {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "icon num"
      "icon title"
      ". tasks";
    column-gap: 16px;
    align-items: center;
  }

  /* 各ステップの円の中心から次の円の中心までを結ぶ縦線。
     線は position:absolute のため、そのままだと非配置の img より前面に描かれて
     アイコンの上に線が乗ってしまう。.process__icon 側を z-index:1 にして
     SVG に含まれる白丸で線を隠す */
  .process__step::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 36px;
    /* 次ステップのアイコン中心まで＝ gap(28px) + 円の半径(36px) */
    bottom: -64px;
    left: 36px;
    width: 1px;
    margin-left: -0.5px;
    background: var(--navy);
  }

  .process__step:last-child::before {
    content: none;
  }

  .process__step-number {
    grid-area: num;
    margin: 0;
    font-size: 22px;
    text-align: left;
  }

  .process__icon {
    grid-area: icon;
    /* 縦の連結線(.process__step::before)より前面に置き、白丸で線を隠す */
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    margin: 0;
    /* SVGに含まれる白丸は要素いっぱいの正円なので、影も正円に合わせる。
       border-radius が無いと img の矩形に沿った四角い影が出る。 */
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(22, 49, 79, .08);
  }

  .process__icon svg {
    width: 40px;
    height: 40px;
  }

  .process__step-title {
    grid-area: title;
    margin: 0;
    font-size: 16px;
    text-align: left;
  }

  .process__tasks {
    grid-area: tasks;
    margin-top: 12px;
    padding: 0;
    font-size: 12px;
    line-height: 1.7;
  }

  .process__links {
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
  }

  .process__link {
    width: 100%;
  }

  /* ---------- network ---------- */
  .network__inner {
    width: 100%;
    padding: 48px 20px 56px;
  }

  .network__heading {
    margin: 0 0 32px;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
  }

  .network__alliances {
    gap: 32px;
  }

  .network__alliance {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
  }

  .network__alliance-image,
  .network__alliance:nth-child(1) .network__alliance-image,
  .network__alliance:nth-child(2) .network__alliance-image,
  .network__alliance:nth-child(3) .network__alliance-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    /* 幅が絞られたときも中央に置く */
    margin-inline: auto;
  }

  .network__alliance-title {
    margin: 0 0 12px;
    font-size: 20px;
  }

  .network__alliance-body p {
    font-size: 14px;
    line-height: 1.75;
  }

  .network__map {
    width: 100%;
    height: auto;
    /* 中の画像は object-fit:fill で枠いっぱいに伸ばすため、枠の比率が元画像
       (section04_img04.webp 1050x473) と違うと縦横比が崩れる。PCと同じ比率にする */
    aspect-ratio: 1050 / 473;
    margin-top: 40px;
  }

  .network__office-heading {
    margin: 40px 0 24px;
    font-size: 16px;
  }

  .network__offices {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .network__office img {
    width: 100%;
    height: 120px;
  }

  .network__office span {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }

  /* ---------- docs ---------- */
  .docs {
    padding: 48px 0 56px;
  }

  .docs__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .doc-card {
    padding-bottom: 48px;
  }

  /* ---------- column ---------- */
  .column {
    padding: 50px 0 50px;
  }

  .column__title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
  }

  .column__grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 16px;
  }

  .column__grid .col-card {
    height: auto;
    min-height: 110px;
    padding: 14px;
    gap: 14px;
  }

  .column__grid .col-card__img {
    width: 100px;
    height: 76px;
  }

  .column__grid .icon-arrow {
    right: 14px;
    bottom: 12px;
  }

  /* 抜粋の省略記号が右下の矢印に重ならないよう逃がす */
  .column__grid .col-card__excerpt {
    padding-right: 28px;
  }

  /* ---------- news ---------- */
  .news {
    padding: 48px 0 56px;
  }

  .news__title {
    margin-top: 0;
    text-align: center;
    font-size: 22px;
  }

  .news__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .news-item {
    height: auto;
    min-height: 110px;
  }

  /* 抜粋の省略記号が右下の矢印に重ならないよう逃がす */
  .news-item__excerpt {
    padding-right: 30px;
  }

  /* ---------- faq ---------- */
  .faq {
    padding: 50px 0 50px;
  }

  .faq__title {
    margin-bottom: 32px;
    font-size: 22px;
  }

  .faq-item__a-inner .faq-item__text,
  .faq-item__lead {
    width: auto;
  }

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

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

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

  /* -------------------------------------------------------
     SP 共通の揃え方針
       ・メッセージ（見出し・リード・注記などの文章）＝ 左揃え
       ・コンテンツ（ボタン・ページャー・アイコン等の要素）＝ 中央揃え
     この767pxブロックの末尾に置き、上で個別に指定した center を確実に上書きする。
     除外：Cases のカード（上部・下部）は別仕様のため触らない。
           フッターも既存のまま（SNS アイコンのみ中央揃え）。
           CTA帯（.cta-intro）は見出し・ボタンとも中央揃えのため対象外。
     ------------------------------------------------------- */
  .kv-hero__lead,
  .service__heading,
  .service__lead,
  .service__merit-heading,
  .area__inner,
  .area__heading,
  .area__lead,
  .strength__heading,
  .strength__lead,
  .achievements__heading,
  .achievements__lead,
  .achievements__note,
  .achievements__caption,
  .process__heading,
  .process__lead,
  .network__office-heading,
  .column__title,
  .news__title,
  .faq__title,
  .sec-title,
  .sec-lead,
  .notes-box {
    text-align: left;
  }

  /* 要素として中央に置くものは維持（文章ではないため上の指定を打ち消す） */
  .btn,
  .achievements__card-title,
  .achievements__table th,
  .achievements__table td {
    text-align: center;
  }
}

/* =========================================================
   狭幅端末（iPhone SE 等）— 767px ブロックより後に置いて確実に上書きする
   ========================================================= */
@media (max-width: 374px) {
  .sec-title {
    font-size: 27px;
    line-height: 36px;
  }

  /* 装飾英字は幅いっぱいに近いので、狭幅では画面外へはみ出さない大きさに落とす */
  .deco-en {
    height: 42px;
  }

  /* 320px級ではボタン自体が縮む（幅=viewport-50px）ため、矢印(31px)＋右余白(22px)が
     効いて18pxのままでは再びラベルが矢印に届く。矢印も併せて小さくする。 */
  .header__actions .btn--sm::after {
    right: 14px;
    width: 24px;
    height: 24px;
  }

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

/* 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;
}

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

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

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

@media (max-width: 1119px) and (min-width: 769px) {
/* 同上：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;
  }
}

@media (max-width: 768px) {
/* ---------- フッター：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%;
  }
}

/* ===== header: country_page(indonesia.html) からそのまま転用 ===== */
.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;
  align-items: center;
  gap: 10px;
}

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

.header__service {
  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;
}

.gnav__item--has-child {
  position: relative;
}

.gnav__item--has-child:hover .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 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.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

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

.header__menu,
.header__consult,
.drawer__close {
  display: none;
}

.header__nav-area {
  display: contents;
}

.gnav__sub {
  display: none;
}

@media (max-width: 1119px) and (min-width: 769px) {
.header__inner {
    padding-inline: 16px;
  }

.header__service {
    display: none;
  }

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

.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;
  }
}

@media (max-width: 768px) {
.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;
  }

.header__menu-bars {
    margin-bottom: 11px;
  }

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

.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;
  }

.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;
  }

.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;
  }

.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);
    gap: 17px;
    margin: 44px 0 0;
  }

.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);
  }
}

/* ===== header内のボタン: country_page(indonesia.html) の .btn 系を転用 =====
   他セクション(KV/CTA)のボタンに影響しないよう .header__actions 配下に限定 ===== */
.header__actions .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 342px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  overflow: hidden;
  transition: filter .25s, transform .25s;
}

.header__actions .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;
}

.header__actions .btn::after {
  /* arrow glyph — XD path 13.1 x 13.5, 31px from the right edge */
  content: "";
  position: absolute;
  top: 50%;
  right: 31px;
  width: 13px;
  height: 14px;
  transform: translateY(-50%);
  background-color: 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__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.header__actions .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);
}

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

.header__actions .btn--beige {
  color: var(--gold-text);
  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);
}

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

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

.header__actions .btn--sm {
  width: 122px;
  height: 34px;
  border-width: 1px;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 0;
  box-shadow: none;
}

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

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

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

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

/* ===== header内のボタン（タブレット/SP）: indonesia の指定を転用 ===== */

@media (max-width: 1119px) and (min-width: 769px) {
  .header__actions .btn--sm {
    width: 96px;
    font-size: 10px;
  }

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

@media (max-width: 768px) {
  .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;
  }
}

@media (max-width: 374px) {
  .header__actions .btn--sm .btn__label {
    font-size: 22px;
  }

  .header__actions .btn--sm::after {
    right: 31px;
    width: 13px;
    height: 14px;
  }
}

@media (max-width: 1119px) and (min-width: 769px) {
  .header__service {
    display: inline;
  }
}
.header__brand--sub{
    margin-left: 10px;
}


@media (max-width: 1140px) and (min-width: 770px) {
 .kv-hero {
    min-height: 710px;
}
.kv-hero__achievement img {

    height: 64px;

}
}