/* ============================================================
   yourpcai.com home
   2026-10-03
   個人ユーザーのセキュリティを主役にしたトップページ追加CSS

   共通色・button・section・FAQ等は style.css を利用。
   外部フォント・外部CDN・外部画像は使わない。
   ============================================================ */


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.home-hero {
  min-height: 900px;
  padding-bottom: 120px;
}

.home-hero .hero-inner {
  max-width: 720px;
}

.home-security-panel {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 8%;
  width: min(430px, 38vw);
  padding: 20px;
  border: 1px solid #303038;
  border-radius: 20px;
  background: rgba(18, 18, 21, 0.94);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.home-security-label {
  margin: 0 0 13px;
  color: #777780;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.home-security-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #2d2d33;
  border-radius: 13px;
  background: #2d2d33;
}

.home-security-list div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  background: #151519;
}

.home-security-list strong {
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.home-security-list span {
  color: #c8c8ce;
  font-size: 12px;
}


/* ------------------------------------------------------------
   FREE SCAN
   ------------------------------------------------------------ */

.home-scan {
  background: #fff;
}

.home-scan-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8vw;
  align-items: center;
}

.home-scan-copy {
  max-width: 700px;
}

.home-scan-copy h2,
.home-price h2 {
  margin: 12px 0 30px;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.home-scan-copy h2 em,
.home-price h2 em {
  color: #777;
  font-style: normal;
}

.home-scan-copy > p:not(.kicker):not(.note) {
  max-width: 680px;
  color: #666;
  font-size: 17px;
}

.home-inline-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.home-scan-result {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.07);
}

.home-result-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: #8a8a92;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.home-result-head b {
  color: var(--ink);
}

.home-result-score {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin: 26px 0 18px;
}

.home-result-score strong {
  color: var(--ink);
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.home-result-score span {
  color: var(--muted);
  font-size: 15px;
}

.home-scan-result > p {
  color: #555;
  font-size: 14px;
}

.home-scan-result ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.home-scan-result li {
  position: relative;
  padding: 9px 11px 9px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.home-scan-result li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.home-scan-result small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}


/* ------------------------------------------------------------
   NEXORIA FEATURES
   ------------------------------------------------------------ */

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.home-feature-card {
  position: relative;
  min-height: 430px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid #29292e;
  border-radius: var(--radius);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.home-feature-card:hover {
  border-color: #555;
  transform: translateY(-4px);
}

.home-feature-type {
  margin: 22px 0 0;
  color: #696970;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.home-feature-card h3 {
  margin: 9px 0 14px;
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.04em;
}

.home-feature-card > p:not(.home-feature-type):not(.home-feature-note) {
  max-width: 520px;
  color: #999;
  font-size: 14px;
}

.home-feature-card ul {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.home-feature-card li {
  position: relative;
  padding-left: 18px;
  color: #d4d4da;
  font-size: 13px;
}

.home-feature-card li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 7px;
  height: 2px;
  background: var(--accent);
}

.home-feature-note {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #29292e;
  color: #777780;
  font-size: 11px;
}

.home-mcp-note {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 18px;
  padding: 24px 28px;
  border: 1px solid #29292e;
  border-radius: 18px;
  background: #121216;
}

.home-mcp-note strong {
  color: var(--accent);
  font-size: 14px;
}

.home-mcp-note p {
  margin: 0;
  color: #999;
  font-size: 13px;
}


/* ------------------------------------------------------------
   START
   ------------------------------------------------------------ */

.home-start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.home-start-card {
  position: relative;
  min-height: 300px;
  padding: 30px;
  border: 1px solid #d9d9dc;
  border-radius: 20px;
  background: #fff;
}

.home-start-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.home-start-card small {
  color: #999;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.home-start-card h3 {
  margin: 5px 0 12px;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.home-start-card p {
  margin: 0;
  color: #777;
  font-size: 13px;
}

.home-start-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 35px;
}

.home-btn-dark {
  background: var(--ink);
  color: #fff;
}


/* ------------------------------------------------------------
   PRICE
   ------------------------------------------------------------ */

.home-price {
  background: #fff;
}

.home-price-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
  align-items: center;
}

.home-price-grid > div:first-child > p:not(.kicker) {
  max-width: 600px;
  color: #666;
  font-size: 16px;
}

.home-price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.home-price-card {
  position: relative;
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.home-price-card.home-price-main {
  border: 2px solid var(--accent);
}

.home-price-card .badge {
  position: absolute;
  top: -14px;
  left: 24px;
}

.home-price-card h3 {
  margin: 8px 0 12px;
  font-size: 22px;
}

.home-price-number {
  margin: 0 0 13px;
  color: var(--ink);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.home-price-number small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.home-price-card > p:not(.home-price-number) {
  color: var(--muted);
  font-size: 13px;
}

.home-price-card > strong {
  display: block;
  margin-top: 28px;
  font-size: 13px;
}


/* ------------------------------------------------------------
   CONTACT + DOWNLOAD
   ------------------------------------------------------------ */

#contact + #download {
  border-top: 0;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .home-security-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 650px;
    margin-top: 36px;
  }

  .home-scan-grid,
  .home-price-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-start-grid {
    grid-template-columns: 1fr;
  }

  .home-price-cards {
    max-width: 720px;
  }
}

@media (max-width: 700px) {
  .home-hero {
    min-height: auto;
  }

  .home-hero .hero-inner {
    max-width: none;
  }

  .home-security-list div {
    grid-template-columns: 58px 1fr;
  }

  .home-scan-result {
    padding: 21px;
  }

  .home-scan-result ul {
    grid-template-columns: 1fr;
  }

  .home-feature-card {
    min-height: 0;
    padding: 26px;
  }

  .home-feature-card h3 {
    font-size: 26px;
  }

  .home-mcp-note {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 22px;
  }

  .home-price-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .home-hero h1 {
    font-size: 49px;
  }

  .home-result-score strong {
    font-size: 60px;
  }

  .home-start-card {
    min-height: 0;
    padding: 24px;
  }

  .home-start-card > span {
    margin-bottom: 28px;
  }
}

/* ---- もとのロゴの上に「回る輪」と「守り神」を重ねる（2026-10-07）。ロゴの大きさ・位置は style.css の .hero-logo と同じ ---- */
.hero-logo-wrap{position:absolute;right:3%;top:9%;width:min(440px,34vw);z-index:1;pointer-events:none}
.hero-logo-wrap .hero-logo{position:static;right:auto;top:auto;width:100%;height:auto;display:block}
/* ロゴの N の範囲（守り神の家の目印・見えない）。ロゴの画像の中で N は 左 28%・上 20%・幅 50%・高さ 46% */
.hero-logo-wrap .hero-n-anchor{position:absolute;left:28%;top:20%;width:50%;height:46%;opacity:0}
/* ロゴに描かれた輪に沿って光の筋が一周する（輪そのものは画像のまま）。中心 50%/46%・幅 92%・高さ 34%・約 -13 度 */
.hero-logo-wrap .hero-ring{position:absolute;left:4%;top:29%;width:92%;height:34%;overflow:visible;transform:rotate(-13deg);filter:drop-shadow(0 0 3px rgba(226,255,120,.95)) drop-shadow(0 0 10px rgba(166,255,0,.55));animation:hero-ring-precess 8s ease-in-out infinite alternate}
.hero-logo-wrap .hero-ring--back{opacity:.45}
.hero-logo-wrap .hero-ring-streak{fill:none;stroke:#f6ffd8;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:22 78;animation:hero-ring-run 4.2s linear infinite}
@keyframes hero-ring-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes hero-ring-precess{from{transform:rotate(-13deg) scaleY(1)}to{transform:rotate(-11deg) scaleY(.92)}}
@media(max-width:900px){.hero-logo-wrap{position:relative;right:auto;top:auto;width:min(360px,80%);display:block;margin:30px auto 0}}
@media(prefers-reduced-motion:reduce){.hero-logo-wrap .hero-ring,.hero-logo-wrap .hero-ring-streak{animation:none}}