/* top-hero.css … 元は parts/top-hero.php の中の <style>（2026-11-07 にここへ移した）。読み込みは parts/top-hero.php の同じ場所の gembaroid_part_css( 'top-hero' ) */
.th { position: relative; background: #fff; overflow: hidden; }
.th__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1320px; margin: 0 auto; padding: 166px 40px 40px; box-sizing: border-box; } /* 2026-11-07 右の写真の枠を大きく・上下の余白を詰めた（國塚さん指定）。上の 166px は固定のヘッダーとメニューの行（146px）の分 */
.th__eyebrow { font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; color: var(--c-gray-dark); margin: 0 0 14px; }
.th__copy { font-size: 4rem; font-weight: 700; line-height: 1.4; letter-spacing: .04em; margin: 0 0 16px; color: #000; word-break: auto-phrase; }
.th__lead { font-size: 1.5rem; line-height: 1.9; letter-spacing: .04em; color: var(--c-gray-dark); margin: 0 0 28px; text-wrap: pretty; word-break: auto-phrase; }
.th__marks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 32px; padding: 0; }
.th__marks li { list-style: none; display: flex; align-items: center; gap: 4px; color: var(--c-blue); }
.th-laurel { width: 14px; height: 40px; flex: none; }
.th-laurel.-r { transform: scaleX(-1); }
.th__mark { display: flex; flex-direction: column; align-items: center; text-align: center; color: #000; line-height: 1.2; }
.th__mark small { font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; color: var(--c-gray-dark); }
.th__mark b { font-size: 2.2rem; font-weight: 700; letter-spacing: .02em; }
.th__mark b span { font-size: 1.3rem; margin-left: 2px; }
.th__mark em { font-style: normal; font-size: 1rem; color: var(--c-gray-light); margin-top: 2px; }
/* NETIS登録の印は NETIS登録製品のページ、グッドデザイン賞の印は受賞のお知らせへのリンク（2026-11-07）。見た目は他の印と同じにし、乗せたときだけ文字を青に */
.th__marklink { display: flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.th__marklink .th__mark small, .th__marklink .th__mark b { transition: color .2s; }
@media (hover: hover) { .th__marklink:hover .th__mark small, .th__marklink:hover .th__mark b { color: var(--c-blue); } }
.th__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.th__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; height: 56px; 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（全ページ共通） */
.th__btn.-dark { background: #000; color: #fff; }
.th__btn.-blue { background-image: linear-gradient(45deg, var(--c-blue), var(--c-teal)); color: #fff; }
/* 右の舞台: 3つの枠を少しずつずらして重ねる */
.th__stage { position: relative; height: 600px; }
.th__panel { position: absolute; overflow: hidden; border-radius: 10px; background: #e9eef3; box-shadow: 0 18px 40px rgba(0,0,0,.14); opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), left 1s cubic-bezier(.65,0,.35,1), top 1s cubic-bezier(.65,0,.35,1), width 1s cubic-bezier(.65,0,.35,1), height 1s cubic-bezier(.65,0,.35,1); }
.th.is-in .th__panel { opacity: 1; transform: none; }
.th__panel.-a { left: 0; top: 80px; width: 30%; height: 440px; transition-delay: .1s; }
.th__panel.-b { left: 33%; top: 0; width: 36%; height: 545px; transition-delay: .25s; z-index: 2; }
.th__panel.-c { left: 72%; top: 125px; width: 28%; height: 420px; transition-delay: .4s; }
.th__panel video, .th__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th__panel.-a video { object-position: 38% center; opacity: 0; transition: opacity .8s ease, object-position 1.2s cubic-bezier(.65,0,.35,1); } /* 動画の枠（-a）。場面（動画と切り出し位置）はスクリプトが順に替える。パソコン幅では下の is-s1〜3 で枠の位置も入れ替える */
.th__panel.-a video.is-on { opacity: 1; }
/* 3つの枠の位置（2026-11-07 國塚さん指定「動画をランダムに」）。-a＝動画・-b＝左の写真・-c＝右の写真の中身はそのまま、置く位置（左の小・中央の大・右）をスクリプトがランダムに入れ替える */
@media (min-width: 751px) {
  .th__panel.is-s1 { left: 0; top: 80px; width: 30%; height: 440px; z-index: 1; }
  .th__panel.is-s2 { left: 33%; top: 0; width: 36%; height: 545px; z-index: 2; }
  .th__panel.is-s3 { left: 72%; top: 125px; width: 28%; height: 420px; z-index: 1; }
}
.th__panel img { opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s linear; }
.th__panel img.is-on { opacity: 1; transform: scale(1); }
.th__deco { position: absolute; background-image: linear-gradient(45deg, var(--c-blue), var(--c-teal)); opacity: 0; transition: opacity .8s ease .6s; }
.th.is-in .th__deco { opacity: 1; }
.th__deco.-d1 { left: 28%; top: 40px; width: 56px; height: 56px; }
.th__deco.-d2 { right: -12px; top: 500px; width: 80px; height: 22px; }
.th__deco.-d3 { left: 66%; bottom: 0; width: 22px; height: 70px; }
/* 困りごとの札（丸）: 中央の写真と同じ間隔で、困りごと→製品が入れ替わる */
.th__tag { position: absolute; left: 12%; bottom: 6px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 50%; background-image: linear-gradient(45deg, var(--c-blue), var(--c-teal)); color: #fff; text-align: center; text-decoration: none; box-shadow: 0 12px 28px rgba(7,100,199,.3); opacity: 0; transform: scale(.85); transition: opacity .6s ease .7s, transform .6s cubic-bezier(.2,.8,.2,1) .7s; }
.th.is-in .th__tag { opacity: 1; transform: none; }
.th__tag small { font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; opacity: .9; }
.th__tag b { font-size: 1.7rem; font-weight: 700; line-height: 1.35; margin: 4px 10px 6px; word-break: auto-phrase; } /* 「コンクリートの／品質管理」のように語の切れ目で折る */
.th__tag span { font-size: 1.15rem; font-weight: 600; line-height: 1.4; padding: 0 16px; }
.th__tag .is-swap { transition: opacity .35s, color .3s ease; }
.th__tag.is-fade .is-swap { opacity: 0; }
@media (max-width: 1100px) { .th__copy { font-size: 3.2rem; } .th__inner { gap: 24px; } }
@media (max-width: 750px) {
  .th__inner { grid-template-columns: 1fr; min-height: 0; padding: 88px 20px 40px; gap: 28px; }
  .th__copy { font-size: 2.8rem; }
  .th__lead { font-size: 1.4rem; margin-bottom: 20px; }
  .th__marks { gap: 8px 14px; margin-bottom: 24px; }
  .th__mark b { font-size: 1.8rem; }
  .th__btn { flex: 1 1 100%; min-width: 0; }
  .th__stage { height: 380px; }
  .th__panel.-a, .th__panel.-c, .th__deco.-d2 { display: none; }
  .th__panel.-b { left: 0; width: 100%; height: 320px; }
  .th__deco.-d1 { left: auto; right: 0; top: -18px; width: 40px; height: 40px; }
  .th__deco.-d3 { display: none; }
  .th__tag { left: auto; right: 12px; bottom: 0; width: 136px; height: 136px; }
  .th__tag b { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .th__panel, .th__panel img, .th__deco, .th__tag { transition: none !important; }
}

/* 丸い札のマウス・キーボードの動き（2026-11-07）。乗せた所（--x・--y）から白が広がり、文字は黒に。少し大きくなり、製品名の後ろに → が出る */
.th__tag { overflow: hidden; isolation: isolate; --x: 50%; --y: 50%; }
.th__tag:before { content: ''; position: absolute; left: var(--x); top: var(--y); z-index: -1; width: 300%; aspect-ratio: 1; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform .5s cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
.th__tag small { transition: color .3s ease; }
.th__tag span:after { content: '\00a0→'; display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.th.is-in .th__tag.is-ready { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.th.is-in .th__tag.is-ready:hover, .th.is-in .th__tag.is-ready:focus-visible { transform: scale(1.06); box-shadow: 0 18px 36px rgba(7, 100, 199, .38); }
.th__tag.is-ready:hover:before, .th__tag.is-ready:focus-visible:before { transform: translate(-50%, -50%) scale(1); }
.th__tag.is-ready:hover small, .th__tag.is-ready:hover b, .th__tag.is-ready:hover span, .th__tag.is-ready:focus-visible small, .th__tag.is-ready:focus-visible b, .th__tag.is-ready:focus-visible span { color: #000; }
.th__tag.is-ready:hover span:after, .th__tag.is-ready:focus-visible span:after { opacity: 1; transform: none; }
.th__tag:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .th__tag:before, .th__tag span:after { transition: none !important; } }