@charset "utf-8";

section {
    padding-right: 0!important;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* セクション全体の大枠 */
.prd-matrix-section {
    margin: 40px auto 60px;
    max-width: 1400px !important;
    color: #333;
    background-color: var(--white);
    border: 1px solid #808080;
    padding: 0;
    width: 90%;
}

/* 上部のタイトル・サブタイトルエリア */
.prd-matrix-header-info {
    background-color: var(--heat-bg);
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #a8a8a8;
    color: var(--white);
}

.prd-matrix-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.prd-matrix-subtitle {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--heat-bright-bg);
}

/* テーブルを囲むラッパー（レスポンシブ時の横スクロール用） */
.prd-matrix-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* テーブル本体のスタイル */
.prd-matrix-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px; /* 横幅が狭い端末ではスクロールさせる */
    background-color: var(--white);
}

.prd-matrix-table th,
.prd-matrix-table td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 15px 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
}

/* 右端・下端の罫線を消す処理 */
.prd-matrix-table th:last-child,
.prd-matrix-table td:last-child {
    border-right: none;
}
.prd-matrix-table tbody tr:last-child td {
    border-bottom: none;
}

/* ヘッダー（項目名）のスタイル */
.prd-matrix-table thead th {
    background-color: #f9f9f9;
    font-weight: bold;
}

/* 「管理機能」で括った大枠ヘッダーの色を少し変えて視認性を上げる */
.prd-matrix-table thead .col-group-mgmt {
    background-color: #eee;
}
/* 通信レポート（2行目の最後の項目）の右線 */
.prd-matrix-table thead tr:nth-child(2) th:last-child {
    border-right: 1px solid #ccc;
}

/* --- 画像・製品名セルのスタイル --- */
.cell-prd-img {
    width: 200px; /* 画像セルの幅目安 */
}

.cell-prd-img a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.cell-prd-img a:hover {
    opacity: 0.8;
}

.cell-prd-img img {
    object-fit: cover;
    width: auto !important;
    height: 170px;
    margin-bottom: 8px;
}

.prd-matrix-caption {
    color: var(--sub-text-color);
    font-size: 0.8rem;
    display: block;
    text-align: center;
    line-height: 1.4;
}

/* 「特長」列は文章が長くなる想定のため、左揃え（お好みで外してください） */
.cell-feature-text {
    text-align: left !important;
    min-width: 250px;
}




/* セクション全体（斜めに切り替わるモダンな背景） */
.ex-mv-section {
  width: 100%;
  padding: 80px 0;
  /* 白から薄いグリーン系グレーへ、斜め(110度)にスパッと切り替わる背景 */
  background: linear-gradient(110deg, #ffffff 55%, #eef4f1 55%);
  overflow: hidden;
}

.ex-mv-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* ==================================
   左側：テキストコンテンツ
================================== */
.ex-mv-content {
  flex: 1;
  max-width: 650px;
  z-index: 2;
}

.ex-mv-title {
  margin: 0 0 40px 0;
  line-height: 1.6;
}

.ex-mv-title-line {
  display: inline-block;
  background-color: var(--bs-green);
  color: var(--bs-white);
  font-size: 28px;
  font-weight: bold;
  padding: 6px 16px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.ex-mv-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ex-mv-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* うっすらとした区切り線 */
  cursor: default;
}

/* 一番上と一番下は線を消してスッキリ見せる */
.ex-mv-feature-item:first-child {
  padding-top: 0;
}
.ex-mv-feature-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* シャープな矢印アイコン */
.ex-mv-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--bs-green); /* テーマカラー */
  margin-top: 3px; /* テキストと高さを揃える */
  transition: transform 0.3s ease; /* アニメーションの準備 */
}

/* 行にマウスを乗せたら、矢印が少し右にスライドする遊び心 */
.ex-mv-feature-item:hover .ex-mv-icon {
  transform: translateX(5px);
}

.ex-mv-feature-item p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--bs-black);
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* ==================================
   右側：ビジュアル＆ピクトグラム
================================== */
.ex-mv-visual {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px; /* 全体的に大きくしたため、高さも拡張 */
}

/* 製品画像の代替ダミー（サイズを約1.3倍に拡大） */
.ex-mv-product-dummy {
  width: 280px;  /* 220px -> 280px */
  height: 360px; /* 280px -> 360px */
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-8deg) translateY(-10px); /* 傾きを少し緩やかに */
  z-index: 2;
}

.ex-mv-product-dummy span {
  color: var(--fc-gray, #8892a0);
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  letter-spacing: 1px;
}

/* ピクトグラムの共通スタイル（サイズ拡大） */
.ex-mv-picto {
  position: absolute;
  width: 70px;  /* 50px -> 70px */
  height: 70px; /* 50px -> 70px */
  background-color: var(--bs-white);
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 影も少し強く */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bs-green);
  z-index: 1;
  animation: float 6s ease-in-out infinite;
}

.ex-mv-picto svg {
  width: 34px; /* アイコン自体も大きく */
  height: 34px;
}

/* 中央の製品が大きくなったため、配置を外側に微調整 */
.ex-mv-picto-1 { top: 5%; left: 0%; animation-delay: 0s; }
.ex-mv-picto-2 { top: 15%; right: 0%; animation-delay: -1.5s; }
.ex-mv-picto-3 { bottom: 10%; left: 5%; animation-delay: -3s; }
.ex-mv-picto-4 { bottom: 15%; right: 0%; animation-delay: -4.5s; }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* ==================================
   レスポンシブ（900px以下）
================================== */
@media screen and (max-width: 900px) {
  .ex-mv-section {
    background: linear-gradient(160deg, #ffffff 60%, #eef4f1 60%); /* スマホ時は角度を変更 */
  }

  .ex-mv-container {
    flex-direction: column;
    gap: 40px;
  }

  .ex-mv-title-line {
    font-size: 20px;
    padding: 5px 12px;
  }

  .ex-mv-feature-item p {
    font-size: 15px;
  }

  .ex-mv-visual {
    width: 100%;
    height: 380px;
  }

  .ex-mv-picto-1 { top: 0%; left: 5%; }
  .ex-mv-picto-2 { top: 5%; right: 5%; }
  .ex-mv-picto-3 { bottom: 5%; left: 5%; }
  .ex-mv-picto-4 { bottom: 10%; right: 5%; }
}



/* 概要 */
.wearable_about {
    background-color: #eee;
    padding: 70px 0;
}





/* ーーーーーーーーーーーーーーーーーーーーーーーー */
/* 官公庁風バナーセクションの大枠 */
.heat-law-section {
    margin: 60px auto;
}

/* 全体の枠組み（divとして機能） */
.heat-law-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white, #ffffff);
    /* 官公庁らしいカッチリとしたネイビーのボーダー */
    border: 1px solid var(--heat-dark-bg);
    border-top: 8px solid var(--heat-dark-bg); 
    border-radius: 4px;
    padding: 30px 40px!important;
    color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 「今一度チェック！」のバッジ（注意喚起の赤） */
.heat-law-badge {
    display: inline-block;
    background-color: var(--accent-orange);
    color: var(--white, #ffffff);
    font-size: 0.9rem;
    font-weight: bold;
    padding: 6px 16px;
    margin-bottom: 15px;
    align-self: flex-start;
}

/* 説明文 */
.heat-law-desc {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px; /* リンクエリアとの余白を追加 */
}

/* リンクエリアのレイアウト（PCは横並び、隙間20px） */
.heat-law-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 個別のリンク要素 */
.heat-law-link-item {
    display: flex;
    flex-direction: column;
    background-color: #f8fafc; /* 少しだけグレーにして領域を明確に */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 20px;
    text-decoration: none; /* 下線を消す */
    color: #333;
    transition: all 0.3s ease;
}

/* ホバー（マウスオーバー）時のアクションを各リンクに適用 */
.heat-law-link-item:hover {
    border-color: var(--heat-bg);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

/* タイトル（明朝体などを好む傾向もありますが、視認性重視でゴシック太字） */
.heat-law-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #1e3a8a;
    line-height: 1.4;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
}

/* ボタンエリア（右寄せ） */
.heat-law-action {
    text-align: right;
    margin-top: auto; /* コンテンツ量が違ってもボタンを最下部に揃える */
}

/* 疑似ボタン（リンク要素内の装飾） */
.heat-law-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--heat-dark-bg);
    color: var(--white, #ffffff);
    padding: 10px 24px;
    border-radius: 30px; /* 丸みを持たせてクリックしやすく */
    font-size: 0.95rem;
    font-weight: bold;
    transition: background-color 0.2s;
}

/* 矢印アイコンをCSSで追加 */
.heat-law-btn::after {
    content: "＞";
    margin-left: 10px;
    font-size: 0.8rem;
}

/* ホバー時にボタンの色も少し濃くする */
.heat-law-link-item:hover .heat-law-btn {
    background-color: #12235a;
}

/* スマートフォン・タブレット用レスポンシブ調整 */
@media (max-width: 768px) {
    .heat-law-section {
      padding-top: 0!important;
    }
    .heat-law-card {
        padding: 20px 10px!important;
    }
    .heat-law-links {
        grid-template-columns: 1fr; /* スマホでは縦並びに変更 */
    }
    .heat-law-title {
        font-size: 1.2rem;
    }
    .heat-law-action {
        text-align: center; /* スマホではボタンを中央寄せ */
    }
    .heat-law-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
    }
}






#heatstroke_special_section {
    /* background-color: var(--heat-bright-bg); */
    padding: 80px 0;
    color: var(--text-color);
    box-sizing: border-box;
}

#heatstroke_special_section * {
    box-sizing: border-box;
}

.content_maxwidth {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ヘッダー部分（divに変更） --- */
.heat_header {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.heat_header_inner {
    display: flex;
    align-items: center;
    gap: 20px; /* タイトルと画像の距離 */
}

.heat_header_text {
    text-align: right; /* テキストは画像寄り（右寄せ）に */
}

.heat_title_en {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: var(--heat-bg);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;
}

.heat_title_main {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/* 編集者アイコン枠 */
.heat_header_img_frame {
    width: 150px;
    height: auto;
    overflow: hidden;
    background-color: #fff;
}

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

/* --- カードグリッド --- */
.heat_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* --- カード本体 --- */
.heat_card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e1e4e8; /* 枠線で区切る */
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    height: 100%;
}

/* ホバー時は浮かせず、枠線と背景色で反応させる */
.heat_card:hover {
    border-color: var(--heat-bg);
    background-color: #fffcf8; /* ほんの少しオレンジがかった白へ */
}

/* 画像エリア */
.heat_img_frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background-color: #eee;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}

.heat_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* ホバー時の画像ズーム */
.heat_card:hover .heat_img {
    transform: scale(1.05);
}

/* テキストエリア */
.heat_content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 日付エリア */
.heat_date_row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.heat_date {
    font-size: 12px;
    color: #888;
    display: inline-flex;
    align-items: center;
}

/* 時計アイコン風の装飾 */
.heat_date::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    background: linear-gradient(to bottom, transparent 50%, #999 50%, #999 100%, transparent 100%) no-repeat center;
    background-size: 1px 4px;
}

/* 記事タイトル */
.heat_article_title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    transition: color 0.3s;
    margin-bottom: 20px;
    flex-grow: 1;
}

.heat_card:hover .heat_article_title {
    color: var(--heat-bg);
    text-decoration: underline;
}

/* 矢印アイコン（右下に配置） */
.heat_arrow_area {
    text-align: right;
}

.heat_arrow_text {
    font-size: 12px;
    font-weight: bold;
    color: var(--heat-bg);
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s;
}

.heat_arrow_text::after {
    content: '→';
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s;
}

.heat_card:hover .heat_arrow_text::after {
    transform: translateX(5px);
}

/* レスポンシブ */
@media screen and (max-width: 600px) {
    #heatstroke_special_section {
        padding: 50px 0;
    }
    .heat_header_inner {
        flex-direction: column-reverse; /* スマホでは画像を上に */
        text-align: center;
        gap: 10px;
    }
    .heat_header_text {
        text-align: center;
    }
    .heat_title_main {
        font-size: 24px;
    }
    .heat_header_img_frame {
        width: 60px;
        height: 60px;
    }
    .heat_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .heat_content {
        padding: 20px;
    }
    .heat_article_title {
        font-size: 16px;
    }
}



/* セクション全体（フラットな背景色、明確な外枠） */
.ex-step-prog-section {
  width: 100%;
  padding: 80px 0;
  background-color: #ffffff; /* フラットな白背景 */
  border: 2px solid #ccc; /* 明確な外枠線 */
  box-sizing: border-box;
  position: relative;
}

.ex-step-prog-section::after {
  content: "";
  position: absolute;
  bottom: -16px; /* 箱を下に半分ほど突き出させる */
  left: 50%;
  width: 30px; /* 角の大きさ */
  height: 30px;
  background-color: #ffffff; /* セクションと同じ白背景にして、元の直線を隠す */
  border-right: 2px solid #ccc; /* セクションと同じ太さ・色の枠線 */
  border-bottom: 2px solid #ccc;
  transform: translateX(-50%) rotate(45deg); /* 中央に寄せて45度回転（ひし形にする） */
  z-index: 10;
}

/* ヘッダーエリア（大きなタイポグラフィで力強く） */
.ex-step-prog-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 5%;
}

.ex-step-prog-main-title {
  font-size: 36px;
  font-weight: 900;
  color: #1e293b;
  margin: 0;
  letter-spacing: 2px;
  line-height: 1.3;
}

/* コンテナ（3カラムレイアウト） */
.ex-step-prog-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  align-items: stretch; /* カラムの高さを揃える */
  gap: 0; /* 隙間なしで枠線をくっつける */
}

/* 各カラムの共通スタイル（角丸なし、影なし、明確な枠線） */
.ex-step-prog-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc; /* 各カラムの枠線 */
}

/* ヘッダー */
.ex-step-prog-col-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.ex-step-prog-badge {
  font-size: 13px;
  font-weight: 900;
  padding: 4px 12px;
  letter-spacing: 1.5px;
}

.ex-step-prog-col-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

/* サブヘッダー */
.ex-step-prog-col-sub-header {
  margin-bottom: 25px;
}

.ex-step-prog-col-sub-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

/* ピクトグラムエリア（イラストの代わりにシャープなSVG） */
.ex-step-prog-picto-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  margin-bottom: 30px;
}

.ex-step-prog-picto-svg-basic {
  width: 100px;
  height: 100px;
  color: #64748b; /* 灰色 */
}

.ex-step-prog-picto-svg-advanced {
  width: 100px;
  height: 100px;
  color: var(--heat-bg); /* 青色 */
}

/* コンテンツ */
.ex-step-prog-content-title {
  color: var(--bs-black)!important;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
}

.ex-step-prog-desc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.ex-step-prog-desc-list li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.ex-step-prog-desc-list li::before {
  content: "■"; /* シャープな箇条書き */
  position: absolute;
  left: 0;
  font-size: 12px;
}

/* フッター（下揃え） */
.ex-step-prog-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==================================
   左カラム 専用デザイン（基礎対策・灰色ベース）
================================== */
.ex-step-prog-col-basic {
  background-color: #f8fafc;
}

.ex-step-prog-col-basic .ex-step-prog-badge {
  background-color: #e2e8f0;
  color: #475569;
}

.ex-step-prog-col-basic .ex-step-prog-col-title {
  color: #475569;
}

.ex-step-prog-col-basic .ex-step-prog-col-sub-title {
  color: #64748b;
}

.ex-step-prog-col-basic .ex-step-prog-content-title {
  color: #475569;
}

.ex-step-prog-col-basic .ex-step-prog-desc-list li {
  color: #475569;
}

.ex-step-prog-col-basic .ex-step-prog-desc-list li::before {
  color: #64748b;
}

/* 注釈ボックス */
.ex-step-prog-note {
  background-color: #f1f5f9;
  border-left: 4px solid #94a3b8;
  padding: 15px 20px;
}

.ex-step-prog-note p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

/* テキストリンク（緑系に変更） */
.ex-step-prog-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: bold;
  color: var(--bs-green);
  text-decoration: none;
  transition: opacity 0.3s;
  align-self: flex-start;
}

.ex-step-prog-link:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==================================
   中央カラム 専用デザイン（進化・矢印）
================================== */
.ex-step-prog-col-center {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  z-index: 1; /* カラムより下に配置 */
}

.ex-step-prog-evolution-arrow {
  width: 100%;
  height: 100%;
}

/* ==================================
   右カラム 専用デザイン（先進DX・青ベース）
================================== */
.ex-step-prog-col-advanced {
  background-color: #f0f9ff;
}

/* 斜めリボン（より鋭く） */
.ex-step-prog-ribbon {
  position: absolute;
  top: 45px;
  right: -70px;
  background-color: var(--heat-bg);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 65px 12px 50px;
  transform: rotate(40deg);
  letter-spacing: 1.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ex-step-prog-col-advanced .ex-step-prog-badge {
  background-color: var(--heat-bg);
  color: #ffffff;
}

.ex-step-prog-col-advanced .ex-step-prog-col-title {
  color: var(--heat-bg);
}

.ex-step-prog-col-advanced .ex-step-prog-col-sub-title {
  color: var(--heat-bg);
}

.ex-step-prog-col-advanced .ex-step-prog-content-title {
  color: #1d4ed8;
}

.ex-step-prog-col-advanced .ex-step-prog-desc-list li {
  color: #1e3a8a;
}

.ex-step-prog-col-advanced .ex-step-prog-desc-list li::before {
  color: var(--heat-bg);
}

/* ボトムのハイライトボックス（フラット・シャープ・青ベース） */
.ex-step-prog-highlight {
  background-color: var(--heat-bg);
  color: #ffffff;
  text-align: center;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: bold;
}

/* ==================================
   レスポンシブ（900px以下）
================================== */
@media screen and (max-width: 900px) {
  .ex-step-prog-section {
    padding: 60px 0;
  }
  
  .ex-step-prog-header {
    margin-bottom: 40px;
  }

  .ex-step-prog-main-title {
    font-size: 24px;
  }
  
  .ex-step-prog-container {
    flex-direction: column; /* スマホ時は縦1列 */
    gap: 0;
  }

  .ex-step-prog-ribbon {
    display: none;
  }

  .ex-step-prog-col {
    width: 100%;
    padding: 30px 25px;
    border: 1px solid #ccc;
    border-bottom: none; /* 中央カラムと枠線を共有 */
  }

  .ex-step-prog-col:last-child {
    border-bottom: 1px solid #ccc;
  }

  .ex-step-prog-col-basic {
    border-bottom: none;
  }

  .ex-step-prog-col-advanced {
    border-top: none;
  }

  .ex-step-prog-col-center {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom: none;
    padding: 0;
  }

  .ex-step-prog-evolution-arrow {
    width: 100px;
    height: 100%;
    transform: rotate(90deg); /* スマホ時は矢印を横向きに */
  }

  .ex-step-prog-evolution-arrow text {
    display: none; /* スマホでは矢印のテキストを隠す */
  }

  .ex-step-prog-picto-area {
    height: 120px;
  }
}




/* ==================================
   大枠のレイアウト制御
================================== */
.ex-mv-slant-section {
  position: relative;
  width: 100%;
  min-height: 650px;
  background-color: #eee; /* 右下に残る白系背景 */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 0;
}

/* ==================================
   背景装飾：斜め切り返し（ダイアゴナル）
================================== */
/* 奥のレイヤー（少し透過させてずらすことでリッチな立体感を出す） */
.ex-slant-bg-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fbbf24;
  opacity: 0.7;
  /* clip-path: polygon(0 0, 100% 0, 100% 88%, 0 98%); */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  z-index: 1;
}

/* 手前のメインレイヤー */
.ex-slant-bg-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 左上から右下へのグラデーションで深みを出す */
  background: linear-gradient(135deg, var(--heat-bg) 0%, rgba(20, 20, 20, 0.2) 100%), var(--heat-bg);
  /* clip-path: polygon(0 0, 100% 0, 100% 82%, 0 92%); */
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 94%, 0 84%);
  z-index: 2;
}

/* ==================================
   メインコンテナ
================================== */
.ex-mv-slant-container {
  position: relative;
  z-index: 10;
  max-width: 1250px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 40px 4% 80px 4%;
}

/* ==================================
   左側：テキストコンテンツ
================================== */
.ex-mv-slant-content {
  flex: 1.1; /* 左側を少し広めに取る */
  padding-right: 40px;
  color: #ffffff; /* 文字はすべて白ベース */
}

.ex-mv-slant-catch {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.ex-mv-slant-title {
  font-size: 2.6em;
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 25px 0;
  letter-spacing: 1px;
}

.ex-mv-slant-small {
  font-size: 24px;
  font-weight: bold;
}

.ex-mv-slant-highlight {
  /* 背景が暗いため、白と黄色のグラデで文字自体を目立たせる */
  color: #fbbf24;
}

.ex-mv-slant-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

/* CTAボタン */
.ex-mv-slant-action {
  margin-bottom: 40px;
}

.ex-mv-slant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #fbbf24; /* アクセントカラー（黄色系） */
  color: #1e293b;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.ex-mv-slant-btn:hover {
  transform: translateY(-3px);
  background-color: #f59e0b;
  box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}

.ex-mv-slant-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
}

.ex-mv-slant-btn:hover svg {
  transform: translateX(5px);
}

/* ==================================
   お知らせに代わる：端末一覧への導線
================================== */
.ex-mv-slant-device-link {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  color: #ffffff;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  max-width: 400px;
  width: 100%;
}

.ex-mv-slant-device-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateX(5px);
}

.ex-mv-slant-device-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-right: 15px;
}

.ex-mv-slant-device-icon svg {
  width: 24px;
  height: 24px;
}

.ex-mv-slant-device-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ex-mv-slant-device-label {
  font-size: 11px;
  font-weight: bold;
  color: #fbbf24;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.ex-mv-slant-device-title { 
    color: #fff;
  font-size: 15px;
  font-weight: bold;
}

.ex-mv-slant-device-arrow {
  margin-left: 10px;
}

.ex-mv-slant-device-arrow svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

/* ==================================
   右側：円背景＋プレースホルダー＋浮かぶアイコン
================================== */
.ex-mv-slant-visual {
  flex: 0.9;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

/* 同心円レーダー（背景装飾） */
.ex-slant-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 輪が1つ増えたのでサイズを700pxから900pxに拡張 */
  width: 900px;
  height: 900px;
  z-index: 1;
  pointer-events: none;
}

/* デバイスプレースホルダー（後から画像挿入） */
.ex-slant-devices {
  position: relative;
  z-index: 2;
}

/* PC枠 */
/* .ex-slant-pc-ph {
  width: 440px;
  height: 280px;
  background-color: #f8fafc;
  border: 3px dashed #cbd5e1;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
} */

.ex-slant-pc-ph span {
  font-size: 24px;
  font-weight: 900;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 2px;
}

/* スマホ枠（右下に重ねる） */
.ex-slant-sp-ph {
  position: absolute;
  bottom: 10px;
  right: -30px;
  width: 280px;
  height: 150px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -10px 15px 30px rgba(0,0,0,0.1);
}

.ex-slant-sp-ph span {
  font-size: 16px;
  font-weight: 900;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 1px;
}

/* 浮かぶ現場アイコン群 */
.ex-slant-float-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  animation: slant-float 6s ease-in-out infinite;
}

@keyframes slant-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.ex-slant-icon-circle {
  width: 65px;
  height: 65px;
  background-color: #ffffff;
  border-radius: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  color: var(--heat-bg);
}

.ex-slant-icon-circle svg {
  width: 30px;
  height: 30px;
}

.ex-slant-float-icon span {
  font-size: 12px;
  font-weight: bold;
  color: #334155;
  background-color: rgba(255, 255, 255, 0.85); /* 文字が同心円に被っても読みやすく */
  padding: 3px 10px;
  border-radius: 12px;
}

/* 各アイコンの配置とアニメーション遅延 */
.icon-1 { top: 10%; left: -5%; animation-delay: 0s; }
.icon-2 { top: 2%; right: 8%; animation-delay: -1.5s; }
.icon-3 { bottom: 15%; left: -2%; animation-delay: -3s; }
.icon-4 { bottom: 30%; right: -6%; animation-delay: -4.5s; }

/* ==================================
   レスポンシブ（900px以下）の上書き
================================== */
@media screen and (max-width: 900px) {
  .ex-mv-slant-section {
    min-height: auto;
  }

.ex-slant-bg-back {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  }
  .ex-slant-bg-front {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 95%, 0 90%);
  }

  .ex-mv-slant-container {
    flex-direction: column;
    padding: 60px 5% 40px 5%;
  }

  .ex-mv-slant-content {
    padding-right: 0;
    margin-bottom: 60px;
  }

  .ex-mv-slant-title {
    font-size: 28px;
  }

  .ex-mv-slant-small {
    font-size: 18px;
  }

  .ex-mv-slant-device-link {
    max-width: 100%;
    padding: 20px 0;
  }

  /* ビジュアルエリアのレスポンシブ調整 */
  .ex-mv-slant-visual {
    width: 100%;
    min-height: 450px;
    margin-top: 20px;
  }
  
  .ex-slant-rings {
    width: 500px;
    height: 500px;
  }
  
  .ex-slant-pc-ph {
    width: 320px;
    height: 320px;
  }
  
  .ex-slant-sp-ph {
    display: none;
  }
  
  /* スマホ時はアイコンを少し内側に寄せて縮小 */
  .ex-slant-icon-circle {
    width: 50px;
    height: 50px;
  }
  .ex-slant-icon-circle svg { 
    width: 24px; 
    height: 24px; 
  }
  
  .icon-1 { top: 0%; left: 0%; }
  .icon-2 { top: 0%; right: 0%; }
  .icon-3 { bottom: 10%; left: -5%; }
  .icon-4 { bottom: -5%; right: 10%; }
}


/* ==================================
   追加：左側の空間装飾（センサーとデータ）
================================== */
.ex-slant-deco-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 3; /* 暗い背景(z-index:2)の上、文字(z-index:10)の下 */
  pointer-events: none; /* クリックの邪魔をしない */
}

.ex-slant-deco-tl {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 250px;
  height: 250px;
}

.ex-slant-deco-bl {
  position: absolute;
  bottom: 12%;
  left: 4%;
  width: 140px;
  height: 140px;
}



/* ==================================
   セクション全体
================================== */
.ex-infra-grid-section {
  width: 100%;
  padding: 80px 0;
  background-color: var(--heat-bright-bg);
  box-sizing: border-box;
}

.ex-infra-grid-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ヘッダー */
.ex-infra-grid-header {
  text-align: center;
  margin-bottom: 60px;
}

.ex-infra-grid-sub {
  font-size: 14px;
  font-weight: bold;
  color: #64748b;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.ex-infra-grid-main-title {
  font-size: 40px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.4;
  margin: 0;
}

/* ==================================
   グリッドレイアウト
================================== */
.ex-infra-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 上段の2カラム */
.ex-infra-grid-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* ==================================
   カードの共通スタイル（シャープ・枠線重視）
================================== */
.ex-infra-grid-card {
  background-color: #ffffff;
  border: 1px solid #cbd5e1; /* 明確な枠線 */
  display: flex;
  flex-direction: column;
  border-radius: 0; /* 角丸を排除 */
  overflow: hidden;
}

/* 下段：横長カードのスタイル */
.ex-infra-grid-card.horizontal {
  flex-direction: row;
}

/* テキスト部分 */
.ex-infra-grid-card-text {
  padding: 40px;
  flex: 1;
}

.ex-infra-grid-category {
  display: inline-block;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.ex-infra-grid-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #0f172a;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.ex-infra-grid-card-desc {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 25px 0;
}

/* メリット部分 */
.ex-infra-grid-merit {
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 15px 20px;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
}

.ex-infra-grid-merit strong {
  color: #2563eb;
}

/* ==================================
   画像部分
================================== */
.ex-infra-grid-card-img {
  background-color: #f8fafc;
  border-top: 1px solid #cbd5e1; /* 上段カード用 */
}

/* 横長カードの時は枠線の位置を調整 */
.horizontal .ex-infra-grid-card-img {
  border-top: none;
  border-left: 1px solid #cbd5e1;
  width: 45%;
}

.ex-infra-grid-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ex-infra-grid-placeholder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* ==================================
   レスポンシブ
================================== */
@media screen and (max-width: 900px) {
  .ex-infra-grid-section {
    padding: 50px 0;
  }

  .ex-infra-grid-main-title {
    font-size: 22px;
  }

  .ex-infra-grid-top-row {
    grid-template-columns: 1fr; /* 縦並び */
  }

  .ex-infra-grid-card.horizontal {
    flex-direction: column; /* 縦並び */
  }

  .horizontal .ex-infra-grid-card-img {
    width: 100%;
    border-left: none;
    border-top: 1px solid #cbd5e1;
  }

  .ex-infra-grid-card-text {
    padding: 30px 20px;
  }

  .ex-infra-grid-card-title {
    font-size: 18px;
  }
}



/* ==================================
   セクション全体（区切りを明確に）
================================== */
.ex-effect-diagram-section {
  position: relative;
  width: 100%;
  padding: 100px 0 120px 0;
  /* ほんの少し青みがかった薄いグレーにして、他の白背景セクションと区別 */
  background-color: #f8fafc; 
  /* 設計図のような方眼紙（グリッド）パターンを背景に敷く */
  background-image: 
    linear-gradient(rgba(203, 213, 225, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 213, 225, 0.3) 1px, transparent 1px);
  background-size: 30px 30px;
  font-family: sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

/* セクション上部の太い区切り線 */
.ex-effect-diagram-topline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: var(--heat-bg);
}

.ex-effect-diagram-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ==================================
   ヘッダー
================================== */
.ex-effect-diagram-header {
  text-align: center;
  margin-bottom: 35px;
}

.ex-effect-diagram-badge {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  color: var(--heat-bg);
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.ex-effect-diagram-main-title {
  font-size: 40px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: 1px;
}

/* ==================================
   インフォグラフィックレイアウト
================================== */
.ex-effect-diagram-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 500px; /* 中央画像を配置するスペースを確保 */
}

/* 中央のイメージエリア（絶対配置でど真ん中に固定） */
.ex-effect-diagram-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 480px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ex-effect-diagram-image-ph {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.ex-effect-diagram-image-ph span {
  font-size: 24px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 3px;
  text-align: center;
  line-height: 1.4;
}

/* 画像の背後から広がる波紋アニメーション */
.ex-effect-diagram-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ex-effect-diagram-rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--heat-bg);
  opacity: 0;
  animation: radar-pulse 3s infinite;
}

.ex-effect-diagram-rings span:nth-child(1) { width: 400px; height: 400px; animation-delay: 0s; }
.ex-effect-diagram-rings span:nth-child(2) { width: 550px; height: 550px; animation-delay: 1s; }
.ex-effect-diagram-rings span:nth-child(3) { width: 700px; height: 700px; animation-delay: 2s; }

@keyframes radar-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* ==================================
   左右のテキスト群（箱を使わない）
================================== */
.ex-effect-diagram-side {
  width: 32%; /* 中央を空けるための幅設定 */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  z-index: 10;
}

/* 各テキストアイテム */
.ex-effect-diagram-item {
  margin-bottom: 50px;
}

.ex-effect-diagram-item:last-child {
  margin-bottom: 0;
}

.ex-effect-diagram-icon {
  width: 45px;
  height: 45px;
  background-color: var(--heat-bg);
  border-radius: 8px; /* 丸ではなくシャープな角丸四角形 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.ex-effect-diagram-icon svg {
  width: 24px;
  height: 24px;
}

.ex-effect-diagram-text h3 {
  font-size: 18px;
  font-weight: bold;
  color: #0f172a;
  margin: 0 0 15px 0;
  line-height: 1.4;
  /* タイトルの下に線を引き、デザインの芯を通す */
  border-bottom: 2px solid #cbd5e1;
  padding-bottom: 10px;
}

.ex-effect-diagram-text p {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin: 0;
}

/* ==================================
   レスポンシブ（900px以下）
================================== */
@media screen and (max-width: 900px) {
  .ex-effect-diagram-header {
    text-align: center;
    margin-bottom: 0;
  }
  .ex-effect-diagram-section {
    padding: 60px 0;
  }

  .ex-effect-diagram-main-title {
    font-size: 24px;
  }

  /* スマホ時は放射状レイアウトを解除して縦並びに */
  .ex-effect-diagram-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  /* 画像を一番上に持ってくる */
  .ex-effect-diagram-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: -1;
    width: 100%;
    max-width: 320px;
    height: 180px;
  }

  .ex-effect-diagram-side {
    width: 100%;
  }

  .ex-effect-diagram-item {
    margin-bottom: 40px;
  }
}



/* ==================================
   セクション全体
================================== */
.ex-select-section {
  width: 100%;
  padding: 100px 0;
  background-color: #ffffff; /* 白背景でコントラストをつける */
  box-sizing: border-box;
  border-top: 1px solid #e2e8f0; /* 前セクションとの境界線 */
}

.ex-select-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ==================================
   ヘッダー
================================== */
.ex-select-header {
  text-align: center;
  margin-bottom: 40px;
}

.ex-select-sub-title {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  color: var(--heat-bg);
  letter-spacing: 2px;
  margin-bottom: 10px;
  border: 1px solid var(--heat-bg);
  padding: 4px 12px;
}

.ex-select-main-title {
  font-size: 32px;
  font-weight: 900;
  color: #1e293b;
  margin: 0;
  letter-spacing: 1px;
}

/* ==================================
   3つの重要キーワード（ハイライトバー）
================================== */
.ex-select-highlight-bar {
  display: flex;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  margin-bottom: 50px;
  /* 角丸ゼロ */
  border-radius: 0; 
}

.ex-select-keyword {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #0f172a;
  border-right: 1px solid #cbd5e1;
}

.ex-select-keyword:last-child {
  border-right: none;
}

.ex-select-keyword svg {
  width: 24px;
  height: 24px;
  color: var(--heat-bg);
}

/* ==================================
   4項目の詳細グリッド（2x2）
================================== */
.ex-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.ex-select-card {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 40px;
  border-radius: 0; /* 角丸ゼロ */
  display: flex;
  flex-direction: column;
}

.ex-select-card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}

.ex-select-icon {
  width: 45px;
  height: 45px;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--heat-bg);
}

.ex-select-icon svg {
  width: 24px;
  height: 24px;
}

.ex-select-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ナンバリング装飾 */
.ex-select-num {
  font-size: 14px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 1px;
}

.ex-select-card-title small {
  font-size: 14px;
  color: #ef4444; /* 「重要」などの補足は赤系で控えめに強調 */
  font-weight: bold;
}

/* リストデザイン */
.ex-select-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ex-select-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
}

.ex-select-list li:last-child {
  margin-bottom: 0;
}

/* シャープな四角形の箇条書きアイコン */
.ex-select-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--heat-bg);
}

.ex-select-list li strong {
  color: #0f172a;
}

/* ==================================
   レスポンシブ（900px以下）
================================== */
@media screen and (max-width: 900px) {
  .ex-select-section {
    padding: 60px 0;
  }

  .ex-select-main-title {
    font-size: 24px;
  }

  .ex-select-highlight-bar {
    flex-direction: column;
  }

  .ex-select-keyword {
    border-right: none;
    border-bottom: 1px solid #cbd5e1;
    padding: 15px;
    justify-content: flex-start;
  }

  .ex-select-keyword:last-child {
    border-bottom: none;
  }

  .ex-select-grid {
    grid-template-columns: 1fr;
  }

  .ex-select-card {
    padding: 30px 20px;
  }
}



/* ==================================
   セクション全体
================================== */
.ex-criteria-section {
  width: 100%;
  padding: 100px 0 60px;
  background-color: #ffffff; /* 白背景 */
  box-sizing: border-box;
}

.ex-criteria-container {
  max-width: 1400px; /* 表組みなので少し幅を絞って視認性を高める */
  margin: 0 auto;
  padding: 0 4%;
}

/* ==================================
   ヘッダー ＆ 必須要件（旧タブ部分）
================================== */
.ex-criteria-header {
  margin-bottom: 60px;
}

.ex-criteria-main-title {
  font-size: 32px;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 30px 0;
  letter-spacing: 1px;
  text-align: center;
}

/* タブではなく「厳格な条件リスト」として表現 */
.ex-criteria-must-box {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.ex-criteria-must-label {
  background-color: var(--heat-bg);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 16px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ex-criteria-must-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.ex-criteria-must-list li {
  font-size: 16px;
  font-weight: bold;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ex-criteria-must-list svg {
  width: 20px;
  height: 20px;
  color: var(--heat-bg);
}

/* ==================================
   スペック表（4つの基準）
================================== */
.ex-criteria-table {
  border-top: 3px solid #1e293b; /* 表の始まりを示す太い線 */
  border-bottom: 3px solid #1e293b; /* 表の終わりを示す太い線 */
}

/* 各行（Row）の設定 */
.ex-criteria-row {
  display: flex;
  border-bottom: 1px solid #cbd5e1; /* 行の区切り線 */
}

.ex-criteria-row:last-child {
  border-bottom: none; /* 最後の線は外枠に任せる */
}

/* 左側：見出しエリア（グレー背景） */
.ex-criteria-head {
  width: 32%;
  background-color: #f8fafc;
  padding: 40px 30px;
  border-right: 1px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 背景に大きく透けるナンバー（デザインのアクセント） */
.ex-criteria-num {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 80px;
  font-weight: 900;
  color: #e2e8f0; /* 薄いグレー */
  line-height: 1;
  pointer-events: none;
}

.ex-criteria-icon {
  width: 36px;
  height: 36px;
  color: var(--heat-bg);
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.ex-criteria-title {
  font-size: 24px;
  font-weight: bold;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.ex-criteria-title small {
  font-size: 14px;
  color: #64748b;
  font-weight: normal;
}

.ex-criteria-alert {
  color: #ef4444; /* 重要部分は赤系で強調 */
  font-size: 14px;
}

/* 右側：詳細エリア（白背景） */
.ex-criteria-body {
  width: 68%;
  padding: 40px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

.ex-criteria-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.ex-criteria-detail-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
}

.ex-criteria-detail-list li:last-child {
  margin-bottom: 0;
}

/* 四角いリストマーカー */
.ex-criteria-detail-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--heat-bg);
}

.ex-criteria-detail-list strong {
  color: #0f172a;
  font-size: 16px;
}

/* ==================================
   レスポンシブ（900px以下）
================================== */
@media screen and (max-width: 900px) {
  .ex-criteria-section {
    padding: 60px 0;
  }

  .ex-criteria-main-title {
    font-size: 24px;
  }

  /* 必須要件ボックスを縦積みに */
  .ex-criteria-must-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
  }

  .ex-criteria-must-list {
    flex-direction: column;
    gap: 12px;
  }

  /* スマホ時は表組みを解除して縦並びに */
  .ex-criteria-row {
    flex-direction: column;
  }

  .ex-criteria-head {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #cbd5e1;
    padding: 25px 0;
  }

  .ex-criteria-num {
    font-size: 60px;
    top: 5px;
    right: 15px;
  }

  .ex-criteria-body {
    width: 100%;
    padding: 25px 0;
  }
}