/* ================================================
   会社案内ページ：ファーストビュー
================================================ */
.about-hero{
  position:relative;
  width:100%;
  height:calc(100vh - var(--header-height));   /* min-height ではなく height：1画面にきっちり収める */
  margin-top:var(--header-height);
  overflow:hidden;
  background:var(--color-navy);
}

/* ---- 最背面：フルワイド画像／読み込み後にふわっとフェードイン ---- */
.about-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.about-hero-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.6s ease;
  filter: blur(5px);
}
.about-hero-bg-img.is-loaded{
  opacity:1;
}

/* 画面全体に薄い黒を重ねて文字を読みやすくする */
.about-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* ---- ページタイトル（左上・他ページと共通の左寄せ） ---- */
.about-hero-title{
  position:absolute;
  top:56px;
  left:8%;
  font-size:var(--fs-heading-lg);
  font-weight:700;
  color:var(--color-white);
  letter-spacing:0.05em;
  line-height:1.3;
}
.about-hero .title-eyebrow{
  color:var(--color-blue-hilight);
}

/* ---- キャッチコピー（画面中央） ---- */
.about-hero-copy{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.about-copy-line{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.1s ease, transform 1.1s ease;   /* その場でふんわり浮かぶ */
}
.about-hero-copy.is-in .about-copy-line{
  opacity:1;
  transform:translateY(0);
}
.about-hero-copy.is-in .about-copy-en{ transition-delay:0.2s; }
.about-hero-copy.is-in .about-copy-jp{ transition-delay:0.6s; }

.about-copy-en{
  font-family:var(--font-en);
  font-size:50px;
  font-weight:600;
  color:var(--color-white);
  letter-spacing:0.01em;
  white-space:nowrap;
}
.about-copy-jp{
  margin-top:16px;
  font-family:var(--font-jp);
  font-size:24px;   /* 英文と同じ横幅になるよう調整した目安値。実際の表示を見て微調整してください */
  font-weight:500;
  color:var(--color-white);
  letter-spacing:0.08em;
  white-space:nowrap;
}

/* ---- 短文（画面上から2/3・幅1100pxの中で右寄せ） ---- */
.about-hero-lead{
  position:absolute;
  top:70%;
  left:55%;
  transform:translateX(-50%);
  width:100%;
  max-width:1100px;
  padding:0 24px;
  text-align:right;
  font-size:15px;
  font-weight:500;
  color:var(--color-white);
  opacity:0;
  transition:opacity 1.1s ease, transform 1.1s ease;
  transform:translateX(-50%) translateY(12px);
}
.about-hero-lead.is-in{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition-delay:1.1s;   /* キャッチコピーより遅れてフェードイン */
}

/* ---- スクロールボタン（画面中央下部） ---- */
.about-hero-scroll{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:20px;
  display:block;
  animation:scrollBounce 1.8s ease-in-out infinite;
}
.about-hero-scroll img{
  width:100%;
  height:100%;
  display:block;
}
@keyframes scrollBounce{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(8px); }
}

/* ================================================
   会社案内ページ：社長ご挨拶
================================================ */
.president-section{
  padding:60px 0 120px;   /* 上を120px→60px（eyebrowのpadding-top:50pxが加わるため） */
  background:var(--color-white);
}
.president-section .section-title{
  width:100%;
  max-width:1100px;
  margin:0 auto 20px;
  text-align:left;
}
.president-inner{
  width:100%;
  max-width:1100px;   /* width:1100px → 100% + max-width:1100px */
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.president-photo{
  width:30%;
  flex-shrink:0;
}
.president-photo img{
  width:75%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:var(--color-gray-300); /* 画像未設置時のフォールバック */
}
.president-role{
  margin-top:25px;
  font-size:12px;
  color:var(--color-gray-500);
}
.president-name{
  margin-top:4px;
  font-size:18px;
  font-weight:700;
  color:var(--color-navy);
}
.president-message{
  flex:1;
  min-width:0;   /* 長い文章があっても横にはみ出さないようにする保険 */
}

.president-text{
  font-size:20px;
  line-height:2;
  color:var(--color-black);
}

/* ================================================
   会社案内ページ：会社概要（表）
================================================ */
.company-info-section{
  padding:var(--section-title-gap) 24px 96px;
  background:var(--color-gray-100);
}
.company-info-section .section-title{
  width:1100px;
  max-width:none;
  margin-bottom:20px;
  margin-top: 60px;
}
.company-table{
  width:1100px;
  max-width:none;
  margin:0 auto;
  border-collapse:collapse;
}
.company-table th,
.company-table td{
  border:3px solid var(--color-gray-100); /* 罫線は白 */
  padding:10px 20px;
  text-align:left;
  font-size:var(--fs-table);
  line-height:1.8;
  vertical-align:top;
}
.company-table th{
  width:300px;
  background:var(--color-blue);
  color:var(--color-white);
  font-weight:700;
  white-space:nowrap;
}
.company-table td{
  background:var(--color-white);
  color:var(--color-black);
}

/* ================================================
   会社案内ページ：Googleマップ
================================================ */
.map-section{
  padding:var(--section-title-gap) 20px 10px;
  background:var(--color-white);
}
.map-section .section-title{
  width:1100px;
  max-width:none;
  padding-top: 50px;
  margin-bottom:20px;
}
.map-embed{
  max-width:1100px;
  margin:0 auto;
  width:100%;
  aspect-ratio:16/6;
}
.map-embed iframe{
  width:100%;
  height:100%;
  display:block;
}

/* ================================================
   会社案内ページ：アクセス案内（地図セクションとは独立）
================================================ */
.access-section{
  padding:0 10px 150px;
  background:var(--color-white);
}
.access-list{
  max-width:500px;
  margin:0 auto;
}
.access-item{
  display:grid;
  grid-template-columns:220px 1fr;
  column-gap:60px;
  align-items:baseline;
  padding:4px 0;
  border-bottom:1px dashed var(--color-gray-300);
}
.access-item:first-child{
  border-top:none;   /* 1px dashed var(--color-gray-300) から変更 */
}
.access-item:last-child{
  border-bottom:none;   /* 追加 */
}
.access-title{
  text-align:right;
  font-size:15px;
  color:var(--color-black);
}
.access-text{
  text-align:left;
  font-size:15px;
  color:var(--color-black);
}

/* ================================================
   共通：左寄せの大見出し／ボタン
================================================ */
.section-title-left{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

.btn-primary{
  display:inline-block;
  padding:25px 60px;
  font-size:25px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--color-white);
  background:var(--color-blue);
  border-radius:2px;
  transition:background 0.3s ease, transform 0.3s ease;
}
.btn-primary:hover{
  background:var(--color-navy);
  transform:translateY(-2px);
}

/* ================================================
   採用情報ページ：ファーストビュー（左：テキスト／右：画像。境目でテキストが重なる）
================================================ */
.recruit-hero{
  position:relative;
  width:100%;
  min-height:90vh;   /* 画面の上下いっぱいに */
  margin-top:var(--header-height);
  overflow:hidden;
  background:var(--color-white);
}

/* ---- 右側：画像（左端がグラデで白に溶け込む） ---- */
.recruit-hero-img{
  position:absolute;
  inset:0;
  left:38%;   /* 画像の開始位置。数値を変えると左右の配分が変わる */
  z-index:1;
  width:62%;
  height:100%;
  display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 40%);
  mask-image:linear-gradient(to right, transparent 0%, #000 40%);
}
.recruit-hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- 左側：テキスト（白背景。右端が画像側に少し重なる） ---- */
.recruit-hero-text{
  position:relative;
  z-index:2;
  width:65%;   /* 画像の開始位置(38%)より広くして、右端を重ねる */
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  /* 変更：上の余白を他ページのタイトル位置（56px）に合わせる */
  padding:56px 6% 0 8%;
}
.recruit-hero-title{
  font-size:var(--fs-heading-lg);
  font-weight:700;
  color:var(--color-navy);
  letter-spacing:0.05em;
  line-height:1.3; 
}
.recruit-hero-heading{
  margin: 50px 0 20px 10px;
  font-size:30px;
  font-weight:700;
  line-height:1.6;
  color:var(--color-navy);
}
.recruit-hero-desc{
  margin-top:10px;
  font-size:22px;
  margin-left: 20px;
  line-height:2.0;
  color:var(--color-black);
  text-shadow:0 1px 6px rgba(255,255,255,0.8); 
}

/* ================================================
   採用情報ページ：教育体制（見出し＋メッセージを横並び）
================================================ */
.education-section{
  padding:80px 24px 120px;
  background:var(--color-blue);
}
.education-header{
  max-width:1100px;
  margin:0 auto 56px;
  display:flex;
  align-items:center;   /* これで見出しと文章の高さ（縦位置）が揃う */
  justify-content:space-between;
  gap:60px;
}
.education-header .title-eyebrow{
  color:var(--color-blue-light);
}
.education-header .section-title{
  margin:0;
  flex-shrink:0;
  color:var(--color-white);
}
.education-message{
  margin:0;
  font-size:25px;
  font-weight:500;
  line-height:2;
  color:var(--color-gray-300);
  text-align:right;
}
.education-message strong{
  font-weight:700;
  color:var(--color-white);
}

.education-list{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6, 1fr);   /* flex から grid に変更 */
  gap:32px;
}
.education-item{
  grid-column:span 2;   /* 上段：6分割のうち2つ分＝3列表示 */
  text-align:center;
  padding:40px 24px;
  background:var(--color-gray-100);
  border-radius:4px;
}
.education-item--half{
  grid-column:span 3;   /* 下段：6分割のうち3つ分＝2列表示 */
}
.education-period{
  font-size:20px;
  font-weight:700;
  color:var(--color-navy);
  margin-bottom:20px;
}
.education-icon{
  width:55px;
  height:55px;
  margin:0 auto 20px;
}
.education-desc{
  font-size:var(--fs-body);
  color:var(--color-black);
  line-height:1.9;
}

/* ================================================
   採用情報ページ：募集要項（表）
================================================ */
.recruit-info-section{
  padding:var(--section-title-gap) 24px 40px;
  background:var(--color-gray-100);
}
.recruit-info-section .section-title{
  width:100%;
  margin:0 auto 40px;
}
/* 表そのものは会社案内ページと同じ .company-table を再利用しています */

/* ================================================
   採用情報ページ：エントリーボタン
================================================ */
.entry-section{
  padding:100px 24px 100px;
  text-align:center;
}

/* ================================================
   事業内容ページ：ファーストビュー（タイトル＋円アニメーション／1画面完結）
================================================ */
.business-hero{
  position:relative;
  width:100%;
  height:100vh;
  margin-top:0;
  overflow:hidden;   /* これが「はみ出した背景を隠す」役割を果たす */
  background:var(--color-navy);
}

/* ---- ページタイトル（左上） ---- */
.business-hero-title{
  position:absolute;
  top:calc(56px + var(--header-height));   /* ヘッダー分を足す */
  left:8%;
  z-index:2;
  font-size:var(--fs-heading-lg);
  font-weight:700;
  color:var(--color-white);
  letter-spacing:0.05em;
  line-height:1.3;
}
.business-hero-title .title-eyebrow{
  color:var(--color-blue-light);   /* ネイビー背景で視認できる明るい色に変更 */
}

/* ---- 背景：動画（グリッド）：控えめにする ---- */
.business-hero-bg-video{
  /* 既存のプロパティはそのまま */
  opacity:0.45;   /* 追加：グリッドを薄くして密度感を抑える（0.3〜0.6で調整） */
}

/* ---- ヘッドランプ ワイヤーフレーム（画面の約80%・中央配置） ---- */
.business-hero-wire{
  position:absolute;
  top:50%;
  left:50%;
  z-index:0;               /* 動画の上、円アニメーション(z-index:1)の下 */
  width:100%;
  height:100%;
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  animation:wireFadeIn 2s ease 0.5s forwards;
}
@keyframes wireFadeIn{
  to{ opacity:0.30; }      /* 文字と重なるため前回より少し薄め（0.15〜0.35で調整） */
}

/* ---- 円アニメーション一式（画面中央に配置） ---- */
.business-hero-visual{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  transform:translateY(50px);
}

.business-circles{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:100px;
}

/* ---- 背面を通る横罫線（白） ---- */
.business-circle-line{
  position:absolute;
  top:50%;
  left:110px;
  right:110px;
  height:2px;
  z-index:0;
  background:var(--color-white);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  transition:transform 0.8s ease;
}
.business-circles.is-in .business-circle-line{
  transform:translateY(-50%) scaleX(1);
  transition-delay:1.8s;
}

/* ---- 円本体（白） ---- */
.business-circle{
  position:relative;
  z-index:1;
  width:200px;
  height:200px;
  border-radius:50%;
  border:2px solid var(--color-white);
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(60px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}

.business-circles.is-in .business-circle{
  opacity:1;
  transform:translateY(0);
}

.business-circles.is-in .business-circle-wrap:nth-child(1) .business-circle{
  transition-delay:0s;
}

.business-circles.is-in .business-circle-wrap:nth-child(2) .business-circle{
  transition-delay:0.3s;
}

.business-circles.is-in .business-circle-wrap:nth-child(3) .business-circle{
  transition-delay:0.6s;
}


/* ---- 円のラッパー（本体＋影をまとめる） ---- */
.business-circle-wrap{
  position:relative;
  width:200px;
  height:200px;
  flex-shrink:0;
}


/* ---- 影（水色・本体より奥） ---- */
.business-circle-shadow{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  border-radius:50%;
  background:var(--color-blue-light);
  opacity:0;
  transform:translate(16px, 76px);   /* 右に16px・下に76px(16px+60px分)ずらした状態からスタート */
  transition:opacity 0.7s ease, transform 0.7s ease;   /* transform も動かす対象に追加 */
}
.business-circles.is-in .business-circle-wrap:nth-child(1) .business-circle-shadow{
  opacity:1;
  transform:translate(16px, 16px);   /* 最終的な位置（右下に16px）に戻る */
  transition-delay:0s;
}
.business-circles.is-in .business-circle-wrap:nth-child(2) .business-circle-shadow{
  opacity:1;
  transform:translate(16px, 16px);
  transition-delay:0.3s;
}
.business-circles.is-in .business-circle-wrap:nth-child(3) .business-circle-shadow{
  opacity:1;
  transform:translate(16px, 16px);
  transition-delay:0.6s;
}

/* ---- 円の中の文字 ---- */
.business-circle-label{
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.business-circles.is-in .business-circle:nth-child(1) .business-circle-label{ transition-delay:0.7s; }
.business-circles.is-in .business-circle:nth-child(2) .business-circle-label{ transition-delay:1.0s; }
.business-circles.is-in .business-circle:nth-child(3) .business-circle-label{ transition-delay:1.3s; }
.business-circles.is-in .business-circle-label{
  opacity:1;
  transform:translateY(0);
}
.business-circle-jp{
  display:block;
  font-size:20px;
  font-weight:700;
  color:var(--color-navy);
}
.business-circle-en{
  display:block;
  margin-top:6px;
  font-family:var(--font-en);
  font-size:15px;
  letter-spacing:0.1em;
  color:var(--color-blue);
  opacity:0.75;
}

/* ---- キャッチコピー ---- */
.business-visual-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* 1行目：円と同じ横幅・同じ間隔で3語を並べる */
.business-copy-line1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:100px;   /* .business-circles の gap と必ず同じ数値にする */
}
.business-copy-word{
  width:200px;   /* .business-circle の width と必ず同じ数値にする */
  text-align:center;
  font-size:30px;
  font-weight:700;
  color:var(--color-white);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.business-visual-copy.is-in .business-copy-word{
  opacity:1;
  transform:translateY(0);
  transition-delay:2.6s;   /* 1行目はここでフェードイン */
}

/* 2行目 */
.business-copy-line2{
  padding: 40px;
  font-size:25px;
  font-weight:500;
  color:var(--color-white);
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.business-visual-copy.is-in .business-copy-line2{
  opacity:1;
  transform:translateY(0);
  transition-delay:3.2s;   /* 1行目より遅れてフェードイン */
}

.business-hero-scroll{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  transition:opacity 1s ease;
}
.business-hero-scroll.is-in{
  opacity:1;
  transition-delay:4s;   /* キャッチコピー2行目の後に表示 */
}
.business-hero-scroll-label{
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:0.2em;
  color:var(--color-white);
  opacity:0.8;
}
.business-hero-scroll-icon{
  width:20px;
  height:20px;
  animation:scrollPoppin 1.8s ease-in-out infinite;
}
@keyframes scrollPoppin{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}

/* ================================================
   事業内容ページ：カテゴリセクション共通（技術支援／開発支援）
================================================ */
.category-section{
  padding:var(--section-title-gap) 24px 60px;
  background:var(--color-white);
  scroll-margin-top:var(--header-height); 
}
.category-section-alt{
  position:relative;   /* 疑似要素の位置の基準にする */
  background:transparent;   /* 背景色は疑似要素側に持たせる */
  z-index:0;
}
.category-section-alt::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  background:var(--color-gray-100);
  z-index:-1;
}
.category-section--hero-bg{
  position:relative;
  margin-top:0;
  padding-top:60px;
  background:transparent;
  z-index:0;
}
.category-section--hero-bg::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  background:var(--color-navy);
  z-index:-1;
}
.category-title{
  max-width:1100px;
  margin:0 auto 40px;
  font-size:var(--fs-heading-lg);
  font-weight:700;
  color:var(--color-navy);
  text-align:left;
  letter-spacing:0.05em;
  line-height:1.3; 
}
.category-tagline{
  max-width:800px;
  margin:0 auto 64px;
  font-size:24px;
  font-weight:500;
  padding-top: 40px;
  line-height:1.9;
  color:var(--color-navy);
  text-align:center;
}
.subsection-heading{
  max-width:1100px;
  font-size:25px;
  color:var(--color-black);
  border-bottom:3px solid var(--color-gray-300);
}

.small-heading{
  max-width:1100px;
  margin:32px auto 16px;
  font-size:18px;
  font-weight:700;
  color:var(--color-blue);
}
.body-text{
  width:90%;
  margin:0 auto;
  font-size:var(--fs-body);
  line-height:2;
  color:var(--color-black);
}
.icon-row{
  max-width:1100px;
  margin:24px auto 0;
  display:flex;
  gap:20px;
}
.icon-row img{
  width:48px;
  height:48px;
}

.category-header{
  max-width:1100px;
  padding-top:50px;
  margin:0 auto 56px;
  display:flex;
  flex-direction:column;   /* 縦積み：上段＝タイトル＋サブタイトル／下段＝本文 */
  align-items:stretch;
  gap:32px;
}
.category-header-top{
  display:flex;
  align-items:flex-end;    /* タイトルとサブタイトルの下端を揃える */
  gap:48px;
}
.category-header .category-title{
  margin:0;
  flex-shrink:0;
}

/* ---- 技術支援／開発支援：右側（サブタイトル＋本文） ---- */
.category-header-text{
  flex:1;
  min-width:0;
}
.category-subtitle{
  margin:0;
  padding:0 0 4px;
  font-size:24px;
  font-weight:700;
  color:var(--color-blue-light);
  line-height:1.6;
}
.category-header .body-text{
  --body-max:850px;          /* ← ここの数値で本文幅を調整 */
  max-width:var(--body-max);
  margin:0 auto;
  text-align:left;
}
.category-header-text .body-text{
  max-width:none;   /* 元の .body-text は max-width:1100px; margin:0 auto; を上書き */
  padding-left: 80px;
  margin:0;
  text-align:left;
}

/* ---- 本文中の箇条書き（上下に1行分の余白） ---- */
.body-bullets{
  display:block;
  margin:2em 0;              /* line-height:2 なので 2em ＝ 1行分 */
}
.body-bullets > span{
  display:block;
  padding-left:1em;
  text-indent:-1em;          /* 折り返し時に「・」の位置を揃える */
}
.body-bullets > span::before{
  content:"・";
}

.category-section--hero-bg .category-title,
.category-section--hero-bg .category-tagline,
.category-section--hero-bg .subsection-heading,
.category-section--hero-bg .small-heading,
.category-section--hero-bg .body-text{
  color:var(--color-white);
}
.category-section--hero-bg .subsection-heading{
  border-bottom-color:var(--color-white);
}

/* ================================================
   事業内容ページ：技術支援（幅60%の白背景ボックス）
================================================ */
.tech-content{
  max-width:1100px;
  margin:56px auto 0;
  padding:48px 60px;
  background:var(--color-white);
  margin-bottom:50px;
}

.category-section--hero-bg .tech-content .subsection-heading{
  color:var(--color-navy);
  border-bottom-color:var(--color-blue);
  margin-top:0;
}
.category-section--hero-bg .tech-content .small-heading{
  color:var(--color-blue);
}
.category-section--hero-bg .tech-content .body-text{
  color:var(--color-black);
  font-size:15px;
}

/* ---- 設計モデリング事例（青帯見出し＋画像3枚＋製品名） ---- */
.case-group{
  margin-top:0;
}
.case-group:first-of-type{
  margin-top:32px;   /* 見出し「設計モデリング事例」との間隔のみ維持 */
}
.case-group-title{
  padding:15px 28px;
  font-size:20px;
  font-weight:700;
  color:var(--color-white);
  background:var(--color-blue);
  line-height:1.4;
}
.case-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--color-blue);   /* 隙間の色＝青罫線 */
  border:1px solid var(--color-blue);
  border-top:none;
}
.case-item{
  background:var(--color-white);
}
.case-img{
  aspect-ratio:5/3;
  overflow:hidden;
  background:var(--color-gray-100);   /* 画像未設置時のフォールバック */
}
.case-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-name{
  padding:8px 28px 8px;
  font-size:16px;
  color:var(--color-black);
}

/* ---- 事例画像の注釈（右端揃え） ---- */
.case-note{
  margin-top:5px;
  text-align:right;
  font-size:12px;
  line-height:1.6;
  color:var(--color-gray-500);
}

/* ---- 事例カルーセル用（スマホのみ表示。responsive.css で切り替え） ---- */
.case-carousel-title,
.case-clones{
  display:none;
}

/* ---- 取引スタイル ---- */
.trade-style{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:40px;
  margin-top:48px;
  margin-bottom:60px;
}
.trade-style-item{
  flex:1;
  max-width:480px;
  text-align:center;
}
.category-section--hero-bg .tech-content .trade-style-title{
  font-size:22px;
  font-weight:700;
  color:var(--color-blue);
  margin-bottom:16px;
}
.trade-style-icon{
  width:100px;
  height:100px;
  margin:0 auto;
}
.trade-lead{
  text-align:center;
}
.category-section--hero-bg .tech-content .trade-lead{
  margin:32px 0 8px;
  font-size:18px;
  font-weight:700;
  color:var(--color-black);
}
.trade-text{
  margin:20px 0 0;
  max-width:none;
  padding-bottom:0;
  text-align:center;
}
.subsection-heading--spaced{
  margin-top:56px;
}

/* ---- 光学解析の補足文 ---- */
.tech-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:40px;
  padding-bottom:60px;
  border-bottom:3px solid var(--color-blue);
}
.tech-note-icon{
  width:30px;
  height:30px;
}
.tech-note-text{
  font-size:16px;
  font-weight:500;
  color:var(--color-black);
}

/* ---- 主なお取引先（ラベルとリストを上下中央揃えで横並び） ---- */
.tech-clients{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:100px;
  margin-top:60px;
  margin-bottom: 10px;
}
.tech-clients-label{
  font-size:16px;
  font-weight:700;
  color:var(--color-navy);
}
.tech-clients-names{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 32px;
}
.tech-clients-names span{
  font-size:16px;
  line-height:2;
  color:var(--color-black);
}

/* ================================================
   事業内容ページ：サービスフロー（■＋縦の矢印タイムライン）
================================================ */
.service-flow{
  display:flex;
  flex-direction:column;
}
.service-flow-wrap{
  position:relative;
  max-width:1100px;   /* 900px から変更：セクション全体をこの幅に統一 */
  margin:40px auto 0;
}
.service-flow-track{
  display:flex;              /* 追加 */
  flex-direction:column;   /* 追加 */
  gap:48px;
}

/* ---- タイトル上の■＋見出し ---- */
.service-flow-header{
  position:relative;
  z-index:2;
  padding-left:135px;   /* 90px から変更：矢印(90px~115px)の右、余白を含めた位置 */
  margin-bottom:56px;
}
.service-flow-heading{
  padding-top:2px;   /* ■とタイトルの視覚的な高さを合わせる微調整 */
}
.service-flow-title{
  font-size:28px;
  font-weight:700;
  color:var(--color-navy);
  line-height:1.4;
}
.service-flow-subtitle{
  margin-top:12px;
  font-size:var(--fs-body);
  line-height:1.9;
  color:var(--color-black);
  opacity:0.85;
}

/* ---- 矢印：バッジの右・カードの左に来るよう位置を変更 ---- */
.service-flow-arrow{
  position:absolute;
  top:5px;
  bottom:26px;
  left:82px;   /* 90px から変更：バッジ(70px)の右に8px、矢印(25px)を挟んで右にも8px弱の余白 */
  z-index:0;
  width:25px;
  background:linear-gradient(
    to bottom,
    var(--color-blue-hilight) 0px,   var(--color-blue-hilight) 24px,
    var(--color-gray-100) 24px,         var(--color-gray-100) 30px,
    var(--color-blue-hilight) 30px,  var(--color-blue-hilight) 54px,
    var(--color-gray-100) 54px,         var(--color-gray-100) 60px,
    var(--color-blue-hilight) 60px,  var(--color-blue-hilight) 84px,
    var(--color-gray-100) 84px,         var(--color-gray-100) 90px,
    var(--color-blue-hilight) 90px,  var(--color-blue-light) 100%
  );
}
.service-flow-arrow::after{
  content:"";
  position:absolute;
  bottom:-24px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:30px solid var(--color-blue-light);
}


/* ---- カラム ---- */
.flow-step{
  grid-column:3;
  min-width:0;
}
.flow-body{
  display:flex;
  align-items:center;
  gap:50px;
  width:100%;
  padding:32px 36px;
  background:var(--color-white);
  box-shadow:0 6px 20px rgba(20,41,79,0.08);
}

/* ---- アイコン＋STEPバッジ ---- */
.flow-icon-wrap{
  flex-shrink:0;
  /* max-width:640px; margin:40px auto 0; は削除（.service-flow-wrap に移動済み） */
}
.flow-icon{
  width:70px;
  height:70px;
  display:block;
  margin-left: 20px;
}
.flow-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:65px 65px 1fr;   /* バッジ / 矢印の通り道(隙間込み) / カード */
  align-items:center;
}

.step-badge{
  grid-column:1;
  position:relative;
  display:block;
  width:100%;
  height:32px;
  line-height:1;
}

.step-badge-main,
.step-badge-sub{
  position:absolute;   /* この2つは今まで通り、お互い重ねるために absolute のまま */
  top:0;
  right:0;
  white-space:nowrap;
  font-family:var(--font-en);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.05em;
}

.step-badge-main{
  color:var(--color-blue);
  z-index:2;
}
.step-badge-sub{
  color:var(--color-gray-300);
  z-index:1;
  transform:translate(3px, 3px);   /* メインからのズレ量。数値で調整可能 */
}
.step-badge .step-num{
  font-size:1.5em;   /* 数字部分だけ大きく */
  font-weight:700;
}

.flow-content{
  flex:1;
  min-width:0;
}
.flow-title{
  margin-bottom:8px;
  font-size:18px;
  font-weight:700;
  color:var(--color-navy);
}
.flow-text{
  font-size:var(--fs-body);
  line-height:1.9;
  min-height:calc(1.9em * 2);
  color:var(--color-black);
}

/* ================================================
   事業内容ページ：開発支援の柔軟な対応力（2カラム）
================================================ */
.feature-columns{
  max-width:1000px;
  margin-top:60px;
  display:flex;
  gap:32px;
}
.feature-column{
  flex:1;
  text-align:center;
  padding:40px 20px;
  background:var(--color-gray-100);
  border-radius:4px;
}
.feature-title{
  font-size:25px;
  font-weight:700;
  color:var(--color-navy);
  margin-bottom:40px;
}
.feature-icon{
  width:100px;
  height:100px;
  margin:0 auto 20px;
}
.feature-text{
  font-size:18px;
  color:var(--color-gray-500);
  margin-top: 40px;
  line-height:1.9;
}

/* ================================================
   事業内容ページ：教育支援
================================================ */
.edu-support-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
.edu-support-image{
  width:100%;
}
.edu-support-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--color-gray-100); /* 画像未設置時のフォールバック */
}
.edu-support-subtitle{
  margin-top:32px;
  font-size:24px;
  font-weight:700;
  color:var(--color-navy);
  line-height:1.6;
}
.edu-support-text{
  max-width:1070px;
  padding-left: 6%;
  margin-top:24px;
  font-size:var(--fs-body);
  line-height:2;
  color:var(--color-black);
  text-align:left;   /* 長文なので読みやすいよう左寄せに */
}

/* ================================================
   事業内容ページ：お問い合わせCTA
================================================ */
.contact-cta{
  max-width:1100px;
  margin:20px auto 0;
  text-align:center;
  padding-bottom: 50px;
}
.contact-cta .footer-tel-label,
.contact-cta .footer-tel-number{
  display:block;
}

/* ================================================
   お問い合わせページ
================================================ */
.contact-section{
  max-width:1100px;
  margin:0 auto;
  padding:calc(var(--header-height) + var(--section-title-gap)) 10px 100px;
}
.contact-section .category-title{
  margin-bottom:0px;
}
.contact-section .body-text{
  margin-bottom:0px;
  font-size:15px;
}
.contact-btn{
  margin:24px 0 56px;
}

.contact-subsection{
  max-width:1100px;
  margin:24px auto 24px;
  padding-bottom:5px;
  font-size:22px;
  font-weight:700;
  color:var(--color-navy);
  border-bottom:2px solid var(--color-blue);
}

/* ================================================
   プライバシーポリシーページ
================================================ */
.policy-section{
  padding-bottom:120px;
}
.policy-section .body-text{
  font-size:15px;
}
.policy-list{
  width:90%;
  margin:8px auto 0;
  font-size:15px;
  line-height:2;
  color:var(--color-black);
}
.policy-list li{
  padding-left:1em;
  text-indent:-1em;      /* 折り返し時に「・」の位置を揃える */
}
.policy-list li::before{
  content:"・";
}