.top {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-200);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 80px;
  box-sizing: border-box;
  gap: 0; /* 上部は新ヒーローで調整 */
  line-height: normal;
  letter-spacing: normal;
  z-index: 1;
}
.vector-icon2 {
  width: 100%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
  pointer-events: none; /* 背景用の装飾としてクリック干渉を抑制 */
}
.frame-group,
.top-inner {
  display: flex;
  max-width: 100%;
}
.top-inner {
  width: 100%;
  max-width: 1824px;
  margin-inline: auto;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-20);
  box-sizing: border-box;
}
.frame-group {
  /* 固定幅→可変幅 + センター寄せ */
  width: 100%;
  max-width: 1544px;
  margin-inline: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 143.5px;
}
.viewing-the-era-of-100-year-li-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.viewing-the-era-of-100-year-li-parent {
  gap: var(--gap-8);
}
.everyone-can-move,
.viewing-the-era {
  position: relative;
  z-index: 4;
}
.everyone-can-move {
  display: inline-block;
  max-width: 100%;
}
.frame-section {
  /* 固定幅→可変幅 */
  width: 100%;
  max-width: 1446px;
  margin-inline: auto;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 107.6px;
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  /* 共通セクション。背景は持たない（帯の背景は .intro-band 側で管理） */
  background: none;
  
}
.container,
.frame-parent3,
.frame-section {
  display: flex;
  align-items: flex-start;
}
.frame-parent3 {
  flex-direction: column;
  gap: 18.5px;
  max-width: 100%;
}
.container {
  width: 838.1px;
  padding: var(--padding-0) 95px;
  box-sizing: border-box;
}
.container,
.div4,
.frame {
  max-width: 100%;
}
.div4 {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  z-index: 3;
}
.frame {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 270px;
  box-sizing: border-box;
  font-size: var(--fs-30);
}
.b,
.sales-promotion-branding {
  position: relative;
  z-index: 3;
}
.sales-promotion-branding {
  font-size: 88px;
  font-family: var(--font-roboto-condensed);
}
/* （PC調整は下部の指定を採用） */
.frame-parent4,
.frame-parent5,
.frame-wrapper3 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-wrapper3 {
  /* 固定幅→可変幅 */
  width: 100%;
  max-width: 1448px;
  margin-inline: auto;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 91.5px;
  box-sizing: border-box;
}

/* ========== Rebuilt Hero ========== */
.hero{
  position: relative;
  /* 背景の下側の空を確保しつつ、画面高に追随 */
  min-height: clamp(700px, 90vh, 1040px);
  /* 元画像 1920x1080 = 16:9。比率を優先しつつ、min-height で担保 */
  aspect-ratio: 16 / 9;
  display: grid;
  align-items: center;
  /* 背景画像（夜空）フォールバック。動画が再生できない場合に使用 */
  background-image: url('./public/WC-web-top-mov@2x.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero .hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0; /* 背景として背面に配置 */
}
/* 動きを減らす設定のユーザーには動画を無効化（背景画像を使用） */
@media (prefers-reduced-motion: reduce){
  .hero .hero__video{ display: none !important; }
}
.hero::after{
  /* 上下の暗めグラデーションでコントラストを安定 */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.4) 100%);
  z-index: 0;
}
.hero__inner{
  position: relative; z-index: 1;
  display: grid;
  /* 右カラムの幅を比率レンジで固定 */
  grid-template-columns: 1fr clamp(var(--hero-right-min,360px), 28vw, var(--hero-right-max,420px));
  column-gap: clamp(48px, 6vw, 120px);
  /* コンテナ幅も比率で中央に */
  width: min(var(--hero-max,1280px), 92vw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  color: #fff;
}
.hero__title{
  /* PC_TOP想定: Roboto Condensed Regular 88 付近を流体化 */
  font-family: 'Roboto Condensed','Noto Sans JP',sans-serif;
  font-weight: 400 !important;
  font-size: clamp(56px, 5.7vw, 92px);
  line-height: 1.12;
  letter-spacing: .02em;
  margin: 0;
  font-synthesis-weight: none;
}
.hero__right p{ margin: 0 0 12px; }
.hero__right{ max-width: 600px; justify-self: end; margin-inline-end: clamp(24px, 5vw, 56px); }
.hero__right .jp{
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 16px); /* より小幅でも3行維持 */
  line-height: 1.9;
  letter-spacing: .02em;
}
.hero__lead{
  font-family: 'Roboto Condensed','Noto Sans JP',sans-serif;
  font-weight: 400;
  opacity:.95;
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.7;
}

/* 大きい画面での最終微調整（3行目標） */
@media (min-width: 1360px){
  .hero__inner{ grid-template-columns: minmax(0,1fr) 560px; }
  .hero__right{ max-width: 560px; }
}
@media (min-width: 1600px){
  .hero{ min-height: 980px; background-position: center 28%; }
  .hero__inner{ width: min(var(--hero-max-lg,1360px), 90vw); justify-items: start; }
}
/* iPad〜小さめデスクトップで右カラムが寄りすぎるのを緩和 */
@media (min-width: 1025px) and (max-width: 1400px){
  .hero__inner{ column-gap: clamp(36px, 4.5vw, 72px); justify-items: start; }
  .hero__right{ justify-self: start; margin-inline-end: clamp(12px, 2vw, 24px); max-width: 520px; }
}
@media (max-width: 1024px){
  /* 狭幅では縦積みにして右側の横幅を広く確保 → 3行維持 */
  .hero{ min-height: clamp(640px, 88vh, 960px); }
  .hero__inner{ grid-template-columns: 1fr; row-gap: 32px; width: min(100%, 92vw); }
  .hero__right{ justify-self: center; margin-inline-end: 0; max-width: min(680px, 92vw); text-align: center; }
  .hero__title{ font-size: clamp(36px, 8vw, 72px); }
}

/* スマホ（~480px）で“上寄せ”にし、初見でテキストが見えるよう調整 */
@media (max-width: 480px){
  .hero{
    align-items: start;            /* コンテンツを上に寄せる */
    min-height: 100svh;            /* 端末UIを除いた実画面高 */
    aspect-ratio: auto;            /* 高さ優先に切替 */
    /* SP用の幅/パディングを変数化して英語3行との整合を担保 */
    --sp-hero-w: min(86vw, 680px);   /* 94vw → 86vw にして全体をやや中央寄せに */
    --sp-hero-pad: 20px;             /* 左右の内側パディング */
    padding-top: calc(var(--header-h) + 56px); /* 見出しと日本語を少し下げる */
    background-position: center 38%;
  }
  .hero__inner{ width: var(--sp-hero-w); row-gap: 16px; padding-inline: var(--sp-hero-pad); justify-items: start; text-align: left; position: static; }
  .hero__title{ font-size: clamp(52px, 16vw, 80px); line-height: 1.1; text-align: left; font-weight: 400 !important; }
  /* 日本語3行は見出し直下・左揃え。左端は見出しと共通のパディングで揃う */
  .hero__right{ justify-self: start; text-align: left; max-width: min(680px, 92vw); }
  .hero__right .jp{ font-size: clamp(13px, 3.6vw, 15px); line-height: 1.9; text-align: left; width: min(92vw, 680px); margin: 8px 0 0; }
  /* 右寄せの微調整（タイトル＆日本語3行のみを少し右に寄せる） */
  .hero{ --sp-hero-offset: clamp(8px, 3vw, 18px); }
  .hero__left, .hero__right{ padding-left: var(--sp-hero-offset); }
  /* 追加の左パディング分だけ日本語テキストの幅を減算して折返しを維持 */
  .hero__right .jp{ width: calc(min(92vw, 680px) - var(--sp-hero-offset)); }
  /* 英語3行をKV下部へ固定配置 */
  .hero__lead{
    position: absolute;
    /* 中央配置された .hero__inner の左端 + パディングに合わせる（可変幅対応） */
    left: calc((100vw - var(--sp-hero-w)) / 2 + var(--sp-hero-pad));
    right: auto;
    bottom: clamp(16px, 6vh, 64px);
    /* 内側パディング分を左右とも差し引いたテキスト幅 */
    width: calc(var(--sp-hero-w) - (var(--sp-hero-pad) * 2));
    text-align: left;
    font-size: clamp(12px, 3.2vw, 14px); line-height: 1.7;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}

/* 3行固定ロジック */
.hero__jp, .hero__en{ display:flex; flex-direction:column; gap:8px; }
.hero__jp{ margin-bottom: clamp(14px, 2.2vw, 28px); }
.hero__jp .line, .hero__en .line{
  white-space: nowrap;  /* 行内で絶対に折り返さない */
  display:block;
}
/* 幅が足りない場合はコンテナ幅に合わせて縮小（英日それぞれ） */
.hero__jp, .hero__en{
  overflow: hidden; /* はみ出し防止 */
}

/* 地図背景のイントロ帯 */
.intro-band{
  position: relative;
  /* デザイン見本どおり青い地図帯を使用（背景色は付けず帯の紺色化を回避） */
  z-index: 100;
  isolation: isolate;
  /* 画像上部の濃い帯が映り込まないよう、表示位置をさらに下げる */
  background: url('./public/Clip-path-group3@2x.png') center 64% / cover no-repeat;
  /* 画像実寸を踏まえた最小高さ */
  min-height: clamp(520px, 36vw, 640px);
  padding: 0;
  margin-bottom: clamp(24px, 4vw, 64px);
  display: grid; place-items: center;
  /* フルブリード */
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
}

/* 色味を見本に寄せるため、わずかに明るくする薄いオーバーレイ */
.intro-band::after{
  content: "";
  position: absolute; inset: 0;
  /* 薄い明度アップ + ごく僅かな青味で見本の色味へ寄せる */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,.06) 100%),
    linear-gradient(0deg, rgba(50,110,170,.06), rgba(50,110,170,.06));
  pointer-events: none;
}

/* スマホはさらに帯が見えやすいので、少しだけ下げる */
@media (max-width: 480px){
  .intro-band{
    background-position: center 72%;
    /* 高さ過多による“ズーム感”を抑えるため若干低めに */
    min-height: clamp(420px, 58vh, 620px);
  }
  .intro-band .div4{ font-size: clamp(15px, 3.8vw, 18px); }
  .intro-band .b{ font-size: clamp(17px, 3.9vw, 20px); }
  .intro-band .sales-promotion-branding{ font-size: clamp(40px, 10vw, 60px); }
}

/* タブレット(481–1023px)でのサイズ指定。PC(>=1024px)は下のメディアクエリを生かすため範囲を限定 */
@media (min-width: 481px) and (max-width: 1023.98px){
  .intro-band .b{ font-size: 40px; }
}
.intro-band .frame-parent3{ position: relative; z-index: 1; align-items: center; text-align: center; width: min(1446px, 92vw); margin-inline: auto; }
.intro-band .container{ width: auto; padding: 0 16px; }
.intro-band .frame{ padding: 0; justify-content: center; }
.intro-band .div4{ /* 上段の日本語（小） */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
  font-size: clamp(16px, 1.2vw, 22px);
  opacity: .95;
  white-space: normal; /* 右端で切れないように折返し許可 */
  text-wrap: balance;
}
/* 2行構成を明示（spanをブロック化） */
.intro-band .div4 .mobi-head-1,
.intro-band .div4 .mobi-head-2{ display:block; }
.intro-band .b{ /* 中段の日本語（太字） */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.25vw, 24px);
  margin-top: clamp(10px, 1.5vw, 16px);
}
.intro-band .sales-promotion-branding{ /* 大見出し（英字） */
  font-family: 'Roboto Condensed','Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.1;
  margin-top: clamp(16px, 2vw, 24px);
}
/* PC(>=1024px) は最終勝ちになるよう、ベース指定の後ろでサイズを上書き */
@media (min-width: 1024px){
  .intro-band .b{ font-size: 32px; }
}
.frame-parent4,
.frame-parent5 {
  flex-direction: column;
}
.frame-parent4 {
  width: 1000px;
  gap: 98px;
}
.frame-parent5 {
  width: 978px;
  gap: var(--gap-10);
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-white);
 
}
.frame-parent6 {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  font-size: 70px;
  font-family: var(--font-roboto-condensed);
}
.our-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.our {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.business-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0);
}
.business {
  margin-top: -12px;
  position: relative;
  flex-shrink: 0;
  z-index: 3;
}
.frame-parent7,
.group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.frame-parent7 {
  width: 468px;
  gap: 42px;
  font-size: var(--fs-18);

}
.group {
  align-self: stretch;
  gap: var(--gap-10);
}
.div7,
.div8 {
  position: relative;
  display: inline-block;
  max-width: 100%;
  z-index: 2;
}
.div8 {
  width: 465px;
  white-space: nowrap;
}
.frame-parent8 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  font-size: var(--fs-13);
}
.div10,
.div9 {
  position: relative;
  z-index: 2;
}
.div10 {
  font-size: var(--fs-18);
  display: inline-block;
  max-width: 100%;
}
.wrapper3 {
  align-self: stretch;
  justify-content: flex-end;
}
.parent2,
.wrapper3,
.wrapper4 {
  display: flex;
  align-items: flex-start;
}
.wrapper4 {
  padding: var(--padding-0) 289px var(--padding-0) 510px;
}
.parent2 {
  align-self: stretch;
  height: 1000px;
  flex-direction: column;
  padding: 68.1px 58px 75.9px 59px;
  box-sizing: border-box;
  position: relative;
  gap: 50px;
  max-width: 100%;
}
.icon4 {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 2;
}
.frame-wrapper4 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-1) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: 17px;
  color: var(--color-white);

}
.frame-parent9 {
  flex-direction: column;
  gap: 7px;
  max-width: 100%;
}
.frame-parent10,
.frame-parent9,
.wrapper5 {
  display: flex;
  align-items: flex-start;
}
.wrapper5 {
  padding: var(--padding-0) 268px var(--padding-0) 262px;
}
.frame-parent10 {
  align-self: stretch;
  flex-direction: column;
  font-size: var(--fs-27);
  font-family: var(--font-roboto-condensed);
}
.healthcare-field-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 235px var(--padding-0) 240px;
}
.healthcare-field {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  z-index: 3;
}
.frame-parent11,
.parent3 {
  display: flex;
  align-items: flex-start;
}
.frame-parent11 {
  align-self: stretch;
  justify-content: space-between;
  gap: var(--gap-20);
  font-size: var(--fs-13);
  color: var(--color-gray-200);

}
.parent3 {
  width: 262px;
  flex-direction: column;
  padding: var(--padding-60) 52px var(--padding-40);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-15);
}
.icon5 {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 4;
}
.brand-building-support-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 23px var(--padding-0) var(--padding-16);
  font-family: var(--font-roboto-condensed);
}
.brand-building-support {
  position: relative;
  z-index: 5;
}
.frame-wrapper5,
.parent4 {
  display: flex;
  align-items: flex-start;
}
.frame-wrapper5 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-12) var(--padding-0) var(--padding-5);
  font-size: var(--fs-24);
}
.parent4 {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-3);
}
.h3 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  z-index: 5;
}
.development-beginning {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-24);
}
.h32 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  z-index: 5;
}
.frame-parent12,
.wrapper6 {
  display: flex;
  align-items: flex-start;
}
.frame-parent12 {
  flex-direction: column;
  gap: var(--gap-4);
}
.wrapper6 {
  padding: var(--padding-0) 11px var(--padding-0) var(--padding-12);
}
.div15 {
  position: relative;
  white-space: nowrap;
  z-index: 5;
}
.parent5,
.wrapper7 {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 56px var(--padding-0) 59px;
}
.parent5 {
  width: 262px;
  flex-direction: column;
  padding: 66px var(--padding-32);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-15);
}
.product-development-support-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-27) var(--padding-0) 17px;
  font-family: var(--font-roboto-condensed);
}
.frame-parent13 {
  display: flex;
  align-items: flex-start;
  position: relative;
  font-size: var(--fs-26);
  color: var(--color-white);
}
.icon7,
.parent6 {
  position: absolute;
}
.parent6 {
  height: 554.1px;
  width: 554.1px;
  margin: 0 !important;
  bottom: -522.9px;
  left: -373.1px;
  flex-shrink: 0;
}
.icon7 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.h2,
.h22,
.h23 {
  margin: 0;
  position: absolute;
  top: 235.2px;
  left: 184.6px;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  z-index: 4;
}
.h22,
.h23 {
  top: 277.2px;
  left: 157.9px;
}
.h23 {
  top: 319.2px;
}
.total-business-support {
  position: absolute;
  top: 192.2px;
  left: 193.1px;
  font-size: var(--fs-18);
  font-family: var(--font-roboto-condensed);
  z-index: 4;
}
.h33 {
  margin: 0;
  position: relative;
  font-size: var(--fs-24);
  font-weight: 700;
  font-family: inherit;
  color: var(--color-gray-200);
  z-index: 5;
  flex-shrink: 0;
}
.frame-wrapper6,
.wrapper8 {
  display: flex;
  align-items: flex-start;
}
.frame-wrapper6 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-18) var(--padding-0) var(--padding-12);
}
.wrapper8 {
  padding: var(--padding-0) var(--padding-18) var(--padding-0) 19px;
}
.wrapper9 {
  padding: var(--padding-0) var(--padding-5);
}
.frame-parent14,
.parent8,
.wrapper9 {
  display: flex;
  align-items: flex-start;
}
.frame-parent14 {
  align-self: stretch;
  gap: 48px;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-13);
  color: var(--color-gray-200);

}
.parent8 {
  height: 262px;
  width: 262px;
  flex-direction: column;
  padding: var(--padding-60) 33px var(--padding-40);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-15);
}
.marketing-sales-support-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 34px var(--padding-0) 25px;
  font-family: var(--font-roboto-condensed);
}
.parent9 {
  width: 179px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-3);
  font-size: var(--fs-24);
}
.h34 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  z-index: 5;
}
.wrapper10 {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-16) var(--padding-0) var(--padding-24);
}
.construct,
.construct2,
.frame-wrapper7 {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 37px var(--padding-0) 31px;
}
.construct,
.construct2 {
  padding: var(--padding-0) 7px var(--padding-0) var(--padding-3);
}
.construct2 {
  padding: var(--padding-0) var(--padding-24) var(--padding-0) 25px;
}
.expansion,
.partnership {
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.expansion {
  gap: 48.1px;
  max-width: 100%;
}
.partnership {
  flex-direction: column;
  padding: 222px var(--padding-0) var(--padding-0);
}
.cooperation {
  align-self: stretch;
  height: 262px;
  position: relative;
}
.icon9 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.co-operation,
.div23 {
  position: absolute;
  top: 134px;
  left: 51.5px;
  z-index: 5;
}
.co-operation {
  top: 154px;
  left: 57.6px;
}
.div24 {
  top: 174px;
  left: 77.9px;
  display: inline-block;
  min-width: 104px;
}
.connect,
.div24,
.h36 {
  position: absolute;
  z-index: 5;
}
.h36 {
  margin: 0;
  top: 91px;
  left: 57.5px;
  font-size: var(--fs-24);
  font-weight: 700;
  font-family: inherit;
}
.connect {
  top: 60px;
  left: 108.8px;
  font-family: var(--font-roboto-condensed);
  display: inline-block;
  min-width: 43px;
}
.communications {
  height: 262px;
  flex: 0.8473;
  flex-direction: column;
  padding: var(--padding-60) var(--padding-20) var(--padding-40);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-15);
}
.communications,
.marketing-comms,
.sales-support {
  display: flex;
  align-items: flex-start;
}
.sales-support {
  align-self: stretch;
  padding: var(--padding-0) 43px;
  font-family: var(--font-roboto-condensed);
}
.marketing-comms {
  flex-direction: column;
  gap: var(--gap-3);
  font-size: var(--fs-24);
}
.support-services {
  padding: var(--padding-0) 58px var(--padding-0) 61px;
}
.advertising,
.promotional-design,
.support-services {
  display: flex;
  align-items: flex-start;
}
.advertising {
  align-self: stretch;
  padding: var(--padding-0) 42px var(--padding-0) 37px;
}
.promotional-design {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-4);
}
.strengths,
.targeted-design,
.targeted-design2 {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-6);
}
.strengths,
.targeted-design2 {
  padding: var(--padding-0) 44px var(--padding-0) 47px;
}
.strengths {
  align-self: stretch;
  justify-content: center;
  padding: var(--padding-0) 530px 11.5px var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-white);
  
}
.cooperation-strengths,
.proficiencies {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cooperation-strengths {
  gap: 42px;
  max-width: 100%;
}
.proficiencies {
  padding: var(--padding-0) var(--padding-0) 68px;
  gap: 13px;
  font-size: 65px;
  font-family: var(--font-roboto-condensed);
}
.advantage,
.div28 {
  position: relative;
  z-index: 4;
}
.div28 {
  font-size: var(--fs-13);

}
.collaboration-team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-10);
  max-width: 100%;
}
.robust-network,
.teams-group {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.strengths{
  position: relative;
  overflow: hidden;
  z-index: 0; /* 上の帯より背面 */
  margin-top: clamp(40px, 6vw, 100px); /* セクション間に確実な間隔を作る */
}

/* PC/iPad版のみ：Business_circle図の直後の余白を調整 */
@media (min-width: 441px) {
  .strengths {
    margin-top: clamp(20px, 3vw, 40px); /* PC/iPad版では余白を小さく */
  }
}
.strengths .advantage-yellow-hitarea{
  position:absolute;
  inset: 0 0 0 50%; /* 右半分をカバー */
  z-index: 1;        /* 背景::after(0)の上、テキスト(z-index:4)の下に配置 */
  display:block;
  /* アクセシビリティ: 視覚的な影響は与えない */
  background: transparent;
}
.strengths::after{
  /* Advantage 右側の黄色テクスチャ（セクションの右半分） */
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: url('./public/image-top-02@2x.png') right center / cover no-repeat;
  pointer-events: none;
  opacity: 1;
  z-index: 0; /* セクション内の背面として配置 */
  /* 念のためセクション領域外へ描画されないようクリップ */
  clip-path: inset(0 0 0 0);
}
.robust-network {
  flex-direction: column;
  padding: var(--padding-0) var(--padding-0) var(--padding-6);
  gap: var(--gap-10);
  max-width: 100%;
}
.teams-group {
  width: 235px;
  padding: 8.5px 17px 9.5px;
  position: relative;
  color: var(--color-gray-100);
}
/* Teams ピル内リンクの下線と青色を除去し、親色を継承 */
.teams-group .brand-building-support,
.teams-group .brand-building-support:visited {
  color: inherit;
  text-decoration: none;
}
.teams-group .brand-building-support:hover,
.teams-group .brand-building-support:focus {
  text-decoration: none;
}
.organization {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.icon11,
.icon12,
.organization {
  position: absolute;
}
.icon11 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 4;
}
.icon12 {
  top: 4px;
  left: 195px;
  width: 32px;
  height: 32px;
  z-index: 5;
}
.client-showcase {
  width: 1427px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 52.5px;
  box-sizing: border-box;
  text-align: left;
  font-size: 65px;
  color: var(--color-gray-200);
  font-family: var(--font-roboto-condensed);
}
.client-showcase,
.patron,
.representative {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.representative {
  align-self: stretch;
  width: 707px;
  flex-direction: column;
  gap: 53px;
}
.patron {
  padding: var(--padding-0) 269px;
  box-sizing: border-box;
}
.client {
  position: relative;
  z-index: 3;
}
.logo-icon,
.logo-presentation {
  align-self: stretch;
  flex: 1;
  max-width: 100%;
}
.logo-presentation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 46.4px;
  font-size: var(--fs-15);
  color: var(--color-dimgray);
}
.logo-icon {
  position: relative;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 3;
}
.also-others {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 309px;
  box-sizing: border-box;
  max-width: 100%;
}
.and-more {
  position: relative;
  z-index: 3;
}
.boost-business {
  width: 1448px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
}
.boosting {
  width: 1000px;
  flex-direction: column;
  gap: 66.5px;
}
.accelerate,
.augment,
.boosting,
.companies {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.accelerate {
  width: 978px;
  flex-direction: column;
  gap: 13px;
  text-align: left;
  font-size: 65px;
  color: var(--color-white);
  font-family: var(--font-roboto-condensed);
}
.augment,
.companies {
  align-self: stretch;
}
.companies {
  flex-direction: column;
}
.augment {
  justify-content: space-between;
  gap: var(--gap-20);
}
.boost {
  position: relative;
  z-index: 2;
}
.growth-company,
.wealthy-capabilities {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.growth-company {
  width: 468px;
  padding: 13px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--fs-18);

}
.wealthy-capabilities {
  align-self: stretch;
  gap: var(--gap-10);
}
.wealthy-connect {
  position: relative;
  white-space: nowrap;
  z-index: 2;
}
.addresses,
.your-business {
  position: relative;
  max-width: 100%;
}
.addresses {
  width: 707px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  margin-top: -2px;
}
.your-business {
  display: inline-block;
  z-index: 3;
}

/* ==============================
   Healthcare Field（PC・iPad専用図）
   ============================== */

/* PC・iPad専用：新しい Healthcare Field の図 */
.pc-healthcare-figure {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.pc-healthcare-figure img {
  width: 100%;
  height: auto;
  max-width: 800px;
}

@media (max-width: 440px){
  /* PC・iPad専用の新しい図を非表示 */
  .pc-healthcare-figure{ display:none !important; }
}

.challenges {
  width: 197px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  font-size: var(--fs-18);
}
.div39 {
  position: relative;
  font-size: var(--fs-13);
  z-index: 2;
}
.frame-parent15,
.line-icon {
  position: relative;
  max-width: 100%;
}
.line-icon {
  align-self: stretch;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
}
.frame-parent15 {
  width: 939px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) 135.9px;
  box-sizing: border-box;
  gap: 56.4px;
  min-height: 455px;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-white);

}
.framing-issue-wrapper {
  align-self: stretch;
  justify-content: flex-end;
  padding: var(--padding-0) 2px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
.framing-issue,
.framing-issue-wrapper,
.headline-issue {
  display: flex;
  align-items: flex-start;
}
.framing-issue {
  flex: 1;
  flex-direction: column;
  gap: 40px;
  max-width: 100%;
}
.headline-issue {
  cursor: pointer;
  border: 0;
  padding: 7px 35px var(--padding-8);
  background-color: transparent;
  position: relative;
  z-index: 2;
}
.icon13 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 1px;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.issue {
  position: relative;
  font-size: var(--fs-16);
  line-height: var(--lh-19);
  font-family: var(--font-roboto-condensed);
  color: var(--color-white);
  text-align: left;
  z-index: 1;
}
.unknown-challenges {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-10);
  box-sizing: border-box;
  max-width: 100%;
}
.challenges-faces {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-20);
}
.challenges-faces,
.confrontation,
.representations {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.confrontation {
  flex-direction: column;
  padding: 1.3px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.representations {
  gap: var(--gap-20);
  flex-shrink: 0;
}
.icon-01 {
  height: 26.9px;
  width: 27px;
  position: relative;
  z-index: 2;
}
.products-unsells,
.unmarket-icons {
  display: flex;
  align-items: flex-start;
}
.products-unsells {
  flex-direction: column;
  padding: 2.6px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: calc(100% - 47px);
  flex-shrink: 0;
}
.unmarket-icons {
  width: 427px;
  gap: var(--gap-18);
  max-width: 100%;
}
.icon-04 {
  height: 31px;
  width: 31px;
  position: relative;
  object-fit: cover;
  z-index: 2;
}
.failure-selling,
.markets-commodities {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.markets-commodities {
  flex: 1;
  flex-direction: column;
  padding: 4.9px var(--padding-0) var(--padding-0);
  min-width: 246px;
}
.failure-selling {
  align-self: stretch;
  padding: var(--padding-0) 7px;
}
.unsucceed-sales {
  width: 807px;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
}
.deficient,
.illustrations,
.unsucceed-sales {
  display: flex;
  align-items: flex-start;
}
.deficient {
  flex-direction: column;
  padding: 2.1px var(--padding-0) var(--padding-0);
}
.illustrations {
  gap: var(--gap-22);
}
.icon-02 {
  height: 28px;
  width: 28px;
  position: relative;
  object-fit: cover;
  z-index: 2;
}
.creation-need,
.selling-problems {
  display: flex;
  align-items: flex-start;
}
.selling-problems {
  flex-direction: column;
  padding: 2.9px var(--padding-0) var(--padding-0);
}
.creation-need {
  gap: 22.4px;
}
.icon-05 {
  height: 27.6px;
  width: 27.6px;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.confident-goods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-5) var(--padding-0) var(--padding-0);
}
.b5 {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.new-healthcare {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.5px;
  max-width: 100%;
}
.healthy-business {
  align-self: stretch;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  flex-shrink: 0;
}
.achievements,
.healthy-business,
.portray {
  display: flex;
  align-items: flex-start;
}
.achievements {
  flex-direction: column;
  padding: 1.3px var(--padding-0) var(--padding-0);
}
.portray {
  gap: 12px;
}
.icon-03 {
  height: 28.1px;
  width: 30.6px;
  position: relative;
  object-fit: cover;
  flex-shrink: 0;
  z-index: 2;
}
.successful-newness {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6px var(--padding-0) var(--padding-0);
}
.doctor-understanding {
  width: 427px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-22);
  max-width: 100%;
}
.icon-06 {
  height: 26px;
  width: 27px;
  position: relative;
  object-fit: cover;
  z-index: 2;
}
.want-recognized {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.9px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  min-width: 246px;
  max-width: 100%;
}
.demand-competencies {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 50px;
}
.arrow-1-icon {
  width: 11.9px;
  height: 75.8px;
  position: absolute;
  margin: 0 !important;
  bottom: 15.7px;
  left: 75px;
  z-index: 5;
}
.solution-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 37px;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-khaki);
  font-family: var(--font-roboto-condensed);
}
.headline-solution {
  display: flex;
  align-items: flex-start;
  padding: 7px var(--padding-18) var(--padding-8);
  position: relative;
  z-index: 5;
}
.solution {
  position: relative;
  line-height: var(--lh-19);
  z-index: 1;
}
.brand-building-support2 {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding: var(--padding-27) var(--padding-30) var(--padding-40);
  box-sizing: border-box;
  position: relative;
  gap: 157px;
  max-width: 100%;
  z-index: 5;
  font-size: var(--fs-45);
  color: var(--color-white);
}
.brand-building-support-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-11);
  max-width: 100%;
}
.div40 {
  position: relative;
  font-size: var(--fs-13);
  font-weight: 500;
 
}
.brand-definition,
.parent11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brand-definition {
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 3.7px;
  font-size: var(--fs-14);

}
.parent11 {
  gap: var(--gap-8);
}
.div41 {
  position: relative;
}
.product-marketing {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-10);
  box-sizing: border-box;
  gap: 9.9px;
  max-width: 100%;
}
.product-marketing-container {
  width: 730px;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-45);
  color: var(--color-white);
  font-family: var(--font-roboto-condensed);
}
.arrow-2-wrapper,
.frame-parent16,
.product-marketing-container {
  display: flex;
  align-items: flex-start;
}
.frame-parent16 {
  width: 490px;
  flex-direction: column;
  gap: var(--gap-10);
  max-width: calc(100% - 28px);
}
.arrow-2-wrapper {
  align-self: stretch;
  justify-content: center;
  padding: var(--padding-0) 25px var(--padding-0) var(--padding-20);
}
.arrow-2-icon {
  height: var(--height-40);
  width: var(--width-8);
  position: relative;
  z-index: 5;
}
.product-development-support2 {
  align-self: stretch;
  padding: var(--padding-27) var(--padding-30) 33.1px;
  box-sizing: border-box;
  position: relative;
  gap: 34.9px;
  max-width: 100%;
  z-index: 5;
}
.product-development-parent,
.product-development-support2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-development,
.support {
  position: relative;
}
.support {
  margin-top: -3px;
}
.product-management {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-8);
  max-width: 100%;
  font-size: var(--fs-14);

}
.arrow-3-icon {
  height: 370px;
  width: var(--width-8);
  position: relative;
  z-index: 5;
}
.marketing-sales-support2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-27) var(--padding-40) var(--padding-40);
  box-sizing: border-box;
  position: relative;
  gap: 84px;
  max-width: 100%;
  z-index: 5;
  text-align: left;
  font-size: var(--fs-45);
  color: var(--color-white);
  font-family: var(--font-roboto-condensed);
}
.marketing-implementation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13.3px var(--padding-0) var(--padding-0);
  font-size: var(--fs-14);

}
.connect-comm,
.connect-comm-container,
.plus-connect {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.solution-band{
  background: #0e1e2f; /* デザインの濃紺 */
  position: relative;
}
.solution-band::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: url('./public/Line.svg') center/contain no-repeat;
  opacity:.5;
}
.connect-comm {
  flex-direction: column;
  gap: var(--gap-20);
  text-align: left;
  font-size: var(--fs-45);
  color: var(--color-white);
  font-family: var(--font-roboto-condensed);
}
.connect-comm-container,
.plus-connect {
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
}
.plus-connect {
  justify-content: space-between;
  padding: var(--padding-27) 97px var(--padding-40) var(--padding-40);
  position: relative;
  gap: var(--gap-20);
  z-index: 5;
}
.brand-communication,
.plus-connect-support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.plus-connect-support {
  gap: var(--gap-11);
}
.brand-communication {
  padding: 15px var(--padding-0) var(--padding-0);
  font-size: var(--fs-14);

}
.footer-container-wrapper {
  width: 1427px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: 68px;
  color: var(--color-gray-200);
  font-family: var(--font-roboto-condensed);
}
.footer-container {
  width: 1020.3px;
  flex-direction: column;
  gap: 114px;
}
.contact-top-parent,
.footer-container,
.footer-top {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.footer-top {
  width: 1000px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
}
.contact-top-parent {
  gap: 56px;
}
.div53,
.first-conect {
  position: relative;
  z-index: 4;
}
.div53 {
  font-size: var(--fs-18);

}
.contact-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16.5px var(--padding-0) var(--padding-0);
}
.icon15 {
  width: 77px;
  height: 77px;
  position: relative;
  z-index: 4;
}
.contact-column,
.footer-middle {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.footer-middle {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-22);
  font-size: var(--fs-15);
  color: var(--color-white);
}
.contact-column {
  width: 918px;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-16);
  box-sizing: border-box;
}
.contact-row {
  align-self: stretch;
  max-width: 100%;
  font-size: var(--fs-16);
}
.company-logo,
.contact-about,
.contact-row {
  display: flex;
  align-items: flex-start;
}
.contact-about {
  width: 717px;
  justify-content: space-between;
  gap: var(--gap-20);
  flex-shrink: 0;
  max-width: 100%;
}
.company-logo {
  flex-direction: column;
  padding: var(--padding-1) var(--padding-0) var(--padding-0);
}
.logo-wc-icon2 {
  align-self: stretch;
  height: 24.2px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 3;
}
.about-contact {
  width: 95px;
  flex-direction: column;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.about-contact,
.about-contact2,
.office-info {
  display: flex;
  align-items: flex-start;
}
.about-contact2 {
  width: 180px;
  flex-direction: column;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.office-info {
  width: 663px;
  justify-content: space-between;
  gap: var(--gap-20);
  flex-shrink: 0;
  max-width: 100%;
  margin-top: -0.1px;
  position: relative;
}
.team-title {
  flex-direction: column;
  padding: var(--padding-6) 14px var(--padding-0) var(--padding-0);
  font-size: var(--fs-16);
}
.address-detail,
.address-location,
.team-title {
  display: flex;
  align-items: flex-start;
}
.address-detail {
  justify-content: flex-end;
  padding: var(--padding-0) 70px;
  margin-top: -0.1px;
  position: relative;
}
.address-location {
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.icon16 {
  width: 1000px;
  position: relative;
  max-height: 100%;
  max-width: 100%;
  z-index: 3;
}
.footer-bottom {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  font-size: 12px;
}
.wealthy-connect-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-6) var(--padding-0) var(--padding-0);
  font-size: 11px;

}
@media screen and (max-width: 1200px) {
  .frame-group {
    gap: 72px;
  }
  .frame-wrapper3 {
    padding-bottom: 59px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1050px) {
  /* 旧ヒーロー系・不要クラス指定を削除: .the-stories*, .connect-us*, .frame-container など */
  .b {
    font-size: var(--fs-24);
  }
  .sales-promotion-branding {
    font-size: 44px;
  }
  .frame-parent4 {
    gap: 49px;
  }
  .frame-parent6 {
    flex-wrap: wrap;
  }
  .our-parent {
    flex: 1;
  }
  .business,
  .our {
    font-size: 56px;
  }
  .frame-parent7 {
    flex: 1;
  }
  .parent2,
  .wrapper4 {
    box-sizing: border-box;
  }
  .wrapper4 {
    padding-left: 255px;
    padding-right: 144px;
  }
  .parent2 {
    padding: 44px 29px 49px;
  }
  .frame-parent14 {
    flex-wrap: wrap;
  }
  .parent8 {
    flex: 1;
  }
  .strengths {
    padding-right: 265px;
    box-sizing: border-box;
  }
  .advantage,
  .client {
    font-size: 52px;
  }
  .boosting {
    gap: 33px;
  }
  .boost,
  .your-business {
    font-size: 52px;
  }
  .challenges-faces,
  .healthy-business {
    flex-wrap: wrap;
  }
  .brand-building-support2 {
    gap: 78px;
    flex-wrap: wrap;
  }
  .product-development,
  .support {
    font-size: var(--fs-36);
  }
  .marketing-sales-support2 {
    gap: 42px;
    flex-wrap: wrap;
  }
  .plus-connect {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 48px;
    box-sizing: border-box;
  }
  .footer-container {
    gap: 57px;
  }
  .first-conect {
    font-size: 54px;
  }
  .contact-column {
    width: 255px;
  }
  .office-info {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .frame-group {
    gap: 36px;
  }
  .frame-wrapper3 {
    padding-bottom: 38px;
  }
  .frame-parent4 {
    gap: var(--gap-24);
  }
  .frame-parent7 {
    gap: 21px;
    min-width: 100%;
  }
  .frame-parent8 {
    flex-wrap: wrap;
  }
  .parent2,
  .wrapper5 {
    box-sizing: border-box;
  }
  .parent2 {
    gap: 25px;
    padding-top: 29px;
    padding-bottom: var(--padding-32);
  }
  .healthcare-field-wrapper {
    padding-left: 120px;
    padding-right: 117px;
    box-sizing: border-box;
  }
  .expansion,
  .frame-parent11 {
    flex-wrap: wrap;
  }
  .expansion {
    gap: var(--gap-24);
    min-width: 100%;
  }
  .partnership {
    padding-top: 144px;
    box-sizing: border-box;
  }
  .strengths {
    padding-right: 132px;
    box-sizing: border-box;
  }
  .representative {
    gap: 26px;
  }
  .patron {
    padding-left: 134px;
    padding-right: 134px;
    box-sizing: border-box;
  }
  .logo-presentation {
    gap: 23px;
  }
  .also-others {
    padding-left: 154px;
    padding-right: 154px;
    box-sizing: border-box;
  }
  .boosting {
    gap: 17px;
  }
  .addresses,
  .augment {
    flex-wrap: wrap;
  }
  .frame-parent15 {
    gap: var(--gap-28);
  }
  .framing-issue {
    gap: var(--gap-20);
  }
  .unsucceed-sales {
    flex-wrap: wrap;
  }
  .solution-container {
    gap: var(--gap-18);
  }
  .brand-building-support2 {
    gap: 39px;
  }
  .marketing-sales-support2 {
    gap: 21px;
  }
  .plus-connect {
    padding-right: var(--padding-24);
    box-sizing: border-box;
  }
  .footer-container {
    gap: var(--gap-28);
  }
  .contact-top-parent {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 450px) {
  .frame-group {
    gap: var(--gap-18);
  }
  /* アイコン右に2行テキストを寄せるための微調整 */
  .portray{ align-items: center; }
  .icon-03{ flex: 0 0 auto; width: 28px; height: auto; }
  .successful-newness{ padding: 0; }
  .successful-newness .b5{ display:block; line-height: 1.5; margin: 2px 0; }
  .new-healthcare.merged-knowhow .demand-competencies{ display:none !important; }
  /* スマホ版での「ノウハウが欲しい」の表示順序調整 */
  .new-healthcare {
    display: flex;
    flex-direction: column;
  }
  /* 入れ子の .healthy-business をフラット化して、
     .achievements / .doctor-understanding / .demand-competencies を
     同一フレックスコンテナ直下の並びにする */
  .healthy-business {
    display: contents;
  }
  .achievements {
    order: 1;
  }
  .demand-competencies {
    order: 2;
  }
  .doctor-understanding {
    order: 3;
  }
  /* 旧ヒーロー系・汎用コンテナの上書きは不要につき削除 */
  .b {
    font-size: var(--fs-18);
  }
  .sales-promotion-branding {
    font-size: var(--fs-26);
  }
  .business,
  .our {
    font-size: 42px;
  }
  .healthcare-field-wrapper,
  .wrapper5 {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .healthcare-field {
    font-size: 22px;
  }
  .parent3 {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .h3,
  .h32 {
    font-size: var(--fs-19);
  }
  .h2,
  .h22,
  .h23 {
    font-size: 21px;
  }
  .h33 {
    font-size: var(--fs-19);
  }
  .frame-parent14 {
    gap: var(--gap-24);
  }
  .h34,
  .h36 {
    font-size: var(--fs-19);
  }
  .communications {
    flex: 1;
  }
  .cooperation-strengths {
    gap: 21px;
  }
  .advantage {
    font-size: 39px;
  }
  .client-showcase {
    padding-bottom: 34px;
    box-sizing: border-box;
  }
  .patron {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .client {
    font-size: 39px;
  }
  .also-others {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .boost,
  .your-business {
    font-size: 39px;
  }
  .frame-parent15 {
    padding-bottom: 88px;
    box-sizing: border-box;
  }
  .doctor-understanding,
  .portray,
  .unmarket-icons {
    flex-wrap: wrap;
  }
  .product-development-support2 {
    gap: 17px;
  }
  .product-development,
  .support {
    font-size: var(--fs-27);
  }
  .contact-top-parent {
    gap: var(--gap-28);
  }
  .first-conect {
    font-size: 41px;
  }
  .address-detail {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .footer-bottom {
    flex-wrap: wrap;
  }
}
/* =========================
   Boost Your Business（Smartphone ≤440px）
   文言の崩れ修正：見出しを2行、説明文は1段落に連結
   ========================= */
@media (max-width: 440px){
  /* ===== Footer（スマホ）ロゴ → メール → 住所 の順に再構成 ===== */
  .footer-container{ width: 100%; }
  .footer-middle{ align-items: stretch; }
  .contact-column{ width: 100% !important; align-items: flex-start; }
  /* 1050px以下で消していた Office 情報をスマホで再表示 */
  .office-info{ display: block !important; width: 100%; }
  /* 並び順：ロゴ群 → メール群 → 住所 */
  .contact-row{ order: 1; width: 100%; }
  .office-info{ order: 2; margin-top: 8px; }
  .address-detail{ order: 3; margin-top: 8px; width: 100%; }

  /* ロゴを大きく上に（company-logo は contact-about 内にある） */
  .contact-about{ display: grid; grid-template-columns: 1fr; row-gap: 10px; width: 100%; justify-items: start; align-items: start; }
  .company-logo{ order: -1; padding: 0 !important; }
  .logo-wc-icon2{ height: 28px; width: auto; }

  /* 要望: About us / Contact / Office の見出しは非表示 */
  .contact-about > .about-contact,
  .contact-about > .about-contact2,
  .contact-about > .and-more{ display: none !important; }

  /* 見出しラベルと本文のタイポ最適化 */
  .contact-about .and-more{ font-weight: 600; color: #fff; }
  .office-info .and-more{ color: #fff; line-height: 1.9; }
  /* メールを少し大きく強調 */
  .office-info > .and-more:first-of-type{ font-size: 18px; font-weight: 500; }
  /* Teams 見出しは非表示 */
  .team-title{ display:none !important; }
  /* 住所（5th Floor, ／ 2-19-19 … ／ Tokyo …）の3行は間隔を詰める */
  .office-info > .and-more:nth-of-type(2){ margin-top: 4px; margin-bottom: 2px; line-height: 1.7; }
  /* 住所2行を左寄せ（もともと右寄せ＋左右パディングが入っていたためリセット） */
  .address-detail{ justify-content: flex-start !important; padding: 0 !important; }
  .address-location{ text-align: left; }
  .address-detail .address-location .and-more{ color:#fff; line-height: 1.7; text-align: left; margin: 2px 0; }
}
@media (max-width: 440px){
  /* 見出しの並びを縦流し（Boost → Your Business） */
  .accelerate{ font-size: 42px; gap: 10px; }
  .augment{ display:block; order: 3; }
  .boost{ display:block; }
  .addresses{ display:block; width:auto; margin-top: 6px; order: 1; }
  .your-business{ display:block; font-size: 42px; line-height: 1.1; margin-top: 4px; }
  .div39{ margin-top: 10px; font-size: 14px; order: 2; }

  /* companies を外側のフレックス直下に露出させ、順序制御を可能にする */
  .companies{ display: contents; }

  /* WEALTHY CONNECT〜 の説明文を1段落に連結し、折返し許可 */
  .growth-company{ width: 100% !important; padding-top: 8px; }
  .wealthy-capabilities{ display:block; gap: 0; }
  .wealthy-capabilities .wealthy-connect{ display:inline; white-space: normal !important; line-height: 1.9; font-size: 16px; }

  /* 右側の『課題の解決に挑みます。』は説明文の直後に続けて表示 */
  .challenges{ display:inline; width:auto; padding: 0; }
  .challenges .wealthy-connect{ display:inline; white-space: normal !important; font-size: 16px; }
}

/* スマホ用 再構成Boostボックスのタイポグラフィ */
@media (max-width: 440px){
  .sp-boost{ padding: 0 var(--padding-20); }
  .sb-boost{ font-family: var(--font-roboto-condensed); font-size: 42px; line-height: 1.1; color:#fff; }
  .sb-your{ font-family: var(--font-roboto-condensed); font-size: 42px; line-height: 1.1; color:#fff; margin-top: 4px; }
  .sb-label{ font-size: 14px; color:#fff; margin: 10px 0 14px; }
  .sb-body{ font-size: 16px; color:#fff; line-height: 1.9; margin: 0; }
}
/* =========================
   Advantage (Smartphone ≤440px)
   仕様: テキスト + Teams のみ表示
        黄色画像は直下の帯として別挿入
   ========================= */
@media (max-width: 440px){
  /* 右半分ヒットエリア/背景はスマホでは無効化 */
  .strengths .advantage-yellow-hitarea{ display:none !important; }
  .strengths::after{ display:none !important; }

  /* 内部の文章ボックスだけ見せる（左右余白を均一に） */
  .strengths{ padding: 0 var(--padding-20) 24px var(--padding-20); }
  .cooperation-strengths{ gap: 20px; }
  .proficiencies{ padding-bottom: 0; gap: 8px; font-size: 42px; }
  .div28{ font-size: var(--fs-16); }

  /* テキスト本文の改行崩れを防ぐ（通常フロー） */
  .collaboration-team, .robust-network{ display:block; }
  .collaboration-team > div,
  .robust-network > div{ display:inline; white-space: normal; line-height: 1.9; }

  /* Teams ボタン回りを見本サイズ寄せ（横幅いっぱいにならないように） */
  .teams-group{ width: auto; display:inline-flex; align-items:center; gap: 10px; padding: 10px 16px; background:#FFFF74; border-radius: 9999px; color:#0E1E2F; }
  .teams-group .organization{ position: static; height:auto; width:auto; display:inline-flex; gap:10px; }
  .teams-group .icon11, .teams-group .icon12{ width: 24px; height: auto; position: static; }
}

/* Advantage 直下の黄色画像帯（スマホのみ全幅） */
.advantage-yellow-band{ display:none; }
@media (max-width: 440px){
  .advantage-yellow-band{
    display:block;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: #fff; /* 白地上に黄色画像 */
  }
  .advantage-yellow-band img{
    display:block;
    width: 100%;
    height: auto;
  }
}
/* =====================================
   SmartPhone only (<= 440px)
   Our Business セクションの行崩れ修正
   ※ PC / iPad には影響させない
   ===================================== */
@media screen and (max-width: 440px) {
  /* Our Business セクションをフレックスから通常フローへ戻す */
  .frame-parent5{ display:block; }
  .frame-parent7{ display:block; }
  .group{ display:inline; gap:0 !important; }

  /* 左の英字見出しは既存(<=450px)のサイズ適用済み。右テキストの崩れを解消 */
  .frame-parent6 { /* 見出しと本文コンテナ */
    align-items: flex-start;
    gap: 12px;
  }
  .frame-parent7 { /* 本文カラム */
    width: 100% !important; /* 468px を解除 */
    line-height: 1.9;        /* 読みやすさ向上 */
  }
  /* 文章を複数divで区切っているため、スマホ時はインラインで自然に連結 */
  .group .wealthy-connect,
  .group .div7,
  .div8 {  /* 2段落目の先頭 */
    display: inline;          /* 行内要素として連結 */
    white-space: normal !important; /* nowrap を解除 */
  }
  .div8 { width: auto !important; }
  .wealthy-connect { white-space: normal !important; }
  /* 見出し下の [ 我々にできること ] ブロック周辺のレイアウト安定化 */
  .frame-parent8 { 
    justify-content: flex-start; /* space-between だと複数行で不自然な空きが出る */
    row-gap: 8px;
    margin-top: 8px;
    font-size: 16px; /* 見やすさ向上 */
  }
  /* Our Business の直下に [ 我々にできること ] を表示（元の位置は非表示） */
  /* ラベルはスクリプトで生成するため、疑似要素は使わない（重複回避） */
  .our-parent{ position: static; }
  .frame-parent8 .div9{ display: none !important; }
  /* 2つ目の段落（div8 + frame-parent8.div10 + wrapper3.div9 + wrapper4.wealthy-connect）
     をひとつながりの段落として表現 */
  .frame-parent8{ display:inline; }
  .frame-parent8 .div10{ display:inline; white-space: normal !important; line-height: 1.9; }
  .wrapper3{ display:inline; }
  .wrapper3 .div9{ display:inline; white-space: normal !important; line-height: 1.9; }
  .wrapper4{ display:inline; }
  .wrapper4 .wealthy-connect{ display:inline; white-space: normal !important; line-height: 1.9; }
  /* 左寄せ・余白過多の解消 */
  .wrapper3,
  .wrapper4{ padding-left: 0 !important; padding-right: 0 !important; justify-content: flex-start !important; }

  /* スクリプトで追加するスマホ専用ボックスのタイポ設定 */
  .sp-our-business{ 
    font-size: 16px;               /* 親70pxの継承を遮断 */
    font-family: 'Noto Sans JP', sans-serif;   /* 日本語本文フォント */
    margin-top: 8px;
  }
  .sp-our-label{ 
    font-size: 16px;
    line-height: 1.6;
    margin: 4px 0 14px;
    letter-spacing: .02em;
    color: var(--color-white);
  }
  .sp-our-p{
    font-size: 16px;
    line-height: 1.9;
    margin: 16px 0;
    color: var(--color-white);
  }
}
/* フォント強制は削除。global.css の langベース指定を利用 */

/* ==============================
   Client section (white band)
   ============================== */
/* フルブリードの白背景帯にして、内部は中央寄せのコンテナで制御 */
.client-showcase{
  width: 100vw !important;           /* 画面幅いっぱい */
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw);   /* フルブリード化 */
  background: #fff;                   /* ← 正: 白バック */
  padding: clamp(48px, 6vw, 96px) 0; /* 上下余白 */
  color: var(--color-gray-200);
}

/* 内部レイアウト（中央寄せ・縦並び） */
.client-showcase .representative{
  width: min(1120px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: clamp(16px, 3vw, 40px);
  justify-items: center;
  text-align: center;
}
.client-showcase .patron{ padding: 0 !important; }
.client-showcase .client{
  color: var(--color-gray-200);
  font-family: var(--font-roboto-condensed);
}
.client-showcase .logo-presentation{
  align-items: center !important;
  gap: clamp(16px, 3vw, 40px) !important;
}
.client-showcase .logo-icon{
  width: min(920px, 90vw);
  height: auto;
}
.client-showcase .also-others{ padding: 0 !important; }
.client-showcase .and-more{ color: #6b6b6b; }

@media (max-width: 750px){
  .client-showcase{ padding: clamp(36px, 8vw, 56px) 0; }
}
/* ==============================
   First Connect band (full-bleed)
   ============================== */
/* Product Development Support（スマホ専用調整） */
@media (max-width: 440px){
  /* 枠画像を使わずCSS枠でカード全体を囲む */
  .product-development-support2 {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 10px;
    padding: 16px 18px 18px;
    overflow: hidden;
  }
  .product-development-support2 .vector-icon2 { display: none !important; }
  .product-development-support2 > * { position: relative; z-index: 1; }

  /* 本文の断片(div41)を1段落として連結（改行なし） */
  .product-management { display: block; }
  .product-management .div41 { display: inline; white-space: normal !important; line-height: 1.9; }
}

.footer-container .footer-top{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw);
  background: #FFFF74; /* デザイン指定の黄色 */
  padding: clamp(28px, 6vw, 48px) 0 !important; /* 上下余白 */
  border-bottom: 2px solid var(--color-gray-200);
  text-decoration: none;              /* アンカーによる下線を無効化 */
  color: var(--color-gray-200);       /* リンク色のブルー化を防止 */
}
.footer-top .contact-top-parent{
  width: min(1120px, 92vw);
  margin-inline: auto;
  display: flex;
  align-items: center;              /* タイトルと丸アイコンを縦位置中央 */
  justify-content: center;          /* 全体を中央寄せ */
  gap: clamp(16px, 4vw, 40px);
}
.footer-top .viewing-the-era-of-100-year-li-parent{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-top .first-conect{
  color: var(--color-gray-200);
  font-family: var(--font-roboto-condensed);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.1;
}
.footer-top .div53{ /* お問い合わせ */
  color: var(--color-gray-200);
}
.footer-top .icon15{
  width: clamp(52px, 5.2vw, 80px);
  height: auto;
}

/* Privacy Policy リンクのスタイル */
.privacy-policy-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.privacy-policy-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* =========================
   Solution/Brand Building Support（Smartphone ≤440px）
   ・本文を改行なしで連結
   ・見出し〜本文すべてを枠内に収める（画像枠→CSS枠）
   ========================= */
@media (max-width: 440px){
  /* 本文の断片(div41)を1段落として連結 */
  .brand-definition .parent11{ display:block; }
  .brand-definition .div41{
    display:inline;
    white-space: normal !important;
    line-height: 1.9;
    word-break: normal;
  }

  /* カード全体をCSS枠で囲み、枠画像は無効化 */
  .brand-building-support2{
    position: relative;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 10px;
    padding: 16px 18px 18px;
    overflow: hidden;
  }
  .brand-building-support2 .vector-icon2{ display:none !important; }
  .brand-building-support2 > *{ position: relative; z-index: 1; }
}

/* Marketing & Sales Support／Plus Connect（スマホ専用調整） */
@media (max-width: 440px){
  /* Marketing & Sales Support：カード全体をCSS枠で囲み、本文を1段落に */
  .marketing-sales-support2{
    position: relative;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 10px;
    padding: 16px 18px 18px;
    overflow: hidden;
    margin-top: -12px; /* 上に少し移動 */
  }
  .marketing-sales-support2 .vector-icon2{ display:none !important; }
  .marketing-sales-support2 > *{ position: relative; z-index: 1; }
  .marketing-implementation{ display:block; }
  .marketing-implementation .div41{ display:inline; white-space: normal !important; line-height: 1.9; }

  /* Plus Connect：同様に枠で囲み、本文を1段落に */
  .plus-connect{
    position: relative;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 10px;
    padding: 16px 18px 18px;
    overflow: hidden;
    margin-top: -10px; /* 上に少し移動 */
  }
  .plus-connect .vector-icon2{ display:none !important; }
  .plus-connect > *{ position: relative; z-index: 1; }
  .brand-communication{ display:block; }
  .brand-communication .div41{ display:inline; white-space: normal !important; line-height: 1.9; }

  /* MSS直前の縦矢印を少し短くして間延び感を解消 */
  .product-marketing-container .arrow-3-icon{ height: 320px; }
}

/* ===== 新しいフッターレイアウト（addnewpopupから移植） ===== */
.footer-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: clamp(40px, 5vw, 80px);
}

.footer-logo {
  flex-shrink: 0;
}

.footer-columns {
  display: flex;
  gap: clamp(40px, 5vw, 80px);
  flex: 1;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
}

.footer-column-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.footer-column-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* 新しいフッターボトムレイアウト */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: clamp(20px, 2vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px; /* 既存設定を上書き */
  gap: 0; /* 既存設定を上書き */
}

.footer-bottom-left {
  display: flex;
  gap: clamp(20px, 2vw, 30px);
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
}

.footer-link:hover {
  color: #fff;
}

.footer-bottom-right .copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== スマホ版フッター対応 (768px以下) ===== */
@media (max-width: 768px) {
  .footer-main-content {
    flex-direction: column;
    gap: clamp(24px, 4vw, 32px);
    align-items: flex-start;
  }
  
  .footer-logo {
    align-self: flex-start;
  }
  
  .footer-columns {
    flex-direction: column;
    gap: clamp(20px, 3vw, 24px);
    width: 100%;
  }
  
  .footer-column {
    gap: clamp(6px, 1vw, 8px);
  }
  
  .footer-column-title {
    font-size: 15px;
  }
  
  .footer-column-content {
    font-size: 13px;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 16px);
    padding-top: clamp(16px, 2vw, 20px);
  }
  
  .footer-bottom-left {
    gap: clamp(16px, 2vw, 20px);
  }
  
  .footer-link {
    font-size: 13px;
  }
  
  .footer-bottom-right .copyright {
    font-size: 13px;
  }
}