/* Alternate first-view composition.
   This file is loaded only by index.html. */

@media(min-width:901px){
  /* Keep the hero and the four value propositions together in the first view. */
  .hero-alt .ws-hero{
    height:calc(100svh - 190px);
    min-height:610px;
    overflow:visible;
  }
  .hero-alt .ws-hero-scroll{
    bottom:-105px;
  }
  .hero-alt .ws-hero-copy{
    top:auto;
    bottom:clamp(50px,7vh,74px);
  }
  .hero-alt .ws-hero h1{
    margin-bottom:26px;
    font-size:clamp(46px,4.6vw,72px);
  }
  .hero-alt .ws-hero-actions{
    margin-top:0;
  }
  .hero-alt .ws-hero-image img{
    position:relative;
    top:-24%;
    height:124%;
    object-position:38% center;
  }
  .hero-alt .ws-hero-shade{
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 24%,rgba(255,255,255,.42) 46%,rgba(255,255,255,0) 66%);
  }
  .hero-alt .ws-proof-strip>div{
    min-height:154px;
    padding-top:20px;
    padding-bottom:20px;
  }
}
@media(max-width:900px){
  /* photo on top, copy on a solid white base: the subject must stay visible */
  .hero-alt .ws-hero{background:#fff}
  .hero-alt .ws-hero-image{bottom:auto;height:58%}
  .hero-alt .ws-hero-image img{
    top:0;
    height:100%;
    object-position:58% center;
  }
  .hero-alt .ws-hero-shade{
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.85) 52%,#fff 58%,#fff 100%);
  }
}

/* TOPICS: fill the small cards with the photo like the other cards */
.hero-alt .ws-pickup-card:nth-child(2)>img{object-fit:cover;padding:0;background:transparent}

/* TOPICS: 各カード右上に、出典ジャンル(ニュース・セミナー/事例/IR/ミライコラボ)の固定ラベルを表示する。
   カードの内容が更新されても、このラベルは配置ルール上ずっと同じ枠に留まる。 */
.hero-alt .ws-pickup-card{position:relative}
.hero-alt .ws-pickup-genre{position:absolute;top:14px;right:14px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.94);color:#0b3a52;font:700 10px/1.3 Lato,"Noto Sans JP",sans-serif;letter-spacing:.06em;box-shadow:0 4px 12px rgba(8,40,60,.18)}
@media(max-width:680px){.hero-alt .ws-pickup-genre{top:12px;right:12px;padding:4px 9px;font-size:9px}}