@charset "UTF-8";
/* ============================================================
   株式会社プロアシスト｜事業案内ページ CSS（business-page.css）
   旧 business.css と business-page.css を1ファイルに統合したもの。
   読み込み順（旧 business.css が先、business-page.css が後）による
   カスケードの結果を変えないよう、そのままの順番で連結している。
   色の実体は typography.css の共通トークンを参照（このファイルでは定義しない）。
============================================================= */

/* 事業案内ページだけ：本文エリアを画面幅いっぱいにする */
body.page.post-name-business .site-body-container.container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.page.post-name-business .site-body-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.page.post-name-business .main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 事業案内ページだけ：本文の左右余白と幅制限を解除 */
body.page.post-name-business .entry-body {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.business-hero {
  position: relative;
  background: url("../images/business-hero.jpg") no-repeat center/cover;
  height: 300px;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  text-align: center;
  color: #fff;
}

.business-hero::before {
  /* オーバーレイ */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.business-hero .hero-content {
  position: relative; /* オーバーレイの上に表示 */
  z-index: 1;
  margin-top: 60px;
}

.business-hero h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
}
.business-hero p {
  font-size: 1.2em;
}
.business-item h4 {
  font-size: 1em;
  margin: 15px 10px 10px;
  color: #285AB3;
}
.business-item h4 a {
 text-decoration: none;
}
.business-item h4 a:hover {
    color: #3371CB;
}
.business-item p {
  font-size: 0.75em;
  padding: 0 10px;
}

@media (max-width: 1024px) {
/*  .business-section*/.business-section-list {
    grid-template-columns: repeat(2, 1fr);
  }
.business-section-ttl h3,.business-section-ttl h3 {
  text-align: center;
  font-size: 1.8em;
  color: #285AB3;
  margin-bottom: 40px;
}
	.business-section-ttl p{
		font-size: 0.9em;
	}
}

@media (max-width: 600px) {
/*  .business-section*/.business-section-list {
    grid-template-columns: 1fr;
  }
}

.solution-section {
  padding: 60px 20px;
  text-align: center;
}
.solution-section h3 {
  text-align: center;
font-size: 2em;
  color: #285AB3;
  margin-bottom: 40px;
}
.solution-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.solution-card {
  width: 280px;
  padding: 20px;
  margin: 10px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.solution-card i {
  font-size: 2.5em;
  color: #285AB3;
  margin-bottom: 10px;
}
.solution-card h4 {
  margin-bottom: 10px;
  color: #003366;
}


@media (max-width: 768px) {
  .solution-list {
    flex-direction: column;
    align-items: center;
  }
}


/* ==================== 保有技術 ==================== */
.tech-matrix { position: relative; padding: 120px 0; text-align: center; }
.tech-matrix .section-lead { margin-left: auto; margin-right: auto; }
.tech-matrix__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.tech-matrix__tags span {
  background: var(--color-bg-alt); color: var(--color-primary); font-weight: 500;
  padding: 10px 20px; border-radius: 999px; font-size: 15px;
}
.top-main .tech-matrix__link,
.tech-matrix__link:hover { color: var(--color-primary); font-weight: 700; }
.tech-matrix__link:hover { color: var(--color-primary); }
.tech-matrix::before {
  content: "";
  position: absolute;
  width: 900px;
	max-width: 100%;
  height: 320px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image:
    linear-gradient(rgba(51,113,203,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,113,203,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .7;
  pointer-events: none;
}
.tech-matrix__tags span{
  background:#fff;
  border:1px solid rgba(51,113,203,.12);
}

/*.business__tags { display: flex; flex-wrap: wrap; gap: 8px;　list-style:none !important; }
.business__tags li {
	background: var(--color-white); 
	border-radius: 999px;
	transition: background var(--ease-base);
	list-style:none !important;
}

.business__tags li:hover { background: var(--color-primary); }
.business__tags a {
  display: block;/* color: var(--color-primary);*/
/*  font-size: 13px; padding: 6px 14px;
  transition: color var(--ease-base);
}
.business__tags li:hover a { color: #fff; }
*/
.service-card {
  /* カード自体のスタイル（適宜追加・調整してください） */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden; /* 画像の角丸をカードに合わせる場合 */
  padding: 16px;
}

.service-card_image {
  width: 100%;             /* 横幅をカード一杯に広げる */
  height: 100px;           /* お好みの高さに調整してください */
  object-fit: cover;       /* 画像のアスペクト比を維持して枠いっぱいにトリミング表示 */
  border-radius: 4px;      /* 画像自体の角を少し丸くする場合 */
  margin-bottom: 12px;     /* タイトルとの間の余白 */
  display: block;
}
.service-card_image-tall {
  height: 260px; /* 好きな高さに */
}

/* ============================================================
   ここから旧 business-page.css の内容
============================================================= */

/* ============================================================
   株式会社プロアシスト｜事業案内ページ（business-page.css）
   ・technology.css と同じ配色・設計トーンに統一
   ・全セレクタを .biz-page 配下にスコープ（既存CSSと衝突しないように）
   ・既存の html{font-size:62.5%} に合わせ、px基準で記述
   ・ヘッダー／グローバルナビ／フッターは既存 navi.css / style.css を使用
============================================================= */

.biz-page{
  /* 色・余白・フォントは typography.css の共通トークンを直接参照する */
  --content-w: 1120px; /* このページだけのレイアウト値（共通化の対象外） */

  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy-text);
  background: var(--color-white);
}

/*.biz-page img{ max-width: 100%; height: auto; display: block; }*/
.biz-page a{ text-decoration: none; }
.biz-page a:hover,
.biz-page a:focus{ text-decoration: none; }

/* 見出し共通パーツ ------------------------------------------------ */
.biz-page .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-navy-cyan);
  margin: 0 0 8px;
}
.biz-page .section-title{
  font-size: clamp(24px, 1.1rem + 1.2vw, 32px);
  font-weight: 700;
/*  color: var(--color-navy);*/
  margin: 0 0 16px;
}
/*.biz-page .section-desc{
  color: var(--color-navy-text-sub);
  max-width: 720px;
  margin: 0 0 40px;
}*/
.biz-page .section-desc--center{ margin-left: auto; margin-right: auto; text-align: center; }

/* [1] ヒーロー ----------------------------------------------------- */
.biz-hero{
  position: relative;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-blue) 65%, #2E76C9 100%);
  color: var(--color-white);
  padding: 96px 24px 120px;
  overflow: hidden;
}
.biz-hero::after{
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 60%;
  height: 160%;
  background: rgba(255,255,255,0.06);
  transform: rotate(-12deg);
}
.biz-hero__inner{
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  z-index: 1;
}
.biz-hero__label{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #9FC6F5;
  margin: 0 0 16px;
}
.biz-hero__title{
  font-size: clamp(32px, 1.4rem + 2.6vw, 48px);
  font-weight: 900;
  margin: 0 0 20px;
}
.biz-hero__lead{
  font-size: 16px;
  max-width: 720px;
  color: #DCEBFC;
  margin: 0;
}

.biz-page main{ display: block; }
.biz-page section{ padding: 40px 24px; }
.biz-page section > *{ max-width: var(--content-w); margin-left: auto; margin-right: auto; }

/* [2] 事業の柱（システム開発事業／技術者派遣事業） ------------------- */
.pillars{ background: var(--color-white); }
.pillars__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.pillar-card{
  background: var(--color-navy-light);
  border-radius: var(--radius-m);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar-card__num{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-navy-cyan);
}
.pillar-card__title{ margin: 0; font-weight: 700;}
.pillar-card__text{ margin: 0; /*color: var(--color-navy-text-sub); font-size: 15px; */}

/* [3] システム開発事業：3領域＋6カード ------------------------------- */
.dev-domains{ background: var(--color-navy-light); }
.dev-domains__groups{
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px;
}
.dev-domains__groups span{
  background: var(--color-white); border: 1px solid var(--color-border);
  color: var(--color-navy); font-weight: 500; font-size: 14px;
  padding: 8px 18px; border-radius: 999px;
}
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card__icon{ font-size: 28px; }
/*.service-card__title{ margin: 0; color: var(--color-primary); }*/
.service-card__text{ margin: 0;/* font-size: 14px; color: var(--color-navy-text-sub);*/ line-height: 1.7; }

/* [4] 専門ソリューション領域（クラウド／メディカル・ヘルスケア） ------ */
.solutions{ background: var(--color-white); }
.solutions__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.solution-block{
	 background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 32px;
}
/*.solution-block__title{ margin: 0 0 10px; font-size: 19px; color: var(--color-navy); }*/
/*.solution-block__text{ margin: 0 0 20px; font-size: 14px; color: var(--color-navy-text-sub); }*/
.solution-block__label{
  font-family: var(--font-mono);
  /*font-size: 11px; letter-spacing: 0.08em; */color: var(--color-navy-cyan);
  margin: 0 0 10px;
}
.solution-block__list{
  margin: 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--color-navy-text);
}
.solution-block__list li{
  padding: 10px 0 10px 20px;
  border-top: 1px solid var(--color-border);
  position: relative;
}
.solution-block__list li:first-child{ border-top: none; }
.solution-block__list li::before{
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-navy-cyan);
}

/* [5] 技術者派遣事業 ------------------------------------------------- */
.dispatch{ background: var(--color-navy); color: var(--color-white); }
.dispatch__inner{
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px; justify-content: space-between;
}
.dispatch__text{ flex: 1 1 480px; }
.dispatch .section-eyebrow{ color: #7FC7E0; }
.dispatch .section-title{ color: var(--color-white); }
.dispatch__lead{ color: #C7D6EA; max-width: 640px; margin: 0; }
.dispatch__cta{ flex: 0 0 auto; }

/* [6] 対応領域 -------------------------------------------------------- */
.coverage{ background: var(--color-navy-light); }
.coverage__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.coverage-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 24px 24px 20px;
}
.coverage-card__icon{ font-size: 24px; margin-bottom: 8px; }
.coverage-card__title{ margin: 0 0 10px; font-size: 16px; color: var(--color-navy); }
.coverage-card__examples{
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--color-navy-text-sub); line-height: 1.9;
}
.coverage-card__examples li{ padding-left: 14px; position: relative; }
.coverage-card__examples li::before{
  content: "―"; position: absolute; left: 0; color: var(--color-border);
}

/* [7] CTA（保有技術・お問い合わせ） ------------------------------------ */
.biz-cta{
  background: linear-gradient(120deg, var(--color-navy), var(--color-navy-blue));
  color: var(--color-white);
  text-align: center;
}
.biz-cta__inner{ max-width: 680px; margin: 0 auto; }
.biz-cta__title{ font-size: clamp(20px, 1.1rem + 1vw, 29px); margin: 0 0 16px; }
.biz-cta__desc{ color: #DCEBFC; margin: 0 0 32px; }
.biz-cta__buttons{
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.biz-page .btn{
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius-s);
  font-weight: 500;
  transition: opacity .15s ease;
}
.biz-page .btn--primary,
.biz-page .btn--primary:hover{ background: var(--color-navy-cyan); color: var(--color-navy); }
.biz-page .btn--secondary,
.biz-page .btn--secondary:hover{ background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.6); }
.biz-page .btn:hover{ opacity: 0.85; }

/* ============================================================
   レスポンシブ対応
============================================================= */
@media (max-width: 1024px){
  .pillars__grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
  .solutions__grid{ grid-template-columns: 1fr; }
  .coverage__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .biz-page section{ padding: 64px 20px; }
  .biz-hero{ padding: 72px 20px 88px; }
  .service-grid{ grid-template-columns: 1fr; }
  .coverage__grid{ grid-template-columns: 1fr; }
/*  .dispatch__inner{ flex-direction: column; align-items: flex-start; }*/
	.dispatch__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .dispatch__text{
    flex: 1;
  }
  .biz-cta__buttons{ flex-direction: column; }
  .biz-page .btn{ width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .biz-page .btn{ transition: none; }
}

/* アクセシビリティ：キーボードフォーカス */
.biz-page a:focus-visible,
.biz-page button:focus-visible{
  outline: 2px solid var(--color-navy-cyan);
  outline-offset: 2px;
}
/*  ============================================================
     [6] 対応領域
=============================================================*/
.coverage-item{
    margin-bottom:40px;
}

.coverage-item__title{
    font-size:22px;
    font-weight:700;
    color:#1f4fa3;
    margin-bottom:16px;
}

.coverage-item__chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.coverage-chip{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    background:#f5f7fa;
    border:1px solid #dfe4ea;
    border-radius:999px;
    font-size:14px;
    color:#555;
    line-height:1.4;
}
/* リンク付きチップ（<a>タグ）のスタイル */
a.coverage-chip {
    background-color: #eef4ff; /* 明るいブルー系の背景 */
    border-color: #b3cbf7;     /* 青系のボーダー */
    color: #1f4fa3;            /* 見出しと同系統のテキスト色 */
    text-decoration: none;     /* 下線を削除 */
    font-weight: 500;
    transition: all 0.2s ease; /* ホバー時の変化を滑らかに */
}

/* リンク付きチップのマウスオーバー（ホバー）時 */
a.coverage-chip:hover {
    background-color: #1f4fa3; /* 背景色をダークブルーに */
    border-color: #1f4fa3;
    color: #ffffff;            /* テキスト色を白に */
}




/*<!-- ============================================================
     [1] ヒーローセクション（AIソリューションHero）
============================================================= -->*/
.ai-hero {
  position: relative;
  background: url("../images/ai/ai-banner.jpg") no-repeat center/cover;
  height: 500px;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  text-align: center;
  color: #fff;
}

.ai-hero::before {
  /* オーバーレイ */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.ai-hero .hero-content {
  position: relative; /* オーバーレイの上に表示 */
  z-index: 1;
  margin-top: 60px;
}

.ai-hero h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
}
.ai-hero p {
  font-size: 1.2em;
}
/*<!-- .当社が選ばれる３つの理由 --> */
.reason-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.reason-text {
    flex: 7;
}
.reason-image {
    flex: 5;
}
.reason-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
	margin-top: 25px;
}
@media (max-width: 768px) {
    .reason-layout {
        flex-direction: column;
    }

    .reason-image {
        order: -1; /* 画像を上にしたい場合 */
			margin-top: 0px;
    }
}
.ai-flow img {
    display: block;
    margin: 0 auto;
}
.ai-studio img{
    display:block;
    margin: 0 auto;
}


/* =========================
   AI活用事例カード
========================= */

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

.ai-case-card{
    background: #3371CB;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    padding: 30px;
}

.ai-case-card img{
    width: 100%;
    height: auto;
    display: block;
}

.ai-case-body{
    margin-top: 20px;
}

.ai-case-title{
    margin: 0 0 15px;
    font-size: 2.4rem;
    color: #ffffff;
    font-weight: 700;
}

.ai-case-desc{
  /*  min-height: 60px;*/
    margin: 0 0 25px;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1.8;
}

/* ==================================
   AI活用事例ボタン
================================== */

.viewall-arrow-lineup{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 14px 30px;
    background: #ffffff;
    border-radius: 999px;
    color: #3371CB;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
}

/* 左→右へ流れる背景 */
.viewall-arrow-lineup::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #285AB3;
    transition: width 0.3s ease;
    z-index: -1;
}

/* 矢印 */
.viewall-arrow-lineup::after{
    content: "→";
    margin-left: 12px;
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}

/* hover */
.viewall-arrow-lineup:hover{
    color: #ffffff;
    text-decoration: none;
}

.viewall-arrow-lineup:hover::before{
    width: 100%;
}

.viewall-arrow-lineup:hover::after{
    transform: translateX(4px);
}
/* スマホ */

/* 共通ブロック */
.case-layout {
  margin-bottom: 48px;
}
.case-layout p {
  margin: 0 0 12px;
  line-height: 1.7;
}

/* 見出し：左が青、残りがグレーの下線 */
/*.line-ttl {
  position: relative;
  margin: 32px 0 20px;
  padding-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.line-ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #1a73e8 0, #1a73e8 25%, #ccc 25%, #ccc 100%);
}
*/
/* 画像2枚を横並び */
.case-layout__images {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 32px;
}
.case-layout__images figure {
  flex: 1;
  margin: 0;
}

/* テキスト左 / 画像右 */
.case-layout__row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.case-layout__row .case-layout__text,
.case-layout__row .case-layout__image {
  flex: 1;
}
.case-layout__row figure {
  margin: 0;
}

.case-layout img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .case-layout__images,
  .case-layout__row {
    flex-direction: column;
    gap: 20px;
  }
}

/* =========================
   AI活用事例 レスポンシブ
========================= */
@media (max-width: 768px) {

    /* 3列 → 1列 */
    .case-grid{
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    /* カード余白調整 */
    .ai-case-card{
        padding: 20px;
    }

    /* 画像 */
    .ai-case-card img{
        max-width: 100%;
        height: auto;
    }

    /* タイトル */
    .ai-case-title{
        font-size: 1.8rem;
        line-height: 1.4;
    }

    /* 説明文 */
    .ai-case-desc{
        font-size: 1rem;
        line-height: 1.6;
    }

    /* ボタン */
    .viewall-arrow-lineup{
        width: 100%;
        min-width: auto;
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* 事例レイアウト */
    .case-layout__images,
    .case-layout__row{
        flex-direction: column;
        gap: 20px;
    }

    .case-layout__text,
    .case-layout__image,
    .case-layout__images figure{
        width: 100%;
    }

    .case-layout img{
        width: 100%;
        height: auto;
    }
}

/* ============================================================
   株式会社プロアシスト｜保有技術・得意分野ページ（technology.css）
   既存サイト（typography.css / navi.css / style.css）と同居させるための版
   ・全セレクタを .tech-page 配下にスコープ（body / a / img / section 等のグローバル指定を排除）
   ・既存の html{font-size:62.5%} に合わせ、rem は px に換算
   ・デザイン（配色・レイアウト・ブレークポイント）は元の technology.css と同一
   ・ヘッダー／グローバルナビ／フッターは既存 navi.css / style.css を使用
============================================================= */

.tech-page{
  /* 色・余白・フォントは typography.css の共通トークンを直接参照する */
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif; /* このページだけのフォント指定（共通化の対象外） */
  --content-w: 1120px; /* このページだけのレイアウト値（共通化の対象外） */
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy-text);
  background: var(--color-white);
}



.tech-page img{ max-width: 100%; height: auto; display: block; }

:where(.tech-page) a{ color: inherit; text-decoration: none; }

.tech-page .visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* 見出し共通パーツ ------------------------------------------------ */
.tech-page .section-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-navy-cyan);
  margin: 0 0 8px;
}
.tech-page .section-title{
  font-size: clamp(24px, 17.6px + 1.2vw, 32px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 16px;
}
.tech-page .section-desc{
 /* color: var(--color-navy-text-sub);*/
 /* max-width: 640px;*/
  margin: 0 0 20px;
}

/* [1] ヒーロー ----------------------------------------------------- */
/*.tech-page .tech-hero{
  position: relative;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-blue) 65%, #2E76C9 100%);
  color: var(--color-white);
  padding: 96px 24px 120px;
  overflow: hidden;
}
.tech-page .tech-hero::after{
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 60%;
  height: 160%;
  background: rgba(255,255,255,0.06);
  transform: rotate(-12deg);
}
.tech-page .tech-hero__inner{
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  z-index: 1;
}
.tech-page .tech-hero__label{
  font-family: var(--font-mono);
  font-size: 12.8px;
  letter-spacing: 0.12em;
  color: #9FC6F5;
  margin: 0 0 16px;
}
.tech-page .tech-hero__title{
  font-size: clamp(32px, 22.4px + 2.6vw, 48px);
  font-weight: 900;
  margin: 0 0 20px;
}
.tech-page .tech-hero__lead{
  font-size: 16.8px;
  max-width: 560px;
  color: #DCEBFC;
  margin: 0 0 48px;
}
.tech-page .tech-hero__stats{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.tech-page .tech-hero__stat{
  display: flex;
  flex-direction: column;
}
.tech-page .tech-hero__stat-num{
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
}
.tech-page .tech-hero__stat-label{
  font-size: 13.6px;
  color: #BBD7F5;
}


:where(.tech-page) section{ padding: 88px 24px; }
:where(.tech-page) section > *{ max-width: var(--content-w); margin-left: auto; margin-right: auto; }*/
/* ============================================================
   保有技術・得意分野 概要・実績セクション（Hero直下）
============================================================= */
.tech-intro {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.tech-intro__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 英語の小見出し */
.tech-intro__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1f4fa3;
  margin-bottom: 8px;
}

/* ページの大見出し */
.tech-intro__title {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}

/* リード文 */
.tech-intro__lead {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.7;
  color: #444;
  margin-bottom: 40px;
}

/* 数字（実績）ブロック */
.tech-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.tech-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #dfe4ea;
}

.tech-stat-item__num {
  font-size: 2.2rem;
  font-weight: bold;
  color: #1f4fa3;
  line-height: 1;
  margin-bottom: 8px;
}

.tech-stat-item__label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .tech-intro {
    padding: 40px 20px;
  }
  .tech-intro__title {
    font-size: 1.6rem;
  }
  .tech-intro__lead {
    font-size: 1rem;
  }
  .tech-stats {
    gap: 12px;
  }
  .tech-stat-item {
    flex: 1 1 calc(33.333% - 8px);
    padding: 15px 8px;
  }
  .tech-stat-item__num {
    font-size: 1.75rem;
  }
  .tech-stat-item__label {
    font-size: 12px;
  }
}
/* [2] 技術×業界マトリクス ------------------------------------------ */
.tech-page .matrix{ background: var(--color-white); }
.tech-page .matrix__inner{ max-width: var(--content-w); margin: 0 auto; }
.tech-page .matrix__table-wrap{
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  -webkit-overflow-scrolling: touch;
}
.tech-page .matrix__table{
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}
.tech-page .matrix__table caption{ display: none; }
.tech-page .matrix__table th,
.tech-page .matrix__table td{
  padding: 18px 12px;
  border: 1px solid var(--color-border);
}
.tech-page .matrix__table thead th{
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 500;
  font-size: 13px;
}
.tech-page .matrix__sub{ font-size: 11.52px; color: #AFC6E5; }
.tech-page .matrix__corner{ background: var(--color-navy) !important; }
.tech-page .matrix__table tbody th{
  background: var(--color-navy-light);
  color: var(--color-navy);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.tech-page .cell{ font-family: var(--font-mono); font-weight: 700; font-size: 17.6px; transition: transform .15s ease; }
.tech-page .cell--core{ background: var(--color-navy-blue); color: var(--color-white); }
.tech-page .cell--ok{ background: #CFE3FA; color: var(--color-navy); }
.tech-page .cell--na{ background: var(--color-border-soft); color: #9AA5B1; }
/*.tech-page .matrix__table tbody tr td.cell:hover{ transform: scale(1.12); }*/

.tech-page .stack-table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}
.tech-page .stack-table th,
.tech-page .stack-table td{
  padding: 16px 14px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}
.tech-page .stack-table thead th{
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
}
.tech-page .stack-table tbody th{
  background: var(--color-navy-light);
  color: var(--color-navy);
  font-weight: 700;
  white-space: nowrap;
}
.tech-page .stack-table td{ /*color: var(--color-navy-text-sub);*/ line-height: 1.7; }
.tech-page .stack-table .tag-list{ margin-top: 8px; }

.tech-page .matrix__note{
  font-size: 12px;
  color: var(--color-navy-text-sub);
  margin: 12px 0 0;
}

.tech-page .matrix--industry{ background: var(--color-navy-light); }

.tech-page .matrix__legend{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
 font-size: 12px;
 /*   color: var(--color-navy-text-sub);*/
}
.tech-page .matrix__legend li{ display: flex; align-items: center; gap: 8px; }
.tech-page .matrix__legend-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-white);
}
.tech-page .matrix__legend-mark--core{ background: var(--color-navy-blue); }
.tech-page .matrix__legend-mark--ok{ background: #CFE3FA; color: var(--color-navy); }
.tech-page .matrix__legend-mark--na{ background: var(--color-border-soft); color: #9AA5B1; }
/* 開発区分・各レイヤー列の幅を均等に指定 */
.tech-page .stack-table th,
.tech-page .stack-table td {
  width: 20%; /* 全5列で 20% × 5 = 100% */
}
/* [3] 5大コア技術 --------------------------------------------------- */
.tech-page .core{ background: var(--color-white); border-top: 1px solid var(--color-border); }
.tech-page .core__inner{ max-width: var(--content-w); margin: 0 auto; }
.tech-page .core__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.tech-page .core__grid--3{ grid-template-columns: repeat(3, 1fr); }
.tech-page .core-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tech-page .core-card__icon{ font-size: 28.8px; }
.tech-page .core-card__title{ margin: 0; font-size: 16.8px; color: var(--color-navy); }
.tech-page .core-card__desc{ margin: 0; font-size: 13.6px; color: var(--color-navy-text-sub); line-height: 1.7; }

.tech-page .tag-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
}
.tech-page .tag{
  font-family: var(--font-mono);
  font-size: 11.52px;
  color: var(--color-navy);
  background: var(--color-navy-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 4px 8px;
}

/* [4] 技術領域詳細（左右交互） -------------------------------------- */
.tech-page .detail{ background: var(--color-white); }
.tech-page .detail__intro{ max-width: var(--content-w); margin: 0 auto 8px; }
.tech-page .detail-row{
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  border-top: 1px solid var(--color-border);
}
.tech-page .detail-row--reverse .detail-row__text{ order: 2; }
.tech-page .detail-row--reverse .detail-row__media{ order: 1; }
.tech-page .detail-row__title{
  font-size: 20.8px;
  color: var(--color-navy);
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 4px solid var(--color-navy-cyan);
}
.tech-page .detail-row__desc{ color: var(--color-navy-text-sub); margin: 0 0 16px; }
.tech-page .detail-row__media img{ border-radius: var(--radius-m); }

/* [5] 主な対応分野 --------------------------------------------------- */
.tech-page .fields{ background: var(--color-navy-light); }
.tech-page .fields__inner{ max-width: var(--content-w); margin: 0 auto; }
.tech-page .fields__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.tech-page .field-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.tech-page .field-card__icon{ font-size: 30.4px; }
.tech-page .field-card__name{ font-size: 13.6px; color: var(--color-navy); font-weight: 500; }

/* [6] 品質保証・セキュリティ ------------------------------------------ */
.tech-page .quality{ background: var(--color-navy); color: var(--color-white); }
.tech-page .quality .section-eyebrow{ color: #7FC7E0; }
.tech-page .quality .section-title{ color: var(--color-white); }
.tech-page .quality .section-desc{ color: #C7D6EA; }
.tech-page .quality__inner{ max-width: var(--content-w); margin: 0 auto; }
.tech-page .quality__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tech-page .quality-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-m);
  padding: 28px 24px;
}
.tech-page .quality-card__title{
  font-size: 16.8px;
  margin: 0 0 16px;
  color: var(--color-white);
}
.tech-page .quality-card__list{
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.4px;
  color: #D6E3F2;
}
.tech-page .quality-card__list li{
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.tech-page .quality-card__list li:first-child{ border-top: none; }

/* [7] CTA ------------------------------------------------------------ */
.tech-page .cta{
  background: linear-gradient(120deg, var(--color-navy), var(--color-navy-blue));
  color: var(--color-white);
  text-align: center;
}
.tech-page .cta__inner{ max-width: 640px; margin: 0 auto; }
.tech-page .cta__title{ font-size: clamp(22.4px, 17.6px + 1vw, 28.8px); margin: 0 0 16px; }
/*.tech-page .cta__desc{ color: #DCEBFC; margin: 0 0 32px; }*/
.tech-page .cta__buttons{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tech-page .btn{
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius-s);
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s ease;
}
.tech-page .btn--primary{ background: var(--color-navy-cyan); color: var(--color-navy); }
.tech-page .btn--secondary{ background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.6); }
.tech-page .btn:hover{ opacity: 0.85; }

/* ============================================================
   レスポンシブ対応
============================================================= */
@media (max-width: 1024px){
  .tech-page .core__grid{ grid-template-columns: repeat(3, 1fr); }
  .tech-page .fields__grid{ grid-template-columns: repeat(3, 1fr); }
  .tech-page .quality__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  :where(.tech-page) section{ padding: 64px 20px; }
  .tech-page .tech-hero{ padding: 72px 20px 88px; }
  .tech-page .tech-hero__stats{ gap: 28px; }
  .tech-page .detail-row{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tech-page .detail-row--reverse .detail-row__text,
.tech-page .detail-row--reverse .detail-row__media{ order: initial; }
  .tech-page .core__grid{ grid-template-columns: repeat(2, 1fr); }
  .tech-page .fields__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px){
  .tech-page .tech-hero__title{ font-size: 28.8px; }
  .tech-page .core__grid{ grid-template-columns: 1fr; }
  .tech-page .fields__grid{ grid-template-columns: repeat(2, 1fr); }
  .tech-page .matrix__legend{ gap: 16px; }
  .tech-page .cta__buttons{ flex-direction: column; }
  .tech-page .btn{ width: 100%; text-align: center; }
}

/* アクセシビリティ：キーボードフォーカス */
.tech-page a:focus-visible,
.tech-page button:focus-visible{
  outline: 2px solid var(--color-navy-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .tech-page .cell,
.tech-page .btn{ transition: none; }
}


/* ============================================================
   既存 typography.css との調整
   （a{下線・青} / a:hover{下線・水色} を本ページ内で打ち消す）
============================================================= */
.tech-page a:hover,
.tech-page a:focus{ color: inherit; text-decoration: none; }
.tech-page .btn--primary,
.tech-page .btn--primary:hover,
.tech-page .btn--primary:focus{ color: var(--color-navy); }
.tech-page .btn--secondary,
.tech-page .btn--secondary:hover,
.tech-page .btn--secondary:focus{ color: var(--color-white); }



/* CTAセクションを親の50px余白を無視して、画面いっぱいに広げる */
.cta-section {
	background-color: #3371CB;
	text-align: center;
	color: #fff;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-top: 45px;
	padding: 60px 0 !important;
	overflow: hidden;
}


.cta-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #fff !important;
}

/* --- ここからボタンの動きをヘッダーと同期 --- */
.cta-button {
    display: inline-block;
    background-color: #fff;      /* 初期状態は白背景 */
    color: #3371CB !important;   /* 文字は青 */
    padding: 18px 60px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    position: relative;          /* 疑似要素の基準 */
    overflow: hidden;            /* アニメーションのはみ出し防止 */
    z-index: 1;
    transition: color 0.3s ease;
    border: none;                /* ヘッダーに合わせるならボーダーなし */
}

/* 左から右に流れる背景エフェクト（青色） */
.cta-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #285AB3;         /* ヘッダーと同じ少し濃い青 */
    transition: width 0.3s ease;
    z-index: -1;
}

/* ホバー時の挙動 */
.cta-button:hover::before {
    width: 100%;                 /* 背景を右まで伸ばす */
}

.cta-button:hover {
    color: #fff !important;      /* 文字を白に変える */
    text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .cta-title {
        font-size: 20px;
        padding: 0 20px;
    }
    .cta-button {
        width: 80%;
        padding: 16px 0;
    }
}


/* 販売終了　製品ラインナップ（2列） */
.product-lineup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 0 0 50px;
}
.product-card__image {
    margin: 0 0 12px;
}
.product-card__image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}
.product-card__name,
.product-card__model {
    margin: 0 0 4px;
    padding-left: 20px;
}

/* 製品サポート */
.product-support__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 20px;
    padding: 0 0 8px;
    border: none;
    background: linear-gradient(to right, #3371CB 0, #3371CB 23%, #ccc 23%, #ccc 100%) no-repeat bottom / 100% 4px;
}
.product-support__target {
    font-weight: 700;
    margin: 0 0 4px;
}
.product-support__group h4 {
    background: #f0f0f0;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 10px 24px;
    margin: 20px 0 10px;
    border: none;
}

/* リンクリスト（青丸） */
.product-links {
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 0 24px;
}
.product-links li {
    position: relative;
    padding-left: 24px;
    margin: 12px 0;
}
.product-links li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 7px;
    height: 7px;
    background: #3371CB;
    border-radius: 50%;
}
.product-links a,
.product-support__trouble a {
    color: #3371CB;
    text-decoration: underline;
}

/* PDFアイコン */
.product-page a[href$=".pdf"]::after {
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    color: #e04b4b;
    margin-left: 4px;
    font-size: 0.9em;
}

/* 「故障かな？と思ったら」（青い四角つき） */
.product-support__trouble {
    margin: 20px 0;
    padding-left: 10px;
}
.product-support__trouble::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background: #3371CB;
    margin-right: 8px;
    vertical-align: middle;
}

/* スマホ */
@media (max-width: 767px) {
    .product-lineup {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .product-links {
        padding-left: 0;
    }
}
/* お問い合わせボタン */
.btn_l-button {
    text-align: center;
    margin: 40px 0 50px;
}
.btn_l-button a {
    display: inline-block;
    min-width: 290px;
    padding: 14px 30px;
    background: #3371CB;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.3s;
}
.btn_l-button a::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}
.btn_l-button a:hover {
    background: #285AB3;
}

/* ==========================================================
   AIソリューションページ専用（.biz-ai がある場合のみ有効）
   ========================================================== */

/* 親要素の余白を解除（事業案内ページと同じ処理） */
.site-body-container.container:has(.biz-ai) {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-body-container:has(.biz-ai) > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.site-body-container:has(.biz-ai) .main-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.entry-body:has(.biz-ai) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 冒頭タイトル部：65px の余白をセクションと同じ左右余白に揃える */
.biz-ai .section-ttl {
  max-width: 1120px;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .biz-ai .section-ttl {
    padding: 0 20px;
  }
}