/* ============ 01 hero (ファーストビュー) ============ */
/* PC design 1440: card 20/29/1400x713, section height 790 */
.hero{
  background:var(--hero-grad);
  padding:29px 20px 48px;
}
.hero-inner{
  position:relative;
  max-width:1400px;
  margin:0 auto;
}
.hero-photo{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:24px;
}
.hero-catch{
  position:absolute;
  left:86px;
  top:99px;
  width:574px;
  z-index:3;
}
.hero-logo{
  position:absolute;
  top:37px;
  right:10px;
  width:305px;
  z-index:3;
}
.hero-appicon{
  position:absolute;
  left:67px;
  top:528px;
  width:156px;
  height:156px;
  z-index:3;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.hero-badges{
  position:absolute;
  left:254px;
  top:538px;
  width:418px;
  z-index:3;
}
.hero-wave{
  position:absolute;
  left:248px;
  top:599px;
  width:480px;
  z-index:2;
}
/* 装飾スクエア */
.hero-dq{position:absolute;z-index:2}
/* 左上クラスタ (カード基準) */
.hero-dq-p1{left:-6px;top:31px;width:46px}
.hero-dq-p2{left:135px;top:51px;width:36px}
.hero-dq-p3{left:215px;top:77px;width:20px}
.hero-dq-p4{left:54px;top:96px;width:32px}
.hero-dq-b1{left:60px;top:7px;width:42px}
.hero-dq-b2{left:111px;top:70px;width:44px}
.hero-dq-b3{left:178px;top:103px;width:24px}
.hero-dq-b4{left:26px;top:146px;width:22px}
/* 右下クラスタ (カード右下基準) */
.hero-dq-p5{right:42px;bottom:98px;width:47px}
.hero-dq-p6{right:176px;bottom:81px;width:35px}
.hero-dq-p7{right:256px;bottom:71px;width:18px}
.hero-dq-p8{right:96px;bottom:44px;width:32px}
.hero-dq-b5{right:100px;bottom:126px;width:37px}
.hero-dq-b6{right:144px;bottom:59px;width:42px}
.hero-dq-b7{right:209px;bottom:37px;width:28px}

/* ============ SP design 375 ============ */
@media (max-width:767px){
  .hero{
    padding:20px 15px 39px;
  }
  /* SP header wordmark: the supplied colour vector (black strokes + pink/blue
     accent squares). Previously a mask-tinted PNG, which could not reproduce
     the accent squares at all. */
  .hero-logo-sp{
    display:block;
    width:145px;
    height:auto;
    margin:0 4px 0 auto;
  }
  .hero-inner{
    max-width:none;
    margin:93px 0 0;
  }
  .hero-photo{
    border-radius:20px;
  }
  .hero-catch{
    left:8px;
    top:-58px;
    width:287px;
  }
  .hero-appicon{
    left:5px;
    top:auto;
    bottom:-41px;
    width:100px;
    height:100px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
  }
  .hero-badges-sp{
    display:block;
    width:335px;
    max-width:100%;
    margin:48px auto 0;
  }
  /* 左上クラスタ */
  .hero-dq-p1{left:-10px;top:-111px;width:32px}
  .hero-dq-p2{left:85px;top:-97px;width:25px}
  .hero-dq-p3{left:140px;top:-80px;width:13px}
  .hero-dq-p4{left:32px;top:-67px;width:22px}
  .hero-dq-b1{left:41px;top:-127px;width:21px}
  .hero-dq-b2{left:73px;top:-82px;width:22px}
  .hero-dq-b3{left:121px;top:-59px;width:14px}
  .hero-dq-b4{left:14px;top:-35px;width:14px}
  /* 右下クラスタ */
  .hero-dq-p5{right:-8px;bottom:38px;width:35px}
  .hero-dq-p6{right:92px;bottom:25px;width:27px}
  .hero-dq-p7{right:150px;bottom:18px;width:14px}
  .hero-dq-p8{right:33px;bottom:-2px;width:24px}
  .hero-dq-b5{right:39px;bottom:61px;width:22px}
  .hero-dq-b6{right:75px;bottom:14px;width:26px}
  .hero-dq-b7{right:115px;bottom:-6px;width:18px}
}