/* SIMIUS UV FACE POWDER — PC hero (webdesign comp)
   Figma: pc-hero (nodeId=129:130) in powder-_-lp
   PC 幅専用。SP (< 1024px) では非表示にして SP カードだけが見える構成。 */

.pc-hero {
  display: none;                    /* SP default: 非表示 */
}

@media (min-width: 1024px) {
  /* PC body : SP カードを中央に、PC hero は背景として全画面 */
  body {
    padding: 0;
    min-height: 100vh;
    background: #ebebf0;
    place-items: unset;
    display: block;
  }

  .pc-hero {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    background: #e8e5f0;
  }

  /* Background photo : viewport 全体をカバー */
  .pc-hero__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
  }

  /* Compact + grad : PNG 全体を bg として表示 (viewport 全体をカバー) */
  .pc-compact {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
  }

  /* Navigation : viewport 中心から -524px (Figma: left 436, frame center 960) */
  .pc-nav {
    position: absolute;
    left: calc(50% - 524px);
    top: 214px;
    display: flex;
    flex-direction: column;
    gap: 29px;
  }
  .pc-nav__item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;                       /* Figma 12 → 視覚的に広く見えるので 8 に詰める */
    text-decoration: none;
    white-space: nowrap;
  }
  .pc-nav__item::before {
    content: ">";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 20px;
    color: #524d75;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }
  .pc-nav__item:hover::before,
  .pc-nav__item.is-active::before {
    opacity: 1;
  }
  .pc-nav__item__en {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: #a9a4c2;                    /* FB 1019: ホバーなしは薄め、hover 時に #403b66 で濃くなる */
    transition: color 0.18s ease;
    letter-spacing: 0.04em;        /* 1.28 / 32 */
    margin: 0;
  }
  .pc-nav__item__ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: #a9a4c2;                    /* FB 1019: ホバーなしは薄め */
    opacity: 1;
    transition: color 0.18s ease;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.04em;        /* 日本語ラベルを少し詰めて en との対比を整える */
  }
  .pc-nav__item:hover .pc-nav__item__en,
  .pc-nav__item.is-active .pc-nav__item__en { color: #403b66; }
  .pc-nav__item:hover .pc-nav__item__ja,
  .pc-nav__item.is-active .pc-nav__item__ja { color: #403b66; }

  /* Title : viewport 中心から +343px (Figma: left 1303, frame center 960) */
  .pc-title {
    position: absolute;
    left: calc(50% + 343px);
    top: 190px;
    width: 221px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pc-title__logo {
    width: 118.617px;
    height: 21.48px;
    display: block;
  }
  .pc-title__text {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 49px;
    color: #524d75;
    letter-spacing: 0.02em;         /* 0.96 / 48 */
    white-space: nowrap;
  }
  .pc-title__text p { margin: 0; }

  /* Social icons : viewport 中心から -506px (Figma: left 454) */
  .pc-social {
    position: absolute;
    left: calc(50% - 506px);
    top: 662px;
    display: flex;
    gap: 17px;
    align-items: center;
  }
  .pc-social a {
    display: block;
    width: 48px;
    height: 48px;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .pc-social a:hover { opacity: 0.8; }
  .pc-social a:active { transform: scale(0.95); }

  /* SP stage : PC では viewport の高さに合わせて中央上部に固定、角丸なし */
  .sp-stage {
    position: fixed;
    left: 50%;
    right: auto;                   /* SP ベースの right:0 をキャンセル */
    top: 0;
    transform: translateX(-50%);
    width: 400px;                  /* PC は 400px 中央カラム */
    height: 100vh;
    z-index: 10;
    border-radius: 0;
    box-shadow: 0 32px 80px rgba(32, 24, 64, 0.25),
                0 4px 12px rgba(32, 24, 64, 0.1);
  }

  /* PC : SIMIUS ロゴは表示、右のハンバーガー部分だけ clip で非表示 */
  .sp-header__logo {
    clip-path: inset(0 42% 0 0);
  }
  /* PC では pc-nav が常時見えているので SP 用ハンバーガーボタンを非表示 */
  .sp-header__burger {
    display: none;
  }

  /* CTA bar : PC も SP と同じ挙動 (hero 底 → is-sticky で viewport 底 fixed)。
     ベース定義 (style.css) で既に対応しているので PC 側では上書きしない。 */
}