/* =====================================================
   Reset / Base
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* =====================================================
   Design Tokens
   ===================================================== */
:root {
  /* Colors — base palette */
  --color-primary: #231815;
  --color-accent:  #231815;
  --color-heading: #292f8d;
  --color-text:    #231815;
  --color-bg:      #ffffff;

  /* Colors — section-specific */
  --color-flow-upstream: #62AADA;
  --color-flow-build:    #68C3CA;
  --color-gray-dark:     #828282;
  --color-gray-light:    #b5b5b6;
  --color-usecase-bg:    #eaf6fd;
  --color-issues-card:   #EAF6FD;  /* お困りカードの背景（薄い青） */
  --color-issues-title:  #62AADA;  /* お困りカードのタイトル帯（濃い水色） */
  --color-service-box:   #F1F2F1;  /* サービス概要：本文ボックスの背景（薄いグレー） */
  --color-flow-line:     #E3E3E3;  /* サービスの流れ：フェーズ左右の縦罫線（薄いグレー） */
  --color-flow-fold:     #7C7D7C;  /* サービスの流れ：タブの折り返し三角（グレー） */
  --color-flow-step0:          #343786;  /* サービスの流れ：0 無料相談の濃紺（番号丸・見出し・窓口ラベル） */
  --color-flow-arrow-upstream: var(--color-flow-step0);  /* 上流・分析フェーズの縦矢印（濃紺） */
  --color-flow-arrow-build:    #7BA7D2;  /* 構築・運用フェーズの縦矢印（青） */
  --color-ba-before-bg:  #EFEFEF;  /* Before/After：Beforeカード背景（薄グレー） */
  --color-ba-after-bg:   #DBEDF9;  /* Before/After：Afterカード背景（薄水色） */
  --color-ba-after-text: #4A93CC;  /* Before/After：Afterカードの文字（青） */
  --color-reasons-title: #2C6CB0;  /* 選ばれる理由：項目タイトルの青 */

  /* Typography */
  --font-base:    "M PLUS 1p", sans-serif;
  --fs-base:      20px;   /* 本文ベース */
  --fs-subhead:   24px;   /* 小見出し */
  --fs-midhead:   28px;   /* 中見出し */
  --fs-heading:   39px;   /* 見出し */
  --fs-fv-sub:    35px;   /* FVサブタイトル */
  --fs-fv-title:  68px;   /* FVタイトル */
  --fs-base-sp:   16px;   /* スマートフォンの本文ベース */
  --lh-base:      1.46;   /* IL 行送り 35pt ÷ 24pt */

  /* Layout */
  --section-gap:  60px;   /* セクション間の余白（各セクションの下に付与して統一） */
}

/* スマートフォン（〜767px）：本文ベースのフォントサイズを少し下げる
   （--fs-base を参照している本文すべてに反映される） */
@media (max-width: 767px) {
  :root {
    --fs-base: 16px;
    --fs-subhead:   18px;   /* 小見出し */
    --fs-midhead:   24px;   /* 中見出し */
    --fs-heading:   28px;   /* 見出し */
    --fs-base-sp:   14px;   /* スマートフォンの本文ベース */
  }
}

/* =====================================================
   Global Base
   ===================================================== */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;   /* mac 系のみ有効 */
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* 念のため横スクロール抑止 */
}

/* M PLUS 1p の輪郭のシャギー対策（主に Windows Chrome）。
   ごく僅かに回転させるとグレースケール AA が強制され輪郭が滑らかになる。
   body 全体に当てるとページが傾き、中央から離れた要素ほど横ズレ＝隙間が出るため、
   テキストを持つブロック要素「単位」に当てる。各要素は背が低いので、回転による
   横ズレは 0.1px 未満（高さ200px でも 200 × tan0.05° ≈ 0.09px）に収まり目に見えない。 */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, th, td,
figcaption, address, blockquote {
  transform: rotate(0.05deg);
}

/* =====================================================
   Layout Utilities
   ===================================================== */
.section {
  width: 100%;
}

.section__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 共通見出し（紺＋水色の左バー）— 各セクションで使い回す */
.sec-heading {
  /* 画面幅に追従。上限 39px(--fs-heading)、下限 24px */
  font-size: clamp(20px, calc(2.2vw + 12px), var(--fs-heading));
  font-weight: 700;
  color: var(--color-heading);
  position: relative;
  padding-left: 38px;
  line-height: 1.3;
  margin-bottom: 40px;
}

.sec-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(
    to right,
    var(--color-heading) 0 15px,        /* 紺：15px */
    transparent 15px 19px,              /* 白の隙間：4px */
    var(--color-issues-title) 19px 24px /* 水色：5px */
  );
}
@media (max-width: 767px) {
  .sec-heading {
    margin-bottom: 20px;
    padding-left: 24px;
  }
  .sec-heading::before {
    width: 15px;
    background: linear-gradient(
      to right,
      var(--color-heading) 0 8px,        /* 紺：8px */
      transparent 8px 12px,              /* 白の隙間：4px */
      var(--color-issues-title) 12px 15px /* 水色：3px */
    );
  }
}

/* =====================================================
   こんなお困りありませんか？（section2）
   ===================================================== */
.issues {
  background-color: var(--color-bg);
  padding-top: 70px;
  padding-bottom: var(--section-gap);
}

.issues__heading {
  /* sec-heading と同じく画面幅に追従 */
  font-size: clamp(20px, calc(2.2vw + 12px), var(--fs-heading));
  font-weight: 700;
  color: var(--color-heading);
  position: relative;
  padding-left: 38px;
  line-height: 1.3;
  margin-bottom: 40px;
}

.issues__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(
    to right,
    var(--color-heading) 0 15px,        /* 紺：15px */
    transparent 15px 19px,              /* 白の隙間：4px */
    var(--color-issues-title) 19px 24px /* 水色：5px */
  );
}

.issues__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 45px;
  margin-bottom: 30px;
}

.issues__item {
  background-color: var(--color-issues-card);
  border-radius: 20px;
  overflow: hidden;
}

.issues__item-title {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: #fff;
  background-color: var(--color-issues-title);
  line-height: 1.5;
  padding: 14px 24px;
}

.issues__item-body {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
  padding: 18px 24px 24px;
}

.issues__images {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  /* 高さを画面幅に連動させ、幅を縮めても左右が切れすぎないようにする
     （利用可能幅の約32%、最大 380px・最小 160px） */
  height: clamp(130px, calc((100vw - 40px) * 0.32), 380px);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.issues__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.issues__img--worker {
  object-position: top center;
}

/* 1000px 以下：タイトル内の改行（br）を無効化し、自然な折り返しにする */
@media (max-width: 1000px) {
  .issues__item-title br {
    display: none;
  }
}

/* スマートフォン（〜767px）：カードを 1 列にする */
@media (max-width: 767px) {
  .issues__item-title{
    padding: 10px 16px;
  }
  .issues__item-body{
    padding: 12px 16px 16px;
    text-align: justify;
  }
  .issues__list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   サービス概要（section3）
   ===================================================== */
.service {
  padding-bottom: var(--section-gap);
}

.service__box {
  background-color: var(--color-service-box);
  padding: 26px 30px;
}

/* スマートフォン（〜767px）：本文ボックスの上下左右余白を 15px に */
@media (max-width: 767px) {
  .service__box {
    padding: 15px;
  }
}

.service__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin-bottom: 20px;
  text-align: justify;
}

.service__feature {
  margin-bottom: 20px;
}

.service__feature:last-child {
  margin-bottom: 0;
}

.service__feature-title {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 10px;
}

.service__feature-body {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
}

@media (max-width: 767px) {
  .service__feature-title {
    font-size: 16px;
    margin-bottom: 5px;
  }
}

/* =====================================================
   MiSERU株式会社について（section4）
   ===================================================== */
.about {
  padding-bottom: var(--section-gap);
}

.about__box {
  border: 3px solid var(--color-heading);
  border-radius: 20px;
  padding: 26px 30px;
}

/* スマートフォン（〜767px）：ボックスの上下左右余白を 15px に */
@media (max-width: 767px) {
  .about__box {
    padding: 15px;
  }
}

.about__heading {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
  margin-bottom: 14px;
}
.about__heading a {
  color: var(--color-heading);
}

.about__heading a:hover {
  opacity: 0.8;
}


/* スマートフォン（〜767px）：見出しサイズを 24px に */
@media (max-width: 767px) {
  .about__heading {
    font-size: 24px;
    margin-bottom: 5px;
  }
}

.about__lead {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 10px;
}

.about__text {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-base);
}

/* =====================================================
   サービスの流れ（section6）
   ===================================================== */
.flow {
  padding-bottom: var(--section-gap);
}

/* 見出し直下のリード文 */
.flow__intro {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 36px;
  padding-left: 38px;   /* 見出し（sec-heading）の本文「サ」と左端を揃える */
}

/* フェーズごとにテーマカラーを切り替え（タブ・番号・見出し・小見出し・ラベルで共用） */
.flow__phase--upstream { --flow-color: var(--color-flow-upstream); }
.flow__phase--build    { --flow-color: var(--color-flow-build); }
/* 0 無料相談は濃紺をテーマカラーに（番号丸・見出し・窓口ラベル） */
.flow__phase--contact  { --flow-color: var(--color-flow-step0); }

/*
  各フェーズは「左カラム（aside）＋右カラム（main）」の 2 カラム。
  デザイン実測：左カラムはフェーズ幅の約 40%（右カラムの開始＝① の左端が 40% 位置）。
  デザイン通り、フェーズの左と上に罫線を入れる。
*/
.flow__phase {
  display: flex;
  align-items: flex-start;
  border-left: 2px solid var(--color-flow-line);
  border-top: 2px solid var(--color-flow-line);
  padding: 5px 10px 24px;
}

.flow__phase--upstream { margin-bottom: 50px; }
/* 0 無料相談は罫線・タブ・矢印なしの素の行 */
.flow__phase--contact {
  border: 0;
  padding: 0 10px;
  /* Step0行〜上流・分析フェーズ罫線の間隔（design 実測：ラベル下端→罫線 ≒31px → box 間 27px） */
  margin-bottom: 27px;
}

/* 左カラム：上から タブ＋矢印（aside-head）→ ロゴ → ラベル を縦に積む */
.flow__aside {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 右カラム：リード文＋ステップ一覧。左端が ① の開始位置になる */
.flow__main {
  flex: 1 1 0;
  min-width: 0;
}

/*
  左カラム上部の「タブ＋矢印」の領域。
  高さで 罫線〜ロゴ上端 の間隔（design 実測≒182px）を確保し、
  ロゴ・ラベルはこの下に自然に積む（ロゴへの margin マジックナンバーを排除）。
  矢印を罫線の上に出すため position:relative を基準にする。
*/
.flow__aside-head {
  position: relative;
  width: 100%;
  height: 182px;
}

/*
  縦矢印：細いシャフト（要素本体）＋ ::after の固定サイズ矢じり。
  ロゴ中央の真上に来るよう中央寄せ。シャフトの高さ(height)だけをフェーズ毎に変える。
  構築・運用のみ top をマイナスにして上の罫線を突き抜ける（祖先に overflow:hidden 不可）。
*/
.flow__arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;                                   /* シャフトの太さ */
  background-color: var(--flow-arrow-color);
}
.flow__arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 21px solid transparent;          /* 矢じり幅 42px */
  border-right: 21px solid transparent;
  border-top: 31px solid var(--flow-arrow-color); /* 矢じり高さ 31px */
}
.flow__phase--upstream .flow__arrow {
  --flow-arrow-color: var(--color-flow-arrow-upstream);
  top: -5px;                                     /* シャフト頂点を上の罫線に合わせる */
  height: 122px;                                 /* シャフト長（矢じり込みで総高 ≒153px、先端はロゴ手前） */
}
.flow__phase--build .flow__arrow {
  --flow-arrow-color: var(--color-flow-arrow-build);
  /*
    上端は上流・分析フェーズの「要件整理」ラベルの“すぐ下”で止める（文字に被せない）。
    矢じり（下端）位置は固定するため top+height を据え置き（=128）。
    レンダー実測：要件整理ラベル下端 3978px → 矢印上端 3983px（5px 下）になる top。
    重なり順は 罫線 < 矢印 < テキスト。矢印は罫線より前面に出す（z-index:1）。
    1で上端を文字の下で止めるため、矢印と上流テキストは物理的に重ならない。
  */
  top: -108px;                                   /* 上端を下げ（要件整理ラベル下端の少し下） */
  height: 246px;                                 /* top+height=128 据え置きで下端（矢じり）不変 */
  z-index: 1;                                     /* 構築・運用フェーズの上罫線より前面へ */
}
@media (max-width: 996px) {
  .flow__phase--build .flow__arrow {
    top: -98px;
    height: 236px;
  }
}
@media (max-width: 985px) {
  .flow__phase--build .flow__arrow {
    top: -88px;
    height: 226px;
  }
}
@media (max-width: 828px) {
  .flow__phase--upstream .flow__arrow{
    left: 55%;
  }
  .flow__phase--build .flow__arrow {
    top: -108px;
    height: 236px;
    left: 55%;
  }
}

/* ロゴ（MiSR）。サイズは現状維持 */
.flow__logo {
  display: block;
  width: auto;
  max-width: min(220px, 80%);
  height: auto;
}
/* 再春館システムのロゴはデザイン実測に合わせて大きく（Step0／構築・運用の2か所）。
   SVG の余白を含むボックス幅。表示される文字幅が design 実測（≒363px）になるよう調整 */
.flow__logo--saishunkan {
  max-width: min(394px, 90%);
}

/* ロゴ下のラベル（業務分析／要件整理 など） */
.flow__label {
  margin-top: 14px;
  font-size: var(--fs-midhead);
  font-weight: 700;
  color: var(--flow-color);
  line-height: 1.4;
}

/* タブ：リボン。aside-head 左上に置き、上の罫線へ重なるよう少し上に出す */
.flow__tab {
  position: absolute;
  top: -18px;
  left: 0;
  display: inline-block;
}

.flow__tab-inner {
  position: relative;
  z-index: 1;
  display: block;
  background-color: var(--flow-color);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  /* 下辺中央に三角の切り込み（notch）を入れたリボン形状。切り込み分の余白を下に確保 */
  padding: 11px 18px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}

/* 右上の折り返し：本体の裏から濃い三角がのぞく（左下が直角、左上頂点はリボン上辺に一致） */
.flow__tab::after {
  content: '';
  position: absolute;
  top: 0;
  right: -16px;
  z-index: 0;
  width: 16px;
  /* 底辺（下辺）をフェーズ上罫線のライン上に乗せる。
     折り返し top は据え置き（左上頂点＝リボン上辺）、高さだけ詰めて下端を罫線へ。
     tab top = 罫線 −13px ＋ 高さ13px ＝ 罫線ライン。 */
  height: 13px;
  background-color: var(--color-flow-fold);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.flow__lead {
  margin-bottom: 24px;
}

.flow__lead-sub {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--flow-color);
  line-height: 1.4;
}

.flow__lead-main {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.flow__steps {
  list-style: none;
}

/* ステップは「番号＋見出し」を 1 行目、本文を 2 行目（見出しの下）に積む */
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  row-gap: 0;            /* 見出し行〜本文行の余白。design 実測（番号丸下端〜本文≒7px）に合わせ詰める */
  column-gap: 24px;
}

.flow__step:not(:last-child) {
  /* 本文“可視グリフ下端”→次サークル“可視上端”＝design 実測 ≒19px。
     本文 line-height を 1 に詰め half-leading(≒6→2px)が減るので margin で補い 17px。 */
  margin-bottom: 17px;
}

/*
  ステップ間の下向き矢印（番号列）。本文 line-height を 1 に詰め half-leading を
  最小化したので、box 基準と可視基準の中央が一致する。box 基準で中央化：
  「本文 box 下端→▽上端」＝「▽下端→次サークル上端」。
  bottom = (margin + 11) / 2 = (17 + 11) / 2 = 14。
  → box 基準・可視基準とも上下ほぼ等しい（各 ≒3px box / ≒5px 可視）。
*/
.flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -4px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 11px solid var(--color-gray-light);
}

.flow__num {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--flow-color);
  color: #fff;
  font-size: var(--fs-subhead);
  font-weight: 700;
  display: grid;
  place-items: center;
  justify-self: center;
}

.flow__step-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--flow-color);
  line-height: 1.3;
}

.flow__step-body {
  grid-column: 2;   /* 本文は見出しの下（番号列ではなく見出し列）に置く */
  font-size: var(--fs-base);
  color: var(--color-text);
  /* 本文行ボックスの half-leading を最小化（▽ 上側の見かけの空白＝行ボックス余白を消す）。
     これで「行ボックス下端」≒「可視グリフ下端」となり、box 基準と可視基準の中央化が一致する。
     .flow__step-body のみに限定（見出し・リード・他セクションへは波及させない）。
     本文は PC/タブレット(〜768)とも1行なので行間 readability への影響なし。 */
  line-height: 1;
}

/* タブレット（768〜1237px）：ステップの列間を少し詰める */
@media (max-width: 1237px) {
  .flow__step {
    column-gap: 16px;
  }
}

@media (max-width: 996px) {
  .flow__lead-main{
    font-size: var(--fs-subhead-sp);
  }
  .flow__step-body {
    font-size: var(--fs-base-sp);
  }
}


/* スマートフォン（〜767px）：2 カラム図を隠し、1 枚画像に差し替える */
.flow__sp-image {
  display: none;
}
@media (max-width: 767px) {
  .flow__diagram {
    display: none;
  }
  .flow__sp-image {
    display: block;
    width: 100%;
    height: auto;
  }
  .flow__intro {
    font-size: var(--fs-base);
    margin-bottom: 24px;
    padding-left: 24px;   /* SP の sec-heading と左端を揃える */
  }
}

/* =====================================================
   Before/Afterと私たちの強み（section7）
   ===================================================== */
.ba {
  padding-bottom: var(--section-gap);
}

/*
  Before/After カードは 1 つのグリッドに交互（B1,A1,B2,A2…）で並ぶ。
  列方向に流れるので、2 列では Before=左列・After=右列に収まる。
*/
.ba__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

/* 列見出し（Before 現場の課題 / After 導入後の姿）。grid の 1 行目に並ぶ */
.ba__colhead {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  border-bottom: 2px solid;
}

/* Before / After のタブ（長方形） */
.ba__tab {
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  padding: 9px 18px;
}

/* スマートフォン（〜767px）：タブの余白を狭く */
@media (max-width: 767px) {
  .ba__colhead{
    gap: 5px;
  }
  .ba__tab {
    padding: 6px 6px;
    font-size: 12px;
  }
  .ba__colhead--before .ba__label,
  .ba__colhead--after .ba__label {
    font-size: 16px;
  }
}

/* タブの背景色と colhead の下線色をフェーズごとに揃える */
.ba__colhead--before .ba__tab { background-color: var(--color-gray-dark); }
.ba__colhead--after  .ba__tab { background-color: var(--color-issues-title); }
.ba__colhead--before {
  border-bottom-color: var(--color-gray-dark);
  width: calc(100% - 24px);  /* Before 列見出しの幅を 24px 短くする */
}
.ba__colhead--after  { border-bottom-color: var(--color-issues-title); }

.ba__label {
  font-size: var(--fs-subhead);
  font-weight: 700;
}

/* ラベルの文字色はタブの背景色とフェーズごとに揃える */
.ba__colhead--before .ba__label { color: var(--color-gray-dark); }
.ba__colhead--after  .ba__label { color: var(--color-issues-title); }

/* 各カード内の「Before」「After」ラベル。PC では非表示・スマホでのみ表示 */
.ba__cardlabel {
  display: none;
}

/* 各項目はカード。Before は右向き矢印、After は長方形 */
.ba__item {
  padding: 16px 24px;
}

/* Before カード：長方形＋右辺中央の三角矢印。下・右・矢印に2pxの枠線 */
.ba__item--before {
  position: relative;
  background: none;
}

/* 枠線レイヤー（外形） */
.ba__item--before::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-gray-light);  /* #b5b5b6 */
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    calc(100% - 22px) calc(50% - 16px),
    100% 50%,
    calc(100% - 22px) calc(50% + 16px),
    calc(100% - 22px) 100%,
    0 100%
  );
}

/* 塗りレイヤー（内形＝下・右・矢印を2px内側にして枠線を見せる。上・左は枠線なし） */
.ba__item--before::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-ba-before-bg);
  clip-path: polygon(
    0 0,
    calc(100% - 24px) 0,
    calc(100% - 24px) calc(50% - 15px),
    calc(100% - 2px) 50%,
    calc(100% - 24px) calc(50% + 15px),
    calc(100% - 24px) calc(100% - 2px),
    0 calc(100% - 2px)
  );
}

/* テキスト・ラベルを枠線・塗りレイヤーより前面に */
.ba__item--before .ba__cardlabel,
.ba__item--before .ba__item-title,
.ba__item--before .ba__item-body {
  position: relative;
  z-index: 1;
}

.ba__item--after {
  background-color: var(--color-ba-after-bg);
  border-right: 2px solid var(--color-issues-title);
  border-bottom: 2px solid var(--color-issues-title);
}

.ba__item-title {
  font-size: var(--fs-subhead);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
}

.ba__item-body {
  font-size: var(--fs-base);
  line-height: 1.5;
}

.ba__item--before .ba__item-title,
.ba__item--before .ba__item-body { color: var(--color-text); }

.ba__item--after .ba__item-title,
.ba__item--after .ba__item-body { color: var(--color-ba-after-text); }

/* 2カラム表示の間（768px〜＝縦並びになる前）は本文の右側に余白を足す */
@media (min-width: 768px) {
  .ba__item-body {
    padding-right: 16px;
  }
}

@media (max-width: 767px) {
  .ba__item-title,
  .ba__item--before .ba__item-title,
  .ba__item--after .ba__item-title {
    font-size: 16px;
  }
  
  .ba__item-body {
    font-size: 14px;
  }
}
.ba__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

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

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  .ba__cols {
    column-gap: 5px;
    row-gap: 15px;
  }
  .ba__images{
    margin-top: 20px;
    gap: 15px;
  }
  .ba__item {
    padding: 10px 36px 10px 16px;
  }
  .ba__item--after {
    padding: 10px 16px;
  }
}
/* =====================================================
   私たちが選ばれる理由（section8）
   ===================================================== */
.reasons {
  padding-bottom: var(--section-gap);
}

.reasons__box {
  background-color: var(--color-bg);
  border: 2px solid var(--color-issues-title);
  border-radius: 16px;
  padding: 22px 34px;
}

/* スマートフォン（〜767px）：ボックスの上下左右余白を 20px に */
@media (max-width: 767px) {
  .reasons__box {
    padding: 15px 10px;
  }
}

.reasons__item {
  padding-block: 12px;
}

.reasons__item-title {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.4;
  margin-bottom: 4px;
}

.reasons__item-body {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .reasons__item {
    padding: 0 10px 20px;
  }
}

/* =====================================================
   活用例 工程管理の見える化（section9）
   ===================================================== */
.usecase {
  padding-bottom: var(--section-gap);
}

.usecase__head {
  display: flex;
  align-items: center;
  gap: 18px;
  background-color: var(--color-heading);
  border-radius: 20px 20px 0 0;
  padding: 14px 22px;
  margin-bottom: 0;
}

.usecase__tag {
  flex-shrink: 0;
  background-color: #fff;
  color: var(--color-heading);
  font-size: var(--fs-subhead);
  font-weight: 700;
  line-height: 1;
  border-radius: 15px;
  padding: 8px 22px;
}

.usecase__title {
  /* 共通見出しと同じく画面幅に追従。上限 39px(--fs-heading)、下限 24px */
  font-size: clamp(20px, calc(2.2vw + 12px), var(--fs-heading));
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.usecase__body {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 36px;
  align-items: start;
  background-color: var(--color-usecase-bg);
  border: 2px solid var(--color-heading);
  border-radius: 0 0 20px 20px;
  border-top: none;
  padding: 26px 30px;
}

.usecase__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.usecase__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

/* 番号ボックス（白地・紺枠）＋ラベルピル（紺地）の2ボックス構成 */
.usecase__badge {
  display: inline-flex;
  align-items: stretch;
}

.usecase__num {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background-color: var(--color-heading);
  color: #fff;
  border-radius: 18px 0 0 18px;
  font-size: var(--fs-base);
  font-weight: 700;
  display: grid;
  place-items: center;
  width: 45px;
}

.usecase__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background-color: #fff;
  color: var(--color-heading);
  font-size: var(--fs-subhead);
  font-weight: 700;
  line-height: 1;
  border: 3px solid var(--color-heading);
  border-left: none;
  border-radius: 0 18px 18px 0;
  padding: 6px 16px;
}

.usecase__text {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.5;
}

.usecase__image img {
  width: 100%;
  height: auto;
}

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  .usecase__head {
    padding: 10px 10px;
    gap: 10px;
  }
  .usecase__tag {
    padding: 6px 10px;
    border-radius: 10px;
  }
  .usecase__body {
    grid-template-columns: 1fr;
    padding: 15px;
    gap: 20px;
  }
  .usecase__num {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background-color: var(--color-heading);
    color: #fff;
    border-radius: 12px 0 0 12px;
    font-size: var(--fs-base);
    font-weight: 700;
    display: grid;
    place-items: center;
    width: 35px;
  }
  
  .usecase__label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background-color: #fff;
    color: var(--color-heading);
    font-size: var(--fs-subhead);
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--color-heading);
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 6px 6px;
  }
  .usecase__steps{
    gap: 10px;
  }
  /* バッジ（番号・ラベル）とテキストを縦並びにする */
  .usecase__step {
    gap: 10px;
    align-items: start;
  }
  .usecase__text{
    text-align: justify;
    font-size: 14px;
  }
}

/* =====================================================
   CTA：まずは現場の整理から始めませんか？（section5 / 5・9・11で再利用）
   ===================================================== */
.cta {
  padding-bottom: var(--section-gap);
}

.cta__heading {
  background-color: var(--color-issues-title);
  color: #fff;
  /* 画面幅に追従。利用可能幅(100vw - 40px の左右padding - 60px のピル左右padding)を
     文字数基準で割って算出。上限 39px(--fs-heading)、下限 22px。 */
  font-size: clamp(22px, calc((100vw - 100px) / 18), var(--fs-heading));
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  border-radius: 40px;
  padding: 10px 30px;
  margin-bottom: 20px;
}

.cta__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* btn.svg のアスペクト比（viewBox 581.96 × 81.53）を維持 */
  aspect-ratio: 581.96 / 81.53;
  background-image: url('../img/btn.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 右・下の立体ベベル分だけ文字を左上に寄せて面の中央に乗せる */
  padding: 0 7px 9px 0;
  text-decoration: none;
}

.cta__button:hover {
  background-image: url('../img/btn_hover.svg');
}

.cta__button-label {
  color: #fff;
  /* ボタン背景SVGが横長(約7:1)で、幅が縮むと高さも縮む。
     固定 33px だと2カラムで高さが足りずはみ出すため、画面幅に追従させる。
     上限 33px（IL 40pt = 40 × 5/6）、下限 20px。 */
  font-size: clamp(24px, calc(5vw - 10px), 33px);
  font-weight: 700;
  line-height: 1.3;
}
.cta__note {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.5;
  margin-top: 20px;
}

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  .cta__buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* 見出しを折り返さず 1 行に保つ。下限を設けず幅に応じて縮小させる
     （文字数 17 を基準に /18 で割れば、nowrap でも常に収まる） */
  .cta__heading {
    white-space: nowrap;
    font-size: min(calc((100vw - 100px) / 18), var(--fs-heading));
  }
}

/* =====================================================
   FV（ファーストビュー）
   ===================================================== */
.fv {
  width: 100%;
  background-image: url('../img/img_section1_01.jpg');
  background-size: cover;
  background-position: center center;
}

.fv__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.fv__header {
  padding-top: 36px;
}

.fv__logo {
  /* 画面幅に連動。利用可能幅(100vw - 40px)の約37%、PC(約1242px〜)で上限 445px */
  width: clamp(160px, calc((100vw - 40px) * 0.37), 445px);
  height: auto;
}

.fv__logo:hover {
  opacity: 0.8;
}

.fv__body {
  margin-top: 100px;
  text-align: center;
}

.fv__title {
  /* nowrap のまま 1 行に収めるため、利用可能幅(100vw - 左右padding 40px)を
     タイトルの実効文字数(約16em)で割って算出。PC(1240px〜)で上限 75px に到達。 */
  font-size: clamp(18px, calc((100vw - 40px) / 16), 75px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  margin-bottom: 16px;
}

/* PC・タブレットでは 1 行表示（SP 用の改行は無効化） */
.fv__title-br {
  display: none;
}

/* スマートフォン（〜767px）：「製造業向け」で改行して 2 行表示 */
@media (max-width: 767px) {
  .fv{
    background-size: 300%;
  }
  .fv__inner {
    min-height: 280px;
  }
  .fv__header {
    padding-top: 20px;
  }
  .fv__body {
    margin-top: 30px;
  }
  .fv__title-br {
    display: inline;
  }
  .fv__title {
    /* 最長行が 2 行目「伴走型DX支援サービス」(実効 約10.5em)。
       その幅基準で算出し、少し余裕をもたせて 10.5 で割る */
    font-size: clamp(20px, calc((100vw - 40px) / 10.5), 60px);
  }
}

.fv__subtitle {
  /* タイトルと同様、画面幅に連動。PC(約1238px〜)で上限 35px(--fs-fv-sub)に到達 */
  font-size: clamp(16px, calc((100vw - 40px) / 34), var(--fs-fv-sub));
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* =====================================================
   フッター（section10）— MiSR ＋ 再春館システム ＝ 製造業DXを全力支援
   ===================================================== */
.footer {
  padding: 20px 0 50px;
  border-top: 1px solid var(--color-gray-dark);
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .footer__inner {
    padding: 0;
  }
}

.footer__formula {
  display: flex;
  /* ロゴ縦横比を保ったまま、狭くて一列に収まらない場合は折り返す
     （vw 基準サイズは viewport 比例だが可用幅は viewport−80px のため、
      スマホでは一列に収まらず、従来は項目が縮んでロゴが潰れていた） */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* 基準幅(1240px)で 22px。狭くなるほど vw で縮小 */
  gap: min(22px, 1vw);
  row-gap: 12px;
}

.footer__logo {
  width: auto;
  flex-shrink: 0;
  /* 高さ基準でサイズ指定するため、幅は縦横比なりに伸ばす（max-width:100% で潰さない） */
  max-width: none;
}

/* ロゴを包むアンカーもフレックス項目。縮ませない＝中の画像が潰れない */
.footer__formula > a {
  display: inline-flex;
  flex-shrink: 0;
}

.footer__logo {
  color: var(--color-heading);
  text-decoration: none;
}

.footer__logo:hover {
  opacity: 0.8;
}

/* ロゴは高さを vw で縮小（上限＝デザイン値）。幅は auto で比率維持 */
.footer__logo--misr {
  height: min(70px, 5.65vw);
}

.footer__logo--saishunkan {
  height: min(56px, 4.52vw);
}

.footer__op {
  font-size: min(44px, 3.55vw);
  font-weight: 700;
  color: var(--color-gray-dark);
  line-height: 1;
  flex-shrink: 0;
}

.footer__catch {
  font-size: min(40px, 3.23vw);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}



@media (max-width: 415px) {
  .footer__catch {
    font-size: 3vw;
  }
}