/* ===== Top Page v2 (cashier-like layout, sper-like tone) ===== */

:root{
  /* 既存サイトの雰囲気に合わせて調整する前提（後で1箇所いじればOK） */
  --tp-accent: #0b3a6b;         /* ←SPerのキーカラーに合わせて調整 */
  --tp-accent-2: #0f5aa6;
  --tp-text: #1a1a1a;
  --tp-sub: #5a616b;
  --tp-line: rgba(0,0,0,.10);
  --tp-bg: #ffffff;
  --tp-soft: #f6f8fb;
  --tp-radius: 18px;
  --tp-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.tpContainer{
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.tpHead{ margin-bottom: 16px; }
.tpHead__title{ font-size: 40px; font-weight: 700; letter-spacing: .02em; color: var(--tp-text); }
.tpHead__sub{ margin-top: 6px; color: var(--tp-sub); }

.tpBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--tp-line);
  background: #fff;
  color: var(--tp-text);
  text-decoration: none;
  font-weight: 700;
}
.tpBtn--primary{
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: #fff;
}
.tpBtn:hover{ transform: translateY(-1px); }
.tpCtaRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  /* 箇条書きとの間に少し余白を足す */
  margin-top: 16px;
}

.tpHero{
  padding: 36px 0 18px;
  background: linear-gradient(180deg, var(--tp-soft), #fff);
}
.tpHero__inner{
  display: grid;
  gap: 18px;
}
.tpHero__tag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,58,107,.10);
  color: var(--tp-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.tpHero__title{
  /* ここでは余白と色だけを指定しておく */
  margin: 0 0 10px;
  line-height: 1.4;
  color: var(--tp-text);
}

/* 文字サイズは上の clamp() に任せる */
@media (min-width: 900px){
  .tpHero__inner{
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }
  /* .tpHero__title の font-size 指定は削除 */
}
.tpHero__lead{ color: var(--tp-sub); line-height: 1.8; }
.tpHero__bullets{ margin: 14px 0 0; padding-left: 18px; color: var(--tp-sub); }
.tpHero__media{ }
.tpHero__img{
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-shadow);
  object-fit: cover;
}

@media (min-width: 900px){
  .tpHero__inner{ grid-template-columns: 1.05fr .95fr; align-items: center; }
  .tpHero__title{ font-size: 42px; }
}

.tpStats{
  padding: 14px 0 34px;
}
.tpStats__grid{
  display: grid;
  gap: 12px;
}
.tpStat{
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.tpStat__k{ color: var(--tp-sub); font-weight: 700; }
.tpStat__v{ font-size: 28px; font-weight: 900; margin: 6px 0 4px; color: var(--tp-text); }
.tpStat__v span{ font-size: 16px; }
.tpStat__s{ color: var(--tp-sub); }

@media (min-width: 900px){
  .tpStats__grid{ grid-template-columns: repeat(3, 1fr); }
}

.tpServices{ padding: 34px 0; }
.tpCards{
  display:grid;
  gap: 12px;
}
.tpCard{
  display:block;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background:#fff;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.tpCard__img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border: 1px solid var(--tp-line);
  margin-bottom: 10px;
}
.tpCard__t{ margin: 0 0 6px; }
.tpCard__d{ margin: 0 0 10px; color: var(--tp-sub); }
.tpCard__more{ color: var(--tp-accent); font-weight: 800; }

@media (min-width: 780px){
  .tpCards{ grid-template-columns: repeat(3, 1fr); }
}

.tpUsecase{ padding: 34px 0; background: var(--tp-soft); }
.tpUcGrid{
  display:grid;
  gap: 12px;
}
.tpUc{
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background:#fff;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.tpUc img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border: 1px solid var(--tp-line);
  margin-bottom: 10px;
}
.tpUc p{ color: var(--tp-sub); margin: 6px 0 0; }

@media (min-width: 900px){
  .tpUcGrid{ grid-template-columns: repeat(4, 1fr); }
}

/* ===== 6つの特徴（導入継続率99%の理由） ===== */

.tpReasons{ padding: 34px 0; }

.tpReasonList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* カード全体：左が番号、右が中身の2カラム */
.tpReason{
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px 1fr;
  background: transparent;
}

/* 左側：番号の列（縦中央揃え） */
.tpReason__noWrap{
  background: var(--tp-soft);     /* 薄いグレー */
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / -1;               /* 見出し〜本文まで縦に全部またぐ */
}

.tpReason__no{
  font-size: 20px;                /* 大きめの数字に */
  font-weight: 700;
  letter-spacing: .12em;
  color: #555;
}

/* 見出しブロック（薄いグレー） */
.tpReason__head{
  background: var(--tp-soft);
  padding: 12px 20px;
}

.tpReason__head h3{
  margin: 0;
  font-weight: 700;               /* 見出しを太字で強調 */
  font-size: 18px;
}

/* 画像ブロック（白） */
.tpReason__img{
  background: #fff;
  padding: 12px 20px;
  text-align: center;
}

/* 本文ブロック（薄いグレー） */
.tpReason__body{
  background: var(--tp-soft);
  padding: 10px 20px 14px;
}

.tpReason__body p{
  margin: 0;
  color: var(--tp-sub);
  font-size: 14px;
  line-height: 1.6;
}

/* PCでは2列並び */
@media (min-width: 900px){
  .tpReasonList{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* スマホで番号列を少し細くする */
@media (max-width: 768px){
  .tpReason{
    grid-template-columns: 52px 1fr;
  }
}

.tpCtaBand{
  padding: 30px 0;
  background: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-2));
  color: #fff;
}
.tpCtaBand__inner{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tpCtaBand h2{ margin: 0; font-size: 22px; }
.tpCtaBand p{ margin: 6px 0 0; opacity: .9; }
.tpCtaBand .tpBtn{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color:#fff; }
.tpCtaBand .tpBtn--primary{ background:#fff; color: var(--tp-accent); border-color:#fff; }

/* ヘッダーCTA（任意） */
.headerCta{
  display:none;
  margin-left: 16px;
  gap: 10px;
  align-items: center;
}
.headerCta__tel{
  font-weight: 800;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.headerCta__btn{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tp-line);
  text-decoration:none;
  font-weight: 800;
  color: inherit;
  background:#fff;
}
.headerCta__btn--primary{
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color:#fff;
}
@media (min-width: 1100px){
  .headerCta{ display:flex; }
}
/* 製品カード：画像あり */
.tpCards--withImg .tpCard__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--tp-line);
  margin-bottom: 10px;
  object-fit: cover;
}

/* 導入事例 */
.tpCases{
  padding: 34px 0;
  background: var(--tp-soft);
}
.tpCaseGrid{
  display: grid;
  gap: 12px;
}
.tpCase{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.tpCase__img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.tpCase__body{
  padding: 14px;
}
.tpCase__t{
  margin: 0 0 6px;
  font-size: 16px;
}
.tpCase__d{
  margin: 0;
  color: var(--tp-sub);
  line-height: 1.6;
  font-size: 13px;
}
.tpCenterCta{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

@media (min-width: 900px){
  .tpCaseGrid{ grid-template-columns: repeat(3, 1fr); }
  .tpCase__img{ height: 190px; }
}
/* ==========================
   PCの余白を詰めるチューニング
   ========================== */

/* ① コンテンツ最大幅を広げる（ここが一番効く） */
.tpContainer{
  width: min(1320px, 92vw);   /* ←1120px固定だと左右がスカスカになりがち */
}

/* さらに大きい画面だけもう少し広げる（任意） */
@media (min-width: 1600px){
  .tpContainer{
    width: min(1480px, 90vw);
  }
}

/* ② セクションの上下余白を詰める（スクショだとここも大きい） */
.tpHero{ padding: 26px 0 10px; }
.tpStats{ padding: 10px 0 18px; }
.tpServices{ padding: 18px 0 20px; }   /* 「製品紹介」前の間隔が広い対策 */
.tpUsecase{ padding: 22px 0; }
.tpReasons{ padding: 22px 0; }
.tpCtaBand{ padding: 20px 0; }

/* ③ 見出し周りの余白も詰める */
.tpHead{ margin-bottom: 10px; }
.tpHead__title{ margin: 0; }
.tpHead__sub{ margin: 6px 0 0; }

/* ④ HEROをPCで“横に広く使う”＆画像を大きく見せる */
@media (min-width: 900px){
  .tpHero__inner{
    grid-template-columns: 1.05fr 1.2fr; /* 右（画像）を少し大きめ */
    gap: 20px;
    align-items: center;
  }

  /* 文章が横に伸びすぎないように（読みやすさ維持） */
  .tpHero__copy{
    max-width: 560px;
  }

  /* 画像を“見た目として”大きくする（縦が潰れてる時に効く） */
  .tpHero__img{
    width: 100%;
    height: clamp(320px, 28vw, 520px);  /* 高さを確保 */
    object-fit: cover;                  /* 余白が多い画像でも埋まりやすい */
    border-radius: var(--tp-radius);
  }
}

/* ⑤ 製品カードの並びが小さく見える時の微調整 */
.tpCards{ gap: 14px; }
.tpCard{ padding: 16px; }
.tpCard__img{
  width: 100%;
  height: 180px;            /* 画像が小さく見える対策 */
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 899px){
  /* スマホは高さ固定を外して崩れ防止 */
  .tpCard__img{
    height: auto;
  }

  /* ---- ヒーローエリアのボタン周りの余白調整（スマホだけ） ---- */

  /* 下のセクション（写真や地図）との距離を少し広げる */
  .tpHero{
    padding-bottom: 40px;   /* 元は 18px なので +20px くらい足す感覚 */
  }

  /* ボタンの上下にも余白を追加 */
  .tpCtaRow{
    margin-top: 18px;       /* 箇条書きとの間 */
    margin-bottom: 24px;    /* 下の画像との間 */
  }
}

/* 導入実績セクション */
.tpProof{
  padding: 34px 0;
  background: #fff;
}

/* デフォルトは縦並び（スマホ） */
.tpProof__inner{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tpProof__col{
}

.tpProof__imgWrap{
  position: relative;
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-shadow);
}

.tpProof__imgWrap img{
  display:block;
  width:100%;
  height:auto;
}

.tpProof__badge{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 90px;
  height: auto;
}

.tpProof__caption{
  margin-top: 6px;
  font-size: 20px;
  color: var(--tp-sub);
}

/* PC幅では横並びにする */
@media (min-width: 768px){
  .tpProof__inner{
    flex-direction: row;      /* 横並び */
    align-items: flex-start;
  }

  .tpProof__col{
    flex: 1 1 0;
  }
}
/* 見出しテキストを左寄せしたいとき用 */
.tpHead--left{
  text-align: left;
}

/* 見出しテキスト + 99%バッジのレイアウト */
.tpProof__titleRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* 99%バッジを小さめに */
.tpProof__titleBadge img{
  display: block;
  width: 180px;        /* ←好みで 60〜80px くらいに調整 */
  max-width: none;    /* グローバルの width:100% の影響を受けないように */
  height: auto;
}

/* スマホはさらに少し小さくしてもOK */
@media (max-width: 768px){
  .tpProof__titleBadge img{
    width: 64px;
  }
}
/* =========================================
   ページ横幅を広く使うための調整
   （cashier-pos っぽい見え方に寄せる）
   ========================================= */

/* 1) トップページ用コンテナを広げる */
.tpContainer{
  /* 1440px までは伸びる / 画面左右は 2vw だけ余白 */
  width: min(1960px, 96vw);
  margin: 0 auto;
}

/* 2) NEWS / SUPPORT セクションも同じ幅に合わせる */
.news .contentsWrap,
.support .contentsWrap{
  max-width: none;                     /* 1180px 制限を解除 */
  width: min(1960px, 96vw);            /* 上と同じルールで幅を決める */
  margin: 32px auto 0;
  padding-left: 8px;
  padding-right: 8px;
}

/* 3) ヘッダーのナビ部分も左右の余白を減らす */
header > .headerInner{
  max-width: none;                     /* 1155px 制限を解除 */
  width: min(1960px, 96vw);            /* 画面に追従して広く使う */
}
/* ==========================
   スマホ時の見出し・レイアウト安定用
   ========================== */

/* span で区切ったタイトルは常に行ごとに表示 */
.tpHero__title span,
.tpHead__title--proof span{
  display: block;
}

/* スマホ幅ではフォントを少し小さくして
   変なところで折り返されるのを防ぐ */
@media (max-width: 768px){

  /* ヒーロー全体を縦並びにしてシンプルに */
  .tpHero{
    padding: 24px 0 16px;
  }
  .tpHero__inner{
    display: block;          /* grid だけど 1 カラム扱いに */
  }
  .tpHero__copy{
    margin-bottom: 16px;
  }

  /* ヒーロー見出し */
  .tpHero__title{
    font-size: 22px;         /* PC より一段小さめに固定 */
    line-height: 1.5;
  }

  /* 共通見出しも少しだけ小さめに */
  .tpHead__title{
    font-size: 20px;
    line-height: 1.5;
  }

  /* ヒーローの画像は幅100%で高さは自動 */
  .tpHero__img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 地図＋温泉番付の見出し部（バッジ横の文字）も
     あまり巨大にならないように */
  .tpProof__titleRow .tpHead__title{
    font-size: 18px;
  }
}

/* さらに小さい端末（iPhone SE など）はもう一段階だけ縮小 */
@media (max-width: 425px){
  .tpHero__title{
    font-size: 20px;
  }
  .tpHead__title,
  .tpProof__titleRow .tpHead__title{
    font-size: 18px;
  }
}
@media (max-width: 768px){
  /* 活用例カードの画像 */
  .tpUc img{
    width: 100%;
    height: auto;
  }

  /* 導入実績（地図 / 温泉番付）の画像 */
  .tpProof__imgWrap img{
    width: 100%;
    height: auto;
  }
}
/* ================================
   見出しを「決め打ち改行」にする共通処理
   （cashier-pos っぽく行構成を固定）
   ================================ */

/* tpTitle--fixedLines が付いている見出しは、
   span 1つ = 1行 として扱う */
.tpTitle--fixedLines span{
  display: block;
  white-space: nowrap;        /* 行の途中では改行させない */
}

/* ヒーロー見出し＋「全国で幅広い〜」見出しのフォントを
   画面幅に合わせて可変（小さい画面では勝手に縮む） */
.tpHero__title,
.tpHead__title--proof{
  font-size: clamp(18px, 3.0vw, 34px);
  line-height: 1.4;
}

/* PC 幅では少しだけ大きめに（好みで微調整） */
@media (min-width: 1024px){
  .tpHero__title{
    font-size: clamp(24px, 2.2vw, 38px);
  }
}
/* === トップページ全体の見出しサイズをなめらかに === */

/* ヒーロー見出し */
.tpHero__title{
  font-size: clamp(26px, 3vw, 34px);  /* PCでもスマホでも極端に変わらない */
  line-height: 1.3;
}

/* セクション見出し（導入事例・製品紹介 など） */
.tpHead__title,
.tpSectionTitle{
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
}
/* === 6つの特徴カード内の画像 === */

.tpReason__img{
  margin: 8px 0 6px;
  text-align: center;
}

.tpReason__img img{
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;       /* 角丸いらなければ消してOK */
}

/* PCではカードを3列にしてもOK（まだなら） */
@media (min-width: 1024px){
  .tpReasonList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
/* どんな業種・業態でも の「詳しく見る」ボタン */

.tpUc__moreWrap{
  margin-top: 12px;
}

/* ボタン本体 */
.tpUc__more{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 140px;
  padding: 8px 20px;

  background: #ffd800;              /* 添付の黄色ボタンに寄せる */
  border-radius: 999px;             /* 角丸。四角にしたければ 4px とかに */
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}

/* カード hover 時にちょっとだけ押し込まれる感じ */
.tpUc:hover .tpUc__more{
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* スマホで大きすぎるようなら少しだけ縮める */
@media (max-width: 768px){
  .tpUc__more{
    min-width: 120px;
    padding: 7px 16px;
    font-size: 13px;
  }
}
/* 6つの特徴：画像サイズをしっかり出す */
.tpReason__img{
  background: #fff;
  padding: 12px 20px;
  text-align: center;
}

/* 画像をカード幅に合わせて大きく表示 */
.tpReason__img img{
  display: block;
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}
/* 6つの特徴カード内の画像サイズを強制的に大きくする */
.tpReason img{
  display: block !important;
  width: 100% !important;       /* カードの中で横いっぱい使う */
  max-width: 260px !important;  /* 実際の見た目の横幅（好みで調整） */
  margin: 0 auto !important;    /* 中央寄せ */
  height: auto !important;
  object-fit: contain !important;
}
/* ==========================
   6つの特長（番号＋画像＋説明付きカード）
   ========================== */

/* ブロック全体 */
.tpReasons{
  padding: 40px 0;
}

/* カードの並び（スマホ1列／PCは2列） */
.tpReasonList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 900px){
  .tpReasonList{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1つのカード */
.tpReason{
  /* 既存定義をリセットして上書き */
  padding: 0;
  background: transparent;
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-line);
  overflow: hidden;

  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
}

/* 左側の番号部分 */
.tpReason__noWrap{
  background: var(--tp-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpReason__no{
  font-weight: 700;
  font-size: 20px;
}

/* 右側の中身（見出し／画像／文章を縦方向3分割） */
.tpReason__content{
  display: grid;
  grid-template-rows: auto auto auto;
}

/* 上：見出し（薄いグレー背景） */
.tpReason__head{
  background: var(--tp-soft);
  padding: 12px 20px 8px;
}
.tpReason__head h3{
  margin: 0;
  font-size: 18px;
  font-weight: 700;   /* 太字で強調 */
}

/* 中：画像（白背景） */
.tpReason__img{
  background: #ffffff;
  padding: 12px 20px;
  text-align: center;
}
.tpReason__img img{
  display: inline-block;
  width: 100%;
  max-width: 280px;   /* ここで「いい感じの」最大幅に制御 */
  height: auto;
}

/* 下：説明文（薄いグレー背景） */
.tpReason__body{
  background: var(--tp-soft);
  padding: 10px 20px 14px;
}
.tpReason__body p{
  margin: 0;
  color: var(--tp-sub);
  line-height: 1.7;
  font-size: 14px;
}

/* スマホ調整（横幅が狭いとき番号カラムを少し細く） */
@media (max-width: 600px){
  .tpReason{
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .tpReason__head{
    padding: 10px 14px 6px;
  }
  .tpReason__img{
    padding: 10px 14px;
  }
  .tpReason__body{
    padding: 8px 14px 12px;
  }
  .tpReason__head h3{
    font-size: 16px;
  }
}
/* ==========================
   ヒーロー：PCで左寄りに見える問題の補正
   ========================== */

/* まずはコンテナ自体を中央に安定させる */
.tpHero .tpHero__inner{
  margin-left: auto;
  margin-right: auto;
}

/* PC幅のとき：ヒーロー全体の開始位置を中央寄りにする */
@media (min-width: 1024px){
  .tpHero .tpHero__inner{
    /* ここで「テキスト＋画像」の塊を少し右へ寄せる */
    transform: translateX(40px);   /* 30〜60pxで好みに調整 */
  }
}

/* さらに自然にしたい：左右のカラム幅も整える（任意だが効く） */
@media (min-width: 1024px){
  .tpHero__inner{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr; /* コピー側を少し広く */
    column-gap: 48px;
    align-items: center;
  }
}
/* ==========================
   Hero：画像なし（文章のみ）レイアウト
   ========================== */


.tpHero__copy{
  margin: 0 auto;
  max-width: 920px;   /* ここで“文章塊の幅”を調整 */
}

/* PCのとき、見出し/ボタンをきれいに */
@media (min-width: 1024px){
  .tpHero__title{
    text-align: center;
  }
  .tpHero__lead{
    text-align: center;
  }
  .tpHero__bullets{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .tpCtaRow{
    justify-content: center;
  }
}
/* ==========================
   Hero：画像はそのまま、文章だけ右へ寄せる
   ========================== */

@media (min-width: 1024px){
  /* 左の文章ブロックだけを右に寄せる */
  .tpHero__copy{
    position: relative;
    left: 48px;          /* ← ここが「右に寄せる量」。30〜80pxで調整 */
  }

  /* 文章が広がりすぎて左に見える場合は幅も少し絞ると綺麗 */
  .tpHero__copy{
    max-width: 640px;    /* ← 600〜720pxで調整 */
  }
}
@media (min-width: 1024px){
  .tpHero__inner .tpHero__copy{
    left: 48px !important;
    max-width: 640px !important;
  }
}
/* ==========================
   Hero：画像はそのまま、文章だけ右寄せ（中央寄せは解除）
   ========================== */
@media (min-width: 1024px){

  /* Heroの2カラムは維持（コピー＋画像） */
  .tpHero .tpHero__inner{
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    column-gap: 40px !important;
    align-items: center !important;
    transform: none !important;        /* 全体transformが入ってたら無効化 */
  }

  /* 文章側だけを少し右へ（画像は動かない） */
  .tpHero .tpHero__copy{
    position: relative !important;
    left: 56px !important;             /* ← 40〜80pxで調整 */
    max-width: none !important;        /* 中央寄せ用のmax-widthを無効化 */
    margin: 0 !important;
  }

  /* ★ここが重要：中央寄せを全部解除して左揃えに戻す */
  .tpHero .tpHero__title,
  .tpHero .tpHero__lead{
    text-align: left !important;
  }

  .tpHero .tpHero__bullets{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tpHero .tpCtaRow{
    justify-content: flex-start !important;  /* ボタン中央寄せを解除 */
  }
}
/* =========================
   販売代理店ロゴ（横並び＆適正サイズ）
   ========================= */

/* ロゴ一覧：横並びで折り返し */
.tpPartner__logos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* 中央寄せ */
  align-items: center;
  gap: 14px 22px;           /* 縦 横 */
  margin-top: 18px;
}

/* ロゴ画像：巨大化を潰す（img{width:100%}対策） */
.tpPartner__logos img{
  width: auto !important;   /* ← ここが重要 */
  height: clamp(40px, 3.0vw, 44px); /* 画面幅で自然に可変 */
  max-width: 170px;         /* 横長ロゴの暴走防止 */
  object-fit: contain;
  display: block;
}

/* スマホ：2列（ロゴを大きめに） */
@media (max-width: 767px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;          /* すこしだけ余裕を持たせる */
    justify-items: center;
    align-items: center;
  }

  /* カードの高さをアップ */
  .tpPartner__logoCard{
    height: 90px;                       /* ← 58px → 78px くらいに */
    border-radius: 12px;
    padding: 12px 14px;
  }

  /* ロゴ自体も大きく */
  .tpPartner__logoCard img{
    height: 60px;                       /* ← 30px → 44px くらいに */
    max-width: 170px;
  }
}
/* =========================
   販売代理店ロゴ：PCは7個で折り返し
   ========================= */

/* PC：7列グリッド */
@media (min-width: 1024px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 14px 22px !important;
    align-items: center;
    justify-items: center;
  }

  /* img{width:100%}対策＋サイズ固定 */
  .tpPartner__logos img{
    width: auto !important;
    height: 52px !important;     /* ロゴの高さ */
    max-width: 190px !important; /* 横長ロゴの暴走防止 */
    object-fit: contain;
    display: block;
  }
}

/* タブレット：4列 */
@media (min-width: 768px) and (max-width: 1023px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
    justify-items: center;
    align-items: center;
  }
  .tpPartner__logos img{
    width: auto !important;
    height: 36px !important;
    max-width: 150px !important;
  }
}

/* スマホ：2列 */
@media (max-width: 767px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 14px !important;
    justify-items: center;
    align-items: center;
  }
  .tpPartner__logos img{
    width: auto !important;
    height: 28px !important;
    max-width: 140px !important;
  }
}
/* =========================
   ロゴ：カード表示（白背景の目立ちを抑える）
   ========================= */

/* PC：7列グリッドは維持 */
@media (min-width: 1024px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    align-items: stretch;
    justify-items: stretch;
  }
}

/* カード枠 */
.tpPartner__logoCard{
  background: #ffffff;              /* うっすらグレー */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  height: 72px;                     /* カード高さ（調整OK） */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}

/* ロゴ画像（前に作った大きめ設定をカード用に最適化） */
.tpPartner__logoCard img{
  width: auto !important;
  height: 52px;                     /* ロゴサイズ（調整OK） */
  max-width: 190px;
  object-fit: contain;
  display: block;
}

/* ホバー（PCで気持ちよく）
@media (hover:hover){
  .tpPartner__logoCard{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .tpPartner__logoCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }
} */

/* タブレット：4列 */
@media (min-width: 768px) and (max-width: 1023px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
  }
  .tpPartner__logoCard{ height: 64px; }
  .tpPartner__logoCard img{ height: 40px; max-width: 160px; }
}

/* スマホ：2列 */
@media (max-width: 767px){
  .tpPartner__logos{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }
  .tpPartner__logoCard{ height: 58px; border-radius: 10px; }
  .tpPartner__logoCard img{ height: 30px; max-width: 140px; }
}
/* =========================
   6つの特徴：PCは1行3個
   ========================= */

/* カード一覧（グリッド）を3列に */
@media (min-width: 1024px){
  .tpReasonGrid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 22px !important;
    align-items: stretch;
  }
}

/* タブレット：2列 */
@media (min-width: 768px) and (max-width: 1023px){
  .tpReasonGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;
  }
}

/* スマホ：1列 */
@media (max-width: 767px){
  .tpReasonGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
/* =========================
   6つの特徴：画像を大きく見せる
   ========================= */

/* 「見出しと本文の間」の画像枠 */
.tpReason__img{
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
}

/* PCは画像枠を広めに */
@media (min-width: 1024px){
  .tpReason__img{ min-height: 160px; }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px){
  .tpReason__img{ min-height: 140px; }
}

/* スマホ */
@media (max-width: 767px){
  .tpReason__img{ min-height: 120px; }
}

/* 画像本体：枠に合わせて拡大（img{width:100%}対策も兼ねる） */
.tpReason__img img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}
/* =========================
   6つの特徴：見出し＆本文を少し大きく
   ========================= */

/* =========================================================
   6つの特徴（tpReasons / tpReasonList）：3列化 + 文字サイズUP
   ========================================================= */

/* PC：1行3枚 */
@media (min-width: 1024px){
  .tpReasonList{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 22px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* タブレット：2列 */
@media (min-width: 768px) and (max-width: 1023px){
  .tpReasonList{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* スマホ：1列 */
@media (max-width: 767px){
  .tpReasonList{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* 見出し（h3）を少し大きく＆太字 */
.tpReason__head h3{
  font-size: clamp(16px, 1.1vw, 20px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
  margin: 0;
}

/* 本文（p）を少し大きく */
.tpReason__body p{
  font-size: clamp(13.5px, 0.95vw, 16px);
  line-height: 1.75;
  margin: 0;
}
/* 販売代理店：リード文を“見せる文章”に */
.tpPartner__lead{
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: .02em;
  margin: 10px 0 18px;
  color: #0b2a4a;
}

/* ちょい装飾（左にラインを入れて印象付け） */
.tpPartner__lead{
  padding-left: 14px;
  border-left: 6px solid rgba(0, 86, 179, .35);
}
/* ロゴ → CTA の間を空ける */
.tpPartner__ctaTitle{
  margin-top: 34px;     /* ロゴから離す */
  margin-bottom: 14px;  /* 下の要素とも間を */
  text-align: center;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 900;
  letter-spacing: .03em;
}
/* 販売代理店セクションの縦リズムを整える */
.tpPartner{
  padding: 56px 0; /* 上下余白 */
}

/* 見出し（販売代理店プログラム） */
.tpPartner h2{
  margin: 0 0 24px;
  text-align: center;
  font-size: clamp(22px, 1.8vw, 34px);
  font-weight: 900;
  letter-spacing: .04em;
}

/* ロゴグリッドの上に少し余白 */
.tpPartner__logos{
  margin-top: 18px;
}
/* 実績セクション：見出し→画像の間を詰める */
.tpProof__titleWrap,
.tpProof__title,
.tpProof__heading{
  margin-bottom: 14px !important;   /* ←ここを詰める（必要なら 8〜18pxで調整） */
}

/* もし上に余計な余白がある場合 */
.tpProof__mapGrid,
.tpProof__grid{
  margin-top: 0 !important;
}
/* No.1 を強調 */
.tpEmNo1{
  display: inline-block;
  font-weight: 900;
  font-size: 1.2em;                /* 親より少し大きく */
  letter-spacing: .02em;
  color: #0b2a4a;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 214, 0, .35); /* うっすら黄で“ハイライト感” */
  vertical-align: baseline;
}
/* ===== 導入実績（地図＋温泉番付）の見出し調整 ===== */

/* 見出しブロックと下の画像の間隔をギュッと詰める */
.tpProof__titleRow{
  margin-bottom: 6px;   /* 18px → 6pxくらいに */
}

/* h3自体の下マージンもほぼゼロに */
.tpProof__heading{
  margin: 0 0 4px 0;    /* デフォルトの1em相当をリセット */
}

/* 念のため、画像ブロック側に変な余白がついていないように */
.tpProof__inner{
  margin-top: 0;
}
/* 見出し「全国で幅広い業態で～」を強調表示 */
.tpProof__heading{
  font-size: clamp(22px, 2.4vw, 30px);  /* 画面幅でなめらかに可変 */
  font-weight: 900;                     /* しっかり太字 */
  line-height: 1.5;
  letter-spacing: .03em;
}

/* スマホでは少しだけ控えめに */
@media (max-width: 768px){
  .tpProof__heading{
    font-size: clamp(18px, 4.4vw, 22px);
  }
}
/* =========================
   Hero：PC時に文章を大きくして余白を詰める
   ========================= */
@media (min-width: 1024px) {

  /* 見出しをしっかり大きく・太く */
  .tpHero__title {
    font-size: clamp(34px, 3.2vw, 46px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .03em;
  }

  /* リード文もちょっと大きく＆行間広めに */
  .tpHero__lead {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.9;
  }

  /* 箇条書きも一段階大きくしてブロックにボリュームを出す */
  .tpHero__bullets {
    margin-top: 16px;
  }
  .tpHero__bullets li {
    font-size: 15px;
    line-height: 1.9;
  }
}
/* =========================
   FIX: スマホHeroのCTAと画像が近すぎる問題
   ========================= */
@media (max-width: 768px){
  /* Hero全体の下余白を増やす */
  .tpHero{
    padding-bottom: 56px !important;
  }

  /* 文章ブロックの下に余白（=CTAと画像を離す） */
  .tpHero__copy{
    margin-bottom: 24px !important;
  }

  /* CTA行の下にも余白を追加 */
  .tpCtaRow{
    margin-top: 18px !important;
    margin-bottom: 28px !important;
  }

  /* 画像ブロックの上にも少し余白（念のため） */
  .tpHero__media{
    margin-top: 10px !important;
  }
}
/* =========================
   FIX: スマホ時の販売代理店ロゴが小さすぎる問題
   ========================= */
@media (max-width: 767px){
  .tpPartner__logos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 14px !important;
  }

  /* カード自体を大きく */
  .tpPartner__logoCard{
    height: 86px !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }

  /* ロゴも大きく */
  .tpPartner__logoCard img{
    height: 48px !important;
    max-width: 170px !important;
    width: auto !important;
  }
}
/* =========================================================
   資料ダウンロードCTA（その6っぽく：中央見出し + 大きいカード + ボタン重ね）
   ========================================================= */

.tpCtaDetail{
  padding: 56px 0;
  background: var(--tp-soft);
}

/* 見出しを「1枚目」っぽく、太め＆中央で */
.tpCtaDetail .tpPartner__ctaTitle{
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: .03em;
}

.tpCtaDetail .tpHead__sub{
  margin: 10px 0 0;
  text-align: center;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--tp-sub);
}

/* カード（画像）を大きく・中央寄せ・角丸 */
.tpCtaDetail .tpCtaDetail__card{
  display: block;
  position: relative;
  max-width: 980px;
  margin: 26px auto 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  text-decoration: none;
}

/* 画像を「カード背景」っぽく見せる（高さを確保して大きく見せる） */
.tpCtaDetail .tpCtaDetail__img{
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  object-fit: cover;
}

/* ボタンが読みやすいように、うっすら左だけ暗くする（不要なら消してOK） */
.tpCtaDetail .tpCtaDetail__card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,0) 58%);
  pointer-events:none;
}

/* 画像の上に「資料請求はこちら」ボタンを重ねる */
.tpCtaDetail .tpCtaDetail__label{
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
}

.tpCtaDetail .tpCtaDetail__label span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 999px;

  background: var(--tp-accent);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* 右矢印を付けて“押せる感” */
.tpCtaDetail .tpCtaDetail__label span::after{
  content: "→";
  font-weight: 900;
}

/* hover */
@media (hover:hover){
  .tpCtaDetail .tpCtaDetail__card{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .tpCtaDetail .tpCtaDetail__card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
}

/* スマホ：ボタン位置を“下寄せ”にして自然に */
@media (max-width: 768px){
  .tpCtaDetail{
    padding: 40px 0;
  }

  .tpCtaDetail .tpCtaDetail__img{
    height: 260px;
  }

  .tpCtaDetail .tpCtaDetail__label{
    left: 18px;
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .tpCtaDetail .tpCtaDetail__label span{
    padding: 12px 18px;
    font-size: 14px;
  }

  .tpCtaDetail .tpCtaDetail__card::before{
    background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
  }
}
/* =========================================
   Hero：赤枠文（強調：大きく＋下線）
   ========================================= */
.tpHero__leadEm{
  display: inline-block;
  font-weight: 900;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--tp-text);

  /* 下線（太め） */
  border-bottom: 4px solid rgba(11, 58, 107, .45);
  padding-bottom: 6px;
}

/* =========================================
   Hero：箇条書き（点を自前で＋階段状）
   ========================================= */
.tpHero__bullets{
  list-style: none !important;   /* 既存の黒丸を消す */
  padding-left: 0 !important;
  margin: 16px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tpHero__bullets li{
  position: relative;
  padding-left: 18px;            /* 点の分だけ左に余白 */
  font-weight: 800;
  color: var(--tp-text);
  line-height: 1.7;
}

/* 点（箇条書きのドット） */
.tpHero__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;                   /* 文字の中央あたり */
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tp-accent);
}

/* “階段状”のズラし（PC） */
.tpHero__bullets li:nth-child(1){ margin-left: 0; }
.tpHero__bullets li:nth-child(2){ margin-left: 16px; }
.tpHero__bullets li:nth-child(3){ margin-left: 32px; }

/* スマホはズラし量を少し控えめに（改行しやすいので） */
@media (max-width: 768px){
  .tpHero__bullets li:nth-child(2){ margin-left: 12px; }
  .tpHero__bullets li:nth-child(3){ margin-left: 24px; }
}
.tpHero__bullets li{
  /* 既存のまま… */
  font-size: clamp(16px, 1.3vw, 20px);  /* ←追加（好みで調整） */
}
@media (max-width: 768px){
  .tpHero__bullets li{
    font-size: 18px;   /* ←ここを 17〜20px で調整 */
  }
}
@media (max-width: 768px){
  /* 「私たちは…」だけ中央寄せ */
  .tpHero__leadEm{
    display: table;      /* 文字幅に合わせつつ */
    margin: 0 auto;      /* 中央に寄せる */
    text-align: center;
  }
}
@media (max-width: 768px){
  .tpHero__bullets li:nth-child(2),
  .tpHero__bullets li:nth-child(3){
    margin-left: 0; /* 階段をやめる（または 6px/12px くらいに） */
  }
}
/* スマホだけ：Heroタイトルを大きく */
@media (max-width: 768px){
  .tpHero__title{
    font-size: 40px;     /* ← 好みで 36〜44px くらいで調整 */
    line-height: 1.15;
  }
  .tpHero__title span{
    display: block;      /* すでに block なら不要 */
  }
}
/* 「クラウドPOSなら『モバレジ』」と見出しの間隔を広げる（PC/スマホ共通） */
.tpHero__tag{
  margin-bottom: 18px;   /* ← 12〜24pxで調整 */
}

/* 念のため：見出し側でも上の余白を確保（どちらか片方だけでもOK） */
.tpHero__title{
  margin-top: 0;
}
/* =========================================
   販売代理店ロゴ：スマホでカード幅がバラつくのを防ぐ
   （gridの item が content 幅になっていたのを 100% に揃える）
   ========================================= */
@media (max-width: 767px){
  .tpPartner__logos{
    justify-items: stretch !important;  /* ← center だと幅が縮む */
    align-items: stretch !important;
  }
  .tpPartner__logoCard{
    width: 100% !important;            /* ← 2列の各セル幅いっぱい */
    box-sizing: border-box;
    min-width: 0;
  }
}

/* =========================================
   グループ企業ブロック（テンポス）用
   ========================================= */
.tpPartner__logoGroup{
  margin-top: 18px;
}

.tpPartner__logoGroupHead{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.tpPartner__logoGroupTitle{
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 16px;
  color: var(--tp-text);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(11,58,107,.10);
}

/* グループ企業は1列で“ドン”と表示（全幅共通で効く） */
.tpPartner__logos--group{
  grid-template-columns: 1fr !important;
}

/* 特別感：枠線＋バッジ */
.tpPartner__logoCard--group{
  position: relative;
  border: 2px solid rgba(255, 180, 0, 0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.tpPartner__badge{
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 180, 0, 0.95);
  color: #fff;
}
/* =========================================
   グループ企業（テンポス）を「販売代理店カード」と同サイズにする
   - グループ側は1列のまま
   - 伸びるのを止めて中央寄せ
   - 幅を「各ブレイクポイントの1セル幅」に合わせる
   ========================================= */

.tpPartner__logos--group{
  justify-items: center !important;   /* stretch を止める */
  align-items: stretch !important;
}

/* いったん100%にして、max-width で「1セル幅」まで絞る */
.tpPartner__logoCard--group{
  width: 100% !important;
  max-width: 100%; /* 下のmediaで上書き */
  justify-self: center !important;
}

/* PC（7列 / gap横18px）=> 1セル幅に合わせる */
@media (min-width: 1024px){
  .tpPartner__logoCard--group{
    max-width: calc((100% - (18px * 6)) / 7) !important;
  }
}

/* タブレット（4列 / gap横14px）=> 1セル幅に合わせる */
@media (min-width: 768px) and (max-width: 1023px){
  .tpPartner__logoCard--group{
    max-width: calc((100% - (14px * 3)) / 4) !important;
  }
}

/* スマホ（2列 / gap横14px）=> 1セル幅に合わせる */
@media (max-width: 767px){
  .tpPartner__logoCard--group{
    max-width: calc((100% - 14px) / 2) !important;
  }
}
.page-top .contentsWrap,
.page-top header > .headerInner{
  max-width: none;
  width: min(1960px, 96vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}
/* はみ出し防止（改）：出さない＋見切れない（縦も制限） */
.tpPartner__logoCard{
  overflow: hidden;
  min-width: 0;
}

/* 横も縦も「カード内に収める」 */
.tpPartner__logoCard img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 既存のカード高さに合わせて、ロゴの最大高さも揃える（見切れ防止の決め手） */
@media (min-width: 1024px){
  .tpPartner__logoCard img{ max-height: 52px !important; }
}
@media (min-width: 768px) and (max-width: 1023px){
  .tpPartner__logoCard img{ max-height: 40px !important; }
}
@media (max-width: 767px){
  .tpPartner__logoCard img{ max-height: 30px !important; }
}
/* 最終上書き：スマホのロゴを大きく（見切れない＆はみ出さない） */
@media (max-width: 767px){
  .tpPartner__logoCard{
    height: 86px !important;
    padding: 14px 12px !important;
  }
  .tpPartner__logoCard img{
    max-height: 48px !important;   /* ← 30px を上書き */
    max-width: 170px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* =========================================================
   FIX: 「6つの特徴」が狭いウィンドウで見切れる問題
   - 3列になる条件を少し上げる（=狭いPC幅は2列にする）
   - グリッドアイテムが縮められずはみ出すのを防ぐ（min-width:0）
   ========================================================= */

/* “縮められない”のを潰す（これがないと横にはみ出しやすい） */
.tpReason,
.tpReason__content,
.tpReason__head,
.tpReason__body,
.tpReason__img{
  min-width: 0;
}
.tpReason__head h3,
.tpReason__body p{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3列は広い時だけ（狭いPC幅では2列に落とす） */
@media (min-width: 1200px){
  .tpReasonList{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px){
  .tpReasonList{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* 番号列も少し細くして中身の幅を確保 */
  .tpReason{
    grid-template-columns: 60px minmax(0, 1fr) !important;
  }
}

@media (max-width: 767px){
  .tpReasonList{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   tpProof：GoogleMap + エリアリスト（Bootstrap無しで見た目再現）
   ========================================================= */

.tpProof{
  /* いまの画像2枚の“高さ感”に合わせて調整（好みで微調整OK） */
  --tpProofH: clamp(320px, 38vw, 520px);
}

.tpProof__page{ margin-top: 6px; }

/* 2カラム（PC） / 1カラム（スマホ） */
.tpProof__main{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 899px){
  .tpProof__main{
    grid-template-columns: 1fr;
  }
}

/* 左：Map */
.tpProof__mapCol{
  min-width: 0;
}
.tpProof__map{
  height: var(--tpProofH);
  width: 100%;
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-shadow);
  background: #e9eef5; /* 読み込み中の下地 */
}

/* 右：リスト（Top）と詳細（Details）を同じ高さに */
.tpProof__listCol,
.tpProof__detailsCol{
  min-width: 0;
  height: var(--tpProofH);
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-shadow);
  background: #fff;
}

/* 初期表示：詳細は隠す（app.js 側が切替する想定） */
#pageRightDetails{ display: none; }

/* リストをスクロールできるように */
.tpProof .list-group{
  height: 100%;
  overflow: auto;
}

/* list-group の見た目（Bootstrap無し） */
.tpProof .list-group-item{
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--tp-text);
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
}
.tpProof .list-group-item:hover{
  background: rgba(11,58,107,.06);
}
.tpProof .list-group-item.active{
  background: var(--tp-accent);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.25);
}
.tpProof .list-group-item:last-child{
  border-bottom: 0;
}

/* Details側 */
.tpProof__detailsBox{
  height: calc(var(--tpProofH) - 56px);
  overflow: auto;
  padding: 10px 12px;
}
.tpProof__returnTop{
  height: 56px;
  padding: 10px 12px;
  border-top: 1px solid var(--tp-line);
  background: var(--tp-soft);
  display: flex;
  align-items: center;
}

/* ボタン（Bootstrap無し） */
.tpProof .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}
.tpProof .btn.btn-primary{
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: #fff;
}

/* キャプション */
.tpProof__caption{
  margin-top: 10px;
  font-size: 14px;
  color: var(--tp-sub);
}
/* =========================================
   tpProof（導入実績Map）：全体を大きく / Mapを縦長に / 右側も拡張
   ========================================= */

/* このセクションだけ横幅も少し広げる（必要なら） */
.tpProof .tpContainer{
  width: min(1480px, 96vw);
}

/* 高さの基準：ここを上げると “Mapも右も” まとめて大きくなる */
.tpProof{
  --tpProofH: clamp(520px, 70vh, 860px); /* ←縦に長くしたいならここを増やす */
}

/* 2カラム（PC） */
.tpProof__main{
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* 狭い幅は縦積み */
@media (max-width: 899px){
  .tpProof__main{
    grid-template-columns: 1fr;
  }
}

/* Map枠 */
.tpProof__map{
  height: var(--tpProofH);
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #e9eef5; /* 読み込み中の下地 */
}

/* 右側（リスト/詳細）もMapと同じ高さにする */
.tpProof__listCol,
.tpProof__detailsCol{
  height: var(--tpProofH);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #fff;
}

/* リストは中だけスクロール（箱は固定高さ） */
.tpProof__listCol .list-group{
  height: 100%;
  overflow: auto;
}

/* 詳細側：戻るボタンを “下に固定” して見切れないようにする
   ※displayがblockでも効くように absolute で固定 */
.tpProof__detailsCol{
  position: relative;
}
.tpProof__detailsBox{
  height: 100%;
  overflow: auto;
  padding: 12px 14px;
  padding-bottom: 76px; /* ←戻るボタン分の余白（被り防止） */
}
.tpProof__returnTop{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f6f8fb;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* 戻るボタン見た目（Bootstrap無し想定） */
.tpProof__returnTop .btn{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #0b2a4a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
/* =========================================
   導入実績Map：全体を大きく / Map縦長 / 右枠も拡張 / 戻る見切れ防止
   ========================================= */

/* 高さの基準（ここを上げると “Mapも右も” まとめて大きくなる） */
.tpProof{
  --tpProofH: clamp(560px, 72vh, 920px);
}

/* 2カラム（PC） */
.tpProof #main{
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 899px){
  .tpProof #main{
    grid-template-columns: 1fr;
  }
}

/* Map */
.tpProof #map{
  width: 100%;
  height: var(--tpProofH);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #e9eef5;
}

/* 右側（リスト / 詳細）もMapと同じ高さに */
.tpProof #pageRightTop,
.tpProof #pageRightDetails{
  height: var(--tpProofH);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #fff;
}

/* リストは中だけスクロール */
.tpProof #areaBox{
  height: 100%;
  overflow: auto;
}

/* 詳細：戻るボタンを下固定（見切れ防止） */
.tpProof #pageRightDetails{
  position: relative;
}
.tpProof #detailsBox{
  height: 100%;
  overflow: auto;
  padding: 12px 14px;
  padding-bottom: 80px; /* 戻るボタン分 */
}
.tpProof #returnTop{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f6f8fb;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* 戻るボタンを横幅いっぱいに */
.tpProof #returnTop button{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #0b2a4a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
/* =========================================================
   最終上書き：販売代理店ロゴカードを「固定幅」にして伸びなくする
   - 画面幅でカードが伸びない（列数が減って折り返す）
   - ロゴは contain で見切れず/はみ出さず
   ========================================================= */

:root{
  --logo-card-w: 240px;   /* PCのカード幅（好みで調整） */
  --logo-card-h: 72px;    /* PCのカード高さ */
  --logo-gap-x: 18px;
  --logo-gap-y: 14px;
  --logo-pad-x: 12px;
}

/* タブレット */
@media (max-width: 1023px){
  :root{
    --logo-card-w: 210px;
    --logo-card-h: 64px;
  }
}

/* スマホ */
@media (max-width: 767px){
  :root{
    --logo-card-w: 170px;
    --logo-card-h: 86px;
    --logo-gap-x: 14px;
    --logo-gap-y: 14px;
  }
}

/* ロゴ一覧：固定幅列で自動折り返し */
.tpPartner__logos{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--logo-card-w)) !important; /* ←固定幅 */
  gap: var(--logo-gap-y) var(--logo-gap-x) !important;
  justify-content: center !important; /* 余白は中央に寄せる（伸ばさない） */
  align-items: stretch !important;
}

/* カード：固定サイズ（ただし極端に狭い時ははみ出し防止で100%上限） */
.tpPartner__logoCard{
  width: min(var(--logo-card-w), 100%) !important;
  height: var(--logo-card-h) !important;
  padding: 10px var(--logo-pad-x) !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  min-width: 0 !important;
}

/* ロゴ画像：絶対にカードからはみ出さない＆見切れない */
.tpPartner__logoCard img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* グループ企業（テンポス）も同じカードサイズで中央配置 */
.tpPartner__logos--group{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--logo-card-w)) !important;
  justify-content: center !important;
}

/* （あなたの現状CSSにある「groupだけmax-width計算」を無効化する） */
.tpPartner__logoCard--group{
  width: min(var(--logo-card-w), 100%) !important;
  max-width: none !important;
}
/* =========================================
   FIX: 販売代理店ロゴカードを「固定サイズ」で伸びなくする
   - 画面幅でカードが横に伸びない
   - ロゴは contain で見切れない
   - テンポス（グループ企業）は常に中央
   ========================================= */

:root{
  --logo-card-w: 240px;   /* PCのカード幅（固定） */
  --logo-card-h: 72px;    /* PCのカード高さ（固定） */
  --logo-gap-x: 18px;
  --logo-gap-y: 14px;
  --logo-pad-x: 12px;
}

/* タブレット */
@media (max-width: 1023px){
  :root{
    --logo-card-w: 210px;
    --logo-card-h: 64px;
  }
}

/* スマホ */
@media (max-width: 767px){
  :root{
    --logo-card-w: 170px;
    --logo-card-h: 86px;
    --logo-gap-x: 14px;
    --logo-gap-y: 14px;
  }
}

/* 行間（4+4+5 の「3行」用） */
.tpPartner__logosRows{
  display: flex;
  flex-direction: column;
  gap: var(--logo-gap-y);
  margin-top: 18px;
}

/* 各行：固定幅カードを wrap させる（カード自体は伸びない） */
.tpPartner__logosRow{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--logo-gap-y) var(--logo-gap-x) !important;
}

/* ロゴカード：固定サイズ */
.tpPartner__logoCard{
  width: var(--logo-card-w) !important;
  height: var(--logo-card-h) !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px var(--logo-pad-x) !important;
  overflow: hidden !important;
  min-width: 0 !important;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* ロゴ画像：絶対に見切れない＆はみ出ない */
.tpPartner__logoCard img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* グループ企業（テンポス）：常に中央 */
.tpPartner__logos--group{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 18px;
}

.tpPartner__logoCard--group{
  width: var(--logo-card-w) !important; /* 販売代理店カードと同サイズ */
}
/* =========================================
   販売代理店ロゴ：スマホは「2列固定」にする
   - 1列に2個ずつで安定
   - カードは伸びすぎない（最大幅は var(--logo-card-w) ）
   ========================================= */
@media (max-width: 767px){

  /* いま flex-wrap の行を、2列固定gridに変更 */
  .tpPartner__logosRow{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--logo-gap-y) var(--logo-gap-x) !important;

    /* セルが広い端末でもカードが横に伸びないように中央寄せ */
    justify-items: center !important;
  }

  /* カード：セル幅いっぱいに伸ばさず、最大170px（var）まで */
  .tpPartner__logoCard{
    width: min(var(--logo-card-w), 100%) !important;
  }

  /* テンポス（グループ企業）は “常に中央” を維持 */
  .tpPartner__logos--group{
    display: flex !important;
    justify-content: center !important;
  }
  .tpPartner__logoCard--group{
    width: min(var(--logo-card-w), 100%) !important;
  }
}
/* 掲載順（50音順）表示 */
.tpPartner__orderBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e9eef5;
  color: #0b2a4a;
  font-size: 12px;
  font-weight: 900;
  vertical-align: middle;
}

.tpPartner__orderNote{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1.5;
}
/* =========================================
   販売代理店 見出し位置ズレ修正
   ========================================= */

/* 見出し全体を中央に */
.tpPartner__logoGroupHead{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto 14px;   /* 下に余白 */
}

/* 「販売代理店 + 50音順」チップを横並び中央に */
.tpPartner__logoGroupTitle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 注釈（入れてる場合）も中央に */
.tpPartner__orderNote{
  text-align: center;
}

/* ロゴ群のコンテナも中央に */
.tpPartner__logosRows{
  margin-left: auto;
  margin-right: auto;
}
*,
*::before,
*::after{ box-sizing: border-box; }

img, video, iframe{
  max-width: 100%;
  height: auto;
}

.flex > *{ min-width: 0; }  /* flex内のはみ出し対策（必要に応じてスコープ） */
/* -----------------------------
   Hero：狭くしても右が欠けない
----------------------------- */

/* grid/flex の子要素が “縮める” ようにする（これがないと右が切れやすい） */
.tpHero__copy,
.tpHero__media,
.tpHero__inner > * {
  min-width: 0;
}

/* 画像は親に合わせて必ず縮む */
.tpHero__media img,
.tpHero__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* もし「カード（角丸）」で overflow:hidden していて切れてるなら、
   cover ではなく contain を優先（横が欠けるのを防ぐ） */
.tpHero__media img,
.tpHero__img {
  object-fit: contain; /* cover だと左右が欠けやすい */
}

/* ある程度狭くなったら縦積みにして、欠ける余地を無くす */
@media (max-width: 1024px) {
  .tpHero__inner {
    grid-template-columns: 1fr !important; /* 2列→1列 */
    row-gap: 24px;
  }
}
@media screen and (min-width: 900px){
  .tpHero__img{
    height: auto;
    object-fit: contain;
  }
}
/* =========================================================
   Usecaseカードが左右に見切れる対策
   - vw幅をやめて 100% + max-width + padding にする
   - 4列を維持せず、狭い幅では 2列→1列に落とす
   ========================================================= */

/* vw(例:96vw)はスクロールバーでズレてはみ出しやすいので、%ベースに変更 */
.tpContainer{
  width: 100%;
  max-width: 1960px;
  margin: 0 auto;
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
  box-sizing: border-box;
}

/* grid の子要素が“内容の最小幅”で膨らんで横はみ出ししないように */
.tpUcGrid > *{
  min-width: 0;
}

/* 既存は 900px以上で4列になっていたので、段階的に変更 */
.tpUcGrid{
  grid-template-columns: 1fr; /* デフォルトは1列 */
}

@media (min-width: 640px){
  .tpUcGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレット域は2列 */
  }
}

@media (min-width: 1100px){
  .tpUcGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 十分広い時だけ4列 */
  }
}

/* もしページ全体に横スクロールが出る場合の保険（特にHeroで起きがち） */
.tpHero{
  overflow-x: hidden;
}
/* TELを大きく・見やすく（ヘッダー） */
.headerCta__tel{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);

  color: #fff;                 /* ←青背景で確実に見えるように */
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.headerCta__tel::before{
  content: "☎";
  opacity: .95;
}

.headerCta__tel:hover{
  background: rgba(255,255,255,.20);
}

/* さらに小さい幅だけ少し詰める */
@media (max-width: 480px){
  .headerCta__tel{
    padding: 8px 12px;
    font-size: 15px;
  }
}
/* TEL：白背景で見やすく */
.headerCta__tel{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  background: #fff;
  color: var(--tp-accent);

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);

  font-size: 15px;          /* 少し大きく */
  font-weight: 900;
}

.headerCta__tel span{
  font-size: 12px;          /* TEL. は少し小さく */
  opacity: .75;
  margin-right: 6px;
}
/* ロゴ一覧の下（赤枠位置）に出す用 */
.tpPartner__orderFoot{
  margin-top: 10px;
  display: flex;
  justify-content: flex-start; /* 左寄せ */
}

.tpPartner__orderFoot .tpPartner__orderBadge{
  margin-left: 0; /* 見出し横用の余白を打ち消す */
}
/* ===== 4つの活用例カード（PC/タブレット以上のみ調整） =====
   - ボタン位置を「左下固定」に見せる（カード内で下端へ押し下げ）
   - 画像の表示サイズ（見た目の高さ）を統一
   ※スマホ表示(〜767px)は現状のまま
*/
@media (min-width: 768px){
  /* カードを縦レイアウトにして高さを揃え、下端にボタンを寄せる */
  .tpUc{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 本文が短いカードでも高さを稼いで、ボタンを下に固定 */
  .tpUc__text{
    flex: 1 1 auto;
  }

  /* 「詳しく見る」を左下に寄せる */
  .tpUc__moreWrap{
    margin-top: auto;
    text-align: left;
  }

  /* 画像サイズを統一（カード幅に対して一定比率でトリミング） */
  .tpUc img{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
  }
}
/* ====== PC時だけ：50音順バッジを少し大きく（スマホは現状維持） ====== */
@media (min-width: 768px){
  .tpPartner__orderBadge{
    font-size: 14px;          /* 12px → 14px */
    padding: 4px 12px;        /* 2px 10px → 4px 12px */
    letter-spacing: .02em;    /* ほんの少し読みやすく */
    /* font-weight: 700; */   /* もっと強調したいならコメント解除 */
  }
}
/* =========================
   FIX: スマホの左右うにょうにょ（横スクロール）を止める
   ========================= */
html, body{
  width: 100%;
  overflow-x: hidden;
}

/* 横方向のオーバースクロールも抑止（対応ブラウザのみ） */
body{
  overscroll-behavior-x: none;
  touch-action: pan-y; /* 縦スクロール優先（横パン抑制） */
}
/* =========================================================
   Hero insert（hero_insert.png）最終版
   - PC(>=1024): いまの位置とサイズで固定（3カラム中央）
   - Tablet/Phone(<=1023): 見出し〜リード文の右側に固定（2カラム）
   ========================================================= */

/* 画像共通（暴れ防止） */
.tpHero .tpHero__insertImg img{
  display:block;
  height:auto;
  object-fit: contain;
}

/* -------------------------
   PC：固定（あなたの“バッチリ”状態）
   ------------------------- */
@media (min-width: 1024px){
  .tpHero .tpHero__inner{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1.25fr) !important;
    column-gap: 24px !important;
    align-items: center !important;
    grid-template-areas: none !important;
  }

  .tpHero .tpHero__insertImg{
    width: 260px !important;
    height: 220px !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    transform: none !important; /* 枠は動かさない */
  }

  /* ★画像だけ：サイズ＆微調整（これがPCの最終位置） */
  .tpHero .tpHero__insertImg img{
    width: 220px !important;
    max-width: none !important;
    max-height: 100% !important;
    transform: translate(-60px, -60px) !important;
  }
}

/* -------------------------
   Tablet/Phone：文言の右側に固定
   copy の右に insert、下段に media
   ------------------------- */
@media (max-width: 1023px){
  .tpHero .tpHero__inner{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 130px !important;
    grid-template-areas:
      "copy  insert"
      "media media" !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }

  .tpHero .tpHero__copy{  grid-area: copy !important; min-width:0; }
  .tpHero .tpHero__media{ grid-area: media !important; min-width:0; }

  .tpHero .tpHero__insertImg{
    grid-area: insert !important;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;

    margin: 0 !important;
    float: none !important;
    position: static !important;

    /* ★見出し/リードの“右”に見えるように上下調整 */
    margin-top: 56px !important;  /* ←ここだけ微調整（40〜80） */
  }

  .tpHero .tpHero__insertImg img{
    width: 120px !important;       /* ←タブレット/スマホの画像サイズ */
    max-width: none !important;
    transform: none !important;    /* PCのtranslateを無効化 */
  }

  .tpHero .tpHero__img{
    width:100%;
    height:auto !important;
  }
}

/* 小さいスマホだけ少し縮小 */
@media (max-width: 480px){
  .tpHero .tpHero__inner{
    grid-template-columns: minmax(0, 1fr) 110px !important;
    column-gap: 10px !important;
  }
  .tpHero .tpHero__insertImg{
    margin-top: 46px !important; /* 微調整 */
  }
  .tpHero .tpHero__insertImg img{
    width: 98px !important;
  }
}
/* ===============================
   FIX: PCで見出しが改行した時に insert が重ならないようにする
   - 1024〜1279px：translate を弱める（=重なり回避）
   - 1280px以上：今の“良かった位置”を維持
   =============================== */

/* 狭めのPC幅（ノート/小さめウィンドウ）では突っ込み量を減らす */
@media (min-width: 1024px) and (max-width: 1279px){
  .tpHero .tpHero__insertImg img{
    /* サイズも少しだけ控えめに（任意） */
    width: 200px !important;

    /* ←ここが主目的：左上に突っ込ませない */
    transform: translate(-12px, -8px) !important;
  }
}

/* しっかり広いPCだけ、今の位置（-60, -60）を使う */
@media (min-width: 1280px){
  .tpHero .tpHero__insertImg img{
    width: 220px !important;
    transform: translate(-60px, -60px) !important;
  }
}
/* ===============================
   見出しブロックのレスポンシブ調整
   - 変な改行を抑える（フォントを段階的に縮小）
   - リード文が割り込まず安定
   - insert画像が狭い幅で突っ込まない
   =============================== */

/* タイトル：画面幅に応じて縮小（改行発生を抑える） */
.tpHero .tpHero__title{
  font-size: clamp(34px, 3.2vw, 52px); /* ←ここで自然に縮む */
  line-height: 1.12;
}

/* 「未来の店舗・施設運営を、」の行はできるだけ1行維持 */
@media (min-width: 1024px){
  .tpHero .tpHero__title span:first-child{
    white-space: nowrap;  /* ←ここが効く */
  }
}

/* リード文：幅を適度に制限して崩れにくく */
.tpHero .tpHero__lead{
  max-width: 34ch;   /* ←文章が変な折り返しになりにくい */
}

/* ただし狭いPCでは少しだけ広げる（窮屈で折れるのを防ぐ） */
@media (max-width: 1279px){
  .tpHero .tpHero__lead{
    max-width: 40ch;
  }
}

/* insert画像：狭いPC幅では突っ込ませない（重なり防止） */
@media (min-width: 1024px) and (max-width: 1279px){
  .tpHero .tpHero__insertImg img{
    transform: translate(-12px, -8px) !important; /* ←弱める/ほぼ無効 */
  }
}

/* 広いPCだけ、見た目が良い位置を維持 */
@media (min-width: 1280px){
  .tpHero .tpHero__insertImg img{
    transform: translate(-60px, -60px) !important;
  }
}
/* =========================================
   PC(>=1024) 画像領域（中央カラム）をレスポンシブ化
   - 中央カラム幅＝clampで可変
   - insert枠のwidth/heightも連動
   - 画像サイズもclamp
   - 狭いPCではtranslateを弱めて重なり防止
   ========================================= */
@media (min-width: 1024px){

  /* 中央カラム幅を可変にする（狭いPCで縮む） */
  .tpHero .tpHero__inner{
    grid-template-columns:
      minmax(0, 1fr)
      clamp(200px, 18vw, 260px)     /* ←ここが「画像領域そのもの」 */
      minmax(0, 1.25fr) !important;
  }

  /* 領域（枠）も中央カラムに合わせて可変 */
  .tpHero .tpHero__insertImg{
    width: clamp(200px, 18vw, 260px) !important;
    height: clamp(170px, 16vw, 220px) !important;
  }

  /* 画像自体も可変 */
  .tpHero .tpHero__insertImg img{
    width: clamp(170px, 15vw, 220px) !important;
    max-width: none !important;
  }
}

/* 狭いPCでは突っ込み量を抑えて重なり防止 */
@media (min-width: 1024px) and (max-width: 1279px){
  .tpHero .tpHero__insertImg img{
    transform: translate(-10px, -8px) !important;
  }
}

/* 広いPCだけ、いつもの見た目（あなたの“良い位置”） */
@media (min-width: 1280px){
  .tpHero .tpHero__insertImg img{
    transform: translate(-60px, -60px) !important;
  }
}
/* =========================================================
   HERO：課題3項目（赤枠）を 1行表示＋大きめ にする
   - PC：1行固定（改行させない）
   - 狭い幅：2行に落とす or 横スクロール（どちらか）
   ========================================================= */

/* 既存の階段式/ドット（::before）を無効化 */
.tpHero .tpHero__bullets li::before{
  content: none !important;
}
.tpHero .tpHero__bullets li:nth-child(2),
.tpHero .tpHero__bullets li:nth-child(3){
  margin-left: 0 !important;
}

/* 共通の見た目（まずは“横並び”ベース） */
.tpHero .tpHero__bullets{
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

/* 区切り（・）を自前で入れる */
.tpHero .tpHero__bullets li + li{
  position: relative;
  padding-left: 22px !important;
}
.tpHero .tpHero__bullets li + li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .9;
}

/* 文字サイズ：見出し級に（狭いときは自然に縮む） */
.tpHero .tpHero__bullets li{
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 900 !important;
  color: var(--tp-text) !important;
  line-height: 1.25 !important;
  font-size: clamp(16px, 1.45vw, 18px) !important; /* ←大きめ */
}

/* ====== PC：1行固定（今回の要望のメイン） ====== */
@media (min-width: 1024px){
  .tpHero .tpHero__bullets{
    flex-wrap: nowrap !important;     /* 1行固定 */
    white-space: nowrap !important;
    overflow: visible !important;     /* 見切れさせない（PCなら基本収まる） */
  }
}

/* ====== 狭い幅：崩れ防止（どちらか選べます） ====== */
/* A案：2行に落としてOK（おすすめ：見切れない） */
@media (max-width: 1023px){
  .tpHero .tpHero__bullets{
    flex-wrap: wrap !important;       /* 2行OK */
    white-space: normal !important;
    gap: 12px 18px !important;
  }
  .tpHero .tpHero__bullets li + li{
    padding-left: 0 !important;
  }
  .tpHero .tpHero__bullets li + li::before{
    content: none;                   /* 2行時は区切り無しの方が自然 */
  }
}

/* B案：どうしても“常に1行”が良ければ、上のA案を消してこれを使う（横スクロール） */
/*
@media (max-width: 1023px){
  .tpHero .tpHero__bullets{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px !important;
  }
}
*/
.tpHero .tpHero__bulletsOneLine{
  margin: 18px 0 0;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 40px); /* 見出し級 */
  line-height: 1.15;
  white-space: nowrap;
}
/* Canon と BUSICOM だけ少し大きく */
.tpPartner__logoCard img[src*="logo_canon"],
.tpPartner__logoCard img[src*="logo_busicom"]{
  transform: scale(1.18);
  transform-origin: center;
}

/* スマホは上げすぎると見切れやすいので少し控えめ */
@media (max-width: 767px){
  .tpPartner__logoCard img[src*="logo_canon"],
  .tpPartner__logoCard img[src*="logo_busicom"]{
    transform: scale(1.10);
  }
}
@media (min-width: 1024px){
  .tpPartner__leadOneLine{
    white-space: nowrap;
    font-size: clamp(18px, 1.5vw, 26px); /* 見出し級にするなら */
    font-weight: 800;
  }
}
.tpPartner h2{
  margin: 0 0 24px; /* ←下だけ増やす */
}
@media (min-width: 1024px){
  .tpPartner__leadOneLine{
    white-space: nowrap;
    font-size: clamp(18px, 1.5vw, 26px);
    font-weight: 800;
  }
}
/* =========================================
   スマホだけ：tpHero__insertImg を少し左へ＆大きく
   ========================================= */
@media (max-width: 767px){

  /* 右側のinsert枠を左寄せにする（今は右寄せ気味） */
  .tpHero .tpHero__insertImg{
    justify-content: flex-start !important; /* ←右寄せ→左寄せ */
    margin-top: 28px !important;            /* 必要なら微調整 */
    padding-left: -4px !important;           /* ほんの少し左に寄せる */
  }

  /* 画像サイズを大きくする */
  .tpHero .tpHero__insertImg img{
    width: 140px !important;                /* ←大きく（例: 120〜150） */
    transform: translate(-25px, 0) !important; /* ←さらに少し左へ */
  }
}
.tpPartner__leadOneLine{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 96%;
}

/* ヒーローのリード文を改行させない */
.tpHero__leadEm{
  white-space: nowrap;
}

/* PCだけ：販売代理店プログラムのロゴを大きく */
@media (min-width: 1024px){
  :root{
    --logo-card-w: 280px;
    --logo-card-h: 88px;
  }
}

/* お問い合わせ/デモ相談：背景を薄いグレーに */
.tpHero .tpCtaRow .tpBtn:nth-child(2){
  background: var(--tp-soft);
}

/* PCだけ：ヒーローのCTA（資料/お問い合わせ）を大きく */
@media (min-width: 1024px){
  .tpHero .tpCtaRow .tpBtn{
    padding: 16px 26px;
    font-size: 18px;
  }
}