/* ============================================================
   トップページ専用スタイル
   ============================================================ */

/* ---------- 1. ヒーローカルーセル ---------- */
.hero {
  position: relative; background: var(--gradient-navy); overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
.hero-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease-out); }
.hero-bg.is-active { opacity: 1; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg .scrim { position: absolute; inset: 0; background: rgba(13, 28, 46, 0.46); }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 7;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 8px; cursor: pointer;
  filter: drop-shadow(0 1px 6px rgba(9, 21, 36, 0.7));
}
.hero-arrow .chevs {
  display: flex; gap: 3px; font-size: 34px; line-height: 1;
  font-family: var(--font-num); font-weight: 700; color: #fff;
}
.hero-arrow .chevs i { font-style: normal; opacity: 0.25; animation: hsBlink 1.6s infinite !important; }
.hero-arrow.next .chevs i:nth-child(1) { animation-delay: 0s !important; }
.hero-arrow.next .chevs i:nth-child(2) { animation-delay: 0.2s !important; }
.hero-arrow.next .chevs i:nth-child(3) { animation-delay: 0.4s !important; color: var(--pa-signal); }
.hero-arrow.prev .chevs i:nth-child(3) { animation-delay: 0s !important; }
.hero-arrow.prev .chevs i:nth-child(2) { animation-delay: 0.2s !important; }
.hero-arrow.prev .chevs i:nth-child(1) { animation-delay: 0.4s !important; color: var(--pa-signal); }
.hero-arrow .lbl {
  font-size: clamp(14px, 1.7svh, 17px); font-weight: 700; letter-spacing: 0.05em; color: #EDF2F8;
  text-shadow: 0 1px 6px rgba(9, 21, 36, 0.8); line-height: 1;
}
.hero-arrow:hover .lbl { color: #fff; }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }

.hero-marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; overflow: hidden; pointer-events: none;
}
.hero-marquee .track {
  display: flex; width: max-content; animation: paMarquee 90s linear infinite; margin-bottom: -0.44em;
}
.hero-marquee span {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 7vw, 108px); line-height: 1; letter-spacing: -0.02em;
  color: #fff; padding-right: 0.28em; white-space: nowrap; user-select: none;
}
@keyframes paMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 装飾マーキーは「視差効果を減らす」設定の端末でも動かす（ゆっくり・要望対応） */
@media (prefers-reduced-motion: reduce) {
  .hero-marquee .track { animation: paMarquee 90s linear infinite !important; }
}

.hero-inner { position: relative; z-index: 2; padding-top: clamp(96px, 14svh, 150px); padding-bottom: clamp(96px, 17svh, 150px); width: 100%; }
.hero-slide { display: none; max-width: 780px; }
.hero-slide.is-active { display: block; }
.hero-slide.align-right { margin-left: auto; text-align: right; }
.hero-slide.align-left { margin-right: auto; text-align: left; }
.hero-slide h1, .hero-slide .h {
  animation: heroIn 1.25s var(--ease-out) 0.1s both;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.2svh, 54px); font-weight: 900; line-height: 1.26;
  color: #fff; letter-spacing: -0.025em; text-wrap: balance; text-shadow: 0 2px 14px rgba(9, 21, 36, 0.6);
  margin: 0;
}
.hero-slide p {
  animation: heroIn 1.25s var(--ease-out) 0.55s both;
  margin-top: clamp(12px, 2.6svh, 26px); font-size: clamp(14px, 1.7svh, 17px); line-height: 1.95;
  color: #EDF2F8; max-width: 620px; text-shadow: 0 1px 8px rgba(9, 21, 36, 0.8);
}
.hero-slide.align-right p { margin-left: auto; }
.hero-slide .actions {
  animation: heroIn 1.25s var(--ease-out) 1s both;
  display: flex; gap: 14px; margin-top: clamp(16px, 3.4svh, 36px); flex-wrap: wrap;
}
.hero-slide.align-right .actions { justify-content: flex-end; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide h1, .hero-slide .h, .hero-slide p, .hero-slide .actions { animation: none; }
}

/* ---------- 2. お知らせ ---------- */
.news-head { text-align: center; margin-bottom: 44px; }
.news-head h2 { font-size: 32px; font-weight: 900; letter-spacing: -0.01em; }
.news-head .en { font-family: var(--font-num); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--text-muted); margin-top: 12px; }
.news-list { margin: 0 auto; max-width: 900px; border-top: 1px solid var(--pa-line); }
.news-list a {
  display: flex; gap: 28px; align-items: center; padding: 26px 8px;
  border-bottom: 1px solid var(--pa-line); transition: opacity var(--dur-fast);
}
.news-list a:hover { opacity: 0.6; }
.news-list .date { font-family: var(--font-num); font-size: 13.5px; color: var(--text-muted); letter-spacing: 0.02em; white-space: nowrap; min-width: 96px; }
.news-list .cat { font-size: 11.5px; font-weight: 600; color: var(--pa-olive); border: 1px solid var(--pa-olive); padding: 4px 10px; white-space: nowrap; flex: none; }
.news-list .title { font-size: 14.5px; color: var(--text-body); font-weight: 500; }
.news-list .arrow { margin-left: auto; color: var(--text-strong); flex: none; font-size: 18px; }
.news-more { text-align: center; margin-top: 28px; }
.news-more a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--pa-navy); color: var(--pa-navy); font-weight: 600; font-size: 13px; padding: 12px 26px; transition: background 0.2s, color 0.2s; }
.news-more a:hover { background: var(--pa-navy); color: #fff; }

/* ---------- 3. ABOUT US ---------- */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-areas: "head hex" "body hex"; column-gap: 40px; align-items: center; }
.about-head { grid-area: head; }
.about-head h2 { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.42; margin-top: 18px; }
.about-head .ul { border-bottom: 3px solid var(--pa-navy); padding-bottom: 2px; }
.about-body { grid-area: body; }
.about-body p { margin-top: 22px; font-size: 15.5px; line-height: 2; max-width: 600px; }
.about-body strong { color: var(--text-strong); font-weight: 700; }
.about-body .actions { margin-top: 28px; display: flex; gap: 10px; }
.about-body .actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 13px; padding: 10px 16px; transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard); }
.about-hex { grid-area: hex; position: relative; width: 100%; max-width: 620px; margin: 0 auto; padding-bottom: 89%; }
.hexi { position: absolute; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.1s var(--ease-out), margin-top 1.1s var(--ease-out); margin-top: -30px; }
.about-hex.is-in .hexi { opacity: 1; margin-top: 0; }
.about-hex.is-in .hexi:nth-child(2) { transition-delay: 0.7s; }
.about-hex.is-in .hexi:nth-child(3) { transition-delay: 1.4s; }
.hexi img { width: 100%; display: block; }
.hexi .t {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.35vw, 19px);
  white-space: nowrap; letter-spacing: 0.02em; pointer-events: none;
}

/* ---------- 4. 3カテゴリ ---------- */
.cat-rows { display: flex; flex-direction: column; }
.cat-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; padding: 36px 0; border-top: 1px solid var(--pa-line); }
.cat-row:first-child { border-top: none; }
.cat-row.flip { grid-template-columns: 1fr 1.05fr; }
.cat-row .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pa-navy); }
.cat-row.flip .ph { order: 2; }
.cat-row .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-row .txt { order: 1; position: relative; }
.cat-row .no {
  position: absolute; left: -6px; top: -34px; font-family: var(--font-num); font-weight: 700;
  font-size: 108px; line-height: 1; letter-spacing: -0.03em; color: var(--pa-navy); opacity: 0.16;
  pointer-events: none; user-select: none;
}
.cat-row h3 { position: relative; font-size: 24px; color: var(--pa-navy); line-height: 1.45; }
.cat-row p { position: relative; margin-top: 14px; font-size: 14px; line-height: 2; max-width: 520px; }

/* ---------- 5. 松竹梅 ---------- */
.tier-lede { margin-bottom: 44px; font-size: 14.5px; line-height: 1.95; }
.tier-lede strong { color: var(--text-strong); font-weight: 700; }
.tier-center { text-align: center; margin-bottom: 40px; }
.tier-center h3 { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; }
.tier-center .bar { width: 40px; height: 3px; background: var(--pa-navy); margin: 16px auto 0; }
.tier-center p { margin-top: 18px; font-size: 13.5px; color: var(--text-muted); }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.tier-card {
  display: block; background: #fff; border: 1px solid var(--pa-line); overflow: hidden; position: relative;
  box-shadow: 0 4px 16px rgba(20, 37, 50, 0.06);
  transition: border-color 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard), transform 0.22s var(--ease-out);
}
.tier-card.featured { border: 2px solid var(--pa-navy); box-shadow: 0 14px 34px rgba(20, 37, 50, 0.14); }
.tier-card:hover { border-color: var(--pa-navy); box-shadow: 0 18px 40px rgba(20, 37, 50, 0.18); transform: translateY(-6px); }
.tier-card .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tier-card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tier-card .ph .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,28,46,0.05) 40%, rgba(13,28,46,0.78) 100%); }
.tier-card .band { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.tier-card .kanji-row { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.tier-card .kanji { font-family: var(--font-display); font-weight: 900; font-size: 38px; color: #fff; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.tier-card .en { font-family: var(--font-num); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--pa-signal); }
.tier-card .grade { font-size: 12.5px; font-weight: 700; margin-top: 2px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.tier-card .pop { position: absolute; top: 14px; right: 14px; font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--pa-navy); background: #fff; padding: 4px 10px; }
.tier-card .body { padding: 28px 26px 30px; }
.tier-card h4 { font-size: 20px; text-align: center; }
.tier-card .price-l { text-align: center; margin-top: 18px; }
.tier-card .price-l .lab { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.tier-card .price-l .val { font-family: var(--font-num); font-size: 21px; font-weight: 700; color: var(--text-strong); margin-top: 6px; letter-spacing: -0.01em; }
.tier-card .area { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 12px; padding: 6px 14px; background: var(--pa-mist); }
.tier-card .area .lab { font-size: 11.5px; color: var(--text-muted); }
.tier-card .area .val { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--pa-navy); }
.tier-card ul { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--pa-line); display: flex; flex-direction: column; gap: 13px; }
.tier-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.65; }
.tier-card li .ck { margin-top: 1px; flex: none; font-weight: 900; }

/* ---------- 6. 導入までの流れ ---------- */
.process-row { display: flex; align-items: flex-start; }
.process-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.process-step .ph { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--pa-line); overflow: hidden; }
.process-step .ph img { width: 100%; height: 100%; object-fit: contain; }
.process-step .cap { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.process-step .n { font-family: var(--font-num); font-weight: 700; color: #fff; background: var(--pa-signal); font-size: 13px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.process-step .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.process-arrow { display: flex; align-items: center; padding: 0 8px; color: var(--border-strong); align-self: center; margin-top: -28px; font-size: 20px; }

/* ---------- 7. サイズシミュレーター ---------- */
.sim-panel { background: #fff; border: 1px solid var(--pa-line); padding: 36px; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.sim-count-lab { font-size: 13.5px; color: var(--text-muted); font-weight: 500; }
.sim-count { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.sim-count .v { font-family: var(--font-num); font-weight: 700; font-size: 44px; color: var(--pa-navy); letter-spacing: -0.01em; }
.sim-count .u { font-size: 16px; color: var(--text-muted); }
.sim-range { width: 100%; margin-top: 14px; accent-color: var(--pa-signal); cursor: pointer; height: 28px; }
.sim-ticks { display: flex; justify-content: space-between; font-family: var(--font-num); font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.sim-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.sim-stat { border: 1px solid var(--pa-line); padding: 14px 16px; }
.sim-stat .lab { font-size: 11.5px; color: var(--text-muted); }
.sim-stat .row { display: flex; align-items: baseline; gap: 4px; margin-top: 5px; }
.sim-stat .v { font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--pa-signal); }
.sim-stat .u { font-size: 12px; color: var(--text-muted); }
.sim-plan-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.sim-plan-dot { width: 9px; height: 9px; flex: none; }
.sim-plan-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.sim-price { border: 1px solid var(--pa-line); padding: 14px 16px; margin-top: 14px; background: var(--pa-mist); }
.sim-price .row { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.sim-price .v { font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--pa-navy); letter-spacing: -0.01em; }
.sim-price .note { font-size: 11.5px; color: var(--text-muted); }
.sim-visual { background: var(--pa-mist); border: 1px solid var(--pa-line); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sim-stage { position: relative; width: 100%; aspect-ratio: 3 / 2; line-height: 0; border: 1px solid var(--pa-line); background: var(--pa-mist); overflow: hidden; }
.sim-stage img.base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-stage img.layer { position: absolute; display: block; opacity: 0; transform: translateY(6px); transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out); pointer-events: none; }
.sim-stage img.layer.on { opacity: 1; transform: none; }
.sim-badge { position: absolute; left: 12px; top: 12px; font-family: var(--font-num); font-size: 11px; font-weight: 700; color: #fff; background: rgba(23, 50, 77, 0.78); padding: 5px 11px; z-index: 5; }
.sim-extra { position: absolute; right: 12px; bottom: 12px; font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--pa-navy); background: rgba(255, 255, 255, 0.92); padding: 6px 12px; z-index: 5; display: none; }
.sim-extra.on { display: block; }
.sim-width { margin-top: 14px; font-family: var(--font-num); font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* ---------- 8. 既存空間のシェルター化 ---------- */
.exist-band { position: relative; overflow: hidden; background: var(--gradient-navy); }
.exist-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: center; position: relative; z-index: 2; }
.exist-copy h2 { font-size: 38px; font-weight: 900; color: #fff; margin-top: 18px; line-height: 1.34; letter-spacing: -0.02em; text-wrap: balance; }
.exist-copy p { margin-top: 22px; font-size: 15.5px; line-height: 2; color: #D5DEE8; max-width: 460px; }
.exist-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.exist-tags span { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); padding: 11px 14px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; }
.exist-cta { margin-top: 30px; display: flex; }
.exist-cta .btn { width: 100%; }

/* Before/Afterスライダー */
.ba {
  position: relative; width: 100%; aspect-ratio: 1490 / 1024; border: 1px solid rgba(255,255,255,0.22);
  overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #0e2236; touch-action: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ba .before-wrap { position: absolute; inset: 0; z-index: 2; will-change: clip-path; clip-path: inset(0 50% 0 0); }
.ba .tag { position: absolute; top: 16px; font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #fff; padding: 6px 12px; z-index: 4; }
.ba .tag.before { left: 16px; background: rgba(20, 37, 50, 0.9); }
.ba .tag.after { right: 16px; background: var(--pa-signal); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); will-change: left; }
.ba .knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--pa-navy); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 18px; font-weight: 700;
}
.ba .hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: #fff; background: rgba(8, 18, 31, 0.7); padding: 6px 14px; z-index: 4; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap; }
@keyframes baWipe { 0%, 100% { clip-path: inset(0 calc(50% - 30px) 0 0); } 50% { clip-path: inset(0 calc(50% + 30px) 0 0); } }
@keyframes baHandle { 0%, 100% { left: calc(50% + 30px); } 50% { left: calc(50% - 30px); } }
.ba.auto .before-wrap { animation: baWipe 6.5s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.ba.auto .handle { animation: baHandle 6.5s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .ba.auto .before-wrap, .ba.auto .handle { animation: none; } }

/* ---------- 9. 防災用品一覧 ---------- */
.supply-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.supply-item { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.22s var(--ease-out); }
.supply-item:hover { transform: translateY(-4px); }
.supply-item .frame { position: relative; width: 70%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--pa-line); transition: border-color 0.22s var(--ease-standard), box-shadow 0.22s var(--ease-standard); }
.supply-item:hover .frame { border-color: var(--pa-navy); box-shadow: 0 14px 30px rgba(20, 37, 50, 0.16); }
.supply-item .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.supply-item .frame img.contain { object-fit: contain; }
.supply-item h3 { width: 100%; font-size: 13.5px; margin-top: 12px; line-height: 1.5; color: var(--pa-navy); transition: color 0.22s var(--ease-standard); font-weight: 700; }
.supply-item:hover h3 { color: var(--pa-signal); }
.supply-more { margin-top: 28px; text-align: center; }
.supply-more a { display: inline-flex; align-items: center; gap: 8px; background: var(--pa-navy); color: #fff; font-weight: 600; font-size: 14.5px; padding: 14px 28px; transition: background 0.2s; }
.supply-more a:hover { background: var(--pa-navy-2); }

/* ---------- 10. ATバリア技術 ---------- */
.tech-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 28px; align-items: stretch; }
.tech-visual { min-height: 0; display: flex; align-items: center; justify-content: center; }
.tech-visual img { max-height: 560px; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(20, 37, 50, 0.28)); }
.spec-band { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--pa-line); background: #fff; }
.spec-cell { padding: 26px 24px; }
.spec-cell:nth-child(2n) { border-left: 1px solid var(--pa-line); }
.spec-cell:nth-child(n+3) { border-top: 1px solid var(--pa-line); }
.spec-cell .row { display: flex; align-items: baseline; gap: 5px; }
.spec-cell .v { font-family: var(--font-num); font-weight: 700; font-size: 36px; letter-spacing: -0.01em; color: var(--pa-navy); }
.spec-cell .v.accent { color: var(--pa-signal); }
.spec-cell .v.txt { font-size: 30px; letter-spacing: 0.01em; font-family: var(--font-display); }
.spec-cell .u { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.spec-cell .lab { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.6; }
.tech-more { display: flex; justify-content: flex-start; margin-top: 14px; }
.tech-more a { display: inline-flex; align-items: center; gap: 8px; background: var(--pa-navy); border: 1px solid var(--pa-navy); color: #fff; font-weight: 600; font-size: 13.5px; padding: 12px 22px; transition: background 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard); }
.tech-more a:hover { background: var(--pa-signal); border-color: var(--pa-signal); }

/* ---------- コア技術ドック ---------- */
.coretech-dock {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%) translateX(112%);
  z-index: 55; width: 152px; background: var(--pa-navy); color: #fff;
  padding: 16px 14px; display: flex; flex-direction: column; align-items: center;
  box-shadow: -10px 0 34px rgba(11, 24, 40, 0.4); overflow: hidden; border-left: 3px solid var(--pa-signal);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out); opacity: 0;
}
.coretech-dock.show { transform: translateY(-50%) translateX(0); opacity: 1; }
.coretech-dock:hover { transform: translateY(-50%) translateX(-4px); }
.coretech-dock .lab { position: relative; font-family: var(--font-num); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: var(--pa-signal); text-align: center; }
.coretech-dock .rule { position: relative; width: 28px; height: 1.5px; background: var(--pa-signal); margin-top: 10px; }
.coretech-dock .stage { position: relative; width: 100%; aspect-ratio: 1 / 1; background: radial-gradient(78% 78% at 50% 42%, #5e7d9e 0%, #3f5e7e 46%, #2a4865 100%); margin-top: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); }
.coretech-dock .stage img { max-width: 66%; max-height: 74%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); }
.coretech-dock .title { position: relative; margin-top: 14px; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: -0.01em; color: #fff; line-height: 1.4; }
.coretech-dock .go { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--pa-signal); }

/* ---------- レスポンシブ（トップ） ---------- */
@media (max-width: 1023px) {
  .about-grid { grid-template-columns: 1fr; grid-template-areas: "head" "hex" "body"; row-gap: 24px; }
  .sim-grid, .exist-grid, .tech-grid { grid-template-columns: 1fr; }
  .supply-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-band { grid-template-columns: repeat(2, 1fr); }
  .coretech-dock { display: none; }

  /* 導入までの流れ: 1-2 / 3-4 の2列に */
  .process-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .process-arrow { display: none; }
  .process-step .ph { max-width: 220px; }

  /* シミュレーター: 人数スライダー→画像→面積・プラン→価格 の順に */
  .sim-grid { gap: 0; }
  .sim-grid > div:first-child { display: contents; }
  .sim-count-lab { order: 1; }
  .sim-count { order: 2; }
  .sim-range { order: 3; }
  .sim-ticks { order: 4; }
  .sim-visual { order: 5; margin-top: 24px; }
  .sim-stats { order: 6; margin-top: 24px; }
  .sim-price { order: 7; }

  /* 既存空間: 見出し→本文→Before/After画像→場所タグ→CTA の順に */
  .exist-grid { gap: 0; }
  .exist-copy { display: contents; }
  .exist-copy h2 { order: 1; }
  .exist-copy p { order: 2; }
  .exist-grid > div:last-child { order: 3; margin-top: 26px; }
  .exist-tags { order: 4; margin-top: 26px; }
  .exist-cta { order: 5; }
}
@media (max-width: 767px) {
  .cat-row, .cat-row.flip { grid-template-columns: 1fr; gap: 20px; }
  .cat-row.flip .ph { order: 0; }
  .tier-grid { grid-template-columns: 1fr; }
  .supply-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* スペック帯: SPは2列×2行 */
  .spec-band { grid-template-columns: repeat(2, 1fr); }
  .spec-cell { padding: 18px 14px; }
  .spec-cell .v { font-size: 26px; }
  .spec-cell .v.txt { font-size: 21px; }
  .spec-cell .u { font-size: 11.5px; }
  .spec-cell .lab { font-size: 11px; }
  .exist-copy h2 { font-size: 28px; }
  .sim-panel { padding: 20px; }
  /* ヒーロー: SPではPC用の改行を無効化し、フレーズ単位で折り返し＋左揃えに */
  .hero-slide .h br, .hero-slide h1 br, .hero-slide p br { display: none; }
  .hero-slide .nw { display: inline-block; white-space: nowrap; }
  .hero-slide h1, .hero-slide .h { font-size: clamp(24px, 7.4vw, 28px); line-height: 1.45; }
  /* 本文は幅を狭めて5〜6行に折り返し、背景画像が見えるようにする */
  .hero-slide p { font-size: 14px; line-height: 1.9; max-width: 13.5em; }
  .hero-slide.align-right { margin-left: 0; text-align: left; }
  .hero-slide.align-right p { margin-left: 0; }
  .hero-slide.align-right .actions { justify-content: flex-start; }
  /* ヒーロー3枚目: ATバリア本体が見切れないよう右寄りでトリミング */
  .hero-bg[data-slide-bg="2"] img { object-position: 76% center; }
  /* ABOUTの六角形アイコンをSPでは大きく（文字との被り解消） */
  .about-hex { padding-bottom: 98%; }
  .about-hex .hexi:nth-child(1) { width: 63% !important; left: 50% !important; top: 30% !important; }
  .about-hex .hexi:nth-child(2) { width: 59% !important; left: 30% !important; top: 70% !important; }
  .about-hex .hexi:nth-child(3) { width: 59% !important; left: 70% !important; top: 70% !important; }
  .news-list a { gap: 12px; flex-wrap: wrap; padding: 18px 4px; }
  .news-list .title { width: 100%; }
  .news-list .arrow { display: none; }
}

/* ---------- SP用: ヒーローのスワイプ誘導 ---------- */
.hero-swipe { display: none; }
@media (max-width: 767px) {
  .hero-arrow { display: none; }
  .hero-swipe {
    display: flex; justify-content: space-between; align-items: flex-end;
    position: absolute; left: 20px; right: 20px; bottom: 56px; z-index: 7;
    pointer-events: none;
  }
  .hero-swipe .hs {
    pointer-events: auto; background: none; border: none; padding: 6px 0; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  }
  .hero-swipe .hs.next { align-items: flex-end; }
  .hero-swipe .lbl {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: #EDF2F8;
    text-shadow: 0 1px 6px rgba(9, 21, 36, 0.85);
  }
  .hero-swipe .chevs {
    display: flex; gap: 4px; font-family: var(--font-num);
    font-size: 36px; line-height: 1; font-weight: 700; color: #fff;
  }
  .hero-swipe .chevs i {
    font-style: normal; opacity: 0.25; text-shadow: 0 1px 6px rgba(9, 21, 36, 0.85);
    animation: hsBlink 1.6s infinite !important;
  }
  /* 進行方向の先端が金色。順に光って方向を示す（!importantは省モーション設定でも動かすため） */
  .hero-swipe .next .chevs i:nth-child(1) { animation-delay: 0s !important; }
  .hero-swipe .next .chevs i:nth-child(2) { animation-delay: 0.2s !important; }
  .hero-swipe .next .chevs i:nth-child(3) { animation-delay: 0.4s !important; color: var(--pa-signal); }
  .hero-swipe .prev .chevs i:nth-child(3) { animation-delay: 0s !important; }
  .hero-swipe .prev .chevs i:nth-child(2) { animation-delay: 0.2s !important; }
  .hero-swipe .prev .chevs i:nth-child(1) { animation-delay: 0.4s !important; color: var(--pa-signal); }
}
@keyframes hsBlink { 0%, 55%, 100% { opacity: 0.25; } 18% { opacity: 1; } }

/* ---------- ヒーロー矢印（SP）: 赤グラデーション ---------- */
@media (max-width: 767px) {
  .hero-swipe .chevs i {
    color: transparent !important;
    background-clip: text; -webkit-background-clip: text;
    text-shadow: none; filter: drop-shadow(0 1px 4px rgba(9, 21, 36, 0.8));
  }
  /* 1つの矢印の中で上下に明→濃のグラデーション、3つ並びで進行方向ほど濃い赤 */
  .hero-swipe .next .chevs i:nth-child(1),
  .hero-swipe .prev .chevs i:nth-child(3) { background-image: linear-gradient(180deg, #FFB3B3, #FF5A5A); }
  .hero-swipe .next .chevs i:nth-child(2),
  .hero-swipe .prev .chevs i:nth-child(2) { background-image: linear-gradient(180deg, #FF7A7A, #E8202A); }
  .hero-swipe .next .chevs i:nth-child(3),
  .hero-swipe .prev .chevs i:nth-child(1) { background-image: linear-gradient(180deg, #FF3B3B, #B0000F); }
}
/* SP: 見出しと矢印の間隔を詰める（見た目の間隔 約14px→5px） */
@media (max-width: 767px) {
  .hero-swipe .hs { gap: 0; }
  .hero-swipe .chevs { margin-top: -6px; }
}

/* ---------- ヒーロー矢印（PC）: 赤グラデーション（SPと同仕様） ---------- */
.hero-arrow .chevs i {
  color: transparent !important;
  background-clip: text; -webkit-background-clip: text;
  filter: drop-shadow(0 1px 4px rgba(9, 21, 36, 0.8));
}
.hero-arrow.next .chevs i:nth-child(1),
.hero-arrow.prev .chevs i:nth-child(3) { background-image: linear-gradient(180deg, #FFB3B3, #FF5A5A); }
.hero-arrow.next .chevs i:nth-child(2),
.hero-arrow.prev .chevs i:nth-child(2) { background-image: linear-gradient(180deg, #FF7A7A, #E8202A); }
.hero-arrow.next .chevs i:nth-child(3),
.hero-arrow.prev .chevs i:nth-child(1) { background-image: linear-gradient(180deg, #FF3B3B, #B0000F); }

/* PC: 左右の矢印＋見出しとスライド本文が重ならないよう、本文の左右に逃げ幅を取る */
@media (min-width: 1081px) and (max-width: 1520px) {
  .hero .hero-inner.pa-container { padding-left: 190px; padding-right: 190px; }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .hero .hero-inner.pa-container { padding-left: 80px; padding-right: 80px; }
  .hero-arrow .lbl { display: none; }
}

/* ヒーロー: スライド位置インジケーター（中央下部の3ドット） */
.hero-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(38px, 7vw, 108px) * 0.62 + 18px); z-index: 8;
  display: flex; gap: 14px; align-items: center;
}
.hero-dots .dot {
  width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.42); border: none; padding: 0; cursor: pointer;
  box-shadow: 0 1px 4px rgba(9, 21, 36, 0.45);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.hero-dots .dot:hover { background: rgba(255, 255, 255, 0.8); }
.hero-dots .dot.is-active {
  background: var(--pa-signal);
  transform: scale(1.5); cursor: default;
  box-shadow: 0 1px 4px rgba(9, 21, 36, 0.45);
}
@media (max-width: 767px) {
  .hero-dots { bottom: 44px; gap: 12px; }
  .hero-dots .dot { width: 7px; height: 7px; }
}