@charset "utf-8";

/* ==================================================
 * 下層ページ共通・拡張スタイル (subpage.css)
 * base.css / design.css の後に読み込んで使用します。
 * 1rem = 10px 基準
 * ================================================== */
html,
body {
  overflow-x: hidden;
}

address {
  font-style: normal;
}

/* --------------------------------------------------
 * 幅1200px 中央寄せインナーラッパー (.sub-inner)
 * -------------------------------------------------- */

.sub-inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* --------------------------------------------------
 * 1. 汎用・大型背景付き見出し (.c-heading-bg)
 * -------------------------------------------------- */

/* 見出し全体（土台 ＋ 下線） */
.c-heading-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 12rem;
  border-bottom: 1px solid #f0f0f0;
}

/* 背景の薄い文字（下線にくっつける） */
.c-heading-bg::before {
  content: attr(data-en);
  position: absolute;
  bottom: 0;
  left: 40px;
  z-index: -1;

  font-family: "Arial", sans-serif;
  font-size: 12rem;
  font-weight: 600;
  color: #f0f0f0;
  line-height: 0.7;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* 手前のメイン見出し */
.c-heading-bg__title {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(-210%);
  /* 上へ持ち上げる位置の調整 */
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;

  font-family: "Heisei Kaku Gothic Std", "平成角ゴシック", "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* アイコン画像 */
.c-heading-bg__icon {
  display: block;
  width: 32px;
  height: 27px;
  object-fit: contain;

}

/* --------------------------------------------------
 * 2. 汎用・小型見出し (.c-section-header)
 * -------------------------------------------------- */

.c-section-header {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #dedede;
  box-sizing: border-box;
  padding-left: 0 !important;
}

.c-section-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-right: 0;
  margin-right: 21px;
}

 /* 文字の右にある縦棒 
.c-section-title::after {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background-color: #dedede;
  position: absolute;
  top: 50%;
  right: -21px;
  transform: translateY(-50%);
} 
*/

/* 見出し + リード文の横並び対応 */
.c-section-header.c-section-header--with-lead {
  display: flex;
  align-items: center;
  gap: 24px;
}

.c-section-lead {
  font-size: 1.4rem;
  color: #282828;
  font-weight: 500;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .c-section-title {
    font-size: 2.0rem;

  }

  /* リード文（.c-section-lead）が含まれる全てのセクションで縦棒（装飾）を非表示 */
  .c-section-header:has(.c-section-lead)::before,
  .c-section-header:has(.c-section-lead)::after,
  .c-section-header:has(.c-section-lead) .c-section-title::before,
  .c-section-header:has(.c-section-lead) .c-section-title::after {
    display: none !important;
  }

  /* 縦棒を消した際のタイトルの右マージン（21px）をリセット */
  .c-section-header:has(.c-section-lead) .c-section-title {
    margin-right: 0 !important;
  }

  /* リード文の左余白（PCで付与されていたマージン・パディング）を解除 */
  .c-section-lead {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  /* SPで見出しとリード文を縦並び（改行）＆ 左寄せにする */
  .c-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* 左揃え */
    text-align: left !important;
    gap: 8px;
    padding-bottom: 8px !important;
  }

  .c-section-title {
    text-align: left !important;
  }

  .c-section-lead {
    font-size: 1.2rem;
  }

}




/* --------------------------------------------------
 * 会社概要のページ(company.html)
 * -------------------------------------------------- */

/* --------------------------------------------------
 *  トップメッセージ (.top_message)
 * -------------------------------------------------- */
.top_message {
  margin-top: 80px;
}

.top_message__body {
  margin-top: 40px;
}

/* 本文テキスト */
.top_message__body p {
  font-size: 1.6rem;
  /* 16px相当 */
  font-weight: 400;
  color: #282828;
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.top_message__body p:last-child {
  margin-bottom: 0;
}

/* 代表プロフィールブロック */
.top_message__profile {
  padding-top: 60px;
  display: flex;
  gap: 0;
  align-items: stretch;

}

/* 左：写真エリア */
.top_message__profile-img {
  flex: 0 0 500px;
  width: 500px;
  height: 360px;
  margin: 0;
}

.top_message__profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右：詳細エリア */
.top_message__profile-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* CEOヘッダー */
.top_message__profile-header {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 700 / 100;
  background: url('..//images2/pages2/bg-name.png') no-repeat center center / contain;
  background-color: #222;
  color: #ffffff;
  text-align: center;
  gap: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
}

.top_message__profile-title {
  width: 100%;
  font-size: 2.4rem;
  /* 24px相当 */
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

.top_message__profile-sub {
  width: 100%;
  font-size: 1.4rem;
  /* 14px相当 */
  color: #9b9b9b;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
}

/* 経歴テキストエリア */
.top_message__profile-text {
  padding: 50px;
  color: #282828;
}

.top_message__profile-text p {
  font-size: 1.6rem;
  /* 15px相当 */
  line-height: 1.6;
  margin-bottom: 1.5em;
  margin-top: 0;
}

.top_message__profile-text p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
 * 4. 企業理念 (.c-philosophy)
 * -------------------------------------------------- */

.c-philosophy {
  padding-top: 120px;
  width: 100%;
  box-sizing: border-box;
}

/* 1. 全幅背景ラッパー */
.c-philosophy__wrapper {
  width: 100%;
  margin-top: 40px;
  padding-top: 60px;
  padding-bottom: 60px;
  background: url('../images2/pages2/bg-philosophy.png') no-repeat center center / cover;
  box-sizing: border-box;
}

/* 2. インナーコンテナ（幅1200px・中央寄せ：sub-innerと同等指定） */
.c-philosophy__inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 3カラムリスト */
.c-philosophy__list {
  display: flex;
  gap: 24px;
  justify-content: center;
}

/* 各ボックス */
.c-philosophy__item {
  width: 364px;
  height: 335px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  padding: 0;
}

/* カード内見出し */
.c-philosophy__title {
  font-size: 1.8rem;
  /* 18px相当 */
  font-weight: 700;
  color: #282828;
  margin: 0;
  position: relative;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid #282828;
  box-sizing: border-box;
}

.c-philosophy__title::before {
  content: "";
  display: block;
  width: 4px;
  height: 60px;
  background-color: #ffa300;
  position: absolute;
  top: 0;
  left: 0;
}

/* 本文テキスト */
.c-philosophy__text {
  font-size: 1.6rem;
  /* 16px相当 */
  font-weight: 400;
  color: #282828;
  line-height: 1.4;
  margin: 0;
  padding: 20px;
}

/* --------------------------------------------------
 * 5. 会社概要 (.c-company-overview)
 * -------------------------------------------------- */

.c-company-overview {
  margin-top: 120px;
}

.c-company-overview__content {
  margin-top: 40px;
}

.c-company-table {
  width: 100%;
  border-collapse: collapse;
}

.c-company-table tr {
  border-bottom: 1px solid #dedede;
}

.c-company-table th {
  width: 220px;
  padding: 20px 0;
  vertical-align: top;
  text-align: left;
  font-size: 1.6rem;
  /* 16px相当 */
  font-weight: 700;
  /* ウェイト700 */
  color: #282828;
  line-height: 1.5;
}

.c-company-table td {
  padding: 20px 0;
  vertical-align: top;
  font-size: 1.6rem;
  /* 16px相当 */
  font-weight: 400;
  color: #282828;
  line-height: 1.6;
}

/* 表内のテキストリンク（通常時・訪問済みともに青字を強制適用） */
a.c-link,
a.c-link:link,
a.c-link:visited {
  color: #0066cc;
  text-decoration: none;
}

/* ホバー時：下線を表示 */
a.c-link:hover {
  color: #0066cc;
  text-decoration: underline;
}

.com-btn a:hover {
  color: #fff;
}

.c-company-table .com-btn {
  margin-top: 15px;
}

.c-company-table .com-btn a {
  margin-left: 0;
  margin-right: auto;
}

/* --------------------------------------------------
 * 6. セキュリティ方針 (.security_policy)
 * -------------------------------------------------- */

.security_policy {
  margin-top: 120px;
}

.security_policy__body {
  margin-top: 40px;
}

.security_policy__body p {
  font-size: 1.6rem;
  /* 16px相当 */
  font-weight: 400;
  color: #282828;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------
 * 7. アクセスマップ (.access_map)
 * -------------------------------------------------- */

/* 横いっぱいラッパー＆背景画像 */
.access_map {
  width: 100%;
  margin-top: 80px;
  padding-top: 40px;
  padding-bottom: 80px;
  background: url(../images2/pages2/bg_access.png) no-repeat center center / cover;
}

/* 見出しの文字色・縦線を白に変更 */
.c-section-header--white .c-section-title {
  color: #fff;
}

.c-section-header--white .c-section-title::after {
  background-color: #fff;
}

/* 2カラムレイアウト */
.access_map__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 40px;
}

/* 左カラム：テキスト説明エリア（可変） */
.access_map__text {
  flex: 1;
  /* ▼ 可読性向上のための背景＆調整 */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  padding: 10px;
}

.access_map__text p {
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.8;
  margin: 0;
}

/* 右カラム：マップ表示領域 */
.access_map__box {
  width: 72.5%;
  aspect-ratio: 870 / 460;
  background-color: #cccccc;
  border: 8px solid #fff;
  box-sizing: border-box;
}

/* ==================================================
 * レスポンシブ対応 (SP: 767px以下)
 * トップメッセージセクション (.top_message)
 * ================================================== */

@media screen and (max-width: 767px) {
  .c-section-header {
    padding: 0 10px;
  }

  .top_message {
    margin-top: 40px;
  }

  /* 1. c-heading-bg の薄い背景文字を画面横いっぱいの可変サイズに */
  .c-heading-bg {
    height: 8rem;
  }

  .c-heading-bg::before {
    left: 0;
    font-size: 13vw;
    /* 画面幅いっぱいに広がる可変サイズ */
    line-height: 0.8;
    margin-left: 24px;
  }

  .c-heading-bg__title {
    font-size: 2.8rem;
    transform: translateY(-130%);
    padding: 0 10px;
  }

  .c-heading-bg__icon {
    width: 24px;
  }

  /* 2. top_message__body 左右マージン追加 */
  .top_message__body {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
  }

  /* 3. SP用のプロフィールエリア自動折り返し */
  .top_message__profile {
    flex-direction: column;

    padding: 20px 10px 0;
  }

  .top_message__profile-img {
    flex: none;
    width: 100%;
    height: auto;
  }

  .top_message__profile-header {
    max-width: 100%;
    aspect-ratio: auto;
    padding: 15px 10px;
  }

  .top_message__profile-text {
    padding: 25px 15px;
  }

  /* 企業理念 */
  .c-philosophy {
    padding-top: 60px;
  }

  .philosophy__header {
    padding: 0 20px;
  }

  /* 背景をコンテンツの高さに合わせて引き延ばす */
  .c-philosophy__wrapper {
    height: auto;
    /* 背景画像がある場合は背景サイズを調整 */
    background-size: cover;
    background-position: center;
    /* 必要に応じてSP用の上下パディングを設定 */
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* 3カラムリストを縦並びに変更 */
  .c-philosophy__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 要素間の余白（gapまたはmarginで調整） */
    gap: 20px;
  }

  /* 各カード（リストアイテム）を横幅100%＆テキストに応じた可変に */
  .c-philosophy__item {
    width: 100%;
    height: auto;
  }

  /* 会社概要 */
  .c-company-overview {
    margin-top: 60px;
  }

  .c-company-overview__content {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* テーブル関連要素をブロック要素にして縦並び可能にする */
  .c-company-table,
  .c-company-table tbody,
  .c-company-table tr,
  .c-company-table th,
  .c-company-table td {
    display: block;
    width: 100%;
  }

  /* 行（tr）ごとの区切り余白 */
  .c-company-table tr {
    margin-bottom: 20px;
  }

  .c-company-table tr:last-child {
    margin-bottom: 0;
  }

  /* th（項目名）のスタイル設定 */
  .c-company-table th {
    padding-bottom: 4px;
    /* tdとの間の余白 */
    text-align: left;
    /* 必要に応じて背景色や下線などを追加 */
  }

  /* td（内容）のスタイル設定 */
  .c-company-table td {
    padding-top: 0;
    /* 下線などで区切りたい場合は border-bottom などを設定 */
  }

  .c-company-table th br {
    display: none;
  }

  /* セキュリティポリシー */
  .security_policy {
    margin-top: 60px;
  }

  .security_policy__body {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* アクセスマップ */
  .access_map {
    margin-top: 40px;
    padding-bottom: 40px;
  }

  /* 2カラムを包む親要素を縦並び化 */
  .access_map__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    /* 地図とテキストブロック間の余白 */
  }

  /* 枠組み（子要素）自体を幅100%にする */
  .access_map__text,
  .access_map__box {
    width: 100%;
  }

  /* テキスト側に左右の余白をつけたい場合 */
  .access_map__text {
    padding: 20px;
    box-sizing: border-box;
    /* パディングを含めて100%にする */
    /* ▼ 可読性向上のための背景＆調整 */
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
  }

  /* 中のテキスト要素（pタグなど）のマージンをリセット */
  .access_map__text>* {
    margin-left: 0;
    margin-right: 0;
  }

  /* Google Maps（iframe）などの高さ調整 */
  .access_map__box iframe {
    width: 100%;
    height: 300px;
    /* SPで見やすい高さに調整 */
  }

}

/* --------------------------------------------------
 *    コンプライアンスのページcompliance.html
 * -------------------------------------------------- */
.compliance {
  padding: 80px 0;
}

/* メイン見出し */
.compliance__main-title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #dedede;
  font-family: "Heisei Kaku Gothic Std", "平成角ゴシック", "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  letter-spacing: -0.03em;
}

.compliance__main-title::before {
  content: "";
  display: inline-block;
  width: 32px;
  /* アイコンの横幅 */
  height: 27px;
  /* アイコンの高さ */
  background-image: url("../images2/pages2/heading-icon.png");
  /* ※実際の画像パスに調整してください */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  /* アイコンが潰れるのを防ぐ */
}

.compliance__item {
  margin-top: 40px;
}

.compliance__item+.compliance__item {
  margin-top: 80px;
}

.compliance__text {
  margin-top: 40px;
}

.compliance__text p {
  margin-bottom: 1em;
}

.compliance__text p:last-child {
  margin-bottom: 0;
}

/* 灰色背景の小見出し */
.compliance__sub-title {
  font-size: 18px;
  /* 18pt相当 */
  font-weight: 700;
  background-color: #eeeeee;
  width: 100%;
  padding: 10px;
  /* 上・右・下・左 */
  box-sizing: border-box;
  margin-bottom: 20px;
  /* 本文との余白 */
}

.compliance__sub-content {
  margin-bottom: 40px;
  line-height: 1.8;
  padding-left: 10px;
}

/* 灰色背景の小見出し */
.compliance__sub-title {
  font-size: 18px;
  font-weight: 700;
  background-color: #eeeeee;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 20px;
}

.compliance__sub-title:first-child {
  margin-top: 0;
}

/* リスト形式（番号付き） */
.compliance__list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.compliance__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
  margin-bottom: 12px;
}

.compliance__list li:last-child {
  margin-bottom: 0;
}

/* カッコ番号（(1) など）の固定幅・装飾 */
.compliance__list-num {
  flex-shrink: 0;
  font-weight: 400;
}

/* 本文テキスト */
.compliance__list-text {
  flex: 1;
}

/*　レスポンシブ対応 */

@media screen and (max-width: 768px) {
  .compliance {
    padding: 40px 0;
  }

  .compliance__main-title {
    font-size: 2.4rem;
  }

}

/* --------------------------------------------------
 *     プライバシーポリシーのページ privacy.html
 * -------------------------------------------------- */
.privacy {
  padding: 80px 0;
}

/* 右寄せの日付 */
.privacy-date {
  text-align: right;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* メインテキスト */
.privacy-text {
  margin-bottom: 40px;
  /* 冗長な指定を1つに統合 */
  line-height: 1.6;
}

.privacy-text p {
  margin-bottom: 1em;
  /* pタグごとに1行分の余白 */
}

/* 最後のpタグの余白は打ち消す */
.privacy-text p:last-child {
  margin-bottom: 0;
}

/* 右寄せの署名 */
.privacy-signature {
  text-align: right;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 左寄せの窓口ボックス */
.privacy-contact {
  margin-top: 40px;
}

/* テーブル全体 */
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #222222;
  /* 全体枠線（黒） */
  margin-bottom: 40px;
}

/* ヘッダー（黒帯） */
.privacy-table th {
  background-color: #222222;
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  padding: 10px 16px;
}

/* セル */
.privacy-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #dedede;
  /* 内側の区切り線（グレー） */
  line-height: 1.6;
}

/* 一番下の行だけセル下線を消し、テーブル本体の黒枠を出す */
.privacy-table tr:last-child td {
  border-bottom: none;
}

/* 左列（分類）の文字強調と幅指定 */
.privacy-table td:first-child {
  font-weight: 700;
  width: 30%;
  /* 必要に応じて幅指定 */
  white-space: nowrap;
}

/* シンプルな横線のみのテーブル */
.privacy-simple-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #dedede;
  /* 上辺の線 */
  border-bottom: 1px solid #dedede;
  /* 下辺の線 */
  margin-bottom: 40px;
}

/* 共通のセル指定 */
.privacy-simple-table th,
.privacy-simple-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #dedede;
  /* 行間の区切り線 */
  line-height: 1.6;
  text-align: left;
}

/* 見出し列（左側） */
.privacy-simple-table th {
  font-weight: 700;
  white-space: nowrap;
  vertical-align: top;
  /* 上揃え */
  width: 35%;
  /* 必要に応じて調整してください */
}

/* データ列（右側） */
.privacy-simple-table td {
  font-weight: 400;
  vertical-align: top;
}

/* 最下行の重複する下線を消す */
.privacy-simple-table tr:last-child th,
.privacy-simple-table tr:last-child td {
  border-bottom: none;
}

.privacy__text__bottom {
  margin-bottom: 40px;
}

.privacy__margin__top {
  margin-top: 80px;
}


/* --------------------------------------------------
 * 1. 黒帯テーブル (.privacy-table)
 * -------------------------------------------------- */
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #222222;
  /* 全体枠線（黒） */
  margin-bottom: 40px;
}

/* ヘッダー（黒帯） */
.privacy-table th {
  background-color: #222222;
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  padding: 10px 16px;
}

/* セル */
.privacy-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #dedede;
  /* 内側の区切り線（グレー） */
  line-height: 1.6;
}

/* 一番下の行だけセル下線を消し、テーブル本体の黒枠を出す */
.privacy-table tr:last-child td {
  border-bottom: none;
}

/* 左列（分類）の文字強調と幅指定 */
.privacy-table td:first-child {
  font-weight: 700;
  width: 30%;
  /* 必要に応じて幅指定 */
  white-space: nowrap;
}


/* --------------------------------------------------
 * 2. シンプルテーブル (.privacy-simple-table)
 * -------------------------------------------------- */
.privacy-simple-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #dedede;
  /* 上辺の線 */
  border-bottom: 1px solid #dedede;
  /* 下辺の線 */
  margin-bottom: 40px;
}

/* 共通のセル指定 */
.privacy-simple-table th,
.privacy-simple-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #dedede;
  /* 行間の区切り線 */
  line-height: 1.6;
  text-align: left;
}

/* 見出し列（左側） */
.privacy-simple-table th {
  font-weight: 700;
  white-space: nowrap;
  vertical-align: top;
  /* 上揃え */
  width: 35%;
  /* 必要に応じて調整してください */
}

/* データ列（右側） */
.privacy-simple-table td {
  font-weight: 400;
  vertical-align: top;
}

/* 最下行の重複する下線を消す */
.privacy-simple-table tr:last-child th,
.privacy-simple-table tr:last-child td {
  border-bottom: none;
}

.privacy__text__bottom {
  margin-bottom: 40px;
}


/* ==========================================
 * スマホ対応（画面幅 768px 以下でどちらも縦並び）
 * ========================================== */
@media screen and (max-width: 768px) {

  .privacy {
    padding: 40px 0;
  }

  /* --- 1. 黒帯テーブルのスマホ対応 --- */
  /* ヘッダー（分類・利用目的）はスマホでは非表示 */
  .privacy-table thead {
    display: none;
  }

  .privacy-table,
  .privacy-table tbody,
  .privacy-table tr,
  .privacy-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 1項目（tr）ごとに内側の区切りを入れる */
  .privacy-table tr {
    border-bottom: 1px solid #dedede;
    padding: 12px 0;
  }

  .privacy-table tr:last-child {
    border-bottom: none;
  }

  .privacy-table td {
    border-bottom: none;
    padding: 0 16px;
  }

  /* 左列（分類名）の見出し表示 */
  .privacy-table td:first-child {
    font-size: 15px;
    padding-bottom: 4px;
    white-space: nowrap;
  }


  /* --- 2. シンプルテーブルのスマホ対応 --- */
  .privacy-simple-table,
  .privacy-simple-table tbody,
  .privacy-simple-table tr,
  .privacy-simple-table th,
  .privacy-simple-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 1項目（tr）ごとの区切り */
  .privacy-simple-table tr {
    border-bottom: 1px solid #dedede;
    padding: 12px 0;
  }

  .privacy-simple-table tr:last-child {
    border-bottom: none;
  }

  .privacy-simple-table th {
    padding: 0 16px 4px 16px;
    border-bottom: none;
    white-space: normal;
  }

  .privacy-simple-table td {
    padding: 0 16px;
    border-bottom: none;
  }
}

/* --------------------------------------------------
 *    リクルートのページ
 * -------------------------------------------------- */

/* ==========================================
 * トップメッセージセクション (subpage.css 末尾に追加)
 * ========================================== */

/* ==========================================
 * トップメッセージセクション (根本改修・自動伸縮版)
 * ========================================== */

/* セクション全体：上下のはみ出しを受け止める外枠 */
.recruit-top-message-section {
  width: 100%;
  position: relative;
  margin-top: 120px;
  padding-top: 50px;
  /* 見出しが上にはみ出る用の余白 */
  padding-bottom: 120px;
  /* 六角形画像が下に飛び出る用の余白 */
  box-sizing: border-box;
}

/* オレンジ背景エリア（高さ固定を廃止） */
.recruit-top-message-bg {
  width: 100%;
  position: relative;
  background-image: url("../images2/pages2/recruit-top-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 90px;
  /* 見出しと文章の被りを防ぐ内部余白 */
  padding-bottom: 80px;
  /* 下部テキストとボタンの被りを防ぐ内部余白 */
  box-sizing: border-box;
}

/* 1. 上に飛び出る見出し画像 */
.recruit-top-message-heading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -62%);
  /* 背景の上辺に引っかける */
  z-index: 10;
  text-align: center;
  margin: 0;
  width: 93.08vw;
  max-width: 1117px;
}

.recruit-top-message-heading img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. コンテンツエリア */
.recruit-top-message-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 左右カラムの上下中央揃え */
  width: 100%;
  position: relative;
}

/* 左カラム：絶対配置の基準枠 */
.recruit-top-message-image-col {
  width: 45%;
  min-height: 350px;
  /* テキストが少なくても最低限の高さを確保 */
}

/* 六角形画像：親枠や背景高さを無視して突き出させる */
.recruit-top-message-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  /* サブインナーの左外側へはみ出させる数値 */
  transform: translate(-100%, -40%);
  /* 上下中央からやや下寄りに配置 */
  width: 650px !important;
  /* カンプ原寸サイズ */
  max-width: none !important;
  /* 親幅による縮小制限を解除 */
  height: auto !important;
  z-index: 5;
  display: block;
}

/* 右カラム：テキストエリア（中央から右側に配置） */
.recruit-top-message-text-col {
  width: 50%;
  /* 中央から右端までの幅 */
  padding-left: 20px;
  /* 画像（中央線）との余白 */
  padding-right: 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 6;
  /* 画像より前面に表示 */
}

.recruit-top-message-body {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
}

.recruit-top-message-text-col p {
  margin-top: 0;
  margin-bottom: 1.2em;
}

.recruit-top-message-text-col p:last-child {
  margin-bottom: 0;
}

/* PC側で設定されている固定幅(400px)と90%制限をリセット */
.recruit-top-message-btn {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 47%;
  transform: translate(-50%, 55%);
  display: block;
  width: 100%;
  /*幅いっぱいに広げる */
  max-width: 100%;
  margin: 0 auto;
}

/* ==================================================
 * 研修制度セクション (.recruit-training)
 * ================================================== */

.recruit-training {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-top: 120px;
}

/* 右側の装飾背景画像（全体2000pxの右端固定・幅600px×高さ1180px） */
.recruit-training-bg {
  position: absolute;
  bottom: 0;
  right: calc(50% - 1000px);
  /* 2000px幅デザインの右端に固定 */
  width: 600px;
  height: 1180px;
  background: url('../images2/pages2/recruit-training-bg.png') no-repeat center center / cover;
  z-index: 1;
  pointer-events: none;
}

/* メインコンテンツエリア（幅810px / 1カラム） */
.recruit-training-content {
  position: relative;
  z-index: 2;
  width: 810px;
  max-width: 100%;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* ボックス同士の縦間隔 */
}

/* 研修ボックス（横並びレイアウト） */
.recruit-training-box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  /* 左写真と右テキストの間の余白 */
  width: 100%;
}

/* 左カラム：画像枠 */
.recruit-training-box__img {
  flex-shrink: 0;
  width: 280px;
  /* デザイン上の写真幅に合わせて微調整可能 */
}

.recruit-training-box__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右カラム：テキスト情報 */
.recruit-training-box__body {
  flex-grow: 1;
}

.recruit-training-box__title {
  font-size: 2.4rem;
  /* 24px */
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #282828;
  /* 見出し下の線 */
}

.recruit-training-box__text {
  font-size: 1.6rem;
  /* 16px */
  font-weight: 400;
  color: #282828;
  line-height: 1.7;
  margin: 0;
}


/* ==================================================
 * 働き方セクション (.recruit-workstyle)
 * ================================================== */

.recruit-workstyle {
  padding-top: 120px;
  width: 100%;
  box-sizing: border-box;
}

/* 4カラム横並びエリア（コンテンツ幅1200pxにピッタリ納める） */
.recruit-workstyle-list {
  display: flex;
  justify-content: space-between;
  /* 両端ピッタリ＆間隔自動調整 */
  align-items: flex-start;
  margin-top: 40px;
  /* 見出し下線から上ボックスまでの距離 */
  width: 100%;
  box-sizing: border-box;
}

/* 各カード（幅280px × 高さ148px 固定） */
.recruit-workstyle-card {
  width: 280px;
  height: 148px;
  position: relative;
  box-sizing: border-box;
  padding-left: 0;
  /* ★ 全体のパディングを0にして見出し帯との隙間を消す */
  padding-top: 0;
  border-left: 4px solid #ffa300;
  /* 左側の黄色枠線 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ジグザグ：下の位置にするカード */
.recruit-workstyle-card--down {
  margin-top: 40px;
  /* 上の位置よりさらに40px下へ */
}

/* カード上部の黄色見出し帯（左枠線にぴったりくっつける） */
.recruit-workstyle-card__label {
  background: linear-gradient(90deg, #ffa300 0%, #ffdb4c 100%);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 6px 12px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.2;
}

/* カード内部（アイコン＋数値：見出し帯の下の領域で上下左右中央寄せ） */
.recruit-workstyle-card__body {
  flex: 1;
  /* 見出し帯の下の残りの高さをすべて占有 */
  display: flex;
  align-items: center;
  /* 上下中央寄せ */
  justify-content: center;
  /* 左右中央寄せ */
  gap: 16px;
  padding-left: 12px;
  /* 左枠線からの最低限の離隔用 */
  box-sizing: border-box;
}

/* アイコン画像枠 */
.recruit-workstyle-card__icon {
  flex-shrink: 0;

  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-workstyle-card__icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* 数値と単位 */
.recruit-workstyle-card__val {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.recruit-workstyle-card__num {
  font-size: 4.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  font-family: "Arial", sans-serif;
}

.recruit-workstyle-card__unit {
  font-size: 2.4rem;
  font-weight: 700;
  color: #ff9900;
  line-height: 1;
}

/* 注記テキスト（3番目のボックス用：中央寄せ配置） */
.recruit-workstyle-card__note {
  font-size: 1.4rem;
  color: #ff9900;
  line-height: 1.4;
  text-align: center;
  /* ★ テキスト中央寄せ */
  width: 100%;
  margin-top: -8px;
  /* 上下のバランス調整（必要に応じて微調整してください） */
  padding-bottom: 12px;
  box-sizing: border-box;
}

/* ==================================================
 * 環境セクション (.recruit-environment)
 * ================================================== */

.recruit-environment {
  margin-top: 120px;
  width: 100%;
  box-sizing: border-box;
}

/* 3×2のグリッド配置（幅380px×3 + ギャップ30px×2 = 1200px） */
.recruit-environment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* ボックス間のギャップ 30px */
  margin-top: 40px;
  /* 見出し下線から40px下 */
  width: 100%;
  box-sizing: border-box;
}

/* 各カード（幅380px × 高さ280px 固定 / 背景画像を右下に固定） */
.recruit-environment-card {
  width: 380px;
  height: 280px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-position: right bottom;
  /* 右下に配置 */
  background-size: auto;
  /* サイズ調整が必要な場合はcontainや数値で調整 */
}

/* --------------------------------------------------
 * カラーバリエーション（青系・オレンジ系）
 * -------------------------------------------------- */

/* 上段：青系 */
.recruit-environment-card--blue {
  border-left: 4px solid #6f5fcc;
  /* 左縦線 */
}

.recruit-environment-card--blue .recruit-environment-card__label {
  background: linear-gradient(90deg, #6f5fcc 0%, #8dc5e4 100%);
}

/* 下段：オレンジ系 */
.recruit-environment-card--orange {
  border-left: 4px solid #ffa300;
  /* 左縦線 */
}

.recruit-environment-card--orange .recruit-environment-card__label {
  background: linear-gradient(90deg, #ffa300 0%, #ff7a4c 100%);
}

/* --------------------------------------------------
 * 個別背景画像の設定
 * -------------------------------------------------- */
.recruit-environment-card--env01 {
  background-image: url('../images2/pages2/env-icon01.png');
}

.recruit-environment-card--env02 {
  background-image: url('../images2/pages2/env-icon02.png');
}

.recruit-environment-card--env03 {
  background-image: url('../images2/pages2/env-icon03.png');
}

.recruit-environment-card--env04 {
  background-image: url('../images2/pages2/env-icon04.png');
}

.recruit-environment-card--env05 {
  background-image: url('../images2/pages2/env-icon05.png');
}

.recruit-environment-card--env06 {
  background-image: url('../images2/pages2/env-icon06.png');
}

/* --------------------------------------------------
 * カード内部構造
 * -------------------------------------------------- */

/* 見出し帯（文字サイズ 18px / 幅100%） */
.recruit-environment-card__label {
  color: #ffffff;
  font-size: 1.8rem;
  /* 18px */
  font-weight: 700;
  padding: 6px 16px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.3;
}

/* メイン本文エリア */
.recruit-environment-card__body {
  flex: 1;
  padding: 30px;
  box-sizing: border-box;
}

/* 本文テキスト（文字サイズ 16px） */
.recruit-environment-card__text {
  font-size: 1.6rem;
  /* 16px */
  color: #282828;
  line-height: 1.7;
  margin: 0;
}

.recruit-blog {
  margin-top: 120px;
}

/* ==================================================
 * レスポンシブ対応（767px以下）
 * ================================================== */
@media screen and (max-width: 767px) {
  .recruit-blog {
    margin-top: 60px;
  }

  /* 画面全体の左右にパディングを確保（左右20px） */
  .sub-inner {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* --------------------------------------------------
   * 見出し装飾（位置の調整と折り返し防止のみ）
   * -------------------------------------------------- */
  .c-heading-bg,
  .c-heading-bg::before,
  .c-heading-bg::after {
    white-space: nowrap !important;
    /* 改行を防止 */
    overflow: hidden;
  }

  /* 環境セクションの背景英字のフォントサイズ調整 */
  .recruit-environment .c-heading-bg::before {
    letter-spacing: -0.1em;
    /* マイナス値で横幅を縮小（数値で詰まり具合を調整） */
    white-space: nowrap;
  }

  /* --------------------------------------------------
 * トップメッセージセクション（SP）
 * -------------------------------------------------- */

  .recruit-top-message-section {
    padding-top: 30px;
    margin-top: 0px;
    padding-bottom: 50px;
    /* 下へ突き出るボタンを受け止める */
  }

  /* 背景領域：高さ可変 */
  .recruit-top-message-bg {
    height: auto;
    padding-top: 30px;
    /* PC版(90px)から縮小 */
    padding-bottom: 50px;
    position: relative;
  }

  .recruit-top-message-bg>.sub-inner {
    padding-top: 0px;
  }

  /* 見出し画像：画面幅に追従 */
  .recruit-top-message-heading {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98vw;
  }

  /* コンテンツエリア：floatレイアウト用にflex解除 */
  .recruit-top-message-content {
    display: block;
  }

  /* 左カラム：画像の絶対配置の基準枠（高さ確保） */
  .recruit-top-message-image-col {
    float: left;
    width: 40%;
    min-height: 250px;
    /* 画像の高さに合わせて調整 */
    position: relative;
    padding-right: 16px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  /* 六角形画像：さらに拡大して左側（画面外）へ大きくはみ出させる */
  .recruit-top-message-photo {
    position: absolute;
    top: 50%;
    right: 0;
    /* 右端を左カラムの右端に固定 */
    left: auto;
    width: 220% !important;
    /* 幅を大きく拡大 */
    max-width: none !important;
    height: auto !important;
    transform: translateY(-50%);
    /* 基準枠に対して上下中央揃え */
  }

  /* 右カラム：全体幅に広げて画像右〜下へテキストを配置 */
  .recruit-top-message-text-col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }


  /* float解除 */
  .recruit-top-message-text-col::after {
    content: "";
    display: block;
    clear: both;
  }

  .recruit-top-message-body {
    font-size: 1.4rem;
  }

  /* ボタン：背景の下枠に引っかける（半分下へ突き出させる） */
  .recruit-top-message-btn {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, 50%);
    display: block;
    clear: both;
    margin: 0 auto;
  }


  /* --------------------------------------------------
   * 研修制度セクション
   * -------------------------------------------------- */
  .recruit-training {
    padding-top: 60px;
    /* 上余白の調整 */
  }

  /* スマホでは装飾用の背景画像を非表示 */
  .recruit-training-bg {
    display: none;
  }

  /* コンテンツ幅（810px固定）を解除して100%に */
  .recruit-training-content {
    width: 100%;
    margin-top: 30px;
    gap: 40px;
    /* ボックスごとの間隔 */
  }

  /* カード要素：写真とテキストを縦並びに切り替え */
  .recruit-training-box {
    flex-direction: column;
    gap: 16px;
    /* 写真とタイトル・本文の間の余白 */
  }

  /* 写真枠：100%に広げる */
  .recruit-training-box__img {
    width: 100%;
  }

  /* 見出し文字サイズの調整 */
  .recruit-training-box__title {
    font-size: 1.6rem;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .recruit-training-box__text {
    font-size: 1.4rem;

  }

  /* --------------------------------------------------
   * 働き方セクション
   * -------------------------------------------------- */
  .recruit-workstyle {
    padding-top: 60px;
  }

  /* 縦並び（1カラム）に変更 */
  .recruit-workstyle-list {
    flex-direction: column;
    gap: 20px;
    /* カード同士の間隔 */
    margin-top: 30px;
  }

  /* カード幅を100%にし、高さを自動調整 */
  .recruit-workstyle-card {
    width: 100%;
    height: auto;
    min-height: 140px;
    /* 高さを確保しつつ可変に */
  }

  /* ジグザグ用のマージンを解除してまっすぐ整列 */
  .recruit-workstyle-card--down {
    margin-top: 0;
  }

  /* 数値表示の微調整（スマホ向けサイズ感） */
  .recruit-workstyle-card__num {
    font-size: 4.0rem;
  }

  .recruit-workstyle-card__unit {
    font-size: 2.0rem;
  }

  /* --------------------------------------------------
   * 環境セクション (.recruit-environment)
   * -------------------------------------------------- */
  .recruit-environment {
    margin-top: 60px;
  }

  /* スマホでも2カラムを維持 */
  .recruit-environment-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    /* カード同士の間隔 */
    margin-top: 30px;
  }

  /* 各カード：2カラム・高さ可変 */
  .recruit-environment-card {
    width: calc((100% - 20px) / 2);
    height: auto;
    min-height: 200px;
    /* 最低の高さを確保 */
  }

  /* カード内部パディングの微調整 */
  .recruit-environment-card__body {
    padding: 20px;
  }

  .recruit-environment-card__label {
    font-size: 1.6rem;
  }

  .recruit-environment-card__text {
    font-size: 1.4rem;
  }

  /* --------------------------------------------------
   * 最下部固定 採用ボタンバー (.fixed-recruit-bar) スマホ調整
   * -------------------------------------------------- */
  /* スペーサーの高さ調整 */
  .fixed-recruit-spacer {
    height: 80px;
  }

  /* バー全体の上下パディング縮小 */
  .fixed-recruit-bar {
    padding: 20px 0;
  }

  /* ボタン同士の間隔 */
  .fixed-recruit-bar__inner {
    gap: 10px;
  }

  /* ボタン本体（高さ・パディング縮小） */
  .fixed-recruit-btn {
    height: 48px;
    padding: 0 28px 0 12px;
    /* 右側は矢印用のスペースを確保 */
  }

  /* ボタンテキストの縮小 */
  .fixed-recruit-btn__label {
    font-size: 1.6rem;
  }

  /* 矢印アイコンの位置調整 */
  .fixed-recruit-btn::after {
    right: 10px;
    width: 7px;
    height: 8px;
  }
}



/* ==================================================
 * 先輩社員インタビュー一覧 (interview.html)
 * ================================================== */
.interview-list-section {
  padding: 80px 0;
}

.interview-list-container {
  width: 100%;
}

/* タブレット幅では、カード一覧と画面端の間に余白を確保 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .interview-list-container {
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }
}

/* 親リスト：3列均等配置（Grid指定で自動計算） */
.interview-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1200px幅を3等分（隙間を差し引いた幅：360px） */
  gap: 60px 60px;
  /* 上下60px、左右60px */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==================================================
 * カードコンポーネント（共通・可変設計）
 * ================================================== */

/* 親要素（単なるレイアウト上の配置枠） */
.interview-card {
  width: 100%;
  container-type: inline-size;
}

/* カード本体（枠・サイズ・アニメーションをここに集約） */
.interview-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 360 / 400;
  border: 2px solid #282828;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  /* ホバーアニメーションを滑らかにする */
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* ★ホバー時：枠ごとカード全体が浮き上がり明るくなる */
.interview-card__link:hover {
  transform: translateY(-8px);
  filter: brightness(1.08);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  /* 浮遊感を強調する影（お好みで） */
}

/* ボックス見出し */
.interview-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 10.5%;
  flex-shrink: 0;
  background: linear-gradient(-60deg, #282828 0, #282828 24.44cqi, transparent 19.58cqi),
    linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
  box-sizing: border-box;
  padding: 0 clamp(8px, 3.33cqi, 12px);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

/* 部署名テキスト */
.interview-card__dept {
  color: #000000;
  font-size: clamp(14px, 6.67cqi, 24px);
}

/* 社員イニシャルテキスト */
.interview-card__name {
  color: #ffffff;
  font-size: clamp(14px, 6.67cqi, 24px);
  text-align: right;
  min-width: clamp(40px, 16.67cqi, 60px);
  font-weight: 700;
}

/* 画像表示領域 */
.interview-card__image-wrapper {
  width: 100%;
  height: 89.5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

/* 画像本体 */
.interview-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================================================
 * SP対応 (767px以下)
 * ================================================== */
@media screen and (max-width: 767px) {
  .interview-list-section {
    padding: 40px 0;
  }

  /* 親リスト：1列並び */
  .interview-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 見出し帯のパディング・文字サイズ調整 */
  .interview-card__header {
    padding: 0 8px;
    height: 13%;
    background: linear-gradient(-60deg, #282828 0px, #282828 29%, transparent 29%),
      linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
  }

  .interview-card__dept,
  .interview-card__name {
    font-size: clamp(14px, 2.7cqi, 18px);
  }

  .interview-card__name {
    min-width: 40px;
  }

}


/* ==================================================
 * 先輩社員インタビュー詳細 (interview-01.html)
 * ================================================== */

.interview-single-hero {
  margin-top: 80px;
}

/* 1200px以下ではインタビュー詳細のコンテンツに左右余白を確保 */
@media screen and (max-width: 1200px) {
  .interview-single-hero > .wrapper-L,
  .interview-single-hero > .sub-inner,
  .interview-single-body > .sub-inner,
  .interview-other-section > .sub-inner {
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }
}

/* 2カラムレイアウト */
.interview-single-profile {
  display: flex;
  align-items: flex-start;
  margin-top: 40px;
  gap: 4.1667%;
  /* 50px ÷ 1200px ≒ 4.1667% */
}

/* 左カラム：人物画像（340px ÷ 1200px ≒ 28.3333%） */
.interview-single-profile__image-wrapper {
  width: 28.3333%;
  aspect-ratio: 1 / 1;
  /* 1:1の正方形を維持 */
  flex-shrink: 0;
}

.interview-single-profile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右カラム：人物詳細ボックス（残り幅を占有・画像と同じ正方形比率の高さを維持） */
.interview-single-profile__info {
  flex: 1;
  aspect-ratio: 810 / 340;
  /* 横幅810px : 高さ340px の比率を常に維持 */
  border: 1px solid #282828;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 帯見出し：幅をボックスの50%に設定 */
.interview-single-profile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  /* 幅を50%に変更 */
  height: 42px;
  flex-shrink: 0;
  background: linear-gradient(-60deg, #282828 0px, #282828 88px, transparent 70.5px),
    linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

/* タブレット幅では部署名の折り返しを防ぐため、帯を詳細ボックス全幅にする */
@media screen and (max-width: 950px) {
  .interview-single-profile__header {
    width: 100%;
  }
}

/* 社員イニシャルテキスト */
.interview-single-profile__name {
  color: #ffffff;
  font-size: 2.4rem;
  text-align: right;
  min-width: 60px;
  font-weight: 700;
}

/* 人物詳細本文エリア */
.interview-single-profile__body {
  flex: 1;
  padding: 40px;
  box-sizing: border-box;
  font-size: 1.6rem;
}

/* インタビュー本文セクション (interview-01.html) */

.interview-single-body {
  padding: 80px 0;
}

/* 共通の見出しスタイリング（下線付き） */
.interview-single-body__heading {
  display: flex;
  align-items: flex-start;
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  padding-bottom: 12px;
  border-bottom: 1px solid #cccccc;
  margin: 0;
}

/* 左側の「―」ダッシュ */
.interview-single-body__heading::before {
  content: "――";
  color: #cccccc;
  margin-right: 0.5em;
  font-weight: 400;
  flex-shrink: 0;
}

/* 本文エリア共通 */
.interview-single-body__text {
  margin-top: 24px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
}

/* 各段落ブロックの共通マージン（段落間の余白） */
.interview-single-body__block {
  margin-bottom: 60px;
}

.interview-single-body__block:last-child {
  margin-bottom: 0;
}

/* 第1・第3段落（幅 820px / 1200px ≒ 68.3333%） */
.interview-single-body__block--type1 {
  width: 68.3333%;
}

/* 第2段落の横並びコンテナ */
.interview-single-body__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

/* 第2段落ブロック（幅 650px / 1200px ≒ 54.1667%） */
.interview-single-body__block--type2 {
  width: 54.1667%;
  margin-bottom: 0;
}

/* 第2段落の写真エリア（幅 400px / 1200px ≒ 33.3333%、アスペクト比4:3） */
.interview-single-body__image-wrapper {
  width: 33.3333%;
  aspect-ratio: 400 / 300;
  flex-shrink: 0;
}

.interview-single-body__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================================================
 * 先輩社員の声（4列レイアウト） ※PC固定
 * ================================================== */

.interview-other-section {
  margin-top: 120px;
  padding-bottom: 80px;
}

.interview-other-container {
  margin-top: 40px;
}

/* 4列均等配置（1200px幅を4分割） */
.interview-other-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 4列表示に伴う帯部分のフォントサイズ・背景調整 */
.interview-other-list .interview-card__header {
  height: 38px;
  background: linear-gradient(-60deg, #282828 0px, #282828 65px, transparent 52px),
    linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
}

.interview-other-list .interview-card__dept,
.interview-other-list .interview-card__name {
  font-size: 1.6rem;
}

.interview-other-list .interview-card__image-wrapper {
  height: calc(100% - 38px);
}

/* 1000px以下では部署名が折り返さないよう、カードを3列にする */
@media screen and (max-width: 1000px) {
  .interview-other-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==================================================
 * SP対応（767px以下）
 * ================================================== */
@media screen and (max-width: 767px) {

  .interview-single-hero {
    margin-top: 40px;
  }

  /* 1カラム化 */
  .interview-single-profile {
    flex-direction: column;
    align-items: center;
    /* 画像を中央寄せ */
    gap: 20px;
  }

  /* 人物画像：幅50% */
  .interview-single-profile__image-wrapper {
    width: 50%;
  }

  /* 人物詳細ボックス：幅100%・アスペクト比固定を解除 */
  .interview-single-profile__info {
    width: 100%;
    aspect-ratio: auto;
  }

  /* 帯見出し：幅100% */
  .interview-single-profile__header {
    width: 100%;

  }

  /* 本文質問見出しの文字サイズ */
  .interview-single-body__heading {
    font-size: 1.8rem;
  }

  /* 第1段落・第3段落の幅を100%に */
  .interview-single-body__block--type1 {
    width: 100%;
  }

  /* 第2段落のコンテナを縦並びに */
  .interview-single-body__row {
    flex-direction: column;
    gap: 24px;
  }

  /* 第2段落ブロックの幅を100%に */
  .interview-single-body__block--type2 {
    width: 100%;
  }

  /* 第2段落の写真をブロック下に配置し幅100%に */
  .interview-single-body__image-wrapper {
    width: 100%;
  }

  .interview-other-container {
    margin-top: 24px;
  }

  .interview-other-container {
    margin-top: 24px;
  }

  /* スマホでは2列並びにする */
  .interview-other-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }

  /* SP時の帯部分の調整（高さ・文字サイズ） */
  .interview-other-list .interview-card__header {
    padding: 0 8px;
    height: 13%;
    background: linear-gradient(-60deg, #282828 0px, #282828 29%, transparent 29%),
      linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
  }

  .interview-other-list .interview-card__dept,
  .interview-other-list .interview-card__name {
    font-size: 1.3rem;
  }

  .interview-other-list .interview-card__image-wrapper {
    height: 87%;
  }

  .interview-other-section {
    margin-top: 30px;
    padding-bottom: 40px;
  }
}

/* ==================================================
 * 新卒採用 (newgrads.html)
 * ================================================== */

/* メイン要素（上下余白80px） */
.newgrads-main {
  padding: 80px 0;
}

/* 背景文字なし専用の見出し調整（文字の下20pxに下線） */
.c-heading-bg--no-bg {
  height: auto;
  padding-bottom: 20px;
}

.c-heading-bg--no-bg::before {
  display: none;
}

.c-heading-bg--no-bg .c-heading-bg__title {
  position: static;
  transform: none;
}

/* 募集要項セクション */
.newgrads-requirements {
  margin-top: 80px;
}

/* 2つ目以降の募集要項セクションの余白（120px） */
.newgrads-requirements+.newgrads-requirements {
  margin-top: 120px;
}

/* 募集要項テーブル */
.newgrads-requirements__table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
}

.newgrads-requirements__table tr {
  border-bottom: 1px solid #dedede;
}

.newgrads-requirements__table th,
.newgrads-requirements__table td {
  padding: 24px 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
  vertical-align: top;
  text-align: left;
}

.newgrads-requirements__table th {
  width: 240px;
  font-weight: 700;
  padding-right: 20px;
}

.newgrads-requirements__table td {
  font-weight: 400;
}

/* テーブル内リストスタイル */
.newgrads-requirements__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.newgrads-requirements__list li {
  position: relative;
  padding-left: 1.2em;
}

.newgrads-requirements__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 行頭の中黒（・）が不要なリスト用 */
.newgrads-requirements__list--none li {
  padding-left: 0;
}

.newgrads-requirements__list--none li::before {
  content: none;
}

/* ボタン配置エリア */
.newgrads-requirements__btn-wrapper {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

/* ==================================================
 * SP対応（768px以下）
 * ================================================== */
@media screen and (max-width: 768px) {

  /* メイン上下余白の調整 */
  .newgrads-main {
    padding: 40px 0;
  }


  /* セクション余白の調整 */
  .newgrads-requirements {
    margin-top: 40px;
  }

  .newgrads-requirements+.newgrads-requirements {
    margin-top: 60px;
  }

  /* テーブル要素を縦並びに変更 */
  .newgrads-requirements__table,
  .newgrads-requirements__table tbody,
  .newgrads-requirements__table tr,
  .newgrads-requirements__table th,
  .newgrads-requirements__table td {
    display: block;
    width: 100%;
  }

  .newgrads-requirements__table {

    margin-top: 24px;

  }


  .newgrads-requirements__table tr {
    padding: 16px 0;
  }

  .newgrads-requirements__table th {
    width: 100%;
    padding: 0 0 8px 0;
    font-size: 1.5rem;
  }

  .newgrads-requirements__table td {
    padding: 0;
    font-size: 1.4rem;
  }

  /* ボタン配置エリア（親div） */
  .newgrads-requirements__btn-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 親要素自体のサイズを指定したい場合（例） */
    width: 360px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 親divの中にあるaタグを親のサイズいっぱいに広げる */
  .newgrads-requirements__btn-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }
}

/* ==================================================
 * 中途採用 (midcareer.html)
 * ================================================== */

/* メイン要素（上部余白80px） */
.midcareer-main {
  padding: 80px 0;
}

/* 募集要項セクション */
.midcareer-requirements {
  margin-top: 80px;
}

/* 2つ目以降の募集要項セクションの余白（120px） */
.midcareer-requirements+.midcareer-requirements {
  margin-top: 120px;
}

/* 募集要項テーブル */
.midcareer-requirements__table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
}

.midcareer-requirements__table tr {
  border-bottom: 1px solid #dedede;
}

.midcareer-requirements__table th,
.midcareer-requirements__table td {
  padding: 24px 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
  vertical-align: top;
  text-align: left;
}

.midcareer-requirements__table th {
  width: 240px;
  font-weight: 700;
  padding-right: 20px;
}

.midcareer-requirements__table td {
  font-weight: 400;
}

/* テーブル内リストスタイル */
.midcareer-requirements__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.midcareer-requirements__list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
}

.midcareer-requirements__list li:last-child {
  margin-bottom: 0;
}

.midcareer-requirements__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 行頭の中黒（・）が不要なリスト用 */
.midcareer-requirements__list--none li {
  padding-left: 0;
}

.midcareer-requirements__list--none li::before {
  content: none;
}

/* ボタン配置エリア */
.midcareer-requirements__btn-wrapper {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

/* ==================================================
 * SP対応（768px以下）
 * ================================================== */
@media screen and (max-width: 768px) {

  /* メイン上下余白の調整 */
  .midcareer-main {
    padding: 40px 0;
  }

  /* セクション余白の調整 */
  .midcareer-requirements {
    margin-top: 40px;
  }

  .midcareer-requirements+.midcareer-requirements {
    margin-top: 60px;
  }

  .midcareer-requirements__table {

    margin-top: 24px;
  }

  /* テーブル要素を縦並びに変更 */
  .midcareer-requirements__table,
  .midcareer-requirements__table tbody,
  .midcareer-requirements__table tr,
  .midcareer-requirements__table th,
  .midcareer-requirements__table td {
    display: block;
    width: 100%;
  }

  .midcareer-requirements__table tr {
    padding: 16px 0;
  }

  .midcareer-requirements__table th {
    width: 100%;
    padding: 0 0 8px 0;
    font-size: 1.5rem;
  }

  .midcareer-requirements__table td {
    padding: 0;
    font-size: 1.4rem;
  }

  /* ボタン配置エリアの余白調整 */
  .midcareer-requirements__btn-wrapper {
    margin-top: 24px;
  }
}

/* ==================================================
 * 情報セキュリティ方針 (security.html)
 * ================================================== */

/* メイン要素（上部余白80px） */
.security-main {
  padding: 80px 0;
}

/* コンテンツコンテナ */
.security-content {
  margin-top: 60px;
}

/* 右寄せ 署名エリア */
.security-meta {
  text-align: right;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
  margin-bottom: 40px;
}

/* 本文エリア */
.security-text {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
}

.security-text p {
  margin-bottom: 24px;
}

.security-text p:last-child {
  margin-bottom: 0;
}

/* チェックマーク箇条書き */
.security-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}

.security-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #282828;
  margin-bottom: 16px;
}

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

.security-list__icon {
  width: 20px;
  height: auto;
  flex-shrink: 0;
}

/* 以上 */
.security-end {
  margin-top: 40px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
}

/* ==================================================
 * SP対応（768px以下）
 * ================================================== */
@media screen and (max-width: 768px) {

  /* メイン上下余白の調整 */
  .security-main {
    padding: 40px 0;
  }

  /* コンテンツ上部余白の調整 */
  .security-content {
    margin-top: 32px;
  }

  /* 署名エリア（スマホでは左寄せで折り返しやすく調整） */
  .security-meta {
    text-align: left;
    font-size: 1.4rem;
    margin-bottom: 24px;
  }

  /* 本文テキストのフォントサイズ調整 */
  .security-text {
    font-size: 1.4rem;
  }

  .security-text p {
    margin-bottom: 16px;
  }

  /* リスト部分の調整（複数行時にチェックマークが先頭行の上に来るよう調整） */
  .security-list {
    margin-top: 24px;
  }

  .security-list li {
    align-items: flex-start;
    font-size: 1.4rem;
    gap: 8px;
    margin-bottom: 12px;
  }

  .security-list__icon {
    width: 18px;
    margin-top: 2px;
    /* 1行目のテキストと上下位置を合わせる調整 */
  }

  /* 以上の余白調整 */
  .security-end {
    margin-top: 24px;
    font-size: 1.4rem;
  }
}

/* ==================================================
 * エントリーフォーム (entry_form.html)
 * ================================================== */

.entry-main {
  padding: 80px 0;
}

.entry-content {
  margin-top: 40px;
}

.entry-lead {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
}

/* 必須項目の注意書きエリア */
.entry-notice {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.entry-notice__text {
  font-size: 1.6rem;
  color: #282828;
  margin: 0;
}

/* 必須バッジ（幅48px、高さ28px、角丸4px） */
.entry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  background-color: #ed5f00;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1;
  flex-shrink: 0;
}

/* フォームリスト全体（上下のボーダー） */
.entry-list {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

/* 各項目のブロック（Flexbox） */
.entry-item {
  display: flex;
  align-items: center;
  /* 見出しと入力欄を上下中央揃え */
  padding: 24px 0;
  border-bottom: 1px solid #dedede;
}

.entry-item:last-child {
  border-bottom: none;
}

/* 項目名（左側） */
.entry-item__head {
  width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.entry-item__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
}

/* 入力欄側（右側） */
.entry-item__body {
  flex-grow: 1;
}

/* 入力フィールド共通スタイル */
.entry-item input[type="text"],
.entry-item input[type="email"],
.entry-item input[type="tel"],
.entry-item select,
.entry-item textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.6rem;
  color: #282828;
  background-color: #ffffff;
  border: 1px solid #dedede;
  box-sizing: border-box;
  outline: none;
}

.entry-item input:focus,
.entry-item select:focus,
.entry-item textarea:focus {
  border-color: #282828;
}

/* プレースホルダーの色指定 */
.entry-item input::placeholder,
.entry-item textarea::placeholder {
  color: #b5b5b5;
}

/* プルダウン（セレクトボックス）のスタイル調整 */
.entry-select-wrap {
  position: relative;
  width: 100%;
}

.entry-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23282828' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

/* プルダウンの幅指定 */
.entry-item .entry-select-wrap select {
  width: auto;
  min-width: 160px;
}

/* 必須バッジと項目名、追加テキストの配置と行頭揃えの調整 */
.entry-item__head--has-note {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
}

/* 必須バッジは1行目の左側 */
.entry-item__head--has-note .entry-badge {
  grid-column: 1;
  grid-row: 1;
}

/* 項目名は1行目の右側（バッジの右隣） */
.entry-item__head--has-note .entry-item__label {
  grid-column: 2;
  grid-row: 1;
}

/* 追加テキストは2行目に配置し、項目名の左端（2列目）から開始して行頭を揃える */
.entry-item__note {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.4rem;
  color: #282828;
  font-weight: 400;
}

/* 必須バッジと項目名、追加テキストの配置調整 */
.entry-item__head--has-note {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
}

/* 必須バッジは1行目の左側 */
.entry-item__head--has-note .entry-badge {
  grid-column: 1;
  grid-row: 1;
}

/* 項目名は1行目の右側（バッジの右隣） */
.entry-item__head--has-note .entry-item__label {
  grid-column: 2;
  grid-row: 1;
}

/* 追加テキストは2行目（項目名の左端から開始） */
.entry-item__note {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.4rem;
  color: #282828;
  font-weight: 400;
}

/* 見出しと入力欄を上端に揃える項目 */
.entry-item--top,
.entry-item--top .entry-item__head {
  align-items: flex-start;
}

.privacy-section {
  padding-top: 40px;
}

.privacy-section h2 {
  font-size: 2.4rem;
  font-weight: 700;

}

.privacy-body {
  font-size: 1.6rem;
  padding-top: 40px;
  line-height: 1.8;
}

.privacy-body p strong {
  font-weight: 700;
}

.privacy-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
}

.privacy-check strong {
  font-weight: 700;
}

.privacy-check label {
  font-size: 1.6rem;
  cursor: pointer;
  /* カーソルをポインターにして押しやすくする */
}

.privacy-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #f37b1d;
  cursor: pointer;
}

.privacy-submit {
  padding-top: 60px;
}

.submit-btn {
  margin: 0 auto;
  height: 7.1rem;
  padding: 1rem 3rem;
  width: 49rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 0.8rem;
  background: #282828 url(../images2/pages2/icon-arrow-white.png) no-repeat right 1.3rem center/0.9rem;
  transition: transform 0.3s ease;
}

.submit-btn:hover {
  transform: scale(1.03);
}

/* ==================================================
 * スマホ対応 (767px以下)
 * ================================================== */
@media screen and (max-width: 767px) {

  /* --------------------------------------------------
   * インナー・小型見出しのSP調整
   * -------------------------------------------------- */
  .sub-inner {
    padding-left: 20px;
    padding-right: 20px;
  }


  /* --------------------------------------------------
   * エントリーフォーム SPレイアウト
   * -------------------------------------------------- */
  .entry-main {
    padding: 40px 0;
  }

  .entry-content {
    margin-top: 24px;
  }

  .entry-lead {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  /* 必須項目の注意書きエリア */
  .entry-notice {
    margin-top: 32px;
    margin-bottom: 24px;
  }

  .entry-notice__text {
    font-size: 1.4rem;
  }

  /* 各項目のブロック：見出しと入力欄をタテ並びにする */
  .entry-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
  }

  /* 項目名（上側） */
  .entry-item__head {
    width: 100%;
    margin-bottom: 12px;
  }

  /* 入力欄（下側） */
  .entry-item__body {
    width: 100%;
  }

  /* 注記付き見出しのSP調整 */
  .entry-item__head--has-note {
    width: 100%;
  }

  .entry-item__note {
    font-size: 1.2rem;
  }

  /* セレクトボックスの幅調整 */
  .entry-item .entry-select-wrap select {
    min-width: 100%;
  }

  /* --------------------------------------------------
   * 個人情報の取り扱いについて・送信ボタン
   * -------------------------------------------------- */
  .privacy-section {
    padding-top: 32px;
  }

  .privacy-section h2 {
    font-size: 1.8rem;
  }

  .privacy-body {
    font-size: 1.4rem;
    padding-top: 20px;
    line-height: 1.7;
  }

  .privacy-check {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .privacy-check label {
    font-size: 1.4rem;
  }

  .privacy-submit {
    padding-top: 40px;
  }

  /* 送信ボタン幅を100%に */
  .submit-btn {
    width: 100%;
    height: 5.6rem;
    font-size: 1.6rem;
  }
}

/* ==================================================
 * お問い合わせフォーム (contact_form.html)
 * ================================================== */

.contact-main {
  padding: 80px 0;
}

/* 1. お電話でのお問い合わせヘッダー */

.contact-tel-header {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}

.contact-tel-num {
  font-size: 2.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1;
  padding-left: 21px;
}

.contact-header {
  margin-bottom: 0;
}

.contact-content {
  margin-top: 40px;
}

.contact-lead {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
}

/* 必須項目の注意書きエリア */
.contact-notice {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.contact-notice__text {
  font-size: 1.6rem;
  color: #282828;
  margin: 0;
}

/* 必須バッジ */
.contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  background-color: #ed5f00;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1;
  flex-shrink: 0;
}

/* フォームリスト全体 */
.contact-list {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

/* 各項目のブロック */
.contact-item {
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #dedede;
  /* 入力欄との間の余白を広げたい場合は gap を調整 */
  gap: 40px;
}

.contact-item:last-child {
  border-bottom: none;
}

/* 項目名（左側） */
.contact-item__head {
  width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.contact-item__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
}

/* 入力欄側（右側） */
.contact-item__body {
  flex-grow: 1;
}

/* 入力フィールド共通スタイル */
.contact-item input[type="text"],
.contact-item input[type="email"],
.contact-item input[type="tel"],
.contact-item select,
.contact-item textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.6rem;
  color: #282828;
  background-color: #ffffff;
  border: 1px solid #dedede;
  box-sizing: border-box;
  outline: none;
}

.contact-item input:focus,
.contact-item select:focus,
.contact-item textarea:focus {
  border-color: #282828;
}

/* プレースホルダーの色指定 */
.contact-item input::placeholder,
.contact-item textarea::placeholder {
  color: #b5b5b5;
}

/* プルダウン（セレクトボックス） */
.contact-select-wrap {
  position: relative;
  width: 50%;
}

.contact-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23282828' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

/* 任意項目かつ注記あり（電話番号・郵便番号）の配置 */
.contact-item__head--has-note-nobadge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.contact-item__note {
  font-size: 1.4rem;
  color: #282828;
  font-weight: 400;
}

/* 上端揃え（お問い合わせ内容） */
.contact-item--top,
.contact-item--top .contact-item__head {
  align-items: flex-start;
}

/* ==================================================
 * お問い合わせフォーム スマホ対応 (767px以下)
 * ================================================== */
@media screen and (max-width: 767px) {

  /* --------------------------------------------------
   * インナー・ヘッダー・電話番号エリア
   * -------------------------------------------------- */
  .sub-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-main {
    padding: 40px 0;
  }

  /* --------------------------------------------------
   * お電話でお問い合わせ：SP表示のみ装飾解除＆中央揃え
   * -------------------------------------------------- */
  /* 1. 全体枠：下線を消して左揃え */
  .contact-tel-header {
    flex-direction: column;
    align-items: flex-start;
    /* 左揃え */
    justify-content: flex-start;
    border-bottom: none;
    /* 下線を消す */
    padding-bottom: 0;
    margin-bottom: 40px;
  }

  /* 2. タイトル：縦棒を消して左揃え */
  .contact-tel-header .c-section-title {
    font-size: 1.6rem;
    padding-right: 0;
    /* 右余白をリセット */
    margin-bottom: 8px;
    /* 電話番号との間の余白 */
    text-align: left;
  }

  .contact-tel-header .c-section-title::after {
    display: none;
    /* 縦棒を非表示 */
  }

  /* 3. 電話番号：左揃え＆タップ可能な見た目に */
  .contact-tel-num {
    font-size: 2.2rem;
    padding-left: 0;
    color: #f37b1d;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
  }

  /* --------------------------------------------------
   * お問い合わせフォーム SPレイアウト
   * -------------------------------------------------- */
  .contact-content {
    margin-top: 24px;
  }

  .contact-lead {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  /* 必須項目の注意書きエリア */
  .contact-notice {
    margin-top: 32px;
    margin-bottom: 24px;
  }

  .contact-notice__text {
    font-size: 1.4rem;
  }

  /* 各項目のブロック：見出しと入力欄をタテ並びにする */
  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 0;
  }

  /* 項目名（上側） */
  .contact-item__head {
    width: 100%;
    margin-bottom: 12px;
  }

  /* 入力欄（下側） */
  .contact-item__body {
    width: 100%;
  }

  /* 注記付き見出し（電話番号・郵便番号）のSP調整 */
  .contact-item__head--has-note-nobadge {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .contact-item__note {
    font-size: 1.2rem;
  }

  /* PCで50%にしていたセレクトボックス幅をSPでは100%に広げる */
  .contact-select-wrap {
    width: 100%;
  }

  /* --------------------------------------------------
   * 個人情報の取り扱いについて・送信ボタン
   * -------------------------------------------------- */
  .privacy-section {
    padding-top: 32px;
  }

  .privacy-section h2 {
    font-size: 1.8rem;
  }

  .privacy-body {
    font-size: 1.4rem;
    padding-top: 20px;
    line-height: 1.7;
  }

  .privacy-check {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .privacy-check label {
    font-size: 1.4rem;
  }

  .privacy-submit {
    padding-top: 40px;
  }

  /* 送信ボタン幅を100%に */
  .submit-btn {
    width: 100%;
    height: 5.6rem;
    font-size: 1.6rem;
  }
}

/* ==================================================
 * エントリーフォーム送信確認 (entry-confirm)
 * ================================================== */

/* セクション外枠（下のセクションで余白120pxを確保） */
.entry-confirm {
  padding: 80px 0;
}

/* リードテキスト */
.entry-confirm-lead {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 30px;
  margin-bottom: 40px;
}

/* 確認テーブル構造 */
.entry-confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 60px;
}

.entry-confirm-table tr {
  border-bottom: 1px solid #e0e0e0;
}

.entry-confirm-table th {
  width: 35%;
  /* ← %指定で可変対応（値が大きいほど「入力内容」が右寄りに） */
  padding: 20px 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
  text-align: left;
  vertical-align: middle;
}

.entry-confirm-table td {
  width: 65%;
  padding: 20px 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #282828;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}

/* ボタンラッパーエリア */
.entry-confirm-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 修正ボタン（オレンジ背景への上書き） */
.entry-confirm-btn-group .com-btn--back a {
  background-color: #ed5f00;
}

/* ==================================================
 * エントリーフォーム送信確認 SP対応（767px以下）
 * ================================================== */
@media screen and (max-width: 767px) {

  /* セクション外枠の余白調整 */
  .entry-confirm {
    padding: 40px 0;
  }

  /* リードテキスト */
  .entry-confirm-lead {
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  /* テーブルの1列（縦並び）化 */
  .entry-confirm-table {
    margin-bottom: 40px;
  }

  .entry-confirm-table tr {
    display: block;
    padding: 15px 0;
  }

  .entry-confirm-table th,
  .entry-confirm-table td {
    display: block;
    width: 100%;
    /* PCの35%/65%指定を解除して100%に */
    padding: 0;
    text-align: left;
  }

  .entry-confirm-table th {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .entry-confirm-table td {
    font-size: 1.5rem;
  }

  /* ボタンエリアの余白調整 */
  .entry-confirm-btn-group {
    gap: 15px;
  }

  /* ボタンエリア全体の幅を100%に */
  .entry-confirm-btn-group .com-btn {
    width: 100%;
  }

  /* ボタン自体の幅制限を解除して横幅いっぱいに伸ばす */
  .entry-confirm-btn-group .com-btn a {
    width: 100%;
    max-width: 100%;
    height: 5.6rem;
    /* 高さも少ししっかりさせたい場合は 6rem 等に調整可能 */
    box-sizing: border-box;
  }

}

/* ==================================================
 * お問い合わせ送信確認 (contact-confirm)
 * ================================================== */

/* PC表示（デフォルト） */
.contact-confirm {
  padding: 80px 0;
}

.contact-confirm-lead {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 30px;
  margin-bottom: 40px;
}

/* 確認テーブル構造 */
.contact-confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 60px;
}

.contact-confirm-table tr {
  border-bottom: 1px solid #e0e0e0;
}

.contact-confirm-table th {
  width: 35%;
  padding: 20px 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
  text-align: left;
  vertical-align: middle;
}

.contact-confirm-table td {
  width: 65%;
  padding: 20px 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #282828;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}

/* ボタンラッパーエリア */
.contact-confirm-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 修正ボタン（オレンジ背景） */
.contact-confirm-btn-group .com-btn--back a {
  background-color: #ed5f00;
}


/* --------------------------------------------------
 * SP表示（767px以下）
 * -------------------------------------------------- */
@media screen and (max-width: 767px) {

  .contact-confirm {
    padding: 40px 0;
  }

  .contact-confirm-lead {
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  /* テーブルの1列（縦並び）化 */
  .contact-confirm-table {
    margin-bottom: 40px;
  }

  .contact-confirm-table tr {
    display: block;
    padding: 15px 0;
  }

  .contact-confirm-table th,
  .contact-confirm-table td {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .contact-confirm-table th {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .contact-confirm-table td {
    font-size: 1.5rem;
  }

  /* SP用ボタン幅調整（幅いっぱいに拡大） */
  .contact-confirm-btn-group {
    gap: 15px;
  }

  .contact-confirm-btn-group .com-btn {
    width: 100%;
  }

  .contact-confirm-btn-group .com-btn a {
    width: 100%;
    max-width: 100%;
    height: 5.6rem;
    box-sizing: border-box;
  }

}

/* ==================================================
 * エントリー送信完了 (entry-complete)
 * ================================================== */

/* PC表示（デフォルト） */
.entry-complete {
  padding: 80px 0;
}

.entry-complete-text {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 30px;
}

/* --------------------------------------------------
 * SP表示（767px以下）
 * -------------------------------------------------- */
@media screen and (max-width: 767px) {

  .entry-complete {
    padding: 40px 0;
  }

  .entry-complete-text {
    font-size: 1.4rem;
    margin-top: 20px;
  }

}

/* ==================================================
 * お問い合わせ送信完了 (contact-complete)
 * ================================================== */

/* PC表示（デフォルト） */
.contact-complete {
  padding: 80px 0;
}

.contact-complete-text {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 30px;
}

/* --------------------------------------------------
 * SP表示（767px以下）
 * -------------------------------------------------- */
@media screen and (max-width: 767px) {

  .contact-complete {
    padding: 40px 0;
  }

  .contact-complete-text {
    font-size: 1.4rem;
    margin-top: 20px;
  }

}

/* ==================================================
 * Salesforce 導入概要 (salesforce-intro)
 * ================================================== */

.salesforce-topmessage {
  padding: 80px 20px 40px;
  font-size: 1.6rem;
}


/* PCでは改行タグを打ち消す */
.u-sp-only {
  display: none;
}

.salesforce-intro {

  overflow: hidden;
  /* 横スクロール防止 */
}

/* 2カラムレイアウト（Grid構成） */
.salesforce-intro-content {
  display: grid;
  grid-template-columns: 40% 56%;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 40px;
}

/* --- 左カラム --- */
.salesforce-intro-left {
  display: flex;
  flex-direction: column;
}

.salesforce-intro-text p {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.7;
}

.salesforce-intro-text p:last-child {
  margin-bottom: 0;
}

/* 画像エリア：テキストの下の残りの高さを縦いっぱいに広げる */
.salesforce-intro-img-outer {
  width: 100%;
  margin-top: 40px;
  flex: 1;
  display: flex;
}

.salesforce-intro-img-inner {
  width: calc(100% + (100vw - 1200px) / 2);
  margin-left: calc((100vw - 1200px) / -2);
  height: 100%;
}

.salesforce-intro-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* 画像の右側を優先して表示 */
  display: block;
}

/* --- 右カラム --- */
.salesforce-intro-right {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.salesforce-intro-right-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: max(10px, auto);
}

.salesforce-intro-flow-img {
  width: 100%;
  aspect-ratio: 750 / 632;
  margin-top: auto;
  /* 左画像の下端とピッタリ揃えるために下へ固定 */
}

.salesforce-intro-flow-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==================================================
 * 提供サービス (salesforce-service)
 * ================================================== */

/* セクション基本設定 */
.salesforce-service {
  padding-top: 120px;
}

/* 画面幅いっぱいの背景画像エリア（見出し直下に配置） */
.salesforce-service-bg {
  width: 100%;
  background: url(../images2/pages2/service-bg.png) no-repeat center center / cover;
  /* 2000 x 430 の比率を保ちつつ上下中央にカードを配置 */
  aspect-ratio: 2000 / 430;
  min-height: 430px;
  display: flex;
  align-items: center;
  margin-top: 40px;
}

/* 3カラムリスト */
.salesforce-service-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  list-style: none;
  padding: 0 20px;
  margin: 0;
}

.salesforce-service-item {
  width: calc((100% - 80px) / 3);
  /* 3分割設定 */
  max-width: 370px;
}

.salesforce-service-link {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

.salesforce-service-link:hover {
  transform: scale(1.03);
  opacity: 1 !important;
  /* 透過を完全に阻止 */
  filter: none !important;
}

.salesforce-service-link:hover img {
  opacity: 1 !important;
  filter: none !important;
}

.salesforce-service-link img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ==================================================
 * 導入支援サポート (salesforce-support)
 * ================================================== */

.salesforce-support {
  padding-top: 80px;
}

.salesforce-support-text {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.7;
  margin-top: 40px;
}

.salesforce-support-img-wrap {
  margin-top: 40px;
  width: 100%;
}

.salesforce-support-img-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  transition: opacity 0.3s ease;
}

.salesforce-support-img-btn:hover {
  opacity: 0.85;
}

.salesforce-support-img-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 画像拡大モーダルスタイル --- */
.img-modal {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: none;
  /* 中央配置のための指定 */
  margin: auto;
  position: fixed;
  inset: 0;
}

.img-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.img-modal-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-modal-inner img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.img-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

/* ==================================================
 * 導入実績 (salesforce-case)
 * ================================================== */

.salesforce-case {
  padding-top: 120px;
}

/* メイン2カラムレイアウト */
.salesforce-case-content {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  gap: 80px;
}

.salesforce-case-left {
  width: 50%;
}

.salesforce-case-company {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.salesforce-case-catch {
  font-size: 1.8rem;
  font-weight: 500;
  color: #282828;
  margin-top: 12px;
}

.salesforce-case-desc {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 16px;
}

/* スペックテーブル */
.salesforce-case-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;

}

.salesforce-case-table tr {
  border-bottom: 1px solid #707070;
}

.salesforce-case-table th {
  width: 28%;
  padding: 12px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #282828;
  text-align: left;
  vertical-align: top;
}

.salesforce-case-table td {
  width: 72%;
  padding: 12px 0;
  font-size: 1.5rem;
  color: #282828;
  line-height: 1.5;
  vertical-align: top;
}

/* 右カラムメディア */
.salesforce-case-right {
  width: 46%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.salesforce-case-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* Before / After 2カラム */
.salesforce-case-ba {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  gap: 40px;
}

.salesforce-case-ba-item {
  width: 48%;
}

.salesforce-case-ba-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
}

.salesforce-case-ba-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.salesforce-case-ba-head--before .salesforce-case-ba-badge {
  background-color: #666666;
}

.salesforce-case-ba-head--after .salesforce-case-ba-badge {
  background-color: #eb8e02;
}

.salesforce-case-ba-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.salesforce-case-ba-text {
  font-size: 1.6rem;
  color: #282828;
  margin-top: 20px;
}

/* ==================================================
 * SOHOBBが選ばれる理由 (sohobb-reasons)
 * ================================================== */

.sohobb-reasons {
  padding-top: 120px;
}

.sohobb-reasons-list {
  margin-top: 40px;
}

/* 各項目の行（階段状の配置を想定したフレックスレイアウト） */
.sohobb-reasons-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 0px;
  /* 余計なパディングをゼロにする */
  margin-bottom: 40px;
}

.sohobb-reasons-item:last-child {
  margin-bottom: 0;
}

/* 巨大な数字：マイナス値で強制的にアンダーラインにくっつける */
.sohobb-reasons-num {
  font-family: "Arial", sans-serif;
  font-size: 15rem;
  font-weight: 700;
  color: #dedede;
  line-height: 1;
  margin-bottom: -0.15em;
  /* ここを調整（例: -0.2em や -20px など）して下げる */
}


.sohobb-reasons-item-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.sohobb-reasons-item-desc {
  font-size: 1.5rem;
  color: #282828;
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 4px;
  /* テキストの下に少しアンダーラインとの余白が欲しい場合はここを調整 */
}

/* 画像エリア：画像の下部を完全にアンダーラインに合わせる */
.sohobb-reasons-img {
  width: 320px;
  flex-shrink: 0;
  margin-bottom: 0px;
  /* 画像自体の下余白をなくす */
}

.sohobb-reasons-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2行目 (02)：上の数字の右端に下の数字の左端が来るようにオフセットを入れる */
.sohobb-reasons-item:nth-child(2) {
  padding-left: 15rem;
  /* 数字のサイズ（15rem）に合わせて右へシフト */
}

/* 3行目 (03) */
.sohobb-reasons-item:nth-child(3) {
  padding-left: 30rem;
  /* さらに15rem分（合計30rem）シフト */
}

/* ==================================================
 * Salesforce歴18年の構築力 (sohobb-strength)
 * ================================================== */

.sohobb-strength {
  padding-top: 120px;
}

/* 見出しとリード文の横並び（共通スタイルがあればそちらを優先でOKです） */
.sohobb-strength .c-section-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
}


/* 1200px幅から左右に42pxずつはみ出させる設定 */
.sohobb-strength-img {
  margin-top: 40px;
  margin-left: -42px;
  margin-right: -42px;
  width: 1284px;
  max-width: none;
  /* 親の1200pxで制限されないようにする */
}

.sohobb-strength-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
 * Salesforce保有資格一覧 (sohobb-qualifications)
 * ================================================== */
/* 見出しとリード文の横並び */
.sohobb-qualifications .c-section-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.sohobb-qualifications {
  padding-top: 120px;
}

.sohobb-qualifications-lead {
  font-size: 1.6rem;
  color: #282828;
  margin-top: 40px;
}

/* 2カラムレイアウト */
.sohobb-qualifications-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

/* 左カラム：テキストエリア */
.sohobb-qualifications-left {
  flex: 1;
  /* 残りの幅を自動で占有 (約470px) */
}

.sohobb-qualifications-subtitle {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin-bottom: 16px;
}

.sohobb-qualifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sohobb-qualifications-list li {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.8;
}

/* 右カラム：認定バッジ画像 (幅690px固定) */
.sohobb-qualifications-right {
  width: 690px;
  flex-shrink: 0;
}

.sohobb-qualifications-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部：グラフ画像エリア（コンテンツ幅1200pxぴったり） */
.sohobb-qualifications-chart {
  margin-top: 60px;
  width: 100%;
}

.sohobb-qualifications-chart>img {
  width: 100%;
  height: auto;
  display: block;
}


.salesforce-article {
  padding-top: 120px;
  padding-bottom: 80px;
}

@media screen and (max-width: 768px) {

  /* ==================================================
   * Salesforce 導入概要 (salesforce-intro) - SP対応
   * ================================================== */
  .salesforce-topmessage {
    padding: 40px 10px 40px;
    font-size: 1.5rem;
  }


  /* salesforce-intro：SPでリード文の有無に関わらず縦棒を非表示 */
  .salesforce-intro .c-section-header::before,
  .salesforce-intro .c-section-header::after,
  .salesforce-intro .c-section-header .c-section-title::before,
  .salesforce-intro .c-section-header .c-section-title::after {
    display: none !important;

  }

  .salesforce-intro-title {
    font-size: 2.0rem;
    line-height: 1.6;
    margin-right: 0 !important;
  }

  /* スマホ表示時のみ改行を実行 */
  .u-sp-only {
    display: inline;
  }

  /* 2カラムGridを1カラム（縦並び）に変更 */
  .salesforce-intro-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }

  /* 画像エリア外枠：ネガティブマージンで左右の余白を画面端まで打ち消す */
  .salesforce-intro-img-outer {
    margin-top: 24px;
    margin-left: -20px;
    /* ★コンテナの左右padding幅に合わせて数値を調整してください（例: -16px や -20px） */
    margin-right: -20px;
    width: calc(100% + 40px);
    /* ★左右マージン分（20px + 20px）だけ幅を広げる */
  }

  /* 画像エリア内枠：角丸を解除して画面端にフィット */
  .salesforce-intro-img-inner {
    width: 100%;
    margin-left: 0;
    height: auto;
    max-height: 120px;
    /* アスペクト比を維持して高さを抑える */
    overflow: hidden;
  }

  .salesforce-intro-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }



  /* 右カラム（流れ）の見出しや画像の余白調整 */
  .salesforce-intro-right-title {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }

  .salesforce-intro-flow-img {
    aspect-ratio: auto;
  }

  /* ==================================================
   * 提供サービス (salesforce-service) - SP対応
   * ================================================== */
  .salesforce-service {
    padding-top: 60px;
  }

  /* 背景エリア：固定のアスペクト比を解除して、中身の高さに自動追従させる */
  .salesforce-service-bg {
    aspect-ratio: auto;
    min-height: 0;
    padding: 40px 0;
    /* 上下にゆとりを持たせる */
  }

  /* リストを縦並びに変更 */
  .salesforce-service-list {
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  .salesforce-service-item {
    width: 100%;
    max-width: 320px;
    /* スマホで見やすい幅に調整 */
    margin: 0 auto;
  }

  /* ==================================================
   * 導入支援サポート (salesforce-support) - SP対応
   * ================================================== */
  .salesforce-support {
    padding-top: 60px;
  }

  .salesforce-support-text {
    margin-top: 20px;
  }

  .salesforce-support-img-wrap {
    margin-top: 24px;
  }

  /* モーダル表示時のSP用スクロール設定 */
  .img-modal {
    max-width: 95vw;
    max-height: calc(100vh - 80px);
    /* モーダル自体の最大高さを上下40px余白に制限 */
  }

  .img-modal-inner {
    overflow-x: auto;
    /* 横スクロールを許可 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
    max-height: calc(100vh - 80px);
  }

  .img-modal-inner img {
    width: auto;
    /* 横幅の自動縮小・fitを解除 */
    max-width: none;
    /* 横幅無制限（はみ出させる） */
    height: calc(100vh - 80px);
    /* 高さを画面上下40px余白サイズに固定 */
    max-height: calc(100vh - 80px);
    display: block;
  }

  /* 閉じるボタン（右上固定表示） */
  .img-modal-close {
    position: fixed;
    /* 画面右上に固定 */
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    padding: 0;
    cursor: pointer;
  }

  /* ==================================================
   * 導入実績 (salesforce-case) - SP対応
   * ================================================== */
  .salesforce-case {
    padding-top: 60px;
  }

  .salesforce-case-company {
    font-size: 1.8rem;
  }

  .salesforce-case-catch {
    font-size: 1.6rem;
  }

  .salesforce-case-desc {
    font-size: 1.5rem;
  }


  .salesforce-case-content {
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
  }

  /* 左カラム・右カラムを1カラム化（全幅へ） */
  .salesforce-case-left,
  .salesforce-case-right {
    width: 100%;
  }

  /* スペックテーブルの文字サイズ・余白微調整 */
  .salesforce-case-table {
    margin-top: 24px;
  }

  .salesforce-case-table th {
    width: 30%;
  }

  .salesforce-case-table td {
    width: 70%;
  }

  /* Before / After エリアの1カラム化 */
  .salesforce-case-ba {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }

  .salesforce-case-ba-item {
    width: 100%;
  }

  /* ==================================================
   * SOHOBBが選ばれる理由 (sohobb-reasons) - SP対応
   * ================================================== */
  .sohobb-reasons {
    padding-top: 60px;
  }

  .sohobb-reasons-list {
    margin-top: 40px;
  }

  /* 親要素：折り返し対応のFlex */
  .sohobb-reasons-item,
  .sohobb-reasons-item:nth-child(2),
  .sohobb-reasons-item:nth-child(3) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* 上段の数字と画像を中央寄りに配置 */
    gap: 16px;
    /* 数字と画像の間の余白 */
    padding-left: 0;
    /* PCの階段配置を解除 */
    margin-bottom: 20px;
    text-align: center;
  }

  /* --------------------------------------------------
   * 1. 数字 (上段・左)
   * -------------------------------------------------- */
  .sohobb-reasons-num {
    order: 1;
    font-size: 4.8rem;
    font-weight: bold;
    line-height: 1;
    margin: 0;
  }

  /* --------------------------------------------------
   * 2. 画像 (上段・右)
   * -------------------------------------------------- */
  .sohobb-reasons-img {
    order: 2;
    width: 140px;
    /* 画像サイズ（お好みで調整可） */
    max-width: 45%;
    margin: 0;
  }

  .sohobb-reasons-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --------------------------------------------------
   * 3. テキストエリア（下段・1カラム・中央揃え）
   * -------------------------------------------------- */
  .sohobb-reasons-text-wrap {
    order: 3;
    width: 100%;
    /* 幅100%で下段へ改行 */
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: center;
  }

  .sohobb-reasons-item-title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 8px;
    text-align: center;
  }

  .sohobb-reasons-item-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
  }

  /* ==================================================
   * Salesforce歴18年の構築力 (sohobb-strength) - SP対応
   * ================================================== */

  .sohobb-strength {
    padding-top: 60px;
  }

  .sohobb-strength .c-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* 画像を画面幅いっぱいに広げる指定 */
  .sohobb-strength-img {
    margin-top: 24px;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .sohobb-strength-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ==================================================
   * Salesforce保有資格一覧 (sohobb-qualifications) - SP対応
   * ================================================== */

  .sohobb-qualifications {
    padding-top: 60px;
  }


  /* sohobb-qualifications：SPで見出しとリード文を改行（縦並び）にする */
  .sohobb-qualifications .c-section-header {
    flex-direction: column;
    /* 縦並びにして改行 */
    align-items: flex-start;
    /* 左揃え */
    gap: 8px;
    /* 見出しとリード文の上下間隔 */
  }

  .sohobb-qualifications {
    padding-top: 60px;
  }

  .sohobb-qualifications-lead {
    margin-top: 20px;
    font-size: 1.5rem;
  }

  /* 2カラムレイアウト（テキスト / 認定バッジ）を1カラム（縦並び）に変更 */
  .sohobb-qualifications-content {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }

  /* 左カラム（テキスト） */
  .sohobb-qualifications-left {
    width: 100%;
  }

  .sohobb-qualifications-subtitle {
    font-size: 1.6rem;
    margin-bottom: 12px;
  }

  .sohobb-qualifications-list li {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  /* 右カラム（認定バッジ画像） */
  .sohobb-qualifications-right {
    width: 100%;
  }

  .sohobb-qualifications-right img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --------------------------------------------------
   * 下部グラフ画像（SP表示時のみ横スクロール対応）
   * -------------------------------------------------- */
  .sohobb-qualifications-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでのスムーズスクロール */
    margin-top: 32px;
    padding-bottom: 8px;
    /* スクロールバー表示用余白 */
  }

  .sohobb-qualifications-chart>img {
    width: auto;
    min-width: 800px;
    max-width: none;
    height: auto;
    display: block;
  }

  .salesforce-article {
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .salesforce-article .c-section-title {
    font-size: 1.8rem;
  }

}

/* --------------------------------------------------
 * アプリのページ (application.html)
 * -------------------------------------------------- */
/* --------------------------------------------------
 * 概要セクション (.application-overview)
 * -------------------------------------------------- */

.application-overview {
  padding-top: 80px;
}

.application-overview-text {
  margin-top: 40px;
  font-size: 1.6rem;
  line-height: 2;
  color: #282828;
}

/* --------------------------------------------------
 * アプリ開発ご支援範囲セクション (.application-range)
 * -------------------------------------------------- */

.application-range {
  margin-top: 120px;
  /* 前のセクションとの余白 */
}

.application-range-img {
  margin-top: 40px;
}

.application-range-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
 * 対応言語一覧セクション (.application-languages)
 * -------------------------------------------------- */

.application-languages {
  margin-top: 120px;
  /* 前のセクションとの余白 */
}

.application-languages-table-wrap {
  margin-top: 40px;
  width: 100%;
}

.application-languages-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  color: #282828;
  line-height: 1.6;
}

/* ヘッダー行 */
.application-languages-table th {
  background-color: #002257;
  /* 濃いネイビー */
  color: #ffffff;
  font-weight: 700;
  text-align: left;
  padding: 14px 20px;
  border: 1px solid #002257;
}

/* ヘッダー列幅設定 */
.application-languages-table th:nth-child(1) {
  width: 20%;
}

.application-languages-table th:nth-child(2) {
  width: 30%;
}

.application-languages-table th:nth-child(3) {
  width: 50%;
}

/* データ行 */
.application-languages-table td {
  padding: 14px 20px;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}

/* 交互（ゼブラ柄）の背景色設定 */
.application-languages-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.application-languages-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* 一番左列（言語名）の太字指定 */
.application-languages-table td:first-child {
  font-weight: 700;
}

/* --------------------------------------------------
 * ネイティブアプリ開発実績 (.application-native)
 * -------------------------------------------------- */

.application-native {
  margin-top: 120px;
}

.application-native-lead {
  margin-top: 40px;
  font-size: 1.6rem;
  line-height: 2;
  color: #282828;
}

.application-native-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- ボックス共通パーツ (.app-card) --- */
.app-card {
  border: 1px solid #282828;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* ヘッダーエリア */
.app-card-header {
  background-color: #eeeeee;
  padding: 20px 30px;
  border-bottom: 1px solid #282828;
  border-bottom: none;
}

.app-card-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.2;
  margin: 0;
}

.app-card-subtitle {
  font-size: 1.5rem;
  color: #282828;
  margin-top: 8px;
  line-height: 1.4;
}

/* ボディエリア */
.app-card-body {
  padding: 40px;
  box-sizing: border-box;
}

/* 中央寄せ（ボックス1用） */
.app-card-body--center {
  text-align: center;
  padding: 50px 40px;
}

.app-card-text {
  font-size: 1.6rem;
  color: #282828;
  margin-bottom: 30px;
}

/* --- 2カラムレイアウト（概要＋画像） --- */
.app-card-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* 左カラム：テキスト・情報 */
.app-card-info {
  width: calc(100% - 615px - 40px);
  /* 1200px中画像615pxとgap40pxを引いた幅 */
}

.app-card-section+.app-card-section {
  margin-top: 30px;
}

.app-card-section-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
  padding-bottom: 8px;
  border-bottom: 1px solid #282828;
  margin-bottom: 16px;
}

.app-card-section-text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #282828;
}

.app-card-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #282828;
}

/* リスト項目の先頭に「・」を追加 */
.app-card-feature-list li {
  position: relative;
  padding-left: 1.2em;
  /* 文字と「・」の位置調整 */
}

.app-card-feature-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 右カラム：画像 */
.app-card-media {
  width: 615px;
  flex-shrink: 0;
}

.app-card-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 下部：導入事例エリア（ボックス3用） --- */

.app-card-case-wrap {
  margin-top: 40px;
}

/* 外枠をひとつのボックスにする */
.app-card-subheading {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* 高さを揃えて一体化 */
  border-bottom: 1px solid #282828;
  overflow: hidden;
  /* 角丸からはみ出ないように */
  background-color: #fff;
  padding: 0;
}

/* 左側：黒背景・白文字 */
.app-card-subheading-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282828;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 10px 20px;
  white-space: nowrap;
}

/* 右側：白背景・黒文字 */
.app-card-subheading-company {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: #fff;
  color: #282828;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 10px 20px;
}

/* 事例 2カラム */
.app-card-cases {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}

.app-card-case-item {
  width: 50%;
}

.app-card-case-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* タイトル横の丸アイコン */
.app-card-case-title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-card-case-item--purpose .app-card-case-title::before {
  background-color: #666666;
  /* 導入目的の丸アイコン（グレー系） */
}

.app-card-case-item--solution .app-card-case-title::before {
  background-color: #f39800;
  /* 導入ソリューションの丸アイコン（オレンジ系） */
}

.app-card-case-text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #282828;
}

/* --------------------------------------------------
 * その他開発アプリ (.application-other)
 * -------------------------------------------------- */

.application-other {
  margin-top: 120px;
  padding-bottom: 80px;
}

.application-other-list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* 380px × 3 ＋ 30px × 2 = 1200px */
}

/* カード本体 */
.app-other-card {
  width: 31.666%;
  /* 380px / 1200px */
  min-height: 480px;
  border: 1px solid #282828;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 画像表示領域 */
.app-other-card__img {
  width: 100%;
  height: 270px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.app-other-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* コンテンツ表示領域 */
.app-other-card__content {
  padding: 0 20px 20px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-other-card__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin: 0 0 10px;
  line-height: 1.3;
}

.app-other-card__desc {
  font-size: 1.5rem;
  color: #282828;
  line-height: 1.6;
  margin: 0;
}

/* OSタグエリア（カード下部に固定） */
.app-other-card__tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 15px;
}

.app-other-card__tag {
  font-size: 1.4rem;
  color: #e66b00;
  /* オレンジ系の枠・文字色 */
  border: 1px solid #e66b00;
  border-radius: 3px;
  padding: 2px 8px;
  line-height: 1.2;
}

/* ==================================================
 * レスポンシブ (SP対応: 768px以下)
 * ================================================== */

@media screen and (max-width: 768px) {

  /* --------------------------------------------------
   * 1. 共通ルール・SP基本設定
   * -------------------------------------------------- */

  /* インナーコンテナの左右余白確保 */
  .sub-inner {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* 見出しエリアのSP調整 */
  .c-section-header {
    margin-bottom: 24px;
  }

  .application-overview {
    padding-top: 40px;
  }

  /* --------------------------------------------------
   * 2. アプリ開発概要セクション (.application-overview)
   * -------------------------------------------------- */

  .application-native {
    margin-top: 40px;
  }

  .application-overview-text {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  /* --------------------------------------------------
   * アプリ開発ご支援範囲 (.application-range)
   * 横スクロール対応
   * -------------------------------------------------- */
  .application-range {
    margin-top: 60px;
  }

  .application-range-img {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .application-range-img img {
    width: 1200px;
    max-width: none;
  }

  .application-range-img {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* --------------------------------------------------
   * アプリ開発言語
   * 横スクロール対応
   * -------------------------------------------------- */
  .application-languages {
    margin-top: 60px;
  }

  .application-languages-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .application-languages-table {
    width: 800px;
    /* 横スクロール用のテーブル固定幅 */
    max-width: none;
  }

  /* 文字サイズと余白のSP調整 */
  .application-languages-table th,
  .application-languages-table td {
    font-size: 1.2rem;
    padding: 8px 10px;
  }

  /* --------------------------------------------------
   * 実績
   * -------------------------------------------------- */
  .application-native {
    margin-top: 60px;
  }

  /* カード全体の余白調整 */
  .app-card {
    margin-bottom: 30px;
  }

  .app-card-title {
    font-size: 2.0rem;
  }

  .app-card-header {
    padding: 15px 20px;
  }

  .app-card-body {
    padding: 20px;
  }

  /* 概要・特徴＋画像の2カラムを縦並びに変更 */
  .app-card-flex {
    flex-direction: column;
    gap: 20px;
  }

  .app-card-info {
    width: 100%;
  }

  /* 画像エリアのSP調整（中央寄せ） */
  .app-card-media {
    width: 100%;
    text-align: center;
  }

  .app-card-media img {
    max-width: 100%;
    height: auto;
  }

  .app-card-case-item {
    width: 100%;
  }

  .app-card-subheading {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    /* 外枠の下線を解除（会社名側に持たせるため） */
  }

  /* 上側：黒背景ラベル */
  .app-card-subheading-label {
    justify-content: flex-start;
    padding: 8px 12px;
    font-size: 1.4rem;
  }

  /* 下側：白背景・下線付き会社名 */
  .app-card-subheading-company {
    border-bottom: 1px solid #282828;
    /* SPでは会社名の下にアンダーライン */
    padding: 10px 12px;
    font-size: 1.4rem;
  }

  .app-card-cases {
    flex-direction: column;
    gap: 16px;
    /* 項目同士の縦の隙間 */
  }

  .app-card-case-item {
    width: 100%;
    padding: 16px;
    /* 内側の余白調整 */
  }

  /* 「導入目的」「導入ソリューション」の見出しフォントサイズ */
  .app-card-case-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  /* 本文テキストのフォントサイズと行高 */
  .app-card-case-text {
    font-size: 1.4rem;
    line-height: 1.6;
  }


  /* --------------------------------------------------
   * アプリ一覧
   * -------------------------------------------------- */
  .application-other {
    margin-top: 60px;
    padding-bottom: 40px;
    margin-bottom: 0;
  }

  /* PC・SP共通：カードリストを1カラム化 */
  .application-other-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* カード要素を幅いっぱいに指定 */
  .app-other-card {
    width: 100%;
  }
}


/* --------------------------------------------------
 * ヘルトリー概要セクション (.heltree-overview)
 * -------------------------------------------------- */

.heltree-overview {
  padding-top: 80px;
  /* ページ一番上のセクションのためPC余白80px */
}

/* 小さい見出し（リード文付き）レイアウト調整 */
.heltree-overview .c-section-header {
  display: flex;
  align-items: center;
}

/* メインロゴエリア（コンテンツ幅1200pxに対し幅473px指定） */
.heltree-overview-logo {
  width: 39.416%;
  /* 473px / 1200px */
  max-width: 473px;
  margin: 60px auto 0;
  text-align: center;
}

.heltree-overview-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.heltree-overview-content {
  display: flex;
  justify-content: space-between;
  gap: 3.333%;
  /* 40px / 1200px */
  margin-top: 60px;
}

/* 左カラム：課題（54%） */
.heltree-overview-col--issue {
  width: 52.2%;
  /* gap分の比率を引いた幅 */
}

/* 右カラム：解決（46%） */
.heltree-overview-col--solution {
  width: 44.467%;
  /* gap分の比率を引いた幅 */
}

.heltree-overview-col--solution .heltree-list {
  padding-left: 20px;
}


/* --------------------------------------------------
 * 見出し帯（矢印バナーパーツ）
 * -------------------------------------------------- */

.heltree-banner {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 0 30px;
  box-sizing: border-box;
}

.heltree-banner-title {
  font-size: 2.0rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

/* 左カラム：課題バナー（右向き矢印形状） */
.heltree-banner--issue {
  background-color: #1e365d;
  /* 紺色系 */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  padding-right: 40px;
}

/* 右カラム：解決バナー（左凹み＋右矢印形状） */
.heltree-banner--solution {
  background-color: #00a99d;
  /* エメラルドグリーン系 */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
  padding-left: 40px;
  padding-right: 40px;
}

/* --------------------------------------------------
 * リストエリア
 * -------------------------------------------------- */

.heltree-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.heltree-list-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* アイコン画像エリア */
.heltree-list-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heltree-list-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* テキストエリア */
.heltree-list-text {
  flex: 1;
}

.heltree-list-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 0 0 6px 0;
}

.heltree-list-desc {
  font-size: 1.4rem;
  color: #282828;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------
 * HELTreeが解決する健診DXセクション (.heltree-solution)
 * -------------------------------------------------- */

.heltree-solution {
  margin-top: 120px;
  /* セクション間余白：PC 120px */
}

/* 小さい見出し（リード文付き）レイアウト調整 */
.heltree-solution .c-section-header {
  display: flex;
  align-items: center;
}

.heltree-solution-content {
  margin-top: 60px;
  text-align: center;
}

/* 図解画像エリア */
.heltree-solution-img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.heltree-solution-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
 * 3つの機能セクション (.heltree-features)
 * -------------------------------------------------- */

.heltree-features {
  margin-top: 120px;
  /* セクション間余白：PC 120px */
}

/* 3カラムレイアウト */
.heltree-features-list {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  align-items: stretch;
  /* 3つのカードの高さを揃える */
}

/* 各カード（ボックスエリア：左右パディング20px＋中央寄せ） */
.heltree-features-card {
  width: calc((100% - 64px) / 3);
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 要素を縦並びにして高さを揃える */
  align-items: center;
  /* カード内の要素（タイトル・画像・リスト）を横方向中央寄せ */
  min-height: 535px;
  /* カンプの基準高さ */
  margin: 0 auto;
  /* ボックス全体を中央配置 */
}

/* 緑背景の見出し帯 */
.heltree-features-card__title {
  width: 100%;
  /* 幅をカードいっぱいに広げる */
  background-color: #00a99d;
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  padding: 16px 10px;
  border-radius: 8px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 画像エリア（上下中央寄せ＋あまりの高さを吸収） */
.heltree-features-card__img {
  width: 100%;
  margin-top: 24px;
  flex: 1;
  /* 余白を自動計算して画像エリアの高さを調整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.heltree-features-card__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* リスト（中央寄せ＆テキスト左揃え維持） */
.heltree-features-card__list {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  /* マージンで中央寄せ */
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  align-self: center;
  /* コンテナ内でリストブロック自体を中央に配置 */
}

.heltree-features-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #282828;
  line-height: 1;
}

/* 水色の丸をCSSで生成 */
.heltree-features-card__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #00aeef;
  /* 水色 */
  border-radius: 50%;
}

/* --------------------------------------------------
 * 裏側で支える医療級の問診ロジックセクション (.heltree-logic)
 * -------------------------------------------------- */

.heltree-logic {
  margin-top: 120px;
  padding-bottom: 80px;
}

.heltree-logic-content {
  margin-top: 40px;
  text-align: center;
}

/* 画像エリア */
.heltree-logic-img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.heltree-logic-img img {
  width: 100%;
  height: auto;
  display: block;
}



/* --------------------------------------------------
 * スマホ表示用 (768px以下) - heltree-overview
 * -------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* セクション上余白（SP用） */
  .heltree-overview {
    padding-top: 40px;
  }

  /* 見出しとリード文を縦並びにし、リード文を見出しのアンダーラインの下へ配置 */
  .c-section-header.c-section-header--with-lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* メインロゴエリア（SP用：幅を広げる） */
  .heltree-overview-logo {
    width: 80%;
    margin-top: 40px;
  }

  /* 2カラム → 1カラム（縦並び）に変更 */
  .heltree-overview-content {
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
  }

  /* 左右カラムの幅を100%化 */
  .heltree-overview-col--issue,
  .heltree-overview-col--solution {
    width: 100% !important;
  }

  /* 見出し帯：矢印形状（clip-path）を解除して普通の四角にし、文字サイズ小さく */
  .heltree-banner--issue,
  .heltree-banner--solution {
    clip-path: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 6px;
    font-size: 1.8rem;
  }

  .heltree-banner-title {
    font-size: 1.8rem;
  }

  .heltree-list-title {
    font-size: 1.6rem;
  }

  .heltree-list li {
    font-size: 1.4rem;
  }

  /* 右カラムリストの左パディング（PC用20px）をSPで初期化 */
  .heltree-overview-col--solution .heltree-list {
    padding-left: 0;
  }

  /* ==================================================
 * HELTreeが解決する健診DX（画像横スクロール設定）
 * ================================================== */

  /* セクション上部余白調整 */
  .heltree-solution {
    margin-top: 60px;
  }

  /* 画像の親要素に横スクロールを設定 */
  .heltree-solution-img {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでの滑らかなスクロール */
  }

  /* 画像自体のサイズ固定（縮小を防止） */
  .heltree-solution-img img {
    max-width: none;
    width: 650px;
    /* 原寸ではなく、画面幅＋αのほどよいサイズに縮小 */
    height: auto;
    display: block;
  }


  /* ==================================================
 * 3つの機能セクション SP対応 (.heltree-features)
 * ================================================== */

  /* セクション上部余白調整 */
  .heltree-features {
    margin-top: 60px;
  }

  /* 3カラムから1カラム（縦並び）へ変更 */
  .heltree-features .heltree-features-list {
    flex-direction: column;
    gap: 40px;
    margin-top: 24px;
  }

  /* カード要素の幅・高さの固定値をリセット */
  .heltree-features .heltree-features-card {
    width: 100%;
    min-height: auto;
    padding: 0;
  }

  /* 緑背景見出し：フォントサイズ縮小＆最小高さを解除 */
  .heltree-features .heltree-features-card__title {
    font-size: 1.8rem;
    padding: 12px 10px;
    min-height: auto;
  }

  /* 画像エリアの余白調整 */
  .heltree-features .heltree-features-card__img {
    margin-top: 16px;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* リスト：マージン調整＆文字サイズの縮小 */
  .heltree-features .heltree-features-card__list {
    margin-top: 16px;
    gap: 8px;
  }

  .heltree-features .heltree-features-card__list li {
    font-size: 1.4rem;
    padding-left: 18px;
  }

  /* リスト左側の水色丸アイコンのサイズ調整 */
  .heltree-features .heltree-features-card__list li::before {
    width: 8px;
    height: 8px;
  }

  /* salesforce-intro：SPでリード文の有無に関わらず縦棒を非表示 */
  .heltree-logic .c-section-header::before,
  .heltree-logic .c-section-header::after,
  .heltree-logic .c-section-header .c-section-title::before,
  .heltree-logic .c-section-header .c-section-title::after {
    display: none !important;
  }

  .heltree-logic-title {
    font-size: 2.0rem;
    line-height: 1.6;
    margin-right: 0 !important;
  }

  /* セクション余白調整 */
  .heltree-logic {
    margin-top: 60px;
    padding-bottom: 155px;
  }

  .heltree-logic .heltree-logic-content {
    margin-top: 24px;
  }

  .heltree-solution-img img {
    max-width: none;
    width: 650px;
    /* 原寸ではなく、画面幅＋αのほどよいサイズに縮小 */
    height: auto;
    display: block;
  }


  /* 親要素に横スクロールを設定 */
  .heltree-logic .heltree-logic-img {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでの滑らかなスクロール */
  }

  /* 画像自体の自動縮小を解除して元のサイズ・アスペクト比を保持 */
  .heltree-logic .heltree-logic-img img {
    max-width: none;
    width: 650px;
    height: auto;
  }

  .heltree-logic {
    margin-top: 60px;
    padding-bottom: 40px;
  }

}

/* ==================================================
 * Agentforce活用事例セクション (.agentforce-usecase)
 * ================================================== */

/* 1番上のセクションのため、上マージン80px（PC） */
.agentforce-usecase {
  margin-top: 80px;
}

/* 汎用小型見出しとの間の余白 */
.agentforce-usecase .c-section-header {
  margin-top: 40px;
}

.agentforce-usecase-lead {
  margin-top: 40px;
}

/* サブ見出し（共通設定：20px / Bold） */
.agentforce-usecase__sub-heading {
  font-size: 2.0rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 60px 0 0;
}

/* アンダーバー付きサブ見出し */
.agentforce-usecase__sub-heading--border {
  padding-bottom: 12px;
  border-bottom: 1px solid #dedede;
}

/* メイン図解画像エリア */
.agentforce-usecase__main-img {
  width: 100%;
  margin: 40px 0;
}

.agentforce-usecase__main-img img {
  width: 100%;
  height: auto;
  display: block;
}


/* チェックマーク付きリスト文章（中央寄せ） */
.agentforce-usecase__check-list {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
}

/* チェックマーク付きリスト文章（他要素に影響を与えず中央寄せ） */
.agentforce-usecase__check-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  /* 左右autoでブロック自体を中央配置 */
  width: fit-content;
  /* 中身の幅にフィットさせる */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agentforce-usecase__check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 1.4rem;
  font-weight: 400;
  color: #282828;
  line-height: 1.6;
  text-align: left;
  background: url("../images2/pages2/check-icon.png") no-repeat left center / 20px 20px;
}

.agentforce-usecase__check-list li strong {
  font-weight: 700;
}

/* 3カラムカードリスト（親要素） */
.agentforce-usecase__card-list {
  display: flex;
  justify-content: space-between;
  gap: 2.6667%;
  /* 32px / 1200px */
  margin-top: 40px;
  align-items: stretch;
}

/* 各カード（3等分） */
.agentforce-usecase__card {
  width: 31.5555%;
  /* (100% - 5.3334%) / 3 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* カード画像 */
.agentforce-usecase__card-img {
  width: 100%;
}

.agentforce-usecase__card-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* カード内見出し帯（下中央に三角形付き） */
.agentforce-usecase__card-title {
  position: relative;
  /* 三角形の配置基準点 */
  width: 100%;
  background-color: #282828;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  padding: 20px 10px;
  margin: 0;
  box-sizing: border-box;
}

/* 吹き出し用の下向き三角形 */
.agentforce-usecase__card-title::after {
  content: "";
  position: absolute;
  top: 100%;
  /* 見出し帯の下端に配置 */
  left: 50%;
  transform: translateX(-50%);
  /* 水平中央寄せ */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 14px 0 14px;
  /* 三角形のサイズ設定 (上 10px, 左右 10px, 下 0) */
  border-color: #282828 transparent transparent transparent;
  /* 背景色と同色 */
}

/* カード下部テキストリスト */
.agentforce-usecase__card-text-list {
  list-style: none;
  padding: 0 20px;
  margin: 24px auto 0;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agentforce-usecase__card-text-list li {
  position: relative;
  padding-left: 1.2em;
  /* 黒丸の幅＋余白分、左側にスペースを作る */
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.4;
  text-align: left;
}

/* 疑似要素で黒丸（●）を配置 */
.agentforce-usecase__card-text-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8em;
  /* 1行目の高さに合わせて少し小さめに調整 */
  line-height: 1.7;
}

.agentforce-usecase__indent {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}

/* ==================================================
 * Agent詳細セクション (.agentforce-detail)
 * ================================================== */

/* 前のセクションからの余白（PCで120px） */
.agentforce-detail {
  margin-top: 120px;
}

/* #737373 の1px枠線ボックス */
.agentforce-detail__inner {
  border: 1px solid #737373;
  box-sizing: border-box;
  background-color: #ffffff;
}

/* ヘッダーエリア（#eeeeee 背景） */
.agentforce-detail__header {
  background-color: #eeeeee;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  /* 縦並びにして改行させる */
  align-items: flex-start;
  /* 左揃え */
  gap: 8px;
  /* 見出しとリード文の縦方向の間隔 */
  box-sizing: border-box;
}

.agentforce-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.2;
  margin: 0;
}

.agentforce-detail__lead {
  font-size: 1.5rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.4;
  margin: 0;
}

/* コンテンツ内部パディング */
.agentforce-detail__body {
  padding: 40px;
  box-sizing: border-box;
}

/* Before / After 2カラム比較 */
.agentforce-detail__comparison {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}

.agentforce-detail__col {
  width: 47.5%;
  box-sizing: border-box;
}

/* カラムごとの見出しエリア（下線付き） */
.agentforce-detail__col-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 20px;
}

/* ラベル共通 */
.agentforce-detail__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.agentforce-detail__label--before {
  background-color: #666666;
}

.agentforce-detail__label--after {
  background-color: #eb8e02;
  /* カンプのオレンジ色 */
}

/* リスト共通 */
.agentforce-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Before リスト（スタイルなし） */
.agentforce-detail__list--before li {
  font-size: 1.8rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.5;
}

/* After リスト（チェックマーク付き・太字） */
.agentforce-detail__list--after li {
  position: relative;
  padding-left: 28px;
  font-size: 1.8rem;
  color: #282828;
  line-height: 1.5;
  background: url("../images2/pages2/check-icon.png") no-repeat left 2px / 20px 20px;
}

.agentforce-detail__list--after li strong {
  font-weight: 700;
}

/* キャプチャ画像エリア */
.agentforce-detail__img-wrap {
  width: 100%;
  margin-top: 40px;
}

.agentforce-detail__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
 * Agent詳細セクション (.agentforce-detail)
 * ================================================== */

/* 前のセクションからの余白（PC 120px） */
.agentforce-detail {
  margin-top: 120px;
}

/* #737373 の1px枠線ボックス */
.agentforce-detail__inner {
  border: 1px solid #737373;
  box-sizing: border-box;
  background-color: #ffffff;
}

/* ヘッダーエリア（#eeeeee 背景） */
.agentforce-detail__header {
  background-color: #eeeeee;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
}

.agentforce-detail__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.2;
  margin: 0;
}

.agentforce-detail__lead {
  font-size: 1.5rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.4;
  margin: 0;
}

/* コンテンツ内部パディング */
.agentforce-detail__body {
  padding: 40px;
  box-sizing: border-box;
}

/* Before / After 2カラム比較 */
.agentforce-detail__comparison {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}

.agentforce-detail__col {
  width: 47.5%;
  box-sizing: border-box;
}

/* カラムごとの見出しエリア（下線付き） */
.agentforce-detail__col-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 20px;
}

/* ラベル共通 */
.agentforce-detail__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.agentforce-detail__label--before {
  background-color: #666666;
}

.agentforce-detail__label--after {
  background-color: #eb8e02;
}

/* リスト共通 */
.agentforce-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Before リスト（スタイルなし） */
.agentforce-detail__list--before li {
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.5;
}

/* After リスト（チェックマーク付き・太字） */
.agentforce-detail__list--after li {
  position: relative;
  padding-left: 28px;
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.5;
  background: url("../images2/pages2/check-icon.png") no-repeat left 2px / 20px 20px;
}

.agentforce-detail__list--after li strong {
  font-weight: 700;
}

/* 1セクション目用：横幅いっぱいのキャプチャ画像エリア */
.agentforce-detail__img-wrap {
  width: 100%;
  margin-top: 40px;
}

.agentforce-detail__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2セクション目用：Before / After 各カラム内の画像 */
.agentforce-detail__col-img {
  width: 100%;
  margin-top: 32px;
}

.agentforce-detail__col-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 単体テキスト（活動の内容をEinsteinが分析し） */
.agentforce-detail__intro {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.5;
  margin: 0 0 24px;
}

.agentforce-detail__highlight {
  color: #ed5f00;
  /* Einsteinのテキストカラー（オレンジ） */
}

/* 2カラム数字付きテキストエリア（横並び中央寄せ） */
.agentforce-detail__steps {
  display: flex;
  justify-content: center;
  /* 中央寄せ */
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
}

.agentforce-detail__step-item {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ed5f00;
  /* 下部のオレンジ下線 */
}

/* 大きな数字パーツ */
.agentforce-detail__step-num {
  font-size: 3.2rem;
  font-weight: 700;
  color: #ed5f00;
  line-height: 1;
}

/* 数字横のテキスト */
.agentforce-detail__step-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.3;
}

/* ==================================================
 * 社外事例セクション (.case-study)
 * ================================================== */

.case-study {
  margin-top: 120px;
  padding-bottom: 80px;
}

/* 上部 2カラム */
.case-study__top-grid {
  display: flex;
  justify-content: space-between;
  gap: 5%;
  margin-top: 40px;
  margin-bottom: 60px;
}

.case-study__info {
  width: 47.5%;
  box-sizing: border-box;
}

.case-study__company-name {
  font-size: 2.0rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.2;
  margin: 0 0 16px;
}

.case-study__summary {
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.5;
  margin: 0 0 40px;
}

/* 企業データ表（table） */
.case-study__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.case-study__table tr {
  border-bottom: 1px solid #333333;
}

/* thとtdを横並び（標準のtable-cell）にし、余白を設定 */
.case-study__table th,
.case-study__table td {
  padding: 16px 0;
  /* 上下のパディング */
  text-align: left;
  vertical-align: top;
}

/* 見出し（th）の幅と右側の余白（マージン）設定 */
.case-study__table th {
  font-size: 1.6rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.5;
  width: 220px;
  /* thの固定幅（内容に合わせて調整してください） */
  padding-right: 24px;
  /* thとtdの間のマージン */
  box-sizing: border-box;
}

/* データ（td） */
.case-study__table td {
  font-size: 1.6rem;
  color: #282828;
  line-height: 1.5;
  min-height: 1.5em;
  /* 空欄時の高さ確保 */
}


/* 右カラム 画像 */
.case-study__img-wrap {
  width: 47.5%;
  box-sizing: border-box;
}

.case-study__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部 Before/After 関連パーツ */
.case-study__comparison-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin-left: 16px;
  vertical-align: middle;
}

.case-study__comparison-text {
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.6;
}

.case-study__comparison-text p {
  margin: 0 0 12px;
}

.case-study__num-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-study__num-list li {
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.5;
}


/* ==================================================
 * SP用スタイル: Agentforce活用事例 (.agentforce-usecase)
 * ================================================== */

@media screen and (max-width: 767px) {

  /* 一番上のセクション：上マージン SP 40px */
  .agentforce-usecase {
    margin-top: 40px;
  }

  .agentforce-usecase .c-section-header {
    margin-top: 24px;
  }

  /* サブ見出し font-size 縮小 */
  .agentforce-usecase__sub-heading {
    font-size: 1.8rem;
    margin-top: 40px;
  }

  /* メイン図解画像エリア（横スクロール化＋PCより少し縮小表示） */
  .agentforce-usecase__main-img {
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSのスムーススクロール対応 */
  }

  .agentforce-usecase__main-img img {
    width: 600px;
    /* 画像本体を固定幅にし横スクロールさせる（必要に応じて調整してください） */
    max-width: none;
  }

  /* チェックリスト */
  .agentforce-usecase__check-list {
    margin-top: 24px;
  }

  .agentforce-usecase__check-list li {
    font-size: 1.3rem;
  }

  /* 3カラムカードリスト → 縦並び1カラム化 */
  .agentforce-usecase__card-list {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }

  .agentforce-usecase__card {
    width: 100%;
  }

  .agentforce-usecase__card-title {
    font-size: 1.6rem;
    padding: 14px 10px;
  }

  .agentforce-usecase__card-text-list {
    margin-top: 16px;
    padding: 0 10px;
  }

  .agentforce-usecase__card-text-list li {
    font-size: 1.4rem;
  }


  /* ==================================================
 * SP用スタイル: Agent詳細セクション (.agentforce-detail)
 * ================================================== */
  /* セクション間余白 SP 60px */
  .agentforce-detail {
    margin-top: 60px;
  }

  /* コンテンツ内パディング縮小 */
  .agentforce-detail__body {
    padding: 20px 16px;
  }

  /* ヘッダーエリア調整 */
  .agentforce-detail__header {
    padding: 16px;
  }

  .agentforce-detail__title {
    font-size: 2.0rem;
  }

  .agentforce-detail__lead {
    font-size: 1.3rem;
  }

  /* Before / After 2カラム → 縦並び1カラム化 */
  .agentforce-detail__comparison {
    flex-direction: column;
    gap: 32px;
  }

  .agentforce-detail__col {
    width: 100%;
  }

  .agentforce-detail__list--before li,
  .agentforce-detail__list--after li {
    font-size: 1.4rem;
  }

  /* 単体テキスト・ステップ表記のSP調整 */
  .agentforce-detail__intro {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .agentforce-detail__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .agentforce-detail__step-item {
    width: 100%;
  }

  .agentforce-detail__step-num {
    font-size: 2.4rem;
  }

  .agentforce-detail__step-text {
    font-size: 1.4rem;
  }

  .agentforce-usecase__check-list li {
    /* サイズを縮小し、位置を「left center」から「left 3px」へ上寄せ */
    background: url("../images2/pages2/check-icon.png") no-repeat left 3px / 16px 16px;
    padding-left: 24px;
    font-size: 1.3rem;
  }

  .agentforce-detail__list--after li {
    /* アイコンサイズを 20px → 16px に縮小 */
    background: url("../images2/pages2/check-icon.png") no-repeat left 2px / 16px 16px;
    /* アイコン縮小に合わせて左余白を詰める */
    padding-left: 22px;
    /* SP基本設定に沿ってフォントサイズをやや縮小 */
    font-size: 1.4rem;
  }

  /* ==================================================
 * SP用スタイル: 社外事例セクション (.case-study)
 * ================================================== */
  /* セクション余白 */
  .case-study {
    margin-top: 60px;
    padding-bottom: 40px;
  }

  /* --------------------------------------------------
   * 上部 2カラムエリア → 縦並び1カラム化
   * -------------------------------------------------- */
  .case-study__top-grid {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
    margin-bottom: 40px;
  }

  .case-study__info,
  .case-study__img-wrap {
    width: 100%;
  }

  .case-study__company-name {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }

  .case-study__summary {
    font-size: 1.4rem;
    margin-bottom: 24px;
  }

  /* --------------------------------------------------
   * 企業データ表（table）のSP調整
   * -------------------------------------------------- */
  .case-study__table th,
  .case-study__table td {
    padding: 12px 0;
    font-size: 1.4rem;
  }

  .case-study__table th {
    width: 90px;
    /* 固定220pxを解除し、SP用に適切な幅を指定 */
    padding-right: 12px;
  }

  /* --------------------------------------------------
   * 下部 Before / After 関連
   * -------------------------------------------------- */
  .case-study__comparison-title {
    font-size: 1.6rem;
    margin-left: 8px;
  }

  .case-study__comparison-text {
    font-size: 1.4rem;
  }

  .case-study__num-list li {
    font-size: 1.4rem;
  }
}

/* ==================================================
 * PavoMart概要セクション (.pavomart-about)
 * ================================================== */

.pavomart-about {
  margin-top: 80px;
}

/* --------------------------------------------------
 * 1カラム 縦並びレイアウト
 * -------------------------------------------------- */
.pavomart-about__content {
  margin-top: 40px;
}

/* テキストエリア（コンテンツ枠の左端に配置） */
.pavomart-about__text-wrap {
  max-width: 1200px;
  margin: 0 0 0 0;
  /* 左寄せ（margin-left: 0） */
  text-align: left;
}

.pavomart-about__lead {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.6;
  margin: 0 0 24px;
  text-align: left;
}

.pavomart-about__desc {
  font-size: 1.6rem;
  font-weight: 400;
  color: #282828;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* --------------------------------------------------
 * 画面イメージ大画像（中央寄せ）
 * -------------------------------------------------- */
.pavomart-about__img-wrap {
  width: 100%;
  max-width: 822px;
  margin: 40px auto 0;
  /* 画像は中央配置を維持 */
}

.pavomart-about__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
 * 導入シーンセクション (.pavomart-scene)
 * ================================================== */

/* セクション間余白 120px */
.pavomart-scene {
  margin-top: 120px;
}

/* サブ見出し */
.pavomart-scene__subtitle {
  font-size: 2.0rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 40px 0 0;
}

/* --------------------------------------------------
 * 3カラムレイアウト
 * -------------------------------------------------- */
.pavomart-scene__card-grid {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  /* 左右20pxパディング */
  gap: 5.833%;
  /* 幅1200pxのとき70px相当 */
  margin-top: 28px;
  box-sizing: border-box;
}

.pavomart-scene__card {
  /* (100% - 11.666%) / 3 ≒ 29.444% */
  width: 29.444%;
  box-sizing: border-box;
}

/* 上部カラーラベル */
.pavomart-scene__card-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 2.0rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
}

.pavomart-scene__card-label--pink {
  background-color: #d888b8;
}

.pavomart-scene__card-label--blue {
  background-color: #6699ff;
}

.pavomart-scene__card-label--green {
  background-color: #66cc99;
}

/* カード中央画像 */
.pavomart-scene__card-img {
  width: 100%;
  margin-top: 24px;
}

.pavomart-scene__card-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
 * 箇条書きリスト（ドット付き）
 * -------------------------------------------------- */
.pavomart-scene__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}

.pavomart-scene__list li {
  position: relative;
  padding-left: 20px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.6;
}

/* 左側のカラー丸ポチ */
.pavomart-scene__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pavomart-scene__list--pink li::before {
  background-color: #d888b8;
}

.pavomart-scene__list--blue li::before {
  background-color: #6699ff;
}

.pavomart-scene__list--green li::before {
  background-color: #66cc99;
}

/* --------------------------------------------------
 * 解決策エリア（.pavomart-scene__solution）
 * -------------------------------------------------- */
.pavomart-scene__solution {
  margin-top: 60px;
}

.pavomart-scene__solution-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 0;
}

/* 横長画像 */
.pavomart-scene__solution-img {
  width: 100%;
  margin-top: 32px;
}

.pavomart-scene__solution-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* チェックマークリスト */
.pavomart-scene__check-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  width: fit-content;
  /* 中央寄りにまとめるためコンテンツ幅にフィット */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pavomart-scene__check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.5;
  /* 文頭の上端に揃えるよう top 2px で背景位置を指定 */
  background: url("../images2/pages2/check-blue.png") no-repeat left 2px / 20px 20px;
}

/* ==================================================
 * 導入実績セクション (.pavomart-case)
 * ================================================== */

/* セクション間余白 120px */
.pavomart-case {
  margin-top: 120px;
}

/* --------------------------------------------------
 * 上部 2カラムエリア
 * -------------------------------------------------- */
.pavomart-case__top-grid {
  display: flex;
  justify-content: space-between;
  gap: 5%;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 左カラム */
.pavomart-case__info {
  width: 47.5%;
  box-sizing: border-box;
}

.pavomart-case__company-name {
  font-size: 2.0rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.3;
  margin: 0 0 16px;
}

.pavomart-case__summary {
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  line-height: 1.6;
  margin: 0 0 32px;
}

/* 企業データ表 */
.pavomart-case__table {
  width: 100%;
  border-collapse: collapse;
}

.pavomart-case__table tr {
  border-bottom: 1px solid #dedede;
}

.pavomart-case__table tr:first-child {
  border-top: 1px solid #dedede;
}

.pavomart-case__table th,
.pavomart-case__table td {
  padding: 12px 0;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.pavomart-case__table th {
  width: 100px;
  font-weight: 700;
  color: #282828;
  padding-right: 16px;
  box-sizing: border-box;
}

.pavomart-case__table td {
  font-weight: 400;
  color: #282828;
}

/* 右カラム Media */
.pavomart-case__media {
  width: 47.5%;
  box-sizing: border-box;
}

.pavomart-case__logo-wrap {
  width: 100%;
  margin-bottom: 24px;
}

.pavomart-case__logo-wrap img {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

.pavomart-case__img-wrap {
  width: 100%;
}

.pavomart-case__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
 * 下部 Before / After 比較エリア
 * -------------------------------------------------- */
.pavomart-case__comparison {
  display: flex;
  justify-content: space-between;
  gap: 5%;
}

.pavomart-case__col {
  width: 47.5%;
  box-sizing: border-box;
}

/* ヘッダー・ラベル */
.pavomart-case__col-header {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 20px;
}

.pavomart-case__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 4px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
}

.pavomart-case__label--before {
  background-color: #808080;
}

.pavomart-case__label--after {
  background-color: #f29600;
}

.pavomart-case__comparison-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin-left: 12px;
}

/* テキストコンテンツ */
.pavomart-case__comparison-text {
  font-size: 1.6rem;
  font-weight: 400;
  color: #282828;
  line-height: 1.7;
}

.pavomart-case__comparison-sub {
  font-size: 1.5rem;
  font-weight: 700;
  color: #282828;
  margin: 16px 0 8px;
}

.pavomart-case__comparison-sub:first-child {
  margin-top: 0;
}

.pavomart-case__comparison-text p {
  margin: 0 0 16px;
}

/* After側・箇条書き */
.pavomart-case__bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pavomart-case__bullet-list li {
  position: relative;
  padding-left: 14px;
}

.pavomart-case__bullet-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ==================================================
 * 製品資料・デモ動画セクション (.pavomart-media)
 * ================================================== */

/* セクション間余白 120px */
.pavomart-media {
  margin-top: 120px;
  padding-bottom: 80px;
}

.pavomart-media__block {
  margin-top: 40px;
}

.pavomart-media__subtitle {
  font-size: 2.2rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.4;
  margin: 0 0 32px;
}

/* --------------------------------------------------
 * 資料ダウンロード（2カラム）
 * -------------------------------------------------- */
.pavomart-media__download-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
}

/* 左カラム（ボタン位置調整） */
.pavomart-media__download-left {
  width: 47.5%;
  display: flex;
  justify-content: center;
  /* 左カラム内でボタンを左右中央寄せ */
  align-items: center;
  box-sizing: border-box;
}

/* ボタン自身の自動マージン（親要素での中央寄せ補正） */
.pavomart-media__download-left .com-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pavomart-media__download-left .com-btn a {
  margin: 0;
  /* 左寄せ配置 */
  width: 100%;
  /* カラム幅いっぱいに広げる場合 */
  max-width: 49rem;
}

/* 最大幅420px調整用ボタンモディファイア */
.com-btn--w420 a {
  width: 100% !important;
  max-width: 420px !important;
}

/* 右カラム（資料画像） */

.pavomart-media__download-right {
  width: 47.5%;
  display: flex;
  justify-content: center;
  /* 右カラム内で水平中央寄せ */
  align-items: center;
  box-sizing: border-box;
}

.pavomart-media__doc-img {
  width: 100%;
  max-width: 420px;
  /* 420px指定 */
  aspect-ratio: 420 / 237;
  /* 縦横比を維持 */
}

.pavomart-media__doc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------
 * デモ動画枠（ローカルvideo対応）
 * -------------------------------------------------- */
.pavomart-media__video-block {
  padding: 0 40px;
  /* 左右40pxパディング */
  box-sizing: border-box;
}

.pavomart-media__video-wrap {
  position: relative;
  width: 80%;
  /* 幅を縮小 */
  margin: 0 auto;
  /* 中央寄せ */
  padding-top: 45%;
  /* 16:9比率を維持 */
  background-color: #000000;
  border: 4px solid #282828;
  box-sizing: border-box;
}

/* video要素のフィット指定 */
.pavomart-media__video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 映像の縦横比を崩さず枠内に収める */
}

/* ==================================================
 * SP用スタイル（768px以下）
 * ================================================== */
@media screen and (max-width: 768px) {

  .pavomart-about {
    margin-top: 40px;
  }

  .pavomart-about__content {
    margin-top: 24px;
  }

  .pavomart-about__lead {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .pavomart-about__desc {
    font-size: 1.4rem;
    line-height: 1.7;
  }

  .pavomart-about__img-wrap {
    max-width: 100%;
    margin-top: 32px;
  }

  /* セクション間余白 */
  .pavomart-scene {
    margin-top: 60px;
  }

  /* サブ見出し */
  .pavomart-scene__subtitle {
    font-size: 1.8rem;
    margin-top: 24px;
  }

  /* --------------------------------------------------
   * カードエリア（1カラム縦並び化）
   * -------------------------------------------------- */
  .pavomart-scene__card-grid {
    flex-direction: column;
    padding: 0;
    gap: 40px;
    margin-top: 24px;
  }

  .pavomart-scene__card {
    width: 100%;
  }

  .pavomart-scene__card-label {
    height: 56px;
    font-size: 1.6rem;
  }

  .pavomart-scene__card-img {
    margin-top: 16px;
    padding: 0;
    box-sizing: border-box;
    max-width: 220px;
    /* ★追加: SP表示時の画像サイズ上限（好みに合わせて 180px〜220px などで調整） */
    margin-left: auto;
    /* ★追加: 中央寄せ */
    margin-right: auto;
    /* ★追加: 中央寄せ */
  }

  .pavomart-scene__list {
    margin-top: 16px;
    padding: 0 8px;
  }

  .pavomart-scene__list li {
    font-size: 1.4rem;
  }

  /* --------------------------------------------------
   * 解決策エリア（画像の横スクロール対応）
   * -------------------------------------------------- */
  .pavomart-scene__solution {
    margin-top: 48px;
  }

  .pavomart-scene__solution-title {
    font-size: 1.8rem;
  }

  /* 横スクロールコンテナ */
  .pavomart-scene__solution-img {
    margin-top: 20px;
    overflow-x: auto;
    /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch;
    /* iOSの慣性スクロール */
  }

  /* 画像が潰れずPC用の幅を保持してスクロールさせる設定（直下のメイン画像のみ指定） */
  .pavomart-scene__solution-img>img {
    width: auto;
    min-width: 600px;
    /* スクロール領域の最小幅（見映えに合わせて調整可） */
    max-width: none;
    height: auto;
  }

  /* チェックマークリスト */
  .pavomart-scene__check-list {
    margin-top: 24px;
    width: 100%;
    gap: 16px;
  }

  .pavomart-scene__check-list li {
    font-size: 1.4rem;
    padding-left: 28px;
    background-size: 18px 18px;
    background-position: left 3px;
  }

  /* ==================================================
 * SP用スタイル（768px以下）
 * ================================================== */

  /* セクション間余白 */
  .pavomart-case {
    margin-top: 60px;
  }

  /* --------------------------------------------------
   * 上部エリア（1カラム縦並び化）
   * -------------------------------------------------- */
  .pavomart-case__top-grid {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .pavomart-case__info {
    width: 100%;
  }

  .pavomart-case__company-name {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }

  .pavomart-case__summary {
    font-size: 1.4rem;
    margin-bottom: 24px;
  }

  /* 企業データ表の調整 */
  .pavomart-case__table th,
  .pavomart-case__table td {
    padding: 10px 0;
    font-size: 1.4rem;
  }

  .pavomart-case__table th {
    width: 80px;
    /* SPでの見出し幅を少し縮小 */
    padding-right: 12px;
  }

  .pavomart-case__media {
    width: 100%;
  }

  .pavomart-case__logo-wrap {
    margin-bottom: 16px;
  }

  .pavomart-case__logo-wrap img {
    max-width: 200px;
    /* ロゴサイズ調整 */
  }

  /* --------------------------------------------------
   * 下部 Before / After 比較エリア（1カラム縦並び化）
   * -------------------------------------------------- */
  .pavomart-case__comparison {
    flex-direction: column;
    gap: 40px;
  }

  .pavomart-case__col {
    width: 100%;
  }

  .pavomart-case__col-header {
    padding-bottom: 8px;
    margin-bottom: 16px;
  }

  .pavomart-case__label {
    padding: 3px 12px;
    font-size: 1.3rem;
  }

  .pavomart-case__comparison-title {
    font-size: 1.6rem;
    margin-left: 10px;
  }

  .pavomart-case__comparison-text {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .pavomart-case__comparison-sub {
    font-size: 1.4rem;
    margin: 12px 0 6px;
  }

  /* --------------------------------------------------
   * 資料ダウンロード（1カラム縦並び化）
   * -------------------------------------------------- */
  /* セクション間余白 */
  .pavomart-media {
    margin-top: 60px;
    padding-bottom: 40px;
  }

  .pavomart-media__block {
    margin-top: 32px;
  }

  .pavomart-media__subtitle {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .pavomart-media__download-grid {
    flex-direction: column-reverse;
    /* 画像を上に、ボタンを下に配置する場合はこちらの指定 */
    gap: 24px;
  }

  .pavomart-media__download-left,
  .pavomart-media__download-right {
    width: 100%;
  }

  .pavomart-media__download-left .com-btn a,
  .com-btn--w420 a {
    max-width: 100% !important;
    /* スマホ画面いっぱいにボタンをフィット */
  }

  .pavomart-media__doc-img {
    max-width: 240px;
    /* SP表示時の画像上限 */
    margin: 0 auto;
  }

  /* --------------------------------------------------
   * デモ動画枠
   * -------------------------------------------------- */
  .pavomart-media__video-block {
    padding: 0;
    /* SP時は左右パディングを解除 */
  }

  .pavomart-media__video-wrap {
    width: 100%;
    /* SP時は横幅100%に広げる */
    padding-top: 56.25%;
    /* 16:9の縦横比（9 ÷ 16 = 0.5625） */
    border-width: 2px;
    /* 枠線を少し細く調整 */
  }

}

/*　　com-btn
-------------------------------------------------------*/
.com-btn a {
  margin: 0 auto;
  height: 7.1rem;
  padding: 1rem 3rem;
  width: 49rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 0.8rem;
  background: #282828 url(../images/common/icon01.png) no-repeat right 1.3rem center/0.9rem;
}

@media all and (min-width: 768px) {
  .com-btn a:hover {
    transform: scale(1.03);
  }
}

@media all and (max-width: 767px) {
  .com-btn a {
    height: 5.6rem;
    width: auto;
    max-width: 33.5rem;
  }
}


/* ==================================================
 * ブログ記事一覧（blog_index）
 * ================================================== */

/* ページ全体の最初かつ最後のセクションのため上下マージン80pxを指定 */
.blog-index {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* --------------------------------------------------
 * カテゴリエリア
 * -------------------------------------------------- */
.blog-index-category {
  display: flex;
  align-items: center;
  gap: 32px;
  background-color: #f7f8f9;
  padding: 24px 32px;
  margin-top: 32px;
  box-sizing: border-box;
}

.blog-index-category__title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #282828;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1;
}

.blog-index-category__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* カテゴリボタンデザイン */
.blog-index-category__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid #cccccc;
  font-size: 1.4rem;
  color: #282828;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.blog-index-category__btn:hover {
  background-color: #282828;
  color: #ffffff;
}

/* --------------------------------------------------
 * 記事一覧エリア（自動挿入用の空コンテナ）
 * -------------------------------------------------- */
.blog-index-content {
  min-height: 200px;
  margin-top: 40px;
}

/* --------------------------------------------------
 * ページネーションエリア
 * -------------------------------------------------- */
.blog-index-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}

/* カウント表示 (1 / 13) */
.blog-index-pagination__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  padding: 0 12px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-size: 1.4rem;
  color: #282828;
  box-sizing: border-box;
}

/* 各枠ボタン */
.blog-index-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-size: 1.4rem;
  color: #282828;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* アクティブ状態 */
.blog-index-pagination__item.is-active {
  font-weight: 700;
  border-color: #282828;
}

/* ホバー時の背景色を #eef0f4 に変更 */
.blog-index-pagination__item:hover:not(.is-active) {
  background-color: #eef0f4;
  border-color: #cccccc;
  color: #282828;
  /* 文字色はそのまま */
}

/* 省略記号（…） */
.blog-index-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: 1.4rem;
  color: #282828;
}

/* 「最後 »」ボタン */
.blog-index-pagination__item--last {
  padding: 0 12px;
}

/* ==================================================
 * ニュース記事一覧（news_index）
 * ================================================== */

/* ページ全体の最初かつ最後のセクションのため上下マージン80pxを指定 */
.news-index {
  margin-top: 80px;
  margin-bottom: 80px;
}


/* --------------------------------------------------
 * 記事一覧エリア（自動挿入用の空コンテナ）
 * -------------------------------------------------- */
.news-index-content {
  min-height: 200px;
  margin-top: 40px;
}

/* --------------------------------------------------
 * ページネーションエリア
 * -------------------------------------------------- */
.news-index-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}

/* カウント表示 (1 / 13) */
.news-index-pagination__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  padding: 0 12px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-size: 1.4rem;
  color: #282828;
  box-sizing: border-box;
}

/* 各枠ボタン */
.news-index-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-size: 1.4rem;
  color: #282828;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* アクティブ状態 */
.news-index-pagination__item.is-active {
  font-weight: 700;
  border-color: #282828;
}

/* ホバー時の背景色を #eef0f4 に変更 */
.news-index-pagination__item:hover:not(.is-active) {
  background-color: #eef0f4;
  border-color: #cccccc;
  color: #282828;
  /* 文字色はそのまま */
}

/* 省略記号（…） */
.news-index-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: 1.4rem;
  color: #282828;
}

/* 「最後 »」ボタン */
.news-index-pagination__item--last {
  padding: 0 12px;
}

/* ==================================================
 * 記事詳細（blog-detail）
 * ================================================== */

/* ページ全体の最初かつ最後のセクションのため上下マージン80pxを指定 */
.blog-detail {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* コンテンツ幅（1200px）から左右40pxのパディングを持たせるコンテナ */
.blog-detail-container {
  padding: 0 40px;
  box-sizing: border-box;
}

/* --------------------------------------------------
 * 1. 投稿日付
 * -------------------------------------------------- */
.blog-detail__date {
  display: block;
  font-size: 1.6rem;
  color: #282828;
  line-height: 1;
  margin-bottom: 16px;
}

/* --------------------------------------------------
 * 2. 記事タイトル
 * -------------------------------------------------- */
.blog-detail__title {
  font-size: 3.6rem;
  font-weight: 700;
  color: #282828;
  line-height: 1.3;
  margin: 0 0 40px 0;
}

/* --------------------------------------------------
 * 3. 記事本文エリア（WP出力枠）
 * -------------------------------------------------- */
.blog-detail__content {
  min-height: 200px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #282828;
  margin-bottom: 80px;
}

.blog-detail__content p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
 * 4. 前後の記事ナビゲーション
 * -------------------------------------------------- */
.blog-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog-detail-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #282828;
  font-size: 1.4rem;
  color: #282828;
  text-decoration: none;
  background-color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-detail-nav__btn:hover {
  background-color: #282828;
  color: #ffffff;
}

/* 右側のボタン（次の記事へ）を右寄せに固定 */
.blog-detail-nav__btn--next {
  margin-left: auto;
}

/* ==================================================
 * SP対応 (767px以下)
 * ================================================== */
@media screen and (max-width: 767px) {
  .blog-index {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .news-index {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .blog-detail {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .blog-detail-container {
    padding: 0 10px;
    box-sizing: border-box;
  }



  /* ==================================================
 * SP対応 (767px以下)
 * ================================================== */


  /* --------------------------------------------------
   * ページネーション（折り返し許可＆端ボタンのサイズ維持）
   * -------------------------------------------------- */
  .blog-index-pagination,
  .news-index-pagination {
    flex-wrap: wrap;
    /* 数が多くなったら中央揃えのまま折り返す */
    gap: 8px;
    /* ボタン同士の余白は適正値を保持 */
    margin-top: 40px;
  }

  /* カウント表示 (1 / 13) - 端ボタンサイズ維持 */
  .blog-index-pagination__count,
  .news-index-pagination__count {
    min-width: 60px;
    height: 36px;
    padding: 0 12px;
    font-size: 1.2rem;
    /* SPでの基本通りやや縮小 */
    white-space: nowrap;
  }

  /* 各数字ボタン */
  .blog-index-pagination__item,
  .news-index-pagination__item {
    min-width: 32px;
    height: 36px;
    padding: 0 6px;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  /* 省略記号（…） */
  .blog-index-pagination__ellipsis,
  .news-index-pagination__ellipsis {
    min-width: 24px;
    height: 36px;
    font-size: 1.2rem;
  }

  /* 「最後 »」ボタン - 端ボタンサイズ維持 */
  .blog-index-pagination__item--last,
  .news-index-pagination__item--last {
    padding: 0 12px;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  /* --------------------------------------------------
 * カテゴリエリア
 * -------------------------------------------------- */
  .blog-index-category__title {
    font-size: 1.8rem;
    /* 2.4rem から小さく調整 */
    font-weight: 800;
    color: #282828;
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  /* カテゴリ枠全体の余白調整 */
  .blog-index-category,
  .news-index-category {
    padding: 16px 20px;
    gap: 16px;
  }

  /* SPでのカテゴリボタン（さらにやや縮小） */
  .blog-index-category__btn,
  .news-index-category__btn {
    padding: 4px 10px;
    font-size: 1.1rem;
  }

  /* SPでの投稿日付 */
  .blog-detail__date {
    font-size: 1.2rem;
  }

  /* SPでの記事タイトル */
  .blog-detail__title {
    font-size: 2.2rem;
    margin-bottom: 24px;
  }

  /* SPでの記事本文 */
  .blog-detail__content {
    font-size: 1.4rem;
    margin-bottom: 40px;
  }

  /* SPでのナビゲーションボタン */
  .blog-detail-nav__btn {
    font-size: 1.2rem;
    padding: 6px 12px;
  }

}


/* 1. 自動生成された p タグを Flexbox にして縦中央揃えにする */
.privacy-check p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  /* ← 文字サイズを16pxに指定 */
  line-height: 1.5;
}

/* 2. 外枠の余白と下線 */
.privacy-check {
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
}

/* 3. 太字テキスト */
.privacy-check strong {
  font-weight: 700;
  font-size: 16px;
}

/* 4. チェックボックス自体の大きさとスタイル */
.privacy-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #f37b1d;
  cursor: pointer;
  margin: 0;
}

/* 5. CF7の自動タグが持つ余計な高さをリセット */
.privacy-check .wpcf7-form-control-wrap,
.privacy-check .wpcf7-form-control,
.privacy-check .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* 6.確認画面へボタンのデフォルト枠線とアウトラインを消去 */
#js-btn-to-confirm,
.privacy-submit .submit-btn {
  border: none;
  outline: none;
  box-shadow: none;
}



/* --------------------------------------------------------------------------------------------------------------
 * グローバルナビゲーション（ヘッダー）
 * ----------------------------------------------------------------------------------------------------------------- */

.header-new {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  padding: 0;
  box-sizing: border-box;
  z-index: 9999;

}

/* PC用のヘッダーインナー枠線・角丸設定 */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

/* ロゴ */
.header__logo {
  padding-left: 24px;
}

.header__logo img {
  height: 36px;
  width: auto;
  display: block;
}

.header__nav {
  height: 100%;
  margin-left: auto;
}

.header__nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 32px;
  gap: 0;
}

.header__nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 上部ナビリンク指定 */
.header__nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  color: #282828;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;

  font-family: Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;

}

.header__nav-item:hover .header__nav-link,
.header__nav-link:hover {
  color: #282828;
  background-color: rgba(240, 240, 240, 0.8);
  border-radius: 16px 16px 0 0;
}

/* 矢印（v）アイコン */
.header__nav-item.has-mega .header__nav-link::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #282828;
  border-bottom: 2px solid #282828;
  transform: rotate(45deg);
  margin-top: -4px;
}

/* --------------------------------------------------
 * メガメニュー（ドロップダウンエリア）
 * -------------------------------------------------- */
.mega-menu {
  position: absolute;
  top: 80px;
  left: 40px;
  right: 40px;
  height: 280px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 20px 40px;
  box-sizing: border-box;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  pointer-events: none;
  z-index: 10000;
}

.header__nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-menu__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.mega-menu__media {
  aspect-ratio: 480 / 240;
  height: 100%;
  max-height: 240px;
  flex-shrink: 0;
}

.mega-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.mega-menu__content {
  flex-grow: 1;
}

.mega-menu__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #282828;
  margin: 0 0 20px;
}

.mega-menu__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 200px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid #282828;
  font-size: 1.6rem;
  font-weight: 500;
  color: #282828;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  background-color: #ffffff;
}

.mega-menu__btn::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 20px;
  background: url("/wp-content/themes/sohobb/images2/pages2/arrow-right.png") no-repeat center center / contain;
  flex-shrink: 0;
}

.mega-menu__btn:hover {
  background-color: #282828;
  border-color: #ffffff;
  color: #ffffff;
}
.mega-menu__btn:hover::after {
  background-image: url("/wp-content/themes/sohobb/images2/pages2/icon-arrow-white.png");
}

/* PC用 右端のお問い合わせボタン */
.header__contact {
  height: 100%;
  display: flex;
  align-items: center;
}

.header__contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 32px;
  background: linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  box-sizing: border-box;
}

.header__contact-btn:hover {
  opacity: 0.9;
}

.header__contact-sp,
.header__hamburger {
  display: none;
}

/* ==================================================
 * 901〜1360px: PCナビを維持したままコンパクト化
 * ================================================== */
@media screen and (min-width: 901px) and (max-width: 1360px) {
  .header-new {
    left: 20px;
    right: 20px;
    width: auto;
  }

  .header__inner {
    height: 70px;
  }

  .header__logo,
  .header__contact {
    flex-shrink: 0;
  }

  .header__logo img {
    width: 150px;
    height: auto;
  }

  .header__nav {
    min-width: 0;
    margin-left: auto;
  }

  .header__nav-list {
    gap: 4px;
    flex-wrap: nowrap;
  }

  .header__nav-link {
    padding: 0 7px;
    font-size: 13px;
    white-space: nowrap;
  }

  .header__contact-btn {
    padding: 0 18px;
    font-size: 16px;
    white-space: nowrap;
  }

  .mega-menu {
    top: 70px;
    left: 20px;
    right: 20px;
  }
}

/* 900px直前ではさらに余白と文字を詰め、メニューの改行を防ぐ */
@media screen and (min-width: 901px) and (max-width: 1080px) {
  .header__logo img {
    width: 125px;
  }

  .header__nav-list {
    gap: 0;
  }

  .header__nav-link {
    padding: 0 4px;
    font-size: 11px;
  }

  .header__contact-btn {
    padding: 0 12px;
    font-size: 12px;
  }
}

/* ==================================================
 * ブレイクポイント（900px以下）: ドロワー切り替え
 * ================================================== */
@media screen and (max-width: 900px) {

  .header-new {
    left: 20px;
    right: 20px;
    width: auto;
  }

  .header__inner {
    height: 60px;
    padding-right: 16px;

  }

  /* ドロワーナビゲーション本体（非表示状態） */
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 99999;
    overflow-y: auto;
    padding: 80px 20px 40px;
    box-sizing: border-box;
    margin-left: 0;

    /* アニメーションと初期位置設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  /* ハンバーガー開閉時（is-active付与時） */
  .header__nav.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0;
    gap: 16px;
  }

  .header__nav-item {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .header__nav-link {
    width: 100%;
    height: auto;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    font-size: 1.8rem;
  }

  .header__nav-item:hover .header__nav-link,
  .header__nav-link:hover {
    background-color: transparent;
    border-radius: 0;
  }

  /* メガメニュー表示切替 */
  .mega-menu {
    position: static;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background-color: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 16px 0;
    box-shadow: none;
    display: none;
    width: 100%;
  }

  .mega-menu.is-open {
    display: block;
  }

  .mega-menu__inner {
    flex-direction: column;
    gap: 16px;
  }

  .mega-menu__media,
  .mega-menu__title {
    display: none;
  }

  .mega-menu__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .mega-menu__links li {
    width: auto;
  }

  .mega-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mega-menu__btn::after {
    display: none;
  }

  .header__contact {
    display: none;
  }

  .header__contact-sp {
    display: block;
    width: 100%;
    margin-top: 32px;
  }

  .header__contact-sp .header__contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: linear-gradient(to right, #ffdb4c 0%, #f69339 100%);
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 8px;
  }

  /* ハンバーガーボタン */
  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100000;
    position: relative;
  }

  .header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #282828;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .header__hamburger.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }

  .header__hamburger.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* ==================================================
 * 767px以下（スマホサイズ調整）
 * ================================================== */
@media screen and (max-width: 767px) {

  .header__nav-link {
    font-size: 15px;
    padding: 10px 0;
  }

  .mega-menu__links {
    gap: 8px;
  }

  .mega-menu__btn {
    font-size: 1.4rem;
    padding: 8px 16px;
    width: auto;
  }

  .header__contact-sp .header__contact-btn {
    font-size: 1.4rem;
    height: 48px;
  }
}

@media screen and (min-width: 901px) and (max-width: 1199px) {
  .mega-menu {
    padding-right: 16px;
    padding-left: 16px;
  }

  .mega-menu__inner {
    gap: 20px;
  }

  .mega-menu__media {
    width: 320px;
    height: 240px;
    max-height: none;
    aspect-ratio: auto;
  }
}

/* ==================================================
 * 最下部固定 採用ボタンバー (.fixed-recruit-bar)
 * ================================================== */

.fixed-recruit-spacer {
  height: clamp(100px, 13.33vw, 160px);
  width: 100%;
  pointer-events: none;
}

.fixed-recruit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #a9e6f5;
  padding: 20px 0;
  box-sizing: border-box;
}

.fixed-recruit-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.fixed-recruit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  max-width: 582px;
  height: 80px;
  background-color: #282828;
  border-radius: 6px;
  text-decoration: none;
  padding: 0 30px;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.fixed-recruit-btn:hover {
  opacity: 0.85;
}

.fixed-recruit-btn__label {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.fixed-recruit-btn::after {
  content: "";
  position: absolute;
  right: clamp(16px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(12px, 1.5vw, 18px);
  height: clamp(13px, 1.583vw, 19px);
  background: url('../images2/pages2/icon-arrow-white.png') no-repeat center / contain;
}

/* 固定バー スマホ調整 (767px以下) */
@media screen and (max-width: 767px) {

  .fixed-recruit-spacer {
    height: 80px;
  }

  .fixed-recruit-bar {
    padding: 12px 0;
  }

  .fixed-recruit-bar__inner {
    gap: 8px;
    padding: 0 12px;
  }

  .fixed-recruit-btn {
    max-width: none;
    height: 48px;
    padding: 0 20px 0 8px;
  }

  .fixed-recruit-btn__label {
    font-size: 1.3rem;
  }

  .fixed-recruit-btn::after {
    right: 6px;
    width: 7px;
    height: 8px;
  }
}



/*               SP時横スクロール画像の指アイコン                           */
/* PC（769px以上）は指アイコンを非表示 */
@media screen and (min-width: 769px) {
  .swipe-hand-icon {
    display: none;
  }
}

/* SP（768px以下）向け共通スタイル */
@media screen and (max-width: 768px) {

  /* 共通の横スクロールコンテナ */
  .sp-scroll-hint {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 共通の指アイコン枠 */
  .sp-scroll-hint .swipe-hand-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    /* アイコンの表示サイズ */
    height: auto;
    z-index: 10;
    pointer-events: none;
    animation: swipeHand 1.5s infinite ease-in-out;
  }

  /* 共通の指アイコン画像 */
  .sp-scroll-hint .swipe-hand-icon img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 領域をタップ／スワイプしている間だけアイコンを消去 */
  .sp-scroll-hint:active .swipe-hand-icon {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* 左右スワイプのアニメーション定義 */
@keyframes swipeHand {
  0% {
    transform: translate(calc(-50% - 20px), -50%);
    opacity: 0.3;
  }

  50% {
    transform: translate(calc(-50% + 20px), -50%);
    opacity: 0.7;
  }

  100% {
    transform: translate(calc(-50% - 20px), -50%);
    opacity: 0.3;
  }
}

/* ==================================================
 * medical-lp salesforce-lpページ用CSS
 * ================================================== */


/* medical-lp.html（solutions以降）用のページ固有スタイル */
.medical-page {
    --medical-ink: #282828;
    --medical-orange: #f37b1d;
    --medical-blue: #2397cf;
    --medical-blue-pale: #eaf6fb;
    --medical-pale: #f7f5f2;
    --medical-line: #ddd8d2;
    color: var(--medical-ink);
    font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

body.medical-page {
    margin: 0;
}

.medical-page.wrapper-contents {
    width: 100%;
    max-width: none;
    margin: 0;
}

.medical-page * {
    box-sizing: border-box;
}

.medical-page .wrap {
    width: min(1200px, calc(100% - 80px));
    margin-right: auto;
    margin-left: auto;
}

.medical-page section {
    padding: 80px 0;
}

.medical-page .kicker {
    display: block;
    position: relative;
    z-index: 0;
    max-width: 100%;
    margin-bottom: -10px;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: clamp(3.5rem, 5vw, 7rem);
    font-weight: 600;
    line-height: .8;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(14px);
}

@media screen and (max-width: 767px) {
    .medical-page .kicker {
        margin-bottom: -8px;
        transform: translateY(4px);
    }
}

.medical-page .title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--medical-ink);
    font-size: clamp(29px, 3.25vw, 47px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
}

.medical-page .lead {
    max-width: 700px;
    margin: 19px 0 0;
    color: var(--medical-ink);
    font-size: 16px;
    line-height: 2;
}

.medical-page .intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 100px;
    align-items: stretch;
}

.medical-page .intro .kicker {
    font-size: clamp(3.5rem, 5vw, 5rem);
}

.medical-page .timeline {
    margin-top: 39px;
    padding: 30px;
    border-left: 4px solid var(--medical-orange);
    background: var(--medical-pale);
}

.medical-page .timeline h3 {
    margin: 0 0 14px;
    font-size: 21px;
}

.medical-page .timeline-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--medical-line);
}

.medical-page .timeline-item:last-child {
    padding-bottom: 0;
}

.medical-page .timeline-item strong {
    color: var(--medical-orange);
    font-size: 14px;
}

.medical-page .timeline-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

.medical-page .care-visual {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    contain: size;
    overflow: hidden;
    background: var(--medical-blue-pale);
    position: relative;
    overflow: visible;
    background: transparent;
}

.medical-page .care-visual::before {
    position: absolute;
    bottom: -32px;
    left: -32px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    content: "";
}


.medical-page .care-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

.medical-page .section-lead {
    margin-bottom: 48px;
}

.medical-page .heltree {
    background: transparent;
}

.medical-page .heltree-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
        "banner features"
        "button features";
    column-gap: 40px;
    row-gap: 10px;
    align-items: start;
}

.medical-page .heltree-banner {
    grid-area: banner;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    aspect-ratio: 473 / 154;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.medical-page .heltree-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medical-page .heltree-banner .heltree-mark {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.medical-page .heltree-wordmark {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #193753;
    text-align: center;
}

.medical-page .heltree-wordmark p {
    margin: 0;
    line-height: 1.35;
}

.medical-page .heltree-eyebrow,
.medical-page .heltree-description {
    font-size: 16px;
}

.medical-page .heltree-subtitle {
    margin-top: 2px !important;
    font-size: 18px;
    font-weight: 700;
}

.medical-page .heltree-name {
    margin-top: 5px !important;
    color: #16b9ab;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.medical-page .heltree-rule {
    width: 100%;
    margin: 5px 0 6px;
    border-top: 2px solid #16b9ab;
}

.medical-page .medical-heltree-btn {
    grid-area: button;
    display: flex;
    justify-content: center;
}

.medical-page .medical-heltree-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36rem;
    height: 5.2rem;
    margin: 0 auto;
    padding: 1rem 3rem;
    box-sizing: border-box;
    border-radius: .8rem;
    color: #fff;
    background: #282828 url("../images2/pages2/icon-arrow-white.png") no-repeat right 1.3rem center / .9rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;
}

@media all and (min-width: 768px) {
    .medical-page .medical-heltree-btn a:hover {
        transform: scale(1.03);
    }
}

@media all and (max-width: 767px) {
    .medical-page .medical-heltree-btn a {
        width: auto;
        max-width: 33.5rem;
        height: 5.6rem;
    }
}

.medical-page .feature-grid {
    grid-area: features;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.medical-page .feature-grid::before,
.medical-page .feature-grid::after {
    position: absolute;
    z-index: 0;
    content: "";
    background: #b9e1f3;
    pointer-events: none;
}

.medical-page .feature-grid::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.medical-page .feature-grid::after {
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
}

.medical-page .feature {
    position: relative;
    z-index: 1;
    min-height: 180px;
    padding: 26px;
    background: #f5f5f5;
}

.medical-page .feature-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.medical-page .feature-number {
    font-family: Arial, sans-serif;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(to bottom, #7fd8f5 0%, #2397cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.medical-page .feature strong {
    color: var(--medical-ink);
    font-size: 17px;
    line-height: 1.5;
}

.medical-page .feature>span {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.8;
}

.medical-page .ai {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(35, 151, 207, .28) 0%, transparent 38%),
        linear-gradient(135deg, #202629 0%, #34302c 100%);
}

.medical-page .ai .wrap {
    position: relative;
    z-index: 1;
}

.medical-page .ai-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.medical-page .ai .title,
.medical-page .ai .lead,
.medical-page .ai-card h3,
.medical-page .ai-card p {
    color: #fff;
}

.medical-page .ai .title {
    background:
        linear-gradient(to bottom, #fff 0%, #fff 58%, #8bd8f5 100%) 0 0 / 100% 1.4em repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.medical-page .ai .kicker {
    color: #5c5c5c;
}

.medical-page .ai .lead {
    max-width: none;
}

.medical-page .ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.medical-page .ai-card {
    overflow: hidden;
    padding: 0 32px 32px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(65, 65, 65, .52);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.medical-page .ai-card-image {
    aspect-ratio: 16 / 7;
    margin: 0 -32px 28px;
    overflow: hidden;
    background: #f5f5f5;
}

.medical-page .ai-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medical-page .ai-card .year {
    display: block;
    color: var(--medical-blue);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

.medical-page .ai-card h3 {
    margin: 14px 0 12px;
    color: #fff;
    font-size: 24px;
    line-height: 1.4;
}

.medical-page .ai-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
}



.medical-page .solutions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.medical-page .solution {
    position: relative;
    min-height: 240px;
    padding: 16px 32px 24px;
    border-top: 4px solid var(--medical-orange);
    background: var(--medical-pale);
}

.medical-page .solution-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#solutions .lead {
    max-width: none;
}

.medical-page .solution .type {
    display: block;
    margin-left: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}

.medical-page .solution h3 {
    margin: 16px 0 14px;
    text-align: left;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.medical-page .solution-icon {
    position: static;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.medical-page .solution p {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
}

.medical-page .health {
    background: #fff;
}


.medical-page .health-grid {
    display: grid;
    grid-template-columns: .6fr 1.4fr;
    gap: 95px;
    align-items: stretch;
}

.medical-page .health-visual {
    aspect-ratio: 1 / 2;
    min-height: 0;
    background: url("../images2/pages2/helth-bg.png") center / cover;
    box-shadow: 32px 32px 0 #f7f7f7;
}

.medical-page .health-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.medical-page .health-note {
    margin-top: 48px;
    padding: 32px 0 0;
    border-top: 4px solid var(--medical-blue);
}

.medical-page .health-note h3 {
    margin: 0 0 20px;
    font-size: 19px;
}

.medical-page .future-list {
    border-top: 1px solid var(--medical-line);
}

.medical-page .future {
    padding: 16px 0 16px 23px;
    border-bottom: 1px solid var(--medical-line);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.medical-page .future::before {
    content: "→";
    margin-left: -23px;
    margin-right: 9px;
    color: var(--medical-blue);
}

.medical-page .contact {
    color: var(--medical-ink);
    text-align: center;
    background: #fff;
}

.medical-page .contact .kicker {
    z-index: 1;
    margin-bottom: 0;
    transform: none;
}

.medical-page .contact-copy {
    position: relative;
    z-index: 0;
    background: linear-gradient(110deg, #167aa9 15%, #2397cf);
}

.medical-page .contact-copy .wrap {
    padding: clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px);
}

.medical-page .contact h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.45;
}

.medical-page .contact p {
    margin: 20px 0 0;
    color: #fff;
}

.medical-page .contact .actions {
    margin-top: 33px;
}

.medical-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 195px;
    padding: 13px 18px;
    border: 1px solid var(--medical-orange);
    color: #fff;
    background: var(--medical-orange);
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

.medical-page .button::after {
    content: "→";
    margin-left: 25px;
    font-size: 18px;
    font-weight: 400;
}

.medical-page .button:hover {
    color: var(--medical-ink);
    background: #fff;
}

@media screen and (max-width: 900px) {

    .medical-page .intro,
    .medical-page .health-grid {
        gap: 50px;
    }

    .medical-page .heltree-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "banner"
            "features"
            "button";
        gap: 20px;
    }

    .medical-page .solutions {
        grid-template-columns: 1fr;
    }

    .medical-page .solution {
        min-height: 0;
    }

    .medical-page .solution h3 {
        margin-top: 16px;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .medical-page .medical-heltree-btn a {
        width: min(100%, 600px);
        height: 76px;
        font-size: 18px;
    }

    .medical-page .contact .button {
        min-width: 280px;
        padding: 18px 26px;
        font-size: 18px;
    }
}

@media screen and (max-width: 767px) {
    .medical-page .wrap {
        width: calc(100% - 40px);
    }

    .medical-page section {
        padding: 54px 0;
    }

    .medical-page .lead {
        font-size: 14px;
    }

    .medical-page .title,
    .medical-page .timeline h3,
    .medical-page .ai-card h3,
    .medical-page .health-note h3,
    .medical-page .contact h2 {
        font-size: 22px;
    }

    .medical-page .solution h3 {
        font-size: 16px;
    }

    .medical-page .solution p {
        font-size: 14px;
    }

    .medical-page .section-lead {
        margin-bottom: 33px;
    }

    .medical-page .intro,
    .medical-page .health-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .medical-page .health-visual {
        aspect-ratio: 16 / 9;
        box-shadow: 16px 16px 0 #f7f7f7;
    }

    .medical-page .care-visual::before {
        bottom: -16px;
        left: -16px;
    }

    .medical-page .health {
        padding-top: 24px;
    }

    .medical-page .health-note {
        margin-top: 28px;
    }

    .medical-page .health-note h3 {
        font-size: 18px;
    }

    .medical-page .medical-heltree-btn,
    .medical-page .medical-heltree-btn a {
        margin-top: 0;
    }

    .medical-page .heltree-banner {
        min-height: 0;
    }

    .medical-page .feature-grid {
        grid-template-columns: 1fr;
    }

    .medical-page .feature-grid::before,
    .medical-page .feature-grid::after {
        display: none;
    }

    .medical-page .feature {
        min-height: 0;
    }

    .medical-page .ai-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .medical-page .care-visual {
        min-height: 230px;
        height: auto;
    }

    .medical-page .timeline {
        padding: 23px;
    }

    .medical-page .timeline-item {
        grid-template-columns: 75px 1fr;
        gap: 10px;
    }

    .medical-page .title br,
    .medical-page .contact h2 br {
        display: none;
    }

    #solutions .kicker {
        font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    }
}

/* salesforce-lp.html 用のページ固有スタイル */
.salesforce-page {
    --sf-ink: #1f2d3d;
    --sf-blue: #2397cf;
    --sf-blue-deep: #167aa9;
    --sf-orange: #f37b1d;
    --sf-blue-pale: #eaf6fb;
    --sf-pale: #f5f8fa;
    --sf-line: #d8e4ea;
    --muted: #526574;
    color: var(--sf-ink);
    font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    overflow: hidden;
}

.salesforce-page * {
    box-sizing: border-box;
}

.salesforce-page .wrap {
    width: min(1200px, calc(100% - 80px));
    margin-right: auto;
    margin-left: auto;
}

.salesforce-page section {
    padding: 80px 0;
}

.salesforce-page .section-kicker {
    display: block;
    position: relative;
    z-index: 0;
    margin-bottom: -10px;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: clamp(3.5rem, 5vw, 7rem);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.03em;
    transform: translateY(14px);
}

.salesforce-page .section-title,
.salesforce-page .history h2 {
    display: block;
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--sf-ink);
    font-size: clamp(29px, 3.25vw, 47px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
}

.salesforce-page .section-lead>p,
.salesforce-page .expertise>div>p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 2;
}

.salesforce-page .section-lead>p {
    margin-bottom: 0;
}

.salesforce-page .history {
    background: linear-gradient(
    to right,
    var(--sf-pale) 0 50%,
    transparent 50% 100%
  );
}

.salesforce-page .history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 88px;
    align-items: stretch;
}

.salesforce-page .history .section-kicker,
.salesforce-page .coverage .section-kicker {
    color: #dbeaf1;
}

.salesforce-page .history h2 strong {
    background: linear-gradient(to bottom,
            #075d98 0%,
            #2397cf 55%,
            #62c7ed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -.04em;
    font-weight: 900;
}

.salesforce-page .history h2+p {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 2;
}

.salesforce-page .history-emphasis {
    font-weight: 700;
    background: linear-gradient(transparent 58%, rgba(170, 224, 244, .7) 58%);
}

.salesforce-page .classic-shot {
    min-height: 0;
    margin: 0;
    background: #dcebf1;
    box-shadow: -32px 32px 0 #f7f7f7;
}

.salesforce-page .classic-shot img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

.salesforce-page .section-lead {
    margin-bottom: 48px;
}

.salesforce-page .strengths,
.salesforce-page .case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.salesforce-page .strength,
.salesforce-page .case {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 30px;
    background: var(--sf-pale);
}

.salesforce-page .strength {
    display: grid;
    grid-template-rows: 120px auto;
    min-height: 0;
    padding: 0;
    border-top: 0;
    background: #f5f5f5;
}

.salesforce-page .strength-image {
    min-height: 0;
    overflow: hidden;
    border-bottom: 4px solid var(--sf-orange);
    background: #f5f5f5;
}

.salesforce-page .strength-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.salesforce-page .strength-content {
    padding: 26px 30px 30px;
}

.salesforce-page .strength h3,
.salesforce-page .case h3,
.salesforce-page .product h3 {
    margin: 20px 0 12px;
    font-size: 22px;
    line-height: 1.45;
}

.salesforce-page .strength-content h3 {
    margin-top: 0;
}

.salesforce-page .strength p,
.salesforce-page .case p,
.salesforce-page .product p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
}

.salesforce-page .coverage {
    background: linear-gradient(135deg, #f0f8fc, #e4f3f9);
}

.salesforce-page .coverage .section-lead {
    margin-bottom: 24px;
}

.salesforce-page .flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    padding: 28px;
    padding-right: 100px;
    overflow: hidden;
    background: var(--sf-blue-pale);
}

.salesforce-page .flow::before {
    position: absolute;
    top: 50%;
    right: 76px;
    /* 線の終端 */
    left: -48px;
    z-index: 0;
    height: 20px;
    background: rgba(243, 123, 29, .42);
    content: "";
    transform: translateY(-50%);
}

.salesforce-page .flow::after {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 0;
    width: 0;
    height: 0;
    border-top: 42px solid transparent;
    border-bottom: 42px solid transparent;
    border-left: 64px solid rgba(243, 123, 29, .42);
    content: "";
    transform: translateY(-50%);
}

.salesforce-page .flow-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 190px;
    padding: 20px 12px;
    color: var(--sf-blue-deep);
    background: rgba(255, 255, 255, .92);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.salesforce-page .flow-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    background: transparent;
}

.salesforce-page .flow-item strong {
    font-size: 15px;
}

.salesforce-page .flow-item small {
    display: block;
    margin-top: 14px;
    color: var(--sf-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
}

.salesforce-page .products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.salesforce-page .tag {
    padding: 8px 14px;
    border: 1px solid #b8d9e8;
    border-radius: 999px;
    color: var(--sf-blue-deep);
    background: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: 700;
}

.salesforce-page .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.salesforce-page .product-area {
    padding: 48px 0;
    background: url("../images2/pages2/seihin-bg.png") center / cover no-repeat;
}

.salesforce-page .product {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
    min-height: 220px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(8px);
}

.salesforce-page .product-image {
    display: grid;
    place-items: center;
    background: transparent;
}

.salesforce-page .product-icon {
    width: 76px;
    height: 76px;
    fill: none;
    stroke: var(--sf-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.salesforce-page .product-content {
    display: flex;
    flex-direction: column;
    padding: 28px 30px;
}

.salesforce-page .product h3 {
    margin-top: 0;
    color: var(--sf-blue-deep);
}

.salesforce-page .product a {
    color: var(--sf-blue-deep);
    font-weight: 700;
    text-decoration: none;
}

.salesforce-page .product-button {
    margin-top: auto;
    padding-top: 20px;
}

.salesforce-page .product-button--outside {
    display: none;
}

.salesforce-page .product-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 30px;
    border-radius: .8rem;
    color: #fff;
    background: #282828 url("../images2/pages2/icon-arrow-white.png") no-repeat right 1.3rem center / .9rem;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.salesforce-page .cases {
    background: var(--sf-pale);
}

.salesforce-page .cases .section-kicker {
    color: #fff;
}

.salesforce-page .case {
    min-height: 0;
    background: #fff;
}

.salesforce-page .label {
    color: var(--sf-blue-deep);
    font-size: 13px;
    font-weight: 700;
}

.salesforce-page .case h3 {
    margin-top: 18px;
}

.salesforce-page .cases .case h3 {
    margin-top: 28px;
}

.salesforce-page .cases .case>p {
    min-height: 7.4em;
}

.salesforce-page .cases .case .label {
    position: relative;
    align-self: stretch;
    margin: -30px -30px 0;
    padding: 12px 30px;
    color: #fff;
    background: var(--sf-blue);
    text-align: center;
}

.salesforce-page .cases .case .label::after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid var(--sf-blue);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    transform: translateX(-50%);
}

.salesforce-page #replace .case h3 {
    margin-top: 28px;
}

.salesforce-page #replace .case {
    border: 1px solid rgba(31, 45, 61, .28);
}

.salesforce-page #replace .case>p {
    min-height: 7.4em;
}

.salesforce-page #replace .case .label {
    position: relative;
    align-self: stretch;
    margin: -30px -30px 0;
    padding: 12px 30px;
    color: #fff;
    background: var(--sf-orange);
    text-align: center;
}

.salesforce-page #replace .case .label::after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid var(--sf-orange);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    transform: translateX(-50%);
}

.salesforce-page #replace .result span {
    background: linear-gradient(transparent 56%, rgba(170, 224, 244, .7) 56%);
}

.salesforce-page .case-image {
    flex: 0 0 130px;
    margin-top: 0px;
    background: var(--sf-blue-pale);
}

.salesforce-page .result {
    position: relative;
    margin-top: 16px;
    padding-left: 40px;
    border: 0;
    color: var(--sf-ink);
    background: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.65;
}

.salesforce-page .result::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--sf-orange);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.25;
    content: "✓";
}

.salesforce-page #replace .result::before {
    color: var(--sf-blue);
}

.salesforce-page .result span {
    padding: 0 2px;
    background: linear-gradient(transparent 56%, #ffd1b0 56%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.salesforce-page .expertise {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 88px;
    align-items: center;
}

.salesforce-page .badge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 14px;
}

.salesforce-page .badge {
    min-height: 100px;
    padding: 22px;
    border: 0;
    border-left: 4px solid var(--sf-orange);
    background: #f5f5f5;
}

.salesforce-page .badge strong {
    display: block;
    color: var(--sf-blue-deep);
    font-size: 16px;
    line-height: 1.5;
}

.salesforce-page .badge span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.salesforce-page .contact {
    text-align: center;
    background: #fff;
}

.salesforce-page .contact .section-kicker {
    z-index: 1;
    margin-bottom: 0;
    transform: none;
}

.salesforce-page .contact-copy {
    color: #fff;
    background: linear-gradient(110deg, #167aa9 15%, #2397cf);
}

.salesforce-page .contact-copy .wrap {
    padding: clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px);
}

.salesforce-page .contact h2 {
    margin: 14px 0 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.45;
}

.salesforce-page .contact p {
    margin: 18px 0 0;
    line-height: 1.8;
}

.salesforce-page .actions {
    margin-top: 32px;
}

.salesforce-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 58px;
    padding: 12px 24px;
    color: var(--sf-ink);
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.salesforce-page .contact .button {
    color: #fff;
    background: var(--sf-orange);
}

@media screen and (max-width: 900px) {

    .salesforce-page section {
        padding: 60px 0;
    }

    .salesforce-page .history-grid,
    .salesforce-page .expertise {
        gap: 48px;
    }

    .salesforce-page .flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .salesforce-page .flow::before,
    .salesforce-page .flow::after {
        display: none;
    }

    .salesforce-page .flow-item {
        z-index: auto;
    }

    .salesforce-page .flow-item:nth-child(1)::after,
    .salesforce-page .flow-item:nth-child(2)::after,
    .salesforce-page .flow-item:nth-child(3)::after,
    .salesforce-page .flow-item:nth-child(4)::after,
    .salesforce-page .flow-item:nth-child(5)::after {
        position: absolute;
        top: 50%;
        right: -26px;
        z-index: 2;
        width: 38px;
        height: 28px;
        background: var(--sf-orange);
        clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
        content: "";
        transform: translateY(-50%);
    }

    .salesforce-page .flow-item:nth-child(4)::before {
        position: absolute;
        top: 50%;
        left: -26px;
        z-index: 2;
        width: 38px;
        height: 28px;
        background: var(--sf-orange);
        clip-path: polygon(0 36%, 64% 36%, 64% 0, 100% 50%, 64% 100%, 64% 64%, 0 64%);
        content: "";
        transform: translateY(-50%);
    }
}

@media screen and (max-width: 767px) {
    .salesforce-page .wrap {
        width: calc(100% - 40px);
    }

    .salesforce-page section {
        padding: 40px 0;
    }

    .salesforce-page .section-kicker {
        font-size: clamp(2rem, 8vw, 3.2rem);
        margin-bottom: -6px;
        transform: translateY(4px);
    }

    .salesforce-page .section-title,
    .salesforce-page .history h2 {
        font-size: 22px;
    }

    .salesforce-page .section-lead>p,
    .salesforce-page .history h2+p,
    .salesforce-page .expertise>div>p {
        font-size: 14px;
    }

    .salesforce-page .history-grid,
    .salesforce-page .expertise {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .salesforce-page .classic-shot img {
        min-height: 0;
    }

    .salesforce-page .classic-shot {
        box-shadow: -16px 16px 0 #fff;
        aspect-ratio: 2 / 1;
    }

    .salesforce-page .section-lead {
        margin-bottom: 33px;

    }

    .salesforce-page .strengths,
    .salesforce-page .case-grid,
    .salesforce-page .product-grid,
    .salesforce-page .badge-grid {
        grid-template-columns: 1fr;
    }

    .salesforce-page .strength,
    .salesforce-page .case,
    .salesforce-page .product {
        min-height: 0;
    }

    .salesforce-page .strength {
        grid-template-rows: auto auto;
    }

    .salesforce-page .strength-image {
        aspect-ratio: 3 / 1;
    }

    .salesforce-page .strength h3,
    .salesforce-page .case h3,
    .salesforce-page .product h3 {
        font-size: 16px;
    }

    .salesforce-page .product-button--inside {
        display: none;
    }

    .salesforce-page .product-button--outside {
        display: block;
        width: min(100%, 490px);
        margin: 32px auto 0;
        padding-top: 0;
    }

    .salesforce-page .product-area {
        padding: 24px 0;
    }

    .salesforce-page .badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .salesforce-page .badge {
        min-height: 0;
        padding: 14px;
    }

    .salesforce-page .cases .case>p,
    .salesforce-page #replace .case>p {
        min-height: 0;
    }

    .salesforce-page .flow {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 16px;
    }

    .salesforce-page .flow::before,
    .salesforce-page .flow::after {
        display: none;
    }

    .salesforce-page .flow-item {
        display: grid;
        grid-template-areas:
            "icon title"
            "icon description";
        grid-template-columns: 46px max-content;
        column-gap: 16px;
        width: calc(100% - 40px);
        min-height: 0;
        padding: 16px;
        text-align: left;
        z-index: auto;
        justify-content: center;
        justify-self: center;
    }

    .salesforce-page .flow-item:not(:last-child)::after {
        position: absolute;
        bottom: -30px;
        left: 50%;
        z-index: 2;
        color: var(--sf-orange);
        font-family: Arial, sans-serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 1;
        content: "⬇";
        transform: translateX(-50%);
    }

    .salesforce-page .flow-icon {
        grid-area: icon;
        align-self: center;
        margin: 0;
    }

    .salesforce-page .flow-item strong {
        grid-area: title;
    }

    .salesforce-page .flow-item small {
        grid-area: description;
        margin-top: 4px;
        max-width: 190px;
    }

    .salesforce-page .contact-copy .wrap {
        padding: 40px 20px;
    }

    .salesforce-page .contact h2 {
        font-size: 22px;
    }
}

 /* ページトップへ */
 #page-top {
  display: none;
}
#page-top a {
  display: block;
  position: fixed;
  bottom: 50px;
  right: 30px;
  width: 50px;
  height: 50px;
	border-radius: 18px;
	background-color: #3792b1;
  background-image: url("../images/common/btn_pagetop_arrow.png");
	background-repeat: no-repeat;
	background-position: center;
  background-size: 20px auto;
  text-indent: -9999px;
  z-index: 9999;
}
#page-top a:hover {
  opacity: 0.5;
}
#page_top a:hover {
	opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";
}

@media screen and (min-width: 768px) and (max-width: 1239px) {
  .subpage-main {
    padding-inline: 20px;
    box-sizing: border-box;
  }

  /* プロフィール見出しは、文字の折り返しに応じて高さを確保する */
  .top_message__profile-header {
    min-height: 64px;
    aspect-ratio: auto;
    padding: 10px 16px;
    background-size: 100% 100%;
  }

  .top_message__profile-title {
    line-height: 1.25;
  }

  .top_message__profile-sub {
    line-height: 1.3;
  }

  /* 背景英字は見出し幅に合わせて縮小し、途中で折り返さない */
  .c-heading-bg::before {
    font-size: clamp(72px, 10vw, 120px);
    white-space: nowrap;
  }

  /* 企業理念は3列を維持し、幅に合わせて文字サイズを調整する */
  .c-philosophy__list {
    flex-direction: row;
  }

  .c-philosophy__item {
    width: calc((100% - 48px) / 3);
    height: auto;
    min-height: 335px;
  }

  .c-philosophy__title {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 60px;
    font-size: clamp(14px, 1.45vw, 18px);
    line-height: 1.3;
  }

  .c-philosophy__title::before {
    height: 100%;
  }

  .c-philosophy__text {
    font-size: clamp(14px, 1.3vw, 16px);
  }

  /* 全幅背景セクションは本文ラッパーの余白を相殺する */
  .subpage-main > .c-philosophy,
  .subpage-main > .access_map {
    width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
  }

  /* 背景内の見出し・本文は画面端から20pxを確保する */
  .c-philosophy .philosophy__header,
  .access_map > .sub-inner {
    padding-inline: 20px;
    box-sizing: border-box;
  }
}

/* 900px以下ではカードを縦積みにする */
@media screen and (min-width: 768px) and (max-width: 900px) {
  .c-philosophy__list {
    flex-direction: column;
  }

  .c-philosophy__item {
    width: 100%;
    min-height: 0;
  }
}

@media screen and (max-width: 767px) {
  .c-philosophy__text {
    font-size: 14px;
  }
}

/* リクルート：タブレット時のトップメッセージ背景を全幅表示 */
@media screen and (min-width: 768px) and (max-width: 1239px) {
  .subpage-main > .recruit-top-message-section {
    width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
  }

  .recruit-top-message-bg > .sub-inner {
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .recruit-top-message-btn a {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 働き方カードは2列×2行で中央に配置する */
  .recruit-workstyle-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 40px;
  }

  /* 3列へ中途半端に折り返さず、2列で揃える */
  .recruit-workstyle-card {
    width: calc((100% - 40px) / 2);
  }

  .recruit-workstyle-card--down {
    margin-top: 0;
  }

  /* 環境カードが2列へ折り返す場合も、行全体を中央に配置する */
  .recruit-environment-list {
    justify-content: center;
  }

  /* カード幅を2列に固定し、画面幅に追従させる */
  .recruit-environment-card {
    width: calc((100% - 30px) / 2);
  }
}


  /* ブログ一覧のカードの背景を透けさせず明るくする */
  .ai-usecase-list .trimming-box {
  position: relative;
  overflow: hidden;
}

.ai-usecase-list .trimming-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ai-usecase-list .imgLink:hover img {
  opacity: 1;
}

.ai-usecase-list .imgLink:hover .trimming-box::after {
  opacity: 0.25;
}
/* 既存の固定バー（参考例） */
.fixed-recruit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* アニメーション */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ページ最下部に達した時の非表示用スタイル */
.fixed-recruit-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%); /* 下にスライドしながら消す場合 */
  pointer-events: none;
}
非表示用スタイル */
.fixed-recruit-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%); /* 下にスライドしながら消す場合 */
  pointer-events: none;
}