/* ===== DESIGN TOKENS ===== */
:root {
  /* ===== キーカラー ===== */
  --brand:        #35A5BD;  /* メインカラー・CTAボタン・アクセントライン・アイコン */
  --brand-dark:   #2a8a9f;  /* ホバー時 */
  --brand-deep:   #1B7A8C;  /* ダークターコイズ・AI_ENGINEセクション背景 */
  --brand-light:  #e8f6f9;  /* ライトターコイズ・カード背景・薄いハイライト */

  /* ===== バックグラウンド ===== */
  --bg-dark:      #1a2a35;  /* ダークネイビー */
  --bg-section:   #f5f7f8;  /* ライトグレー・セクション背景 */

  /* ===== テキスト ===== */
  --text-dark:    #1a1a1a;  /* 本文・見出し */
  --text-mid:     #555;     /* 説明文 */
  --text-light:   #888;     /* キャプション */

  /* ===== その他 ===== */
  --white:        #ffffff;
  --border:       #e0e0e0;  /* カード枠線・区切り線 */

  /* ===== 新配色ルール（プロジェクト共通） ===== */
  --color-main:      #35A5BD;  /* メイン: 見出し・ラベル・アイコン */
  --color-main-dark: #2A8494;  /* メイン濃: ボタン背景・CONTACT背景（白文字を載せる面） */
  --color-sub:       #135097;  /* サブ: 引き締め・ホバー */
  --color-blue:      #629DE2;  /* 補助ブルー */
  --color-bg:        #E6EDF3;  /* ベース背景 */
  --color-ink:       #343436;  /* 本文 */
  --color-text-sub:  #676E87;  /* サブテキスト */
  /* 旧アンバー（黄色）は廃止 */
  --font-main:    "Noto Sans JP", sans-serif;
  --wrap-max:     1290px;
  --wrap-pad-pc:  40px;
  --wrap-pad-tb:  24px;
  --wrap-pad-sp:  16px;

  /* ===== カテゴリカラー（AIエンジン6製品・ターコイズ族） ===== */
  --color-cat-1: #35A5BD;
  --color-cat-2: #1B7A8C;
  --color-cat-3: #42A0AD;
  --color-cat-4: #2C6E8A;
  --color-cat-5: #0B1F33;
}

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ===== WRAPPER ===== */
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  /* padding-inline: var(--wrap-pad-pc); */
}

/* ===== SECTION BASE ===== */
.sec {
  padding-block: 80px;
}
.sec__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.35;
  color: #0B1F33;
  margin-bottom: 48px;
}
.sec__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  background: var(--brand);
  margin: 12px auto 0;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .sec__title {
    font-size: 30px;
  }
}
.sec__title--center {
  text-align: center;
}
.sec__title--dot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.sec__title--dot::before,
.sec__title--dot::after {
  content: "・";
  color: var(--brand);
  font-size: 24px;
}
.sec__lead {
  font-size: 18px;
  color: #0B1F33;
  margin-bottom: 48px;
}
@media (max-width: 767px) {
  .sec__lead {
    font-size: 15px;
  }
}
.sec__lead--center {
  text-align: center;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.btn--primary {
  background: var(--brand-dark);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--brand-dark);
}
.btn--white {
  background: var(--white);
  color: var(--brand);
}
.btn--white:hover {
  opacity: 0.9;
}
.btn--lg {
  padding: 10px 24px;
  font-size: 16px;
  width: fit-content;
}
.btn__icon-svg {
  flex-shrink: 0;
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.header__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.header__tagline {
  font-size: 14px;
  color: var(--text-mid);
  letter-spacing: 0.02em;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header__nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 900;
}
.header__nav-list a {
  font-size: 14px;
  color: var(--text-dark);
  transition: color 0.2s;
}
.header__nav-list a:hover {
  color: var(--brand);
}
.header__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.header__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.header__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* SP nav overlay */
@media (max-width: 1024px) {
  .header__nav {
    display: none;
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px var(--wrap-pad-tb);
    border-top: 1px solid var(--border);
    overflow-y: auto;
  }
  .header__nav.is-open {
    display: flex;
  }
  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .header__nav-list li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .header__nav-list a {
    display: block;
    padding: 16px 0;
    font-size: 16px;
  }
  .header__cta {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }
  .header__hamburger {
    display: flex;
  }
}

/* ===== FV =====
   モバイルファースト。画像は <picture> に一本化し（altを保持）、
   スマホ〜タブレットは「画像の上にテキストを重ねる」、1024px以上で2カラムに切り替える。 */

/* --- ベース: 〜767px（スマートフォン） --- */
.fv {
  position: relative;
  overflow: hidden;
  max-width: 1920px;
  margin-inline: auto;
}
/* 画像は敷物として絶対配置 */
.fv__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 文字を読ませるための暗いオーバーレイ */
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.65) 100%);
}
.fv__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 520px;
  padding: 120px 20px 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fv__eyebrow {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 10px;
}
.fv__title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.fv__title--accent {
  font-size: 41px;
  /* SP/タブレットは暗い写真背景のため白（#005099はこの背景で1.71:1となり判読不可） */
  color: #ffffff;
}
/* 「自動操縦」のみターコイズ。暗背景では明るいトーンで視認性を確保 */
.fv__title--turquoise {
  color: #7FD6E8;
}
.fv__sub {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.9;
  color: #ffffff;
  margin-bottom: 18px;
}

/* --- md: 768px〜（タブレット）レイアウトは据え置き、文字のみ拡大 --- */
@media (min-width: 768px) {
  .fv__content {
    min-height: 560px;
    padding: 72px 40px;
  }
  .fv__title {
    font-size: 40px;
  }
  .fv__title--accent {
    font-size: 56px;
  }
  .fv__sub {
    font-size: 20px;
  }
}

/* --- lg: 1024px〜（PC）2カラムに切り替え --- */
@media (min-width: 1024px) {
  .fv__photo {
    left: auto;
    right: 0;
    width: 70%;
  }
  .fv__photo img {
    object-position: right center;
  }
  /* 暗いオーバーレイはPCでは不要 */
  .fv::before {
    display: none;
  }
  .fv__content {
    width: 52%;
    min-height: 600px;
    padding: 72px 30px 72px 90px;
    background: linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 60%,
      rgba(255, 255, 255, 0.92) 75%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .fv__title {
    font-size: 48px;
    color: #233B6C;
  }
  .fv__title--accent {
    font-size: 58px;
    color: #233B6C;
  }
  /* 白背景の上なので、コントラストを確保できる濃いめのターコイズを使用 */
  .fv__title--turquoise {
    color: #2A8494;
  }
  .fv__sub {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-dark);
  }
}

/* br SP制御 */
.br--sp {
  display: none;
}
@media (max-width: 767px) {
  .br--sp {
    display: block;
  }
}

/* ===== STATS ===== */
.stats {
  background: #f5f7f8;
  padding: 40px 0;
}
/* ベース = SP: 1カラム。項目間は罫線で区切る */
.stats__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.stats__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.stats__item + .stats__item {
  border-top: 1px solid #000;
  padding-top: 20px;
}
.stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #005099;
  flex-shrink: 0;
}
.stats__icon svg {
  width: 100%;
  height: 100%;
}
.stats__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.stats__label {
  font-size: 16px;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}
.stats__num {
  margin: 0;
  line-height: 1.3;
  text-align: left;
}
/* 4番目「リアルタイム」はfont-sizeが他と異なり行の高さがズレるため、marginで補正 */
.stats__item:last-child .stats__num {
  margin-top: -8px;
}
.stats__num-main {
  font-size: 36px;
  font-weight: 900;
  color: #005099;
  white-space: nowrap;
}
.stats__num-main--sm {
  font-size: 26px;
}
.stats__num-sub {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
}
.stats__num-note {
  font-size: 14px;
  font-weight: 400;
}
.stats__prefix {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.stats__unit {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.stats__note {
  font-size: 14px;
  color: #888;
  text-align: center;
  padding: 16px 0 0;
}
/* --- md: 768px〜 2カラム。区切り罫線はやめて余白で分ける --- */
@media (min-width: 768px) {
  .stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    max-width: 800px;
    margin-inline: auto;
  }
  .stats__item {
    gap: 10px;
    justify-content: left;
  }
  .stats__item + .stats__item {
    border-top: none;
    padding-top: 4px;
  }
  .stats__item:last-child .stats__num {
    margin-top: -5px;
  }
}

/* --- lg: 1025px〜 4カラム横並び。縦罫線で区切る
       （1024pxは従来どおり2カラムを維持するため 1025 を境界にしている） --- */
@media (min-width: 1280px) {
  .stats__inner {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: none;
  }
  .stats__item {
    flex: 1;
    gap: 16px;
    padding: 4px 30px;
    border-right: 1px solid #e0e0e0;
  }
  .stats__item:last-child {
    border-right: none;
  }
  .stats__num-main {
    font-size: 56px;
  }
  .stats__num-main--sm {
    font-size: 22px;
  }
  .stats__num-sub {
    font-size: 16px;
  }
  .stats__item:last-child .stats__num {
    margin-top: 18px;
  }
}

/* ===== INDUSTRIES (usecase) ===== */
.usecase-section {
  padding: 64px 20px;
  background: #ffffff;
}
.usecase-section__heading {
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.usecase-section__accent {
  width: 32px;
  height: 3px;
  background: var(--brand);
  margin: 0 auto 32px;
  border-radius: 2px;
}
.usecase-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}
.usecase-card {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.usecase-card--fallback {
  background: #7A9FA8;
}
.usecase-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usecase-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.00) 100%
  );
}
.usecase-card__label {
  position: relative;
  z-index: 2;
  padding: 0 16px 14px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.03em;
}
@media (min-width: 768px) {
  .usecase-grid {
    flex-direction: row;
    gap: 8px;
  }
  .usecase-card {
    flex: 1;
    height: 220px;
    border-radius: 12px;
  }
  .usecase-card__overlay {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 30%,
      rgba(0,0,0,0.60) 100%
    );
  }
  .usecase-card__label {
    padding: 0 12px 14px;
    font-size: 14px;
    width: 100%;
  }
}
@media (min-width: 1025px) {
  .usecase-section {
    padding: 80px 40px;
  }
  .usecase-section__heading {
    font-size: 28px;
  }
  .usecase-card {
    height: 260px;
  }
  .usecase-card__label {
    font-size: 14px;
    padding: 0 14px 16px;
  }
}

/* ===== PRODUCTS ===== */
.products {
  background: rgb(230, 237, 243);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.products__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
/* カード全体をリンクに */
.products__card {
  display: flex;
  flex-direction: column;
  border: 1px solid #6E7D8C;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  background: var(--white);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(11, 31, 51, 0.05);
}
.products__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* 番号と製品名を横並び */
.products__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 0;
  margin-bottom: 12px;
}

/* 番号：丸囲み・メインカラー背景・白文字 */
.products__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 製品名：大きめ・太字 */
.products__name {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
}
.products__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ffffff;
}
.products__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
/* ホバー時に画像ズーム */
.products__card:hover .products__img {
  transform: scale(1.05);
}
.products__img-placeholder {
  width: 100%;
  height: 100%;
  background: #dde6ea;
  display: none;
  align-items: center;
  justify-content: center;
  color: #8aacb8;
  font-size: 14px;
}
/* 画像読み込み失敗時（main.jsが is-noimg を付与） */
.products__img-wrap.is-noimg .products__img {
  display: none;
}
.products__img-wrap.is-noimg .products__img-placeholder {
  display: flex;
}
/* 説明テキスト：小さめ・グレー・読みやすい行間 */
.products__text {
  padding: 0 16px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.7;
  text-align: center;
  color: #005099;
}

.products__divider {
  width: 50%;
  margin: 10px auto;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.products__point {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  margin-bottom: 10px;
}

.products__point-main {
  font-size: 15px;
  font-weight: 700;
  color: #1E6B7A;
}

.products__point-sub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

/* 詳しく見るボタン：楕円・メインカラー背景・右に矢印 */
.products__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 16px 16px;
  padding: 12px 48px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s;
}
/* 矢印アイコンの白丸 */
.products__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
}
/* 矢印の線（上側 "\"）：::before で1本 */
.products__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--brand);
  transform-origin: right center;
  transform: rotate(-45deg);
}
/* 矢印の線（下側 "/"）：::after で1本 */
.products__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--brand);
  transform-origin: right center;
  transform: rotate(45deg);
}
.products__card:hover .products__link {
  background: var(--brand-dark);
}
.products__link:hover {
  background: #333333;
}

/* ===== CTA ===== */
/* ===== FOOTER ===== */
.footer {
  background: #333333;
  padding: 32px 0 0;
}

/* PC: 2カラム */
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 6px;
  background: #ffffff;
  border-radius: 6px;
  padding: 8px 14px;
}

.footer__logo-img {
  height: 26px;
  width: auto;
  display: block;
}

.footer__tagline {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 10px;
}

.footer__info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.footer__company,
.footer__contact {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.7;
  margin: 0;
}

.footer__company a,
.footer__contact a {
  color: #ffffff;
  text-decoration: none;
}

.footer__nav-head {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
}

.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  gap: 8px 24px;
}

.footer__nav-list a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  color: #ffffff;
}

.footer__nav-list a:hover {
  opacity: 0.7;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.footer__copy {
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}

.footer__legal {
  display: flex;
  gap: 16px;
}

.footer__legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  color: #ffffff;
}

.footer__legal a:hover {
  opacity: 0.7;
}

/* SP: 縦積み */
@media (max-width: 767px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer__brand {
    padding-bottom: 24px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 24px;
  }

  .footer__nav {
    padding-bottom: 24px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 24px;
  }

  .footer__nav-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ===== RESPONSIVE ===== */

/* Tablet (768〜1199px) */
@media (max-width: 1024px) {
  .wrap {
    padding-inline: var(--wrap-pad-tb);
  }
  .sec {
    padding-block: 60px;
  }
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SP (〜767px) */
@media (max-width: 767px) {
  .wrap {
    padding-inline: var(--wrap-pad-sp);
  }
  .sec {
    padding-block: 48px;
  }
  .sec__title {
    font-size: 30px;
    margin-bottom: 32px;
  }
  .btn--lg {
    display: flex;
    justify-content: center;
    max-width: 350px;
  }
  .products__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAIN (お悩みセクション) ===== */
.pain {
  background: #F4F4F4;
  padding-block: 64px;
}
.pain__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.pain__card {
  background: var(--white);
  border: 1px solid #ddd;
  border-left: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pain__card:first-child {
  border-left: 1px solid #ddd;
}
.pain__card-label-area {
  padding: 14px;
  display: flex;
  justify-content: center;
}
.pain__card-label {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 10px;
}
.card-image-placeholder {
  height: 160px;
  background: var(--white);
  width: 100%;
  object-fit: contain;
  display: block;
}
.pain__card-divider {
  height: 1px;
  background: #efefef;
  margin: 0 14px;
}
.pain__card-main {
  padding: 14px;
}
.pain__card-text {
  font-size: 15px;
  font-weight: 700;
  color: #222222;
  text-align: center;
  line-height: 1.7;
}
.pain__card-sub {
  padding: 12px 14px 16px;
  margin-top: auto;
}
.pain__card-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  display: block;
  font-size: 14px;
  color: var(--brand);
  text-decoration: none;
  text-align: center;
}
.pain__card-link:hover {
  text-decoration: underline;
}
@media (max-width: 1024px) {
  .pain__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pain__card:nth-child(3n+1) {
    border-left: 1px solid #ddd;
  }
  .pain__card:nth-child(n+4) {
    border-top: none;
  }
}
@media (max-width: 767px) {
  .pain__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pain__card:nth-child(3n+1) {
    border-left: none;
  }
  .pain__card:nth-child(2n+1) {
    border-left: 1px solid #ddd;
  }
  .pain__card:nth-child(n+3) {
    border-top: none;
  }
}

/* ===== PROBLEM GUIDE (こんな現場課題、ありませんか？) ===== */
.p-problem-guide {
  position: relative;
  background: #E6EDF3;
  overflow: hidden;
}
.p-problem-guide__container {
  max-width: 1440px;
  margin-inline: auto;
  padding: 64px 20px;
}
/* 四隅の薄い水色の有機的装飾（疑似要素+radial-gradientで描画） */
/* .p-problem-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 300px at 0% 0%, #EAF6F9 0%, rgba(234, 246, 249, 0) 70%),
    radial-gradient(340px 380px at 100% 0%, #EAF6F9 0%, rgba(234, 246, 249, 0) 70%),
    radial-gradient(360px 320px at 0% 100%, #EAF6F9 0%, rgba(234, 246, 249, 0) 70%),
    radial-gradient(400px 340px at 100% 100%, #EAF6F9 0%, rgba(234, 246, 249, 0) 70%);
} */
.p-problem-guide__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
}

/* --- 見出し・サブテキスト --- */
.p-problem-guide__title {
  font-size: 30px;
  font-weight: 800;
  color: #0B1F33;
  text-align: center;
  line-height: 1.35;
}
.p-problem-guide__title span {
  display: inline-block; /* 改行位置を「、」の直後に固定し不自然な折返しを防ぐ */
}
.p-problem-guide__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  background: #35A5BD;
  border-radius: 3px;
  margin: 20px auto 0;
}
.p-problem-guide__lead {
  margin-top: 20px;
  /* 40〜50代の閲覧者を想定し16pxを下限とする */
  font-size: 16px;
  color: #0B1F33;
  text-align: center;
}

/* --- カルーセル本体（横並びはSwiperが担当。gridは使わない） --- */
.p-problem-guide__swiper {
  margin-top: 40px;
  /* box-shadowの切れ防止に上下左右4px、ページネーション用に下48pxを確保 */
  padding: 4px 4px 48px;
}
.p-problem-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 全カードの高さを揃える */
.p-problem-guide__swiper .swiper-wrapper {
  align-items: stretch;
}
.p-problem-guide__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Swiperの .swiper-slide { height: 100% } は親が高さauto のため解決せず、
     結果カードの高さが不揃いになる。height:auto に戻して stretch を効かせる
     （導入事例 .cases__card と同じ手法） */
  height: auto;
  align-self: stretch;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #6E7D8C;
  padding: 28px 24px 24px;
  box-shadow: 0 4px 20px rgba(11, 31, 51, 0.06);
}
.p-problem-guide__illust {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  transition: transform 0.25s ease;
}
/* イラスト背面の薄い水色の有機的背景 */
/* .p-problem-guide__illust::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background: #EAF6F9;
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
} */
.p-problem-guide__illust img {
  position: relative;
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.p-problem-guide__item:hover .p-problem-guide__illust {
  transform: translateY(-4px);
}
.p-problem-guide__problem {
  margin-top: 18px;
  font-size: 21px;
  font-weight: 800;
  color: #0B1F33;
  text-align: center;
  line-height: 1.5;
}
.p-problem-guide__arrow {
  display: block;
  /* margin-top: auto で矢印＋製品ボタンをカード下端に寄せ、
     課題テキストが2行でも3行でもボタンの高さを揃える */
  margin: auto auto 8px;
  padding-top: 10px;
  line-height: 0;
}

/* --- 製品への導線（ボタン+詳しく見る全体がリンク） --- */
.p-problem-guide__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.p-problem-guide__product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 170px;
  padding: 0 24px;
  border: 2px solid #35A5BD;
  border-radius: 999px;
  background: #35A5BD;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.p-problem-guide__more {
  font-size: 16px;
  font-weight: 700;
  color: #2A8494;
  white-space: nowrap;
}
.p-problem-guide__link:hover .p-problem-guide__product,
.p-problem-guide__link:focus-visible .p-problem-guide__product {
  background: #2A8494;
  border-color: #2A8494;
  color: #FFFFFF;
}
.p-problem-guide__link:focus-visible {
  outline: 3px solid #35A5BD;
  outline-offset: 4px;
  border-radius: 999px;
}

/* --- 下部テキスト --- */
.p-problem-guide__bottom {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 2px dashed #BFDEE6;
  font-size: 36px;
  font-weight: 700;
  color: #0B1F33;
  text-align: center;
}
/* 蛍光マーカー風の強調（文字の下半分にアンバーを敷く・サイト内この1箇所のみ） */
.p-problem-guide__marker {
  background: linear-gradient(transparent 55%, rgba(255, 200, 61, 0.55) 55%);
  padding: 0 0.15em;
}
.p-problem-guide__bottom-arrow {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  line-height: 0;
}

/* --- ナビゲーション・ページネーション（導入事例 .cases-swiper と同一の見た目） --- */
.p-problem-guide__swiper .swiper-button-prev,
.p-problem-guide__swiper .swiper-button-next {
  color: var(--brand);
  /* 見た目は36pxのまま、タップ領域を44px以上確保する */
  width: 44px;
  height: 44px;
}
.p-problem-guide__swiper .swiper-button-prev::after,
.p-problem-guide__swiper .swiper-button-next::after {
  font-size: 20px;
  font-weight: 700;
}
.p-problem-guide__swiper .swiper-pagination-bullet-active {
  background: var(--brand);
}

/* --- md: 768px〜 --- */
@media (min-width: 768px) {
  .p-problem-guide__container {
    padding: 80px 32px;
  }
  .p-problem-guide__title {
    font-size: 38px;
  }
  .p-problem-guide__lead {
    font-size: 18px;
  }
}

/* --- lg: 1024px〜 Swiperを停止し3列×2行のグリッドに戻す --- */
@media (min-width: 1024px) {
  .p-problem-guide__container {
    padding: 100px 40px;
  }
  .p-problem-guide__title {
    font-size: 40px;
  }
  /* = .swiper-wrapper。JS側の enabled:false と対で、残留インラインスタイルを打ち消す
     （!important はSwiperのインライン指定を上書きするためで、この節以外では使わない） */
  .p-problem-guide__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    row-gap: 40px;
    transform: none !important;
  }
  /* = .swiper-slide */
  .p-problem-guide__item {
    width: auto !important;
    height: 100%;
    margin-right: 0 !important;
  }
  /* 6枚が同時に見えるためPCでは操作要素を出さない */
  .p-problem-guide__prev,
  .p-problem-guide__next,
  .p-problem-guide__pagination {
    display: none;
  }
  /* ページネーション用に確保していた下余白も不要 */
  .p-problem-guide__swiper {
    padding-bottom: 4px;
  }
}

/* --- アクセシビリティ: 動きの抑制設定を尊重 --- */
@media (prefers-reduced-motion: reduce) {
  .p-problem-guide__illust,
  .p-problem-guide__product {
    transition: none;
  }
  .p-problem-guide__item:hover .p-problem-guide__illust {
    transform: none;
  }
}

/* ===== AI_ENGINE =====
   モバイルファースト。円環の形は全幅で維持。
   SP        : ノード = アイコン＋製品名（説明文なし）
   768px〜   : ノード = 白カード（アイコン＋製品名＋説明文）を1カラムで全幅表示
   1280px〜  : 左にlead / 右に円環図の2カラム（カードを収めるには円環図側に704px以上必要） */
.ai-engine {
  background: #303B96;
  padding: 64px 16px;
}
.ai-engine__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
}
.ai-engine__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.35;
  color: #ffffff;
  margin: 0 0 24px;
}
.ai-engine__lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  color: #ffffff;
  margin: 0 0 40px;
}

/* --- 円環図 --- */
.ai-engine__wheel {
  position: relative;
  width: 100%;
  max-width: 343px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.ai-engine__wheel-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ai-engine__wheel-ring--md {
  display: none;
}
/* 中央円（SPはアイコンのみ） */
.ai-engine__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ai-engine__hub-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: #1E6B7A;
}
.ai-engine__hub-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ai-engine__hub-text {
  display: none;
}
/* ノード（中心を円周上に合わせる。回転は使わない） */
.ai-engine__node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ai-engine__node-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #1E6B7A;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-engine__node-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.ai-engine__node-name {
  margin: 0;
  /* 2行分を確保して6ノードの高さを揃え、接点ドットの相対位置を統一する */
  min-height: 2.8em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
}
.ai-engine__node-desc {
  display: none;
}
/* 6方向の座標（半径112 / 中心171.5 を % 換算・全ブレークポイント共通）
   左上を起点に時計回り: 勤務シフト→タスク分担→募集管理→人時かんばん→タイムスタンプ→シェアボード */
.ai-engine__node--1 { left: 33.67%; top: 27.72%; } /* 左上   勤務シフト */
.ai-engine__node--2 { left: 66.33%; top: 27.72%; } /* 右上   タスク分担 */
.ai-engine__node--3 { left: 82.65%; top: 57%; }    /* 右     募集管理 */
.ai-engine__node--4 { left: 66.33%; top: 84.28%; } /* 右下   人時かんばん */
.ai-engine__node--5 { left: 33.67%; top: 84.28%; } /* 左下   タイムスタンプ */
.ai-engine__node--6 { left: 17.35%; top: 56%; }    /* 左     シェアボード */

/* --- md: 768px以上 --- */
@media (min-width: 768px) {
.ai-engine__node--1 { left: 25.67%; top: 25.72%; } /* 左上   勤務シフト */
.ai-engine__node--2 { left: 75.33%; top: 25.72%; } /* 右上   タスク分担 */
.ai-engine__node--3 { left: 83.65%; top: 50%; }    /* 右     募集管理 */
.ai-engine__node--4 { left:74.33%; top: 75.28%; } /* 右下   人時かんばん */
.ai-engine__node--5 { left: 25.67%; top: 75.28%; } /* 左下   タイムスタンプ */
.ai-engine__node--6 { left: 16.35%; top: 50%; }    /* 左     シェアボード */
}

/* --- lg: 1024px以上 --- */
@media (min-width: 1024px) {
.ai-engine__node--1 { left: 23.67%; top: 21.72%; } /* 左上   勤務シフト */
.ai-engine__node--2 { left: 76.33%; top: 21.72%; } /* 右上   タスク分担 */
.ai-engine__node--3 { left: 88.65%; top: 50%; }    /* 右     募集管理 */
.ai-engine__node--4 { left: 76.33%; top: 76.28%; } /* 右下   人時かんばん */
.ai-engine__node--5 { left: 23.67%; top: 76.28%; } /* 左下   タイムスタンプ */
.ai-engine__node--6 { left: 11.35%; top: 50%; }    /* 左     シェアボード */
}

/* --- キャプション（SPのみ。TB以上は中央円内に表示する） --- */
.ai-engine__caption {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

/* --- 説明テーブル（SP専用。TB以上はカード内に説明文を表示するため非表示） --- */
.ai-engine__table {
  width: 100%;
  margin-top: 40px;
}
.ai-engine__table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ai-engine__table,
.ai-engine__table tbody,
.ai-engine__table tr,
.ai-engine__table th,
.ai-engine__table td {
  display: block;
  width: 100%;
}
.ai-engine__table tr {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ai-engine__table tr:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.ai-engine__table th {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-align: left;
}
.ai-engine__table td {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
}

/* --- md: 768px〜 ノードを「アイコン＋製品名＋説明文」のカードに --- */
@media (min-width: 768px) {
  .ai-engine {
    padding: 80px 24px;
  }
  .ai-engine__title {
    font-size: 36px;
    text-align: center;
  }

   .ai-engine__lead {
    text-align: center;
    margin: 0;
   }

  .ai-engine__wheel {
    max-width: 830px;
    /* 768px付近では説明文が3行になりカードが高くなるため、縦に余裕を持たせる
       （620だと上段カードが中央円に5px重なる） */
    aspect-ratio: 830 / 700;
    margin-top: 48px;
  }
  .ai-engine__wheel-ring--sp { display: none; }
  .ai-engine__wheel-ring--md { display: block; }

  /* 中央円: アイコン＋2行テキスト。
     固定190pxだと768pxで円環図が705pxまで縮んだ際にカードと接触するため、
     コンテナ比(23%)にして図全体と一緒に縮むようにする */
  .ai-engine__hub {
    width: 23%;
    height: auto;
    aspect-ratio: 1 / 1;
    gap: 10px;
  }
  .ai-engine__hub-icon {
    width: 40px;
    height: 40px;
  }
  .ai-engine__hub-text {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #1E6B7A;
    text-align: center;
  }
  /* キャプションは中央円に集約、tableはカード内に説明文が出るため非表示 */
  .ai-engine__caption { display: none; }
  .ai-engine__table { display: none; }

  /* ノード = 白カード。幅をコンテナ比(30%)にすることで、
     どの画面幅でもカード同士が重ならない（上段2枚の間隔 = 2.66% of W で常に正） */
  .ai-engine__node {
    width: 38%;
    min-height: 102px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    text-align: left;
        justify-content: center;
  }
  /* カード内は白丸を外し、アイコン単体で表示 */
  .ai-engine__node-icon {
    width: 40px;
    height: 40px;
    background: none;
    border-radius: 0;
  }
  .ai-engine__node-icon svg {
    width: 40px;
    height: 40px;
  }
  .ai-engine__node-body {
    min-width: 0;
  }
  .ai-engine__node-name {
    min-height: 0;
    margin-bottom: 2px;
    font-size: 18px;
    color: #1E6B7A;
    text-align: left;
  }
  /* 製品名の改行はSPのみ */
  .ai-engine__node-br { display: none; }
  .ai-engine__node-desc {
    display: block;
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.6;
    color: #5A6570;
    text-align: left;
  }
}

/* --- 1280px〜: 左lead / 右 円環図の2カラム（画像のレイアウト）---
   円環図カラムに704px以上必要なため、この幅から2カラムにする */
@media (min-width: 1280px) {
  .ai-engine {
    padding: 0 48px;
  }
  .ai-engine__inner {
    display: grid;
    grid-template-columns: 1fr 1.85fr;
    grid-template-areas:
      "title  wheel"
      "lead   wheel";
    align-items: center;
    column-gap: 40px;
  }
  .ai-engine__title {
    grid-area: title;
    font-size: 40px;
    align-self: end;
  }
  .ai-engine__lead {
    grid-area: lead;
    font-size: 18px;
    margin-bottom: 0;
    align-self: start;
  }
  .ai-engine__wheel {
    grid-area: wheel;
    margin-top: 0;
  }

    /* 製品名の改行はSPのみ */
  .ai-engine__node-br { display: none; }
  .ai-engine__node-desc {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.6;
    color: #5A6570;
    text-align: left;
  }
}

/* ===== CASES (導入事例) ===== */
.cases {
  background: #ffffff;
  padding: 72px 40px;
}
.cases-swiper {
  padding: 4px 4px 48px;
}
.cases__card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: auto; /* swiper-slideの等高化 */
  background: #ffffff;
  box-sizing: border-box;
}
.cases__card-photo {
  height: 180px;
  width: 100%;
  object-fit: contain;
  background: #f8fafb;
  display: block;
}
/* ナビゲーション・ページネーション */
.cases-swiper .swiper-button-prev,
.cases-swiper .swiper-button-next {
  color: var(--brand);
  width: 36px;
  height: 36px;
}
.cases-swiper .swiper-button-prev::after,
.cases-swiper .swiper-button-next::after {
  font-size: 20px;
  font-weight: 700;
}
.cases-swiper .swiper-pagination-bullet-active {
  background: var(--brand);
}
/* ロゴマーキー（右→左 無限ループ） */
.cases__marquee {
  overflow: hidden;
  margin-top: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cases__marquee-track {
  display: flex;
  width: max-content;
  animation: cases-marquee 30s linear infinite;
}
.cases__marquee-group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.cases__marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b6c2c9;
}
.cases__marquee-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* 実ロゴ画像に差し替えた際のスタイル */
.cases__marquee-item img {
  height: 32px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
}
@keyframes cases-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cases__marquee-track {
    animation: none;
  }
}
.cases__card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cases__card-logo {
  height: 36px;
  background: #f4f4f4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #aaa;
}
.cases__card-company {
  font-size: 16px;
  color: #888;
  font-weight: 500;
}
.cases__card-divider {
  height: 1px;
  background: #f0f0f0;
}
.cases__card-catch {
  font-size: 22px;
  color: #222;
  font-weight: 500;
  line-height: 1.7;
}
@media (max-width: 1024px) {
  .cases {
    padding: 64px 24px;
  }
}
@media (max-width: 767px) {
  .cases {
    padding: 48px 16px;
  }
}

/* ===== INDUSTRIES (redesign) ===== */
.industries {
  background: #f5f7f8;
}
.industries__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 0;
}
/* 白カード: イラスト（左上にアイコンバッジ）＋ 下に業態名 */
.industries__card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #7E8C99;
  box-shadow: 0 4px 14px rgba(11, 31, 51, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.industries__card:hover {
  box-shadow: 0 6px 20px rgba(53, 165, 189, 0.12);
  transform: translateY(-3px);
  border-color: rgba(53, 165, 189, 0.36);
}
.industries__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
}
.industries__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイコンバッジ: イラスト左上に重ねて配置 */
.industries__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-main);
  box-shadow: 0 2px 8px rgba(11, 31, 51, 0.14);
}
.industries__label {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 12px 8px 14px;
}
@media (max-width: 1000px) {
  .industries__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .industries__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .industries__badge {
    width: 35px;
    height: 35px;
  }
  .industries__badge svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== EASY (新セクション) ===== */
/* ===== EASY (redesign: no card) ===== */
.easy {
  background: var(--white);
  padding-block: 100px;
}

/* ヘッド */
.easy__head {
  text-align: center;
  margin-bottom: 72px;
}
.easy__title {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.easy__title-line {
  width: 36px;
  height: 3px;
  background: var(--brand);
  margin: 0 auto 20px;
  border-radius: 2px;
}
.easy__lead {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

/* 3カラム */
.easy__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
  margin-bottom: 80px;
}
.easy__col {
  text-align: center;
}

/* プレースホルダー */
.easy__illust {
  width: 100%;
  max-width: 320px;
  height: 220px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.easy__illust-label {
  font-size: 14px;
  color: #B0C4CF;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: center;
}
.easy__illust-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ロールタイトル */
.easy__role {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  display: block;
}
.easy__role-wrap {
  display: block;
  margin-bottom: 20px;
}
.easy__role-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  margin: 12px auto 0;
}

/* チェックリスト */
.easy__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.easy__list li {
  font-size: 16px;
  color: var(--text-mid);
  padding-left: 22px;
  position: relative;
  line-height: 1.7;
}
.easy__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

/* 下部コピー */
.easy__footer {
  text-align: center;
  padding-top: 72px;
  border-top: 1px solid var(--border);
}
.easy__footer-sub {
  font-size: 15px;
  color: var(--text-mid);
  margin: 0 0 14px;
}
.easy__footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 28px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: -0.01em;
}
.easy__footer-deco {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  flex-shrink: 0;
}
.easy__footer-accent {
  color: var(--brand);
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .easy__cols {
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .easy {
    padding-block: 64px;
  }
  .easy__title {
    font-size: 26px;
  }
  .easy__head {
    margin-bottom: 48px;
  }
  .easy__cols {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 56px;
  }
  .easy__footer-main {
    font-size: 20px;
    gap: 16px;
  }
  .easy__footer-deco {
    width: 32px;
  }
}

/* ===== CTA (redesign) ===== */
.cta {
  background: #303B96;
  padding-block: 56px;
  text-align: center;

}
.cta__inner {
  display: inline-flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* .cta__photo の中身は .cta--banner 側で background-image として指定する
   （SPで画像を読み込ませないため、指定は md 以上のメディアクエリ内のみ） */

/* CTAのアイコン。HTML側で ai-engine__voice-icon クラスを流用しているため、
   AIエンジン節の整理でサイズ指定が失われないようここで担保する */
.cta__icon svg {
  flex-shrink: 0;
  display: block;
  /* forum は person より字面が小さく見えるため 40 → 48px に調整 */
  width: 48px;
  height: 48px;
  color: #7FD6E8;
}
.cta__content-text {
  color: var(--white);
}
.cta__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}
.cta__text {
  font-size: 15px;
  opacity: 0.85;
  margin: 0;
  line-height: 1.7;
}
.cta__btn-group {
  display: flex;
  justify-content: center;
}
.cta__btn {
  background: var(--brand);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.cta__btn:hover {
  background: var(--color-sub);
  color: var(--white);
}

/* --- 中間CTA（カード型）。下部CTAと .cta クラスを共有しているため
       このセクション専用の配色は .cta--card にスコープする --- */
.cta--card {
  /* 明るいカードを載せる下地。前後セクション（products #E6EDF3 / cases #ffffff）に合わせて白 */
  background: #f5f7f8;
}
.cta--card .cta__inner {
  background: #EAF1F8;
  border-radius: 16px;
  padding: 32px 40px;
}
.cta--card .cta__content {
  color: #0B1F33;
}
.cta--card .cta__title {
  /* 他セクションの見出しと同じネイビー（純黒は使わない） */
  color: #0B1F33;
}
.cta--card .cta__text {
  /* 見出しから一段後退。opacity ではなく実色で指定しコントラストを確定させる */
  color: #4A5A6A;
  opacity: 1;
}
.cta--card .cta__btn {
  background: var(--brand);
  color: var(--white);
}
.cta--card .cta__btn:hover {
  /* 通常時 #2A8494 より一段暗く */
  background: #226C7A;
  color: var(--white);
}
/* ===== 下部CTA（.cta--banner）=====
   モバイルファースト。写真は md 以上のみ background-image で表示し、
   SPでは指定自体を書かないことで画像リクエストを発生させない。
   SP      : 写真なし・テキストとボタンの縦積み
   768px〜 : 写真(220px)を左、右にテキストとボタンを縦積みの2カラム
   1024px〜: 写真(300px) / テキスト / ボタン の3カラム横並び */
.cta--banner {
  padding: 48px 20px;
}
.cta--banner .cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "button";
  gap: 0;
  text-align: center;
  /* 共通ユーティリティ .wrap が 1024px以下で padding-inline を持つため打ち消す。
     余白はセクション側の padding で管理し、写真を帯の左端に密着させる */
  padding-inline: 0;
}
.cta--banner .cta__photo {
  grid-area: photo;
  display: none;
}
.cta--banner .cta__content-text {
  grid-area: content;
}
.cta--banner .cta__title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 0;
}
.cta--banner .cta__sub-title {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
.cta--banner .cta__btn-group {
  grid-area: button;
  margin-top: 28px;
}
.cta--banner .cta__btn {
  width: 100%;
  justify-content: center;
  /* ターコイズ背景＋白文字は 2.90:1 で基準未達のため、白背景＋紺文字に変更（9.58:1）。
     メールアイコンは currentColor なので文字色に追従する */
  background: #FFFFFF;
  color: #2D3C95;
  font-size: 16px;
  font-weight: 700;
}
.cta--banner .cta__btn:hover {
  background: #EAF1F8;
  color: #2D3C95;
}

/* --- md: 768px〜 写真を表示して2カラム --- */
@media (min-width: 768px) {
  .cta--banner .cta__inner {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "photo content"
      "photo button";
    align-items: center;
    text-align: left;
  }
  .cta--banner .cta__photo {
    display: block;
    min-height: 220px;
    height: 100%;
    background-image: url("../images/cta-photo.webp");
    background-size: cover;
    background-position: center;
  }
  .cta--banner .cta__content-text {
    padding: 32px 32px 0;
  }
  .cta--banner .cta__title {
    font-size: 24px;
  }
  .cta--banner .cta__btn-group {
    margin-top: 0;
    padding: 20px 32px 32px;
    justify-content: flex-start;
  }
  .cta--banner .cta__btn {
    width: auto;
  }
}

/* --- lg: 1024px〜 写真 / テキスト / ボタン の3カラム --- */
@media (min-width: 1024px) {
  .cta--banner .cta__inner {
    grid-template-columns: 300px 1fr auto;
    grid-template-areas: "photo content button";
  }
  .cta--banner .cta__photo {
    min-height: 180px;
  }
  .cta--banner .cta__content-text {
    padding: 32px 40px;
  }
  .cta--banner .cta__title {
    font-size: 26px;
  }
  .cta--banner .cta__btn-group {
    padding: 32px 40px 32px 0;
  }
  .cta--banner .cta__btn {
    white-space: nowrap;
  }
}

/* 以下の max-width ブロックは中間CTA（.cta--card）専用。
   下部CTA（.cta--banner）はモバイルファーストで別途記述するため、
   セレクタを .cta--card に限定して混線を防ぐ */
@media (max-width: 1024px) {
  .cta--card {
    padding-block: 48px;
  }
}
@media (max-width: 767px) {
  .cta--card .cta__title {
    font-size: 16px;
  }
  .cta--card .cta__btn {
    width: 100%;
    justify-content: center;
  }
  /* SPでは横並びのままだとアイコンが0〜7pxに潰れ、見出しが1〜2文字ずつ折り返す。
     カード型にしたことで顕著になるため、中間CTAのみ縦積みにする */
  .cta--card .cta__inner {
    flex-direction: column;
    padding: 28px 20px;
  }
  .cta--card .cta__icon {
    flex-shrink: 0;
  }
}

/* br制御 */
/* SP・TBで改行 / PC(1024px〜)では改行しない */
.br--sp {
  display: inline;
}
@media (min-width: 768px) {
  .br--sp { display: none; }
}

.br--pc { display: block; }
@media (max-width: 767px) {
  .br--pc { display: none; }
}

/* br.pc-only: 768px以上でのみ改行する共通ユーティリティ。
   悩み・製品・導入事例の3セクションで使用しているため、
   .p-problem-guide のブロックから切り出してここで一元管理する */
br.pc-only { display: none; }
@media (min-width: 768px) {
  /* 768px以上はブラウザ標準（inline）に戻す。移設前の挙動と同一 */
  br.pc-only { display: inline; }
}

/* ===== BRAND CTA (製品セクション直後パネル) ===== */
.brand-cta {
  padding: 28px 0;
  background: #f4f8fb;
}

.brand-cta__inner {
  position: relative;
  width: min(1120px, 92%);
  margin: 0 auto;
  padding: 9px 40px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
  border: 1px solid #dcecf1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 16px 40px rgba(13, 33, 55, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.brand-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(53,165,189,.08), transparent 38%),
    linear-gradient(315deg, rgba(53,165,189,.16), transparent 42%);
}

.brand-cta__deco {
  position: absolute;
  width: 300px;
  height: 54px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(13, 33, 55, 0.10);
  z-index: 1;
}

.brand-cta__deco--left {
  top: 24px;
  left: -80px;
  transform: rotate(-38deg);
  border-bottom: 4px solid var(--brand);
}

.brand-cta__deco--right {
  right: -70px;
  bottom: 20px;
  transform: rotate(-38deg);
  border-top: 4px solid var(--brand);
}

.brand-cta__label,
.brand-cta__title,
.brand-cta__text,
.brand-cta__button {
  position: relative;
  z-index: 2;
}

.brand-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.brand-cta__label::before,
.brand-cta__label::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand);
}

.brand-cta__title {
  margin: 0;
  color: #0D2137;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .03em;
}

.brand-cta__title span {
  color: var(--brand);
}

.brand-cta__text {
  margin-top: 8px;
  color: #0D2137;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.brand-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 360px;
  margin-top: 14px;
  padding: 12px 32px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f7891 0%, var(--brand) 100%);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 8px 20px rgba(53, 165, 189, 0.30),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-cta__button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(53, 165, 189, 0.38),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.brand-cta__button span {
  font-size: 18px;
}

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

  .brand-cta__inner {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .brand-cta__deco {
    width: 180px;
    height: 38px;
  }

  .brand-cta__title {
    font-size: 22px;
  }

  .brand-cta__text {
    font-size: 14px;
  }

  .brand-cta__button {
    min-width: auto;
    width: 100%;
    font-size: 15px;
    padding: 14px 20px;
  }
}

/* ===== COMPONENT GALLERY ENHANCEMENTS ===== */

/* 1. Navigation: scroll shadow */
.header {
  transition: box-shadow 0.3s;
}
.header--scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 2. Navigation: active section link */
.header__nav-list a {
  position: relative;
  padding-bottom: 2px;
}
.header__nav-list a.is-active {
  color: var(--brand);
}
.header__nav-list a.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}

/* 3. Badge: section eyebrow label */
.sec__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 20px;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.sec__badge--center {
  display: flex;
  justify-content: center;
}

/* 4. Card: products card top accent on hover */
.products__card {
  border-top-width: 1px;
  border-top-color: #6E7D8C;
}
.products__card:hover {
  border-top-width: 3px;
  border-top-color: var(--brand);
}

/* 6. Button group: CTA section (secondary button, currently unused) */
.cta__btn--secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cta__btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.9);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 767px) {
  .cta__btn-group {
    flex-direction: column;
    width: 100%;
  }
  .cta__btn--secondary {
    width: 100%;
    justify-content: center;
  }
}



/* ===== STRENGTHS (現場で実感できる3つの強み) ===== */
.strengths {
  background: #f5f9fa;
}
.strengths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.strengths__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.strengths__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.strengths__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.strengths__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.5;
}
.strengths__body {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
}
.strengths__tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-light);
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}

@media (max-width: 1024px) {
  .strengths__grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ===== DADS準拠: フォーカスインジケーター ===== */
a:focus-visible,
button:focus-visible {
  outline: 4px solid #000;
  outline-offset: 2px;
  border-radius: 4px;
}
.footer__nav-list a:focus-visible,
.footer__legal a:focus-visible,
.p-problem-guide__link:focus-visible {
  background-color: #ffe500;
  color: #000;
  box-shadow: 0 0 0 2px #ffe500;
}