/* ============================================================
   SOIL — topica.co.jp 版（案3 / ルート /tp）
   寸法・字組みは参照サイトの実測値。配色のみ SOIL のロゴ色へ置換。
   すべてのルールを .tp 配下に閉じて、A案・B案へ漏らさない。
   ============================================================ */

.tp {
  /* --- ロゴの4色 --- */
  --water: #00a0e9;
  --soil: #00913a;
  --life: #13ae67;
  --cycle: #00a29a;

  /* --- 参照サイトの配色に対応させた置換表 ---
     #FF6A00（橙アクセント） → #00913A（大地）
     #28A79B（ティール）     → #00A29A（循環）
     #333333（濃色）         → #3E3A39（ロゴの墨）
     #FFE7D6（淡い橙の地）   → #E6F5EC
     #F7F7F7（灰の地）       → #F5F8F6
     #CCCCCC（罫線）         → #D9DEDB                       */
  --accent: #00913a;
  --accentDeep: #007c31;
  --teal: #00a29a;
  --ink: #3e3a39;
  --bgPale: #e6f5ec;
  --bgGray: #f5f8f6;
  --line: #d9dedb;

  --ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --en: "Montserrat", "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  font-family: var(--ja);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ---------- リセット。要素型セレクタで後段のクラスに勝たないよう :where() で包む ---------- */
.tp *,
.tp *::before,
.tp *::after {
  box-sizing: border-box;
}
.tp :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd) {
  margin: 0;
  padding: 0;
}
.tp :where(ul, ol) {
  list-style: none;
}
.tp :where(a) {
  color: inherit;
  text-decoration: none;
}
.tp :where(img, svg) {
  display: block;
  max-width: 100%;
}

/* ============================================================
   ヘッダー 80px — 白地・固定。右端に高さいっぱいの CTA が2枚。
   ============================================================ */
.tpHdr {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 0 0 36px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(62, 58, 57, 0.08);
}
.tpHdr__logo img {
  /* 80px のバーに対して半分の高さ。エンブレム付きなので字だけのロゴより大きく取る */
  height: 40px;
  width: auto;
}
/* 名刺と同じ、ロゴの右に添えるタグライン。
   下罫はロゴの並び順（植物→循環→水）をそのまま横に流したグラデーション。 */
.tpHdr__tag {
  position: relative;
  margin-left: 20px;
  padding: 0 2px 7px;
  align-self: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.tpHdr__tag::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--life) 0%, var(--cycle) 52%, var(--water) 100%);
}
.tpNav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  margin-right: 48px;
}
.tpNav a {
  /* 幅が足りなくなったときに2行へ折れると崩れて見えるので折らせない */
  white-space: nowrap;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.25s var(--ease);
}
.tpNav a:hover {
  color: var(--accent);
}
.tpHdr__cta {
  display: flex;
  align-self: stretch;
}
.tpHdr__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 154px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  transition: filter 0.25s var(--ease);
}
.tpHdr__cta a:hover {
  filter: brightness(1.12);
}
.tpHdr__cta a:first-child {
  background: var(--ink);
}
.tpHdr__cta a:last-child {
  background: var(--accent);
}
.tpHdr__cta svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.tpBurger,
.tpDrawer {
  display: none;
}

/* ============================================================
   ヒーロー
   参照は 225deg のグラデーション板 1440×615 の上に文字。
   下端 98px は白へ抜けていく。
   ============================================================ */
.tpKv {
  position: relative;
  /* 中の背景板が z-index:-2 なので、ここで重ね合わせを閉じておかないと
     .tp の白地の裏へ回って消える */
  z-index: 0;
  margin-top: 84px;
  padding: 92px 40px 0;
  overflow: hidden;
}
.tpKv__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(197deg, var(--accent) 0%, #35bd7d 26%, #93dfba 62%, #eef9f3 100%);
}
/* あしらいはロゴの層（帯が重なった円）から。
   参照サイトの渦とは別物にしてある。 */
.tpKv__swirl {
  position: absolute;
  z-index: -1;
  right: -122px;
  bottom: -204px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-9deg);
  pointer-events: none;
  /* 上：土の粒。下：層の重なり。
     等間隔の縞だと機械的なので、薄い層と厚い層を不規則に積んでいる。 */
  background-image:
    radial-gradient(circle at 30% 62%, rgba(255, 255, 255, 0.08) 0.7px, rgba(255, 255, 255, 0) 1.8px),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0) 30px,
      rgba(255, 255, 255, 0.1) 30px,
      rgba(255, 255, 255, 0.1) 64px,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) 122px,
      rgba(255, 255, 255, 0.17) 122px,
      rgba(255, 255, 255, 0.17) 140px,
      rgba(255, 255, 255, 0) 140px,
      rgba(255, 255, 255, 0) 228px,
      rgba(255, 255, 255, 0.08) 228px,
      rgba(255, 255, 255, 0.08) 286px,
      rgba(255, 255, 255, 0) 286px,
      rgba(255, 255, 255, 0) 326px,
      rgba(255, 255, 255, 0.19) 326px,
      rgba(255, 255, 255, 0.19) 338px,
      rgba(255, 255, 255, 0) 338px,
      rgba(255, 255, 255, 0) 444px,
      rgba(255, 255, 255, 0.07) 444px,
      rgba(255, 255, 255, 0.07) 528px,
      rgba(255, 255, 255, 0) 528px,
      rgba(255, 255, 255, 0) 572px,
      rgba(255, 255, 255, 0.15) 572px,
      rgba(255, 255, 255, 0.15) 588px,
      rgba(255, 255, 255, 0) 588px,
      rgba(255, 255, 255, 0) 706px,
      rgba(255, 255, 255, 0.06) 706px,
      rgba(255, 255, 255, 0.06) 812px,
      rgba(255, 255, 255, 0) 812px
    );
  /* 層は 860px を1単位として縦に繰り返し、ゆっくり沈める。
     先頭と末尾を透明で揃えてあるので継ぎ目が出ない。 */
  background-repeat: repeat, repeat-y;
  background-size: 19px 19px, 100% 860px;
  animation: tpStrata 52s linear infinite;
}
/* 地球は層とは別の要素にして、傾けずに置く。
   .tpKv__swirl の中心（右-230px・下-170px）と同心になる値。 */
.tpKv__globe {
  position: absolute;
  z-index: -1;
  right: 6px;
  bottom: -76px;
  width: 644px;
  height: 644px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.tpGlobe {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tpG {
  fill: #fff;
  opacity: 0.4;
  animation: tpRipple 5.4s ease-in-out infinite;
}
.tpG--jp {
  opacity: 0.96;
  animation-name: tpRippleJp;
  animation-duration: 5.4s;
  /* どのリングより先に光る＝波紋の起点 */
  animation-delay: -4.8s;
}
/* 光る窓を狭くすると、隣のリングとの差が開いて帯がはっきり動いて見える */
@keyframes tpRipple {
  0%,
  30%,
  100% {
    opacity: 0.4;
  }
  9% {
    opacity: 1;
  }
}
@keyframes tpRippleJp {
  0%,
  30%,
  100% {
    opacity: 0.96;
  }
  7% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpG {
    animation: none;
    opacity: 0.62;
  }
  .tpG--jp {
    opacity: 1;
  }
}
/* 下端を白へ落とす帯 */
.tpKv::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 98px;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 99%);
  pointer-events: none;
}
.tpKv__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding-bottom: 118px;
}
.tpKv__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.tpKv__lead {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.tpKv__lead span {
  display: block;
}
.tpKv__lead span + span {
  margin-top: 4px;
}
.tpKv__btns {
  display: flex;
  gap: 20px;
  margin-top: 52px;
}

/* ---------- ピルボタン（塗り） ---------- */
.tpPill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 250px;
  height: 56px;
  padding: 0 12px 0 30px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: #fff;
  transition: 0.3s var(--ease);
}
.tpPill--dark {
  background: var(--ink);
}
.tpPill--accent {
  background: var(--accent);
}
.tpPill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(62, 58, 57, 0.18);
}
.tpPill i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.tpPill i svg {
  width: 15px;
  height: 15px;
}
.tpPill--dark i svg {
  color: var(--ink);
}
.tpPill--accent i svg {
  color: var(--accent);
}

/* ---------- ピルボタン（線・白地）と、丸環だけ色が付く型 ---------- */
.tpBtn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 236px;
  height: 54px;
  padding: 0 11px 0 28px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: 0.3s var(--ease);
}
.tpBtn i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  flex: none;
  transition: 0.3s var(--ease);
}
.tpBtn i svg {
  width: 15px;
  height: 15px;
}
.tpBtn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.tpBtn:hover i {
  transform: translateX(3px);
}
.tpBtn--fill {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.tpBtn--fill i {
  background: #fff;
  color: var(--teal);
}
.tpBtn--fill:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tpBtn--fill:hover i {
  color: var(--accent);
}
.tpBtn--w {
  background: #fff;
  border-color: #fff;
}
.tpCenter {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

/* ============================================================
   連携・協働先のロゴが流れる帯（参照サイトの取引先ロゴ列に対応）
   ============================================================ */
/* About の内側に置く版。セクションの padding を打ち消して全幅にする */
.tpMarquee--inSec {
  margin: 72px -80px -96px;
  padding-bottom: 0;
}
.tpMarquee {
  overflow: hidden;
  padding: 34px 0 40px;
  background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tpMarquee__row {
  display: flex;
  width: max-content;
  animation: tpFlow 46s linear infinite;
}
.tpMarquee__row > span {
  display: flex;
  align-items: center;
}
.tpMarquee__row > span > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 44px;
  font-size: 16px;
  font-weight: 600;
  color: #7d8a83;
  white-space: nowrap;
}
/* 高さは1点ずつ JSX 側で指定。横幅は元の比率のまま。 */
.tpMarquee__row img {
  width: auto;
  object-fit: contain;
}
@keyframes tpFlow {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpMarquee__row {
    animation: none;
  }
}

/* ============================================================
   セクションの器
   参照は section に padding 0 80px、内側の実効幅 1184px。
   ============================================================ */
.tpSec {
  padding: 88px 80px 96px;
}
.tpSec--pale {
  background: var(--bgPale);
}
.tpSec--gray {
  background: var(--bgGray);
}
.tpSec__inner {
  max-width: 1184px;
  margin: 0 auto;
}
.tpSec--service .tpSec__inner {
  max-width: 1120px;
}

/* ---------- 見出し：英字 48px の右に和文 14px ---------- */
.tpHead {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.tpHead__ja::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  margin-right: 14px;
  vertical-align: -1px;
  background: var(--line);
}
.tpHead__en {
  font-family: var(--en);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.tpHead__ja {
  font-size: 14px;
  font-weight: 600;
  color: #6f7d76;
}
/* 参照サイトの橙の大見出しに対応する、緑の大見出し */
/* 参照は 40px・字間0.21em。同じ数値だと寄りすぎるので、
   一段落として字間も詰め、行頭に短い罫を足している。 */
.tpLead {
  position: relative;
  margin-top: 40px;
  padding-left: 26px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.tpLead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 15px;
  height: 3px;
  background: var(--life);
}
.tpNote {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
}

/* ============================================================
   About — 左に本文、右に写真
   ============================================================ */
.tpAbout {
  display: grid;
  grid-template-columns: 1fr 568px;
  gap: 60px;
  align-items: start;
  margin-top: 40px;
}
.tpAbout__body p + p {
  margin-top: 22px;
}
.tpAbout__body p {
  font-size: 16px;
  line-height: 1.9;
}
.tpAbout__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.tpAbout__pic {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 568 / 301;
}
.tpAbout__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Fields — 3枚のカード
   ============================================================ */
.tpCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}
.tpCard__pic {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 367 / 216;
}
.tpCard__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.tpCard:hover .tpCard__pic img {
  transform: scale(1.06);
}
.tpCard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.tpCard__tags span {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.tpCard__title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.tpCard__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #5c6560;
}

/* ============================================================
   Service — 写真と本文が左右で入れ替わる3ブロック
   ============================================================ */
.tpSvc {
  margin-top: 56px;
}
.tpSvc + .tpSvc {
  margin-top: 76px;
}
.tpSvc__title {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.tpSvc__row {
  display: grid;
  grid-template-columns: 479px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 26px;
}
.tpSvc--rev .tpSvc__row {
  grid-template-columns: 1fr 479px;
}
.tpSvc--rev .tpSvc__pic {
  order: 2;
}
.tpSvc__pic {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 479 / 269;
}
.tpSvc__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpSvc__body p {
  font-size: 15px;
  line-height: 1.9;
}
.tpSvc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
}
.tpSvc__meta span {
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--bgPale);
  font-size: 13px;
  font-weight: 600;
  color: var(--accentDeep);
}

/* ---------- 囲みの案内 ---------- */
.tpBox {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 72px;
  padding: 36px 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.tpBox__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.tpBox__title::before {
  content: "";
  width: 4px;
  height: 26px;
  background: var(--accent);
  flex: none;
}
.tpBox__text {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: #5c6560;
}
.tpBox__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.tpBox__link i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.tpBox__link i svg {
  width: 12px;
  height: 12px;
}

/* ============================================================
   Column — 3枚の記事カード
   ============================================================ */
.tpCols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-top: 44px;
}
.tpCol__pic {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 376 / 197;
}
.tpCol__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.tpCol:hover .tpCol__pic img {
  transform: scale(1.06);
}
.tpCol__text {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

/* ============================================================
   News — 罫線の箱に3行
   ============================================================ */
.tpNews {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 38px 40px;
}
.tpNews li + li {
  border-top: 1px solid var(--line);
}
.tpNews a {
  display: flex;
  gap: 32px;
  padding: 20px 0;
  transition: color 0.25s var(--ease);
}
.tpNews li:first-child a {
  padding-top: 0;
}
.tpNews li:last-child a {
  padding-bottom: 0;
}
.tpNews a:hover {
  color: var(--accent);
}
.tpNews__date {
  width: 96px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.69;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* タグはボタンと同じ角丸で囲む */
.tpNews__cat {
  align-self: flex-start;
  min-width: 104px;
  flex: none;
  padding: 4px 14px;
  border-radius: 100px;
  background: var(--bgPale);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--accentDeep);
}
.tpNews__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.69;
}

/* ============================================================
   Request / Contact — 写真の上に文字を乗せた2枚
   ============================================================ */
.tpCta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tpCta__col {
  position: relative;
  z-index: 0;
  min-height: 441px;
  display: flex;
  align-items: center;
  padding: 0 80px;
  overflow: hidden;
  color: #fff;
}
.tpCta__col > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpCta__col::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(20, 40, 30, 0.62);
}
.tpCta__col--accent::before {
  background: rgba(0, 92, 48, 0.72);
}
.tpCta__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
}
.tpCta__body .tpHead__en {
  color: #fff;
}
.tpCta__body .tpHead__ja {
  color: rgba(255, 255, 255, 0.85);
}
.tpCta__text {
  margin-top: 33px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.tpCta__btn {
  margin-top: 40px;
}

/* ============================================================
   フッター
   ============================================================ */
.tpFoot {
  padding: 60px 80px 56px;
  background: var(--ink);
  color: #fff;
}
.tpFoot__logo img {
  height: 34px;
  width: auto;
}
.tpFoot__name {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
}
.tpFoot__addr {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.tpFoot__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin-top: 40px;
  font-size: 14px;
}
.tpFoot__nav b {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
}
.tpFoot__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tpFoot__row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 12px;
  font-size: 14px;
}
.tpFoot__bottom {
  margin-top: 56px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.tpFoot__bottom a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tpFoot__copy {
  margin-top: 14px;
}

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



/* ============================================================
   ここから下は下層ページ用
   ============================================================ */

/* ---------- 見出し帯 ---------- */
.tpPageHead {
  position: relative;
  z-index: 0;
  margin-top: 84px;
  padding: 72px 80px 64px;
  overflow: hidden;
  background: linear-gradient(197deg, var(--accent) 0%, #35bd7d 26%, #93dfba 62%, #eef9f3 100%);
}
.tpPageHead::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -200px;
  bottom: -300px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-9deg);
  /* ヒーローと同じ考え方。層は不規則に、粒は目の違う3層で。 */
  background-image:
    radial-gradient(circle at 30% 62%, rgba(255, 255, 255, 0.15) 0.7px, rgba(255, 255, 255, 0) 1.6px),
    radial-gradient(circle at 74% 26%, rgba(255, 255, 255, 0.1) 1.1px, rgba(255, 255, 255, 0) 2.2px),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 28px,
      rgba(255, 255, 255, 0) 28px,
      rgba(255, 255, 255, 0) 76px,
      rgba(255, 255, 255, 0.16) 76px,
      rgba(255, 255, 255, 0.16) 90px,
      rgba(255, 255, 255, 0) 90px,
      rgba(255, 255, 255, 0) 164px,
      rgba(255, 255, 255, 0.08) 164px,
      rgba(255, 255, 255, 0.08) 212px,
      rgba(255, 255, 255, 0) 212px,
      rgba(255, 255, 255, 0) 246px,
      rgba(255, 255, 255, 0.18) 246px,
      rgba(255, 255, 255, 0.18) 256px,
      rgba(255, 255, 255, 0) 256px,
      rgba(255, 255, 255, 0) 344px,
      rgba(255, 255, 255, 0.07) 344px,
      rgba(255, 255, 255, 0.07) 412px,
      rgba(255, 255, 255, 0) 412px,
      rgba(255, 255, 255, 0) 450px,
      rgba(255, 255, 255, 0.14) 450px,
      rgba(255, 255, 255, 0.14) 462px,
      rgba(255, 255, 255, 0) 462px,
      rgba(255, 255, 255, 0) 560px,
      rgba(255, 255, 255, 0.06) 560px,
      rgba(255, 255, 255, 0.06) 648px,
      rgba(255, 255, 255, 0) 648px
    );
  background-size: 13px 13px, 23px 23px, 100% 100%;
}
.tpPageHead__inner {
  max-width: 1184px;
  margin: 0 auto;
}
.tpCrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(62, 58, 57, 0.72);
}
.tpCrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tpPageHead__en {
  margin-top: 18px;
  font-family: var(--en);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.tpPageHead__ja {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.tpPageHead__lead {
  max-width: 760px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}

/* ---------- 本文まわり ---------- */
.tpProse h2 {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.tpProse h3 {
  margin-top: 40px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
}
.tpProse p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.95;
}
.tpProse ul {
  margin-top: 18px;
}
.tpProse li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.95;
}
.tpProse li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--life);
}
.tpProse + .tpProse {
  margin-top: 64px;
}

/* ---------- 定義リスト（会社概要・規格） ---------- */
.tpDl {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.tpDl__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
}
.tpDl__row dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--accentDeep);
}
.tpDl__row dd {
  font-size: 15px;
  line-height: 1.85;
}
.tpTodo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  background: #fdf2f2;
  border: 1px solid #f0d8d8;
  font-size: 12px;
  font-weight: 600;
  color: #b4443f;
}

/* ---------- ページ内アンカー ---------- */
.tpAnchors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 40px;
}
.tpAnchors a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: 0.25s var(--ease);
}
.tpAnchors a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--teal);
  border-bottom: 1.5px solid var(--teal);
  transform: rotate(45deg) translate(-1px, -1px);
}
.tpAnchors a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ---------- よくあるご質問 ---------- */
.tpFaq {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.tpFaq details {
  border-bottom: 1px solid var(--line);
}
.tpFaq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 44px 22px 8px;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.tpFaq summary::-webkit-details-marker {
  display: none;
}
.tpFaq summary::before {
  content: "Q";
  font-family: var(--en);
  font-size: 17px;
  color: var(--accent);
  flex: none;
}
.tpFaq summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 30px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.tpFaq details[open] summary::after {
  transform: rotate(-135deg);
}
.tpFaq__a {
  display: flex;
  gap: 14px;
  padding: 0 44px 24px 8px;
  font-size: 15px;
  line-height: 1.9;
  color: #4d5651;
}
.tpFaq__a::before {
  content: "A";
  font-family: var(--en);
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  flex: none;
}

/* ---------- 一覧ページ（お知らせ・コラム） ---------- */
.tpArchive {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.tpArchive a {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 26px 8px;
  border-bottom: 1px solid var(--line);
  transition: 0.25s var(--ease);
}
.tpArchive a:hover {
  background: var(--bgGray);
}
.tpArchive__date {
  width: 96px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tpArchive__cat {
  align-self: flex-start;
  min-width: 104px;
  flex: none;
  padding: 4px 14px;
  border-radius: 100px;
  background: var(--bgPale);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--accentDeep);
}
.tpArchive__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
}

/* ---------- フォーム ---------- */
.tpForm {
  max-width: 820px;
  margin-top: 40px;
}
.tpField + .tpField {
  margin-top: 26px;
}
.tpField__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
}
.tpField__req {
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.tpField__any {
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--bgGray);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: #6f7d76;
}
.tpField input,
.tpField select,
.tpField textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.tpField textarea {
  min-height: 170px;
  resize: vertical;
}
.tpField input:focus,
.tpField select:focus,
.tpField textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.tpField__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #6f7d76;
}
.tpForm__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.7;
}
.tpForm__agree input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
}
.tpForm__agree a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tpForm__submit {
  margin-top: 34px;
}
.tpForm__submit button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 280px;
  height: 58px;
  padding: 0 12px 0 30px;
  border: 0;
  border-radius: 100px;
  background: var(--accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  cursor: pointer;
  transition: 0.3s var(--ease);
}
.tpForm__submit button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(62, 58, 57, 0.18);
}
.tpForm__submit i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  flex: none;
}
.tpForm__submit i svg {
  width: 15px;
  height: 15px;
}
/* 送信先が未設定であることを明示する帯 */
.tpNotice {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid #f0d8d8;
  border-radius: 8px;
  background: #fdf2f2;
  font-size: 14px;
  line-height: 1.8;
  color: #8d3a36;
}
.tpNotice b {
  flex: none;
}

/* ---------- 作物一覧 ---------- */
.tpCrops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
}
.tpCrops span {
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--bgPale);
  font-size: 14px;
  font-weight: 600;
  color: var(--accentDeep);
}

/* ---------- 連携先 ---------- */
.tpOrgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.tpOrgs figure {
  display: grid;
  place-items: center;
  height: 128px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.tpOrgs img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


/* ---------- 下層ページの余白調整 ---------- */
.tpCards + .tpProse,
.tpDl + .tpProse,
.tpOrgs + .tpProse,
.tpFaq + .tpProse {
  margin-top: 64px;
}
/* 一覧ページのカードは2行以上になるので行間を空ける */
.tpSec__inner > .tpCols {
  row-gap: 44px;
}

@keyframes tpStrata {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 0,
      0 860px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpKv__swirl {
    animation: none;
  }
}

/* ============================================================
   活用領域：左に見出しを固定、右の面がスクロールで流れる
   ============================================================ */
.tpSpy {
  display: grid;
  grid-template-columns: 330px minmax(0, 660px);
  gap: 88px;
  margin-top: 56px;
}

/* ---------- 左：追従ナビ ---------- */
.tpSpy__nav {
  position: sticky;
  top: 148px;
  align-self: start;
}
.tpSpy__nav li + li {
  margin-top: 4px;
}
.tpSpy__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  position: relative;
  padding: 18px 4px 18px 26px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  color: #7d8a83;
  transition: color 0.3s var(--ease);
}
/* 左の縦罫。現在地だけ緑で伸びる */
.tpSpy__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--line);
  transition: background 0.3s var(--ease);
}
.tpSpy__link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 3px;
  height: 0;
  background: var(--accent);
  transition: height 0.45s var(--ease);
}
.tpSpy__link:hover {
  color: var(--ink);
}
.tpSpy__link.isOn {
  color: var(--accent);
}
.tpSpy__link.isOn::after {
  height: calc(100% - 28px);
}
.tpSpy__no {
  font-family: var(--en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  flex: none;
}
.tpSpy__link.isOn .tpSpy__no {
  color: var(--accent);
}

/* ---------- 右：面 ---------- */
.tpSpy__panel {
  padding: 26px;
  border-radius: 14px;
  background: #fff;
  scroll-margin-top: 132px;
}
.tpSpy__panel + .tpSpy__panel {
  margin-top: 40px;
}
.tpSpy__pic {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 608 / 300;
}
.tpSpy__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpSpy__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
}
.tpSpy__tags span {
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--bgPale);
  font-size: 13px;
  font-weight: 600;
  color: var(--accentDeep);
}
.tpSpy__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.tpSpy__title .tpSpy__no {
  font-size: 15px;
}
.tpSpy__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.95;
}


/* ============================================================
   出現アニメーション
   下から少し持ち上げながら出す。動きは一度きり。
   ============================================================ */
.tp [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.tp [data-reveal].isIn {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .tp [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 狭い画面だけで効かせる改行 */
.tpBrSp {
  display: none;
}

/* ============================================================
   ここから下はレスポンシブ。
   上書きが効くよう、必ずすべての基本ルールの後ろに置くこと。
   ============================================================ */

@media (max-width: 1279px) {
  .tpNav {
    gap: 20px;
    margin-right: 28px;
  }
  .tpHdr__cta a {
    width: 132px;
    font-size: 13px;
  }
  .tpKv__title {
    font-size: 42px;
  }
  .tpLead {
    font-size: 30px;
    letter-spacing: 0.14em;
  }
  .tpHead__en {
    font-size: 38px;
  }
  .tpAbout {
    grid-template-columns: 1fr 420px;
    gap: 40px;
  }
  .tpSvc__row,
  .tpSvc--rev .tpSvc__row {
    grid-template-columns: 1fr 1fr;
  }
  .tpSvc__title {
    font-size: 28px;
  }
  .tpCta__col {
    padding: 0 48px;
  }
}

@media (max-width: 1279px) {
  .tpSpy {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
  }
  .tpSpy__link {
    font-size: 21px;
  }
}

@media (max-width: 1199px) {
  .tpHdr__tag {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* ============================================================
     スマホ・タブレット共通
     指で触る前提。当たり判定は44px以上、余白は詰めすぎない。
     ============================================================ */
  .tpHdr {
    height: 72px;
    padding: 0 0 0 18px;
  }
  .tpHdr__logo img {
    height: 28px;
  }
  .tpNav,
  .tpHdr__cta {
    display: none;
  }
  /* ロゴの右のタグラインは狭い画面でも残す。文字だけ小さく詰める */
  .tpHdr__tag {
    display: block;
    margin-left: 10px;
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  /* ---------- ハンバーガー（3本線 → ×） ---------- */
  /* PC の「お問い合わせ」と同じ、高さいっぱいの緑の四角にする */
  .tpBurger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 68px;
    height: 100%;
    margin-left: auto;
    padding: 0 21px;
    border: 0;
    background: var(--accent);
    cursor: pointer;
  }
  .tpBurger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: 0.3s var(--ease);
  }
  .tpBurger.isOpen span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .tpBurger.isOpen span:nth-child(2) {
    opacity: 0;
  }
  .tpBurger.isOpen span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---------- ドロワー ---------- */
  .tpScrim {
    display: block;
    position: fixed;
    z-index: 44;
    inset: 72px 0 0;
    background: rgba(62, 58, 57, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .tpScrim.isOpen {
    opacity: 1;
    pointer-events: auto;
  }
  .tpDrawer {
    position: fixed;
    z-index: 45;
    inset: 72px 0 auto;
    display: block;
    padding: 6px 24px 28px;
    background: #fff;
    box-shadow: 0 18px 30px rgba(62, 58, 57, 0.14);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s var(--ease);
  }
  .tpDrawer.isOpen {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .tpDrawer__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 2px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    font-weight: 700;
  }
  .tpDrawer__nav a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(-45deg);
  }
  .tpDrawer__cta {
    display: grid;
    gap: 10px;
    margin-top: 22px;
  }
  .tpDrawer__cta .tpPill {
    width: 100%;
    max-width: none;
    height: 54px;
  }

  /* ---------- ヒーロー ---------- */
  .tpKv {
    margin-top: 72px;
    /* 上下に余裕を持たせて、文字が窮屈に見えないようにする */
    padding: 116px 24px 0;
  }
  .tpKv__inner {
    padding-bottom: 124px;
  }
  .tpKv__title {
    font-size: 36px;
    line-height: 1.5;
  }
  .tpKv__lead {
    margin-top: 32px;
    font-size: 15.5px;
    line-height: 1.95;
  }
  /* 3文が続けて折り返すとベタ組みに見えるので、文の切れ目に空きを入れる */
  .tpKv__lead span + span {
    margin-top: 12px;
  }
  /* 下に置くと見出しの裏に隠れて動きが分からないので、右上へ寄せる。
     層の円と地球は中心を合わせたまま（中心は右335px・上175px）。 */
  .tpKv__swirl {
    right: -265px;
    top: -145px;
    bottom: auto;
    width: 640px;
    height: 640px;
    opacity: 0.6;
  }
  .tpKv__globe {
    right: -160px;
    top: -40px;
    bottom: auto;
    width: 430px;
    height: 430px;
    opacity: 0.58;
  }
  /* 画面幅いっぱいに伸ばすと窮屈に見えるので、右に余白を残す */
  .tpKv__btns {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 48px;
  }
  .tpPill {
    width: 306px;
    max-width: 100%;
  }

  /* ---------- セクションの器 ---------- */
  .tpSec {
    padding: 78px 24px 86px;
  }
  .tpHead__en {
    font-size: 36px;
  }
  .tpHead__ja {
    font-size: 15px;
  }
  .tpHead {
    margin-bottom: 0;
  }
  /* 21px・字間0.06em だと「つなぎ直す。」の最後2文字が次行へ落ちる */
  /* 狭い画面でだけ改行させる */
  .tpBrSp {
    display: inline;
  }
  .tpLead {
    margin-top: 28px;
    padding-left: 20px;
    font-size: 23px;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .tpLead::before {
    width: 12px;
  }
  .tpNote {
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.95;
  }
  /* 原稿の改行位置は広い画面向け。狭い画面では行が不揃いになるので外す */
  .tpNote br,
  .tpCta__text br,
  .tpBox__text br,
  .tpPageHead__lead br {
    display: none;
  }

  .tpAbout,
  .tpCards,
  .tpCols,
  .tpSvc__row,
  .tpSvc--rev .tpSvc__row {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .tpCta {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tpAbout {
    margin-top: 30px;
  }
  /* 狭い画面では、緑の見出しのすぐ下に写真を置く */
  .tpAbout__pic {
    order: -1;
  }
  .tpAbout__btns {
    display: grid;
    gap: 10px;
    margin-top: 30px;
  }
  .tpAbout__btns {
    justify-items: center;
  }
  .tpAbout__btns .tpBtn {
    width: 296px;
    max-width: 100%;
  }
  .tpSvc--rev .tpSvc__pic {
    order: 0;
  }
  .tpSvc + .tpSvc {
    margin-top: 52px;
  }
  .tpSvc__title {
    font-size: 25px;
    line-height: 1.55;
  }
  .tpCenter {
    margin-top: 36px;
  }
  .tpBtn {
    min-width: 0;
  }

  /* ---------- 活用領域 ----------
     追従ナビはスクロール位置を示すためのもの。狭い画面では面が縦に積まれて
     見出しがすぐ目に入るので、ナビは出さない。3つ横に並べると折り返して
     かえって読みにくくなるという理由もある。 */
  .tpSpy {
    display: block;
    margin-top: 30px;
  }
  .tpSpy__nav {
    display: none;
  }
  .tpSpy__panels {
    margin-top: 26px;
  }
  .tpSpy__panel {
    padding: 18px;
  }
  .tpSpy__panel + .tpSpy__panel {
    margin-top: 20px;
  }
  .tpSpy__title {
    font-size: 23px;
  }
  .tpSpy__text {
    font-size: 15px;
    line-height: 1.9;
  }

  /* ---------- 囲み・お知らせ ---------- */
  .tpBox {
    display: block;
    margin-top: 52px;
    padding: 24px 22px;
  }
  .tpBox__link {
    margin: 20px 0 0;
  }
  .tpNews {
    margin-top: 30px;
    padding: 8px 20px;
  }
  .tpNews a {
    display: block;
    padding: 20px 0;
  }
  .tpNews__date,
  .tpNews__cat {
    display: inline-block;
    width: auto;
    margin: 0 10px 8px 0;
  }
  .tpNews__title {
    display: block;
    font-size: 15px;
    line-height: 1.75;
  }

  /* ---------- 下部 CTA ---------- */
  .tpCta__col {
    min-height: 0;
    padding: 60px 24px 64px;
  }
  .tpCta__text {
    margin-top: 24px;
    line-height: 1.9;
  }
  .tpCta__btn {
    margin-top: 30px;
  }
  .tpCta__btn {
    display: flex;
    justify-content: center;
  }
  .tpCta__btn .tpBtn {
    width: 296px;
    max-width: 100%;
  }

  /* ---------- フッター ---------- */
  /* ロゴが大きいと1枚しか見えず間延びするので、小さくして流す */
  .tpMarquee--inSec {
    margin: 48px -24px -86px;
  }
  .tpMarquee {
    padding: 26px 0 34px;
  }
  .tpMarquee__row > span > span {
    gap: 20px;
    padding-right: 20px;
  }
  .tpMarquee__row img {
    height: auto !important;
    max-height: 30px;
  }

  .tpFoot {
    padding: 56px 24px 52px;
  }
  .tpFoot__nav,
  .tpFoot__row2 {
    gap: 12px 20px;
  }

  /* ---------- 下層ページ ---------- */
  .tpPageHead {
    margin-top: 72px;
    padding: 62px 24px 58px;
  }
  .tpPageHead__en {
    font-size: 39px;
  }
  .tpPageHead__ja {
    font-size: 16px;
  }
  .tpPageHead__lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.9;
  }
  .tpPageHead::after {
    right: -190px;
    bottom: -330px;
    width: 560px;
    height: 560px;
  }
  .tpAnchors {
    gap: 8px;
    margin-top: 30px;
  }
  .tpAnchors a {
    font-size: 12.5px;
    padding: 9px 15px;
  }
  .tpProse h2 {
    font-size: 25px;
  }
  .tpProse h3 {
    margin-top: 32px;
  }
  .tpProse p,
  .tpProse li {
    font-size: 15px;
  }
  .tpProse + .tpProse,
  .tpCards + .tpProse,
  .tpDl + .tpProse,
  .tpOrgs + .tpProse,
  .tpFaq + .tpProse {
    margin-top: 48px;
  }
  .tpDl__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 4px;
  }
  .tpFaq summary {
    padding: 20px 40px 20px 4px;
    font-size: 15px;
  }
  .tpFaq__a {
    padding: 0 40px 22px 4px;
    font-size: 14px;
  }
  .tpArchive a {
    display: block;
    padding: 22px 4px;
  }
  .tpArchive__date,
  .tpArchive__cat {
    display: inline-block;
    width: auto;
    margin: 0 10px 8px 0;
  }
  .tpArchive__title {
    display: block;
  }
  .tpOrgs {
    grid-template-columns: repeat(2, 1fr);
  }
  .tpForm__submit button {
    width: 280px;
    max-width: 100%;
  }
  .tpField + .tpField {
    margin-top: 22px;
  }
  .tpSec__inner > .tpCols {
    row-gap: 30px;
  }
}

/* 電話・メールのリンク（自動リンクを切ったので自前で用意している） */
.tpFoot__addr a,
.tpProse a[href^="tel:"],
.tpProse a[href^="mailto:"],
.tpNote a[href^="tel:"],
.tpNote a[href^="mailto:"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}