/* top-style.css … 元は parts/top-style.php の中の <style>（2026-11-07 にここへ移した）。読み込みは parts/top-style.php の同じ場所の gembaroid_part_css( 'top-style' ) */
/* メニューの行（製品・工種別…）は、もとのトップでは動画を過ぎるまで透明だった。試作は一画面目が動画の上にあるので、始めから薄いグレーの帯を敷いて文字を読めるようにする（2026-11-07） */
@media (min-width: 751px) { body.home .gnav:not(.-hidesub):after { bottom: -54px; } }
.tp-hero { position: relative; color: #fff; background: #111 center / cover no-repeat; }
.tp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-hero:before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.55); }
.tp-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 210px 40px 72px; /* 上のヘッダーとメニューの行（146px）は固定で重なるので、その下から始める */ box-sizing: border-box; }
.tp-hero__copy { font-size: 4rem; font-weight: 700; line-height: 1.4; letter-spacing: .04em; margin: 0 0 16px; word-break: auto-phrase; }
.tp-hero__lead { max-width: 760px; font-size: 1.6rem; line-height: 1.9; letter-spacing: .04em; margin: 0 0 24px; }
.tp-hero__marks { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 32px; padding: 0; }
.tp-hero__marks li { list-style: none; padding: 4px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; }
.tp-hero__marks small { font-size: 1.1rem; font-weight: 400; opacity: .8; margin-left: 4px; }
.tp-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 52px; padding: 0 28px; border-radius: 999px; font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; box-sizing: border-box; } /* ホバーの動きは parts/btn-motion-style.php（全ページ共通） */
.tp-btn.-main { background: #fff; color: #000; }
.tp-btn.-sub { border: 1px solid #fff; color: #fff; }
.tp-btn.-dark { background: #000; color: #fff; }
.tp-btn.-line { border: 1px solid #000; color: #000; }
.tp-users { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); }
.tp-users__inner { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; box-sizing: border-box; font-size: 1.3rem; }
.tp-users__ttl { font-weight: 700; color: var(--c-gray-dark); letter-spacing: .06em; }
.tp-users a { color: #000; font-weight: 600; text-decoration: none; letter-spacing: .03em; }
.tp-users a:after { content: ' →'; color: var(--c-gray-dark); }
.tp-users a:hover { text-decoration: underline; }
.tp-sec { padding: 72px 0; background: #fff; }
.tp-sec.-gray { background: var(--c-bg-soft); }
.tp-sec__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.tp-sec__ttl { font-size: 2.6rem; font-weight: 700; letter-spacing: .06em; line-height: 1.5; text-align: center; margin: 0 0 8px; }
.tp-sec__lead { font-size: 1.4rem; line-height: 1.9; letter-spacing: .04em; text-align: center; color: var(--c-gray-dark); margin: 0 0 32px; }
.tp-sec__more { text-align: center; margin: 32px 0 0; }
.tp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
/* 横に並ぶカードどうしで、画像・題・説明・リンクの4段の高さを揃える（subgrid・2026-11-07） */
.tp-cards > li { list-style: none; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.tp-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 18px; border: 1px solid var(--c-line-dark); border-radius: 8px; background: #fff; overflow: hidden; color: #000; text-decoration: none; transition: border-color .2s; }
/* 4段に満たないカードは、ある段の数だけ使う（使わない段が下の空白になるため・2026-11-07）。リンクも「続きを読む」も無い＝3段（画像・題・説明）、説明も無い＝2段（画像・題） */
.tp-cards > li:not(:has(.tp-card__links, .tp-card__more)), .tp-card:not(:has(.tp-card__links, .tp-card__more)) { grid-row: span 3; }
.tp-cards > li:not(:has(.tp-card__links, .tp-card__more, .tp-card__desc)), .tp-card:not(:has(.tp-card__links, .tp-card__more, .tp-card__desc)) { grid-row: span 2; }
a.tp-card:hover, .tp-card:has(a:hover) { border-color: #000; }
.tp-card__img { display: block; aspect-ratio: 400 / 310; background: var(--c-bg-soft); overflow: hidden; }
.tp-card__icon { display: flex; align-items: center; justify-content: center; height: 112px; background: var(--c-bg-soft); color: #000; }
.tp-card__icon svg { width: 56px; height: 56px; }
.tp-card__img { position: relative; }
/* 困りごとの写真の右下に、線の絵の札（青いグラデーションの角丸の四角）を半分はみ出して重ねる（2026-11-07・ANDPAD の製品カードを手本にした）。写真は暗くしない */
.tp-card__img.-badge { overflow: visible; z-index: 1; }
.tp-card__img.-badge img { border-radius: 7px 7px 0 0; }
.tp-card__badge { position: absolute; right: 16px; bottom: -28px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background-image: linear-gradient(45deg, var(--c-blue), var(--c-teal)); color: #fff; box-shadow: 0 4px 12px rgba(7,100,199,.25); } /* 色はヘッダーの「資料請求」ボタンと同じ青いグラデーション（2026-11-07 黒から変更） */
.tp-card__badge svg { width: 34px; height: 34px; }
.tp-card__img.-badge + .tp-card__bd .tp-card__ttl { padding-top: 40px; }
.tp-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-card__bd { display: contents; }
.tp-card__ttl { font-size: 1.6rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; margin: 0; padding: 16px 18px 6px; color: #000; text-decoration: none; }
.tp-card__desc { font-size: 1.3rem; line-height: 1.8; letter-spacing: .03em; color: var(--c-gray-dark); margin: 0; padding: 0 18px 12px; }
.tp-card__links { align-self: start; margin: 0 18px; padding: 10px 0 0; border-top: 1px solid var(--c-line); }
.tp-card__links li { list-style: none; }
.tp-card__links a { display: block; padding: 3px 0; font-size: 1.3rem; font-weight: 600; color: #000; text-decoration: none; letter-spacing: .03em; }
.tp-card__links a:after { content: '\00a0→'; color: var(--c-gray-dark); } /* 矢印だけが次の行に落ちないよう、前を改行しない空白にする */
.tp-card__links a:hover { text-decoration: underline; }
.tp-cards.-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* 共創ストーリー（5件を1列に） */
.tp-cards.-five .tp-card__ttl { font-size: 1.5rem; }
.tp-card__more { align-self: end; padding: 0 18px; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; }
.tp-card__more:after { content: '\00a0→'; color: var(--c-gray-dark); }
.tp-card__note { display: block; font-size: 1.1rem; color: var(--c-gray-light); margin: 0 0 2px; letter-spacing: 0; }
.tp-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 32px; padding: 0; counter-reset: tpflow; } /* 2026-11-07 段に薄いグレーの地を敷いて横幅いっぱいに均等に並べ、段のあいだに矢印を置いた（右が空いて左に寄って見えたため） */
.tp-flow li { list-style: none; position: relative; padding: 24px 22px 26px; border-radius: 8px; background: #f4f5f6; counter-increment: tpflow; }
@media (min-width: 1101px) { .tp-flow li:not(:last-child):after { content: ''; position: absolute; top: 50%; right: -19px; width: 9px; height: 9px; border-top: 2px solid #a9b0b6; border-right: 2px solid #a9b0b6; transform: translateY(-50%) rotate(45deg); } }
.tp-flow li:before { content: counter(tpflow); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 0 8px; border-radius: 50%; background: #000; color: #fff; font-size: 1.3rem; font-weight: 700; }
.tp-flow__ttl { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 4px; }
.tp-flow__desc { display: block; font-size: 1.3rem; line-height: 1.8; color: var(--c-gray-dark); }
.tp-notes { width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; } /* 文の幅に合わせた箱を中央に置く（2026-11-07） */
.tp-notes li { list-style: none; position: relative; padding: 0 0 0 1.4em; font-size: 1.4rem; line-height: 1.9; letter-spacing: .03em; }
.tp-notes li:before { content: '・'; position: absolute; left: 0; }
.tp-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; }
.tp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.tp-tags li { list-style: none; }
.tp-tags a { display: inline-block; padding: 8px 22px; border: 1px solid #000; border-radius: 999px; color: #000; font-size: 1.4rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; }
/* 工種のボタンのホバーは parts/btn-motion-style.php（他のボタンと同じく青いグラデーションが満ちる・2026-11-07） */
.tp-news { max-width: 860px; margin: 0 auto; padding: 0; }
.tp-news li { list-style: none; border-bottom: 1px solid var(--c-line); }
.tp-news a { display: flex; gap: 20px; padding: 14px 4px; color: #000; text-decoration: none; font-size: 1.4rem; line-height: 1.7; letter-spacing: .03em; }
.tp-news time { flex: none; color: var(--c-gray-light); }
.tp-news a:hover span { text-decoration: underline; }
.tp-contact { background: #000; color: #fff; text-align: center; }
.tp-contact .tp-sec__ttl { color: #fff; }
.tp-contact .tp-sec__lead { color: #ccc; }
.tp-contact__tel { margin: 24px 0 0; font-size: 1.4rem; letter-spacing: .04em; }
.tp-contact__tel a, .tp-contact__tel span { font-size: 2.4rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .06em; margin: 0 8px; }
@media (max-width: 1100px) { .tp-cards, .tp-cards.-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 750px) {
  .tp-hero__inner { padding: 56px 20px 48px; }
  .tp-hero__copy { font-size: 2.6rem; }
  .tp-hero__lead { font-size: 1.4rem; }
  .tp-btn { min-width: 0; flex: 1 1 100%; }
  .tp-users__inner { padding: 12px 20px; gap: 6px 18px; }
  .tp-sec { padding: 48px 0; }
  .tp-sec__inner { padding: 0 16px; }
  .tp-sec__ttl { font-size: 2rem; }
  .tp-cards, .tp-cards.-five { grid-template-columns: 1fr; gap: 14px; }
  .tp-flow { grid-template-columns: 1fr; }
  .tp-news a { flex-direction: column; gap: 2px; }
}