@charset "utf-8";

/* =========================================================
   Finexit 主な機能（2行×4列） _ai
   ========================================================= */
.featureSection_ai {
  margin: 60px 0 0 0;
}

/* 基本レイアウト：モバイル2列、タブレット2列、PC4列 */
.featureGrid_ai {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP: 2列 */
  gap: 18px;
}

/* タブレット（768px～1023px）：2列のまま */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .featureGrid_ai {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC（1024px～）：4列 */
@media only screen and (min-width: 1024px) {
  .featureGrid_ai {
    grid-template-columns: repeat(4, 1fr);
  }
}

.featureCard_ai { margin: 0; }

/* 共通CSSの a:link 等の上書きのため、親クラスを付与して詳細度を上げ（!importantを回避） */
.featureSection_ai .featureLink_ai,
.featureSection_ai .featureLink_ai:link,
.featureSection_ai .featureLink_ai:visited,
.featureSection_ai .featureLink_ai:hover,
.featureSection_ai .featureLink_ai:active,
.featureSection_ai .featureLink_ai:focus,
.featureSection_ai .featureLink_ai:focus-visible {
  text-decoration: none;
}

.featureLink_ai {
  display: grid;
  place-items: center;
  gap: 10px;
  color: #0f2941;
  background: #ffffff;
  border: 2px solid #73c1e0;
  border-radius: 15px;
  padding: 28px 12px;
  text-align: center;
  min-height: 120px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.featureLink_ai:hover,
.featureLink_ai:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(3, 95, 180, 0.45);
  box-shadow: 0 8px 18px rgba(3, 95, 180, 0.12);
}

.featureIcon_ai {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  /* 旧指定が残っていても強制的に打ち消すため、明示的に透明/枠線なしを指定 */
  background: transparent;
  border: none;
}

/* アイコン画像用スタイル */
.featureIcon_ai img {
  width: 60px;
  height: auto;
  display: block;
}

.featureLabel_ai {
  font-weight: bold;
  letter-spacing: 0.02em;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  color: inherit;
}

@media only screen and (max-width: 359px) {
  .featureLabel_ai { white-space: normal; }
}


/* =========================================================
   連動PMSメーカー（リスト＋画像）_ai
   ---------------------------------------------------------
   ・PC：左リスト + 右画像（横並び）
   ・SP：リスト直下に画像（縦並び）
   ========================================================= */
.pmsListSection_ai { margin: 60px 0 0 0; }

.pmsLayout_ai {
  display: grid;
  grid-template-columns: 1fr; /* SP時：縦並び */
  gap: 20px;
  align-items: start;
}

/* リスト（1行ずつ） */
.pmsList_ai {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pmsItem_ai {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.7;
  font-size: 16px;
}

/* デフォルトのマーカー（チェック） */
.pmsItem_ai::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.25em;          /* モバイルでもPCでも自然に見える基準位置 */
  color: #1abc9c;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* 画像：SPではリスト直下に */
.pmsImageWrap_ai {
  display: grid;
  place-items: center;
}
.pmsImage_ai {
  width: min(360px, 100%);
  height: auto;
  display: block;
}

/* PC（1024px〜）：リスト左・画像右で横並び */
@media only screen and (min-width: 1024px) {
  .pmsLayout_ai {
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    align-items: start;
  }

  .pmsItem_ai {
    font-size: 20px;
    line-height: 2;
  }

  .pmsImage_ai {
    width: 240px;
    height: auto;
  }

  /* PC時：画像を左に100px移動 */
  .pmsImageWrap_ai {
    position: relative;
    left: -100px;
  }
}

/* 画面が非常に狭い場合 */
@media only screen and (max-width: 359px) {
  .pmsItem_ai { word-break: break-word; }
}


/* =========================================================
   連動PMSメーカー（リスト＋画像・強調付）_ai
   ========================================================= */

/* ：以降を青＋太字に */
.pmsItem_ai span {
  color: #0e7ae6;
  font-weight: 700;
}

/* =========================================================
   モバイル最適化（～767px）
   1) チェックを緑で固定
   2) はみ出し防止（改行許可＋折返し）
   3) チェックサイズを約2/3に縮小（≈11px）＆縦位置調整
   ========================================================= */
@media only screen and (max-width: 767px) {
  /* 画像を1/3サイズに縮小 (!importantを回避するため親要素を含めて指定) */
  .pmsImageWrap_ai .pmsImage_ai {
    width: 120px;
    height: auto;
  }

  /* テキストは改行OK・はみ出し防止 */
  .pmsItem_ai {
    white-space: normal;          /* ← 改行を許可（はみ出し防止） */
    font-size: 14px;              /* 少し小さめで収まりやすく */
    overflow-wrap: anywhere;      /* どこでも折返し可 */
    word-break: break-word;       /* 長語も折返し */
  }
  .pmsList_ai {
    overflow-x: hidden;           /* 横スクロール抑止 */
  }

  /* チェックマーク：色の強制＋サイズ2/3＋縦位置微調整 */
  .pmsList_ai .pmsItem_ai::before {
    color: #1abc9c;               /* 色が黒くなる上書きを防ぐ */
    font-size: 11px;              /* 約2/3（16px → 11px） */
    top: 0.35em;                  /* 文字14px時に中心に寄るよう少し下げる */
    line-height: 1;
  }
}