/* ===============================
   RESET
=============================== */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:101%;
  font-family:"Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  overflow:hidden;
}

/* ===============================
   PC背景：3レイヤー構成
=============================== */
body{
  min-height:100vh;
  background:
    url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/ano_background.png")
    center / cover
    no-repeat;
}

/* 左カーテン（PC） */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:clamp(140px, 33vw, 320px);
  background:
    url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/curtain-l.svg")
    left top / auto 98%
    no-repeat;
  z-index:0;
  pointer-events:none;
}

/* 右カーテン（PC） */
body::after{
  content:"";
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:clamp(140px, 33vw, 320px);
  background:
    url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/curtain-r.svg")
    right top / auto 98%
    no-repeat;
  z-index:0;
  pointer-events:none;
}

/* iPhone縦伸縮対策 */
@supports (height: 100svh){
  body::before,
  body::after{
    height:100svh;
  }
}

/* ===============================
   SP背景：レイヤー分離（見切れ防止）
   - 最背面：bg-main.svg（body背景）
   - 左：curtain-l.svg（body::before）
   - 右：curtain-r.svg（body::after）
=============================== */
@media (max-width:600px){
  body{
    background:
      url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/bg-main.svg")
      center / cover
      no-repeat;
    /* fixed は端末によって不安定なのでSPは外す（見切れ/バグ回避） */
    min-height: 100%  !important;
        margin:0;
  }

  body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:clamp(64px, 33vw, 170px);
    background:
      url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/curtain-l.svg")
      left top / auto 98%
      no-repeat;
    z-index:0;
    pointer-events:none;
  }

  body::after{
    content:"";
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:clamp(64px, 33vw, 170px);
    background:
      url("/static/fcopen/fanplakit/artist/ano_r7UxLjgH/feature/nyanoe_fortune/img/curtain-r.svg")
      right top / auto 98%
      no-repeat;
    z-index:0;
    pointer-events:none;
  }

  /* iPhoneのアドレスバー伸縮対策（対応端末だけ） */
  @supports (height: 100svh){
    body::before,
    body::after{
      height:100svh;
    }
  }

  /* カーテンよりコンテンツを前に出す（見た目は維持・安全策） */
  .intro{
    position:relative;
    z-index:1;
  }
}

/* ===============================
   全体レイアウト
=============================== */
.intro{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(10px, 3vh, 40px) 20px;
}

.intro__inner{
  width:100%;
  max-width:800px;
  transform-origin:center top;
}

/* 画面が低い時だけ縮小 */
@media (max-height:700px){
  .intro__inner{
    transform:scale(.9);
  }
}

@media (max-height:600px){
  .intro__inner{
    transform:scale(.8);
  }
}

/* ===============================
   ロゴ
=============================== */
@keyframes floatLogo{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-18px); }
  100%{ transform: translateY(0px); }
}

.intro__logo img{
width: clamp(300px, 85vh, 730px);
  height:auto;
  animation: floatLogo 4.5s ease-in-out infinite;
  margin-top: 6vw;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
}

@media (max-width:600px){
  .intro__logo img{
    margin-top: 35vw;
    width: auto !important;
  }
}

/* ===============================
   説明文ボックス
=============================== */
.intro__desc{
  background:#fff;
  border-radius:24px;
 padding:clamp(20px, 4vh, 50px);
  margin:-10vw auto 20px;
  max-width:600px;
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  position:relative;
  z-index:2;
}

.intro__descText{
  font-size:clamp(14px, 2.5vh, 20px);
  line-height:1.8;
  letter-spacing:.1em;
  color:#222;
}

.intro__line1{
  display:block;
  padding:24px;
}

.intro__line2{
  display:block;
}

/* ===============================
   CTA位置調整
=============================== */
.intro__cta{
  margin-top:3vw;
  text-align:center;
}


/* ===============================
   ボタン
=============================== */
.intro__btn{
  border:none;
  background:none;
  cursor:pointer;
  transition:.25s ease;
  position:relative;
  overflow:hidden;
  border-radius:999px;
}

.intro__btn img{
 max-width:clamp(180px, 30vh, 300px);
  max-width:300px;
  height:auto;
}

.intro__btn:hover{
  transform:translateY(-4px) scale(1.03);
}

.intro__btn:active{
  transform:translateY(1px) scale(.97);
}


/* ===============================
   SP調整
=============================== */
@media (max-width:600px){



  .intro__desc{
    padding:30px 20px !important;
    max-width:90% !important;
  }

  .intro__descText{
    font-size: 12px !important;
  }

  .intro__btn{
    width:60%;
    max-width:none;
    margin:0 auto;
    display:block;
  }

  .intro__btn img{
    max-width:clamp(100px, 22vh, 200px);
  }

  .intro__cta{
  margin-top:10vw;
  display:flex;
    justify-content:center;
}
}

/* 600〜1000px帯だけ縦に収める（見切れ対策） */
@media (max-width:1000px) and (min-width:601px){

  .intro__logo img{
    /* vh依存が強すぎるので、横幅基準も混ぜて暴れないようにする */
    width: clamp(260px, 60vw, 560px);
    margin-top: clamp(0px, 2vh, 24px);
  }

  .intro__desc{
    margin: clamp(-40px, -6vh, -12px) auto 16px;
   width: clamp(260px, 60vw, 560px);
  }

  .intro__cta{
    margin-top: clamp(8px, 2vh, 20px);
  }
}