/* ==========================================================
   東海テクノ トップページ改修 top.css
   読み込み位置: common.css / page.css / single.css の後
   Figma: 東海テクノ_トップページ改修_260901 (1)
     - PC:          node 6528:1074 (PC_文字確認用)
     - ポップアップ: node 6528:1671 (popup_文字確認用)

   命名規則 (既存CSSとの衝突回避)
     .tp-*  トップページ専用 (既存の .news / .works / .business / .factory などと衝突しないよう接頭辞付き)
     .cv-*  「設備・機械・現場調査は…」のCTA帯と、その中の3カラム。下層ページでも使用する共通パーツ
   依存: common.css 末尾に追記する common-add.css (--tp-* 変数 / .tp-arrow / .tp-sp / .cv-cols / .cv-contact) を先に読み込むこと
   コンテナは既存の .inr (幅90% / 最大1100px) をそのまま使用
   ブレークポイントは既存CSSに合わせて 1100px (ヘッダーがハンバーガーになる幅) / 768px
   ========================================================== */

/* ---------- トップページのヘッダー (既存 .page-top .hdr は白文字・白ロゴのため黒に戻す) ---------- */
.page-top .hdr { color: var(--tp-text); }
.page-top .hdr__logo { background-image: url(/assets/img/common/logo_bk.svg); }

/* ---------- トップページ本体 ---------- */
.tp-main {
  font-family: var(--tp-font-jp);
  font-weight: 500;
  color: var(--tp-text);
  -webkit-font-smoothing: antialiased;
}
/* 最低限のリセット。:where() で詳細度を 0 にし、各パーツの指定 (.tp-trouble-card の背景色など) を上書きしない */
:where(.tp-main) img { display: block; }
:where(.tp-main) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- 共通パーツ ---------- */

/* 白いピル型リンク (一覧を見る / 詳しく見る / 強みを見る) */
.tp-pill {
  position: relative;
  display: block;
  width: 134px;
  height: 43px;
  background: #fff;
  border-radius: 700px;
  flex: none;
  transition: opacity 0.2s;
}
.tp-pill:hover { opacity: 0.8; }
.tp-pill.is-bordered {
  width: 136px;
  height: 45px;
  border: 1px solid var(--tp-text);
}
.tp-pill span {
  position: absolute;
  left: 55px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.tp-pill .tp-arrow {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
}

/* セクション見出し (英字 + 日本語) */
.tp-hdl { position: relative; }
.tp-hdl .en {
  font-family: var(--tp-font-en);
  font-weight: 900;
  font-style: italic;
  font-size: 100px;
  line-height: 1.2;
  letter-spacing: 5px;
  color: var(--tp-green-89);
  white-space: nowrap;
}
.tp-hdl .ja {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 1.2px;
  color: var(--tp-text);
  white-space: nowrap;
}

/* 丸 + 矢印のアイコン (詳しく見る) */
.tp-icon-circle {
  position: relative;
  width: 24.9px;
  height: 24px;
  flex: none;
}
.tp-icon-circle > img:first-child { width: 100%; height: 100%; }
.tp-icon-circle > img + img {
  position: absolute;
  left: 8.3px;
  top: 8.5px;
  width: 9.35px;
  height: 7px;
}

/* ---------- ヒーロー ---------- */
.tp-hero {
  position: relative;
  padding-top: 141px;
  background-color: #fff;
  /* 上から: ヘッダー分の白帯 (100px) / 斜めの帯 / グレー地 (1012px) */
  background-image: linear-gradient(#fff, #fff), url("/assets/img/top/tp_hero_band.svg"), linear-gradient(var(--tp-gray-bg), var(--tp-gray-bg));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, -1px 4px, 0 0;
  background-size: 100% 100px, 100% 1008px, 100% 1012px;
}
.tp-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tp-hero__copy {
  width: 470px;
  flex: none;
}
.tp-hero__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.8px;
  color: var(--tp-green);
  white-space: nowrap;
}
.tp-hero__title .tp-tight { letter-spacing: -4px; }
.tp-hero__lead {
  margin-top: 24px;
  font-family: var(--tp-font-noto);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #000;
  white-space: nowrap;
}
.tp-hero__image {
  position: relative;
  width: 499px;
  height: 280px;
  flex: none;
  margin-top: -11px;
  overflow: hidden;
  background: #222 url("/assets/img/top/tp_hero.png") center / cover no-repeat; /* 動画の読み込み前・再生不可時の静止画 */
}
.tp-hero__image img { width: 100%; height: 100%; object-fit: cover; }
/* YouTube 埋め込み (自動再生・ミュート・ループ)。クリックで YouTube 側のUIが出ないよう操作は無効化 */
.tp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* お知らせバー (黄色) */
.tp-newsbar {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 72px;
  margin-top: 20px;
  padding: 20px 40px;
  background: var(--tp-yellow);
  border-radius: 15px;
  transition: opacity 0.2s;
}
.tp-newsbar:hover { opacity: 0.85; }
.tp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 141px;
  flex: none;
}
.tp-meta__date {
  font-family: var(--tp-font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
}
.tp-meta__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 1px 11px;
  border: 1px solid var(--tp-text);
  border-radius: 15px;
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}
.tp-newsbar__body {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
  min-width: 0;
}
.tp-newsbar__title {
  flex: 1;
  min-width: 0;
  max-width: 777px;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* こんなお困りごとありませんか？ */
.tp-trouble__title {
  margin: 24px 0 0 -3px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.tp-trouble__list {
  display: flex;
  gap: 19px;
  margin: 23px 0 0 -1px;
}
.tp-trouble-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 298px;
  background: var(--tp-green);
  border-radius: 10px;
  color: #fff;
  text-align: left;
  transition: opacity 0.2s;
}
.tp-trouble-card:hover { opacity: 0.85; }
.tp-trouble-card__title {
  margin-top: 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  text-align: center;
  white-space: nowrap;
}
.tp-trouble-card__image {
  width: 100%;
  height: 100px;
  margin-top: 6px;
  background: var(--tp-gray-placeholder);
  overflow: hidden;
}
.tp-trouble-card__image img { width: 100%; height: 100%; object-fit: cover; }
.tp-trouble-card__text {
  margin: 9px 17px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px; /* Figma: 4行で88px */
}
.tp-trouble-card .tp-arrow { margin: auto 17px 16px; }

/* ---------- CTA (白ボックス) ---------- */
.tp-ctabox {
  position: relative;
  z-index: 2;
  margin-top: 33px;
  padding: 24px 0;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.tp-ctabox__title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--tp-green);
  white-space: nowrap;
}
.tp-ctabox__lead {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.tp-ctabox .cv-cols { margin-top: 24px; }

/* ---------- News ---------- */
.tp-news {
  margin-top: 34px;
  padding: 60px 80px 80px;
  background: var(--tp-gray-bg);
  border-radius: 15px;
}
.tp-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 156px;
}
.tp-news__head .tp-hdl .en { line-height: 100px; }
.tp-news__head .tp-hdl .ja { margin-top: 20px; }
.tp-news__list { margin-top: 40px; }
.tp-news-item {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--tp-gray-line);
}
.tp-news-item:last-child { margin-bottom: 0; }
.tp-news-item__body {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 10px;
  transition: opacity 0.2s;
}
.tp-news-item__body:hover { opacity: 0.7; }
.tp-news-item__title {
  flex: none;
  width: 869px; /* Figma: 見出し 869px + 40px + 矢印 32px (枠 940px から 1px はみ出す配置をそのまま再現) */
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}

/* ---------- Business ---------- */
.tp-business { margin-top: 80px; }
.tp-business .tp-hdl { height: 156px; }
.tp-business__list {
  display: flex;
  gap: 1px;
  max-width: 1400px; /* Figma のキャンバス幅。それ以上では中央寄せ */
  margin: 40px auto 0;
}
.tp-biz {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  color: #fff;
}
.tp-biz__image {
  aspect-ratio: 466 / 380;
  overflow: hidden;
  background: var(--tp-gray-line);
}
.tp-biz__image img { width: 100%; height: 100%; object-fit: cover; }
.tp-biz__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 304px;
  padding: 40px 40px 24px;
  background: var(--tp-green);
}
.tp-biz__title {
  font-family: var(--tp-font-noto);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.tp-biz__en {
  margin-top: 6px;
  font-family: var(--tp-font-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.tp-biz__text {
  margin-top: 16px;
  max-width: 386px;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}
.tp-biz__more {
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: space-between;
  width: 126.7px; /* Figma: 文字 + 丸 で 126.66px */
  margin-top: auto;
  padding-top: 11px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.tp-biz__more:hover { opacity: 0.8; }

/* ---------- Works ---------- */
.tp-works { position: relative; margin-top: 80px; }
.tp-works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 156px;
}
.tp-works__head .tp-pill.is-bordered { width: 134px; } /* Figma: この箇所のみ 134px */
.tp-works__list {
  margin-top: 61px;
  /* 高さは固定せず、表示中のカードのうち一番高いものに top.js が合わせる (文字量が少なければ低く、多ければ高く) */
}
.tp-works__list.slick-dotted { margin-bottom: 0; } /* 既存 slick-theme.css の .slick-dotted.slick-slider { margin-bottom: 30px } を打ち消す */
/* slick 初期化後 (カード間 21px) */
.tp-works__list .slick-list { margin: 0 -10.5px; overflow: hidden; }
.tp-works__list .slick-track { display: flex; align-items: flex-start; } /* 各カードは自分の高さのまま (非表示カードの高さに引っ張られない) */
/* .slick-list の高さは top.js が「表示するカードのうち一番高いもの」に合わせる。
   height に transition を付けると遷移中の高さが正しく取れずズレるため付けない */
.tp-works__list .slick-slide { height: auto; }
.tp-work {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 353px;
  margin: 0 10.5px;
}
.slick-initialized .tp-work { display: flex; }
.tp-work__image {
  aspect-ratio: 353 / 252;
  border-radius: 15px;
  overflow: hidden;
  background: var(--tp-gray-line);
}
.tp-work__image img { width: 100%; height: 100%; object-fit: cover; }
.tp-work__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-work__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px; /* Figma: カテゴリ行 24px (タグ 19px はその中で中央) */
}
.tp-work__cat {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--tp-green);
  white-space: nowrap;
}
.tp-work__tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 2px 10px 0;
  background: var(--tp-text);
  border-radius: 200px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.tp-work__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5; /* Figma: 2行 72px / 3行 108px */
}
.tp-work__more {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 126.7px; /* Figma: 文字 + 丸 で 126.66px。丸を右端 (x=101.75) に固定 */
  height: 35px; /* Figma: 行の高さ 35px (カード高さ 423 / 459px の内訳)。丸は上端に置き、文字はその丸と中央揃え */
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.tp-work__more:hover { opacity: 0.7; }
.tp-works__ctrl { display: contents; } /* PC では包みを無効化し、矢印は .tp-works 基準で絶対配置 */
.tp-works__arrow {
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
}
.tp-works__arrow img { width: 100%; height: 100%; }
/* 左右の矢印は同じ高さに置く (Figma では左が 53px 下にずれているが、右がスライダーの縦中央なので右に合わせる) */
.tp-works__arrow.is-next { right: calc(50% - 655px); top: 410px; }   /* Figma: 1400px キャンバスの右端から 45px */
.tp-works__arrow.is-prev { left: calc(50% - 654px); top: 410px; transform: rotate(180deg); }
/* ドット (既存 slick-theme.css の見た目を打ち消して Figma の 8px 円に) */
.tp-works__dots {
  display: flex;
  justify-content: center;
  height: 8px;
  margin: 32px auto 0;
}
.tp-works__dots .slick-dots {
  position: static;
  display: flex;
  gap: 10px;
  width: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.tp-works__dots .slick-dots li {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.tp-works__dots .slick-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tp-gray-line);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.tp-works__dots .slick-dots li button::before { display: none; content: none; }
.tp-works__dots .slick-dots li.slick-active button { background: var(--tp-green); }

/* ---------- Strengths / Factory (共通: .tp-feature) ---------- */
.tp-feature { margin-top: 160px; }
.tp-factory { margin-top: 79px; }
.tp-feature__inr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.tp-feature__text {
  width: 485px;
  flex: none;
}
.tp-feature__ja {
  margin: 14px 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.tp-feature__catch {
  margin: 44px 0 0 4px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}
.tp-feature__txt {
  width: 400px;
  margin: 38px 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  color: var(--tp-text-soft);
}
.tp-feature .tp-pill { margin: 30px 0 0 4px; }
.tp-feature__image {
  width: 550px;
  height: 550px;
  flex: none;
  margin-top: 3px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--tp-gray-line);
}
.tp-feature__image img { width: 100%; height: 100%; object-fit: cover; }
.tp-factory .tp-feature__text { width: 479px; padding-top: 72px; }
.tp-factory .tp-feature__txt { margin-top: 40px; }
.tp-factory .tp-feature__image { margin-top: 0; }

/* ---------- お困りごとポップアップ (popup_文字確認用) ---------- */
/* 背面スクロールの抑止は top.js で行う (スクロールバーは表示したままにして横ずれを防ぐ) */
.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  font-family: var(--tp-font-jp);
  color: var(--tp-text);
  /* フェードイン・アウト (opacity) + 閉じている間は visibility で操作不可にする */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tp-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.tp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.tp-modal__box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 16px)); /* 開くときに少し下からフワッと浮き上がる */
  transition: transform 0.3s ease;
  width: 1000px;
  max-width: 92%;
  /* 高さは中身に任せる。お困りごとが 1〜3 件なら 1 行、4〜6 件なら 2 行ぶんの高さになる
     (Figma も 5 件で 578px、3 件で 347px と行数で変わる) */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain; /* ボックス内のスクロールが背面に連鎖しないように */
  padding: 35px 90px 40px;
  background: #fff;
  border-radius: 20px;
}
.tp-modal.is-open .tp-modal__box { transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  .tp-modal, .tp-modal.is-open, .tp-modal__box { transition: none; }
}
.tp-modal__close {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--tp-green);
  border-radius: 0 20px 0 0;
  border: 0;
  cursor: pointer;
}
.tp-modal__close img { display: block; width: 11px; height: 11px; }
.tp-modal__title {
  font-family: var(--tp-font-noto);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tp-green);
  white-space: nowrap;
}
.tp-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  gap: 20px;
  /* Figma: ボックス上端から 96px。見出しの行ボックスが Figma より 2px 高いぶんを引いてある */
  margin-top: 25px;
}
.tp-box {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 211px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}
.tp-box:hover { opacity: 0.85; }
.tp-box__image {
  height: 140px;
  background: var(--tp-gray-placeholder);
  overflow: hidden;
}
.tp-box__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-box__body {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 75px;
  padding: 10px 16px;
  background: var(--tp-green);
}
.tp-box__text {
  flex: 1 0 0;
  min-width: 1px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.tp-modal .tp-arrow img { display: block; }

/* ==========================================================
   レスポンシブ
   ========================================================== */

/* ---------- 〜1399px: 矢印がカードに被らないように寄せる ---------- */
@media screen and (max-width: 1399px) {
  .tp-works__arrow { width: 48px; height: 48px; }
  .tp-works__arrow.is-next { right: 1%; top: 330px; }
  .tp-works__arrow.is-prev { left: 1%; top: 330px; }
}

/* ---------- 〜1100px (タブレット / 既存ヘッダーがハンバーガーになる幅) ---------- */
@media screen and (max-width: 1100px) {
  .tp-hero { padding-top: 130px; background-size: 100% 96px, 100% 1008px, 100% 1012px; } /* 既存ヘッダー高さ 96px */
  .tp-hero__top { flex-wrap: wrap; gap: 24px; }
  .tp-hero__copy { width: 100%; }
  .tp-hero__title { white-space: normal; }
  .tp-hero__lead { white-space: normal; }
  .tp-hero__image { width: 100%; max-width: 640px; height: auto; aspect-ratio: 499 / 280; margin-top: 0; }

  .tp-trouble__title { white-space: normal; }
  .tp-trouble__list { flex-wrap: wrap; gap: 20px; }
  .tp-trouble-card { flex: 0 0 calc((100% - 40px) / 3); }

  .tp-ctabox__title, .tp-ctabox__lead { white-space: normal; padding: 0 5%; }

  .tp-news { padding: 50px 5% 60px; }
  .tp-news-item__title { flex: 1; width: auto; min-width: 0; }

  .tp-biz__body { padding: 30px 5% 24px; }
  .tp-biz__title { white-space: normal; }
  .tp-biz__text { max-width: none; }

  .tp-feature { margin-top: 100px; }
  .tp-factory { margin-top: 80px; }
  .tp-feature__inr { flex-direction: column; align-items: stretch; gap: 40px; }
  .tp-factory .tp-feature__inr { flex-direction: column-reverse; }
  .tp-feature__text, .tp-factory .tp-feature__text { width: 100%; padding-top: 0; }
  .tp-feature__txt { width: 100%; max-width: 560px; }
  .tp-feature__image, .tp-factory .tp-feature__image { width: 100%; max-width: 550px; height: auto; aspect-ratio: 1 / 1; margin: 0; }

  .tp-modal__box { padding: 30px 5% 32px; min-height: 0; }
  .tp-modal__title { white-space: normal; padding-right: 44px; }
  .tp-modal__grid { grid-template-columns: repeat(auto-fit, 260px); justify-content: center; }
}

/* ---------- 〜768px (スマートフォン)  Figma: node 6556:1231 (SP) / 6556:1808 (SP_POPUP) ---------- */
@media screen and (max-width: 768px) {
  /* --- ヒーロー: 見出し 27px / リード 16px 4行 / 動画 360×202 --- */
  .tp-hero {
    padding-top: 104px;
    /* 白帯 (ヘッダー 96px) / 斜めの帯 / グレー地 (CTA白ボックスの途中まで) */
    background-size: 100% 96px, 100% 1170px, 100% calc(100% - 310px);
  }
  .tp-hero__top { flex-direction: column; gap: 16px; }
  .tp-hero__copy { width: 100%; }
  .tp-hero__title { font-size: 27px; letter-spacing: 1.35px; white-space: nowrap; }
  .tp-hero__lead { margin-top: 15px; font-size: 16px; line-height: 1.5; white-space: nowrap; }
  .tp-hero__image { width: 100%; max-width: none; height: auto; aspect-ratio: 360 / 202; margin-top: 0; }

  /* --- お知らせバー: 日付行 + 全文3行、矢印は右中央 (高さ 137px) --- */
  .tp-newsbar {
    position: relative;
    display: block;
    margin-top: 30px;
    padding: 10px 76px 10px 24px;
  }
  .tp-newsbar .tp-meta { width: auto; gap: 10px; }
  .tp-newsbar__body { display: block; margin-top: 5px; }
  .tp-newsbar__title {
    max-width: none;
    font-size: 14px;
    line-height: 28px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .tp-newsbar__body .tp-arrow {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* --- お困りごと: 2列 175px / 隙間 10px --- */
  .tp-trouble__title { margin: 52px 0 0; font-size: 24px; line-height: 38px; white-space: normal; }
  .tp-trouble__list { gap: 10px; margin: 19px 0 0; }
  .tp-trouble-card { flex: 0 0 calc(50% - 5px); min-height: 0; }
  .tp-trouble-card__title { margin-top: 8px; padding: 0 8px; font-size: 16px; line-height: 2; white-space: normal; }
  .tp-trouble-card__image { height: 85px; margin-top: 6px; }
  .tp-trouble-card__text { margin: 10px 10px 30px; font-size: 14px; line-height: 21px; }
  .tp-trouble-card .tp-arrow { margin: auto 10px 10px; }

  /* --- CTA (白ボックス) --- */
  .tp-ctabox { margin-top: 30px; padding: 20px 20px 32px; }
  .tp-ctabox__title { padding: 0; font-size: 30px; line-height: 1.6; }
  .tp-ctabox__lead { margin-top: 8px; padding: 0; font-size: 16px; line-height: 1.5; }
  .tp-ctabox .cv-cols { margin-top: 44px; }

  /* --- 見出し (英字 50px = 高さ 60px / 日本語 16px) --- */
  .tp-hdl .en { font-size: 50px; line-height: 1.2; letter-spacing: 2.5px; }
  .tp-hdl .ja { margin-top: 12px; font-size: 16px; line-height: 1.5; letter-spacing: 0.8px; }

  /* --- News: 「一覧を見る」をリストの下・中央へ (見出しブロックを display:contents で解体し order で並べ替え) --- */
  .tp-news {
    display: flex;
    flex-direction: column;
    margin-top: 138px;
    padding: 40px 20px;
    border-radius: 15px;
  }
  .tp-news__head { display: contents; }
  .tp-news__head .tp-hdl { order: 1; height: auto; }
  .tp-news__head .tp-hdl .en { line-height: 1.2; }
  .tp-news__head .tp-hdl .ja { margin-top: 12px; }
  .tp-news__list { order: 2; margin-top: 32px; }
  .tp-news__head .tp-pill { order: 3; height: 41px; margin: 32px auto 0; }
  .tp-news-item { padding: 16px 0; margin: 0; border-bottom: 1px solid var(--tp-gray-line); }
  .tp-news-item:first-child { padding-top: 8px; }
  .tp-news-item:last-child { margin: 0; }
  .tp-news-item .tp-meta { width: auto; padding-left: 8px; }
  .tp-news-item__body { gap: 20px; margin-top: 5px; padding-left: 8px; }
  .tp-news-item__title { flex: 1; width: auto; min-width: 0; font-size: 14px; line-height: 28px; }

  /* --- Business: 見出し → 画像 230px + 緑 232px の縦積み --- */
  .tp-business { margin-top: 80px; }
  .tp-business .tp-hdl { height: auto; }
  .tp-business__list { flex-direction: column; gap: 0; margin-top: 23px; }
  .tp-biz__image { aspect-ratio: 400 / 230; }
  .tp-biz__body { min-height: 0; padding: 20px 20px 25px; }
  .tp-biz__title { font-size: 26px; line-height: 1.2; white-space: normal; }
  .tp-biz__en { margin-top: 11px; }
  .tp-biz__text { margin-top: 11px; max-width: none; font-size: 16px; line-height: 1.5; }
  .tp-biz__more { padding-top: 16px; }

  /* --- Works: 1件表示、下に「← ●●● →」を1行、さらに下に「一覧を見る」 --- */
  .tp-works { display: flex; flex-direction: column; margin-top: 80px; }
  .tp-works__head { display: contents; }
  .tp-works__head .tp-hdl { order: 1; width: 90%; max-width: 1100px; height: auto; margin: 0 auto; }
  .tp-works__head .tp-pill { order: 4; width: 134px; height: 41px; margin: 40px auto 0; }
  .tp-works__list { order: 2; margin-top: 26px; }
  .tp-works__list .slick-list { margin: 0; }
  .tp-work { margin: 0; gap: 20px; } /* 幅は slick がインラインで指定 (360px)。中身を Figma の 353px に */
  .tp-work__image, .tp-work__body { width: 353px; max-width: 100%; }
  .tp-work__body { gap: 10px; }
  /* 「← ●●●●● →」を1行に (矢印 40px、ドットとの間 32px) */
  .tp-works__ctrl {
    display: flex;
    order: 3;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
  }
  .tp-works__dots { height: 8px; margin: 0; }
  .tp-works__arrow,
  .tp-works__arrow.is-prev,
  .tp-works__arrow.is-next {
    position: static;
    width: 40px;
    height: 40px;
    top: auto;
    left: auto;
    right: auto;
    flex: none;
  }
  .tp-works__arrow.is-prev { transform: rotate(180deg); }

  /* --- Strengths / Factory: 見出し → キャッチ → 本文 → ボタン → 画像 358×212 --- */
  .tp-feature { margin-top: 80px; }
  .tp-factory { margin-top: 80px; }
  .tp-feature__inr { flex-direction: column; gap: 0; }
  .tp-factory .tp-feature__inr { flex-direction: column-reverse; } /* Factory は HTML 上で画像が先なので反転して画像を下に */
  .tp-feature__text, .tp-factory .tp-feature__text { width: 100%; padding-top: 0; }
  .tp-feature__ja { margin: 12px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: 0.8px; }
  .tp-feature__catch { margin: 40px 0 0; font-size: 26px; line-height: 1.5; }
  .tp-feature__txt, .tp-factory .tp-feature__txt { width: 100%; max-width: none; margin: 16px 0 0; font-size: 16px; line-height: 2; }
  .tp-factory .tp-feature__txt { margin-top: 40px; }
  .tp-feature .tp-pill { height: 41px; margin: 24px 0 0; }
  .tp-feature__image, .tp-factory .tp-feature__image {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 358 / 212;
    margin: 56px 0 0;
  }

  /* --- ポップアップ (SP_POPUP): 幅 360 / 2列 155px --- */
  .tp-modal__box {
    top: 40px;
    transform: translate(-50%, 16px);
    width: calc(100% - 40px);
    max-width: 360px;
    min-height: 0;
    max-height: calc(100vh - 60px);
    padding: 20px;
    border-radius: 15px;
  }
  .tp-modal.is-open .tp-modal__box { transform: translate(-50%, 0); }
  .tp-modal__close { border-radius: 0 15px 0 0; }
  .tp-modal__title { padding-right: 44px; font-size: 26px; white-space: normal; }
  .tp-modal__grid {
    grid-template-columns: repeat(2, 155px);
    justify-content: space-between;
    gap: 10px;
    margin-top: 19px;
  }
  .tp-box { width: 100%; height: auto; }
  .tp-box__image { height: auto; max-height: none; aspect-ratio: 260 / 140; }
  .tp-box__body {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    min-height: 122px;
    padding: 8px 10px;
  }
  .tp-box__text { flex: none; width: 100%; font-size: 16px; }
  .tp-box__body .tp-arrow { margin-top: auto; }
}