@charset "utf-8";
/* TOP renewal. Coordinates follow the 900px-wide supplied design. */
#topcontents { background: #fff; }
#header { height: 60px; }
.demo-hero { position: relative; background: #e9f5f8 url('../images/topimg/topimage_bg.webp') no-repeat calc(50% - 60px) top; background-size: max(calc(100% + 120px), 2627.735px) auto; }
.demo-hero__inner { position: relative; width: 900px; height: 700px; margin: 0 auto; }
.demo-hero img { display: block; height: auto; }
.demo-hero__title { position: absolute; left: 5px; top: 45px; margin: 0; width: 430px; }
.demo-hero__title img { width: 100%; }
.demo-hero__check { position: absolute; left: 379px; top: 5px; width: 326px; }
.demo-hero__badge { position: absolute; left: 695px; top: 12px; width: 200px; }
.demo-hero__points { position: absolute; left: 5px; top: 322px; display: flex; gap: 8px; padding: 0; margin: 0; list-style: none; }
.demo-hero__points img { width: 134px; }
.demo-hero__cta { position: absolute; left: 0; top: 480px; width: 548px; border-radius: 50px; overflow: hidden; isolation: isolate; transition: filter .2s; }
.demo-hero__cta img { width: 100%; }
.demo-hero__cta:hover { filter: brightness(1.07); }
.demo-hero__cta:focus-visible { outline: 3px solid #005ca4; outline-offset: 4px; }
.demo-hero__steps { display: block; position: absolute; left: calc(50% - 450px); top: 576px; width: 900px; }
.demo-hero__steps img { width: 100%; height: auto; }
#navi.demo-nav { display: flex; padding: 16px 0 22px; }
.demo-nav a { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; height: 97px; padding-bottom: 10px; border-left: 1px solid #83c9e6; color: #111; font-size: 18px; line-height: 1.45; text-decoration: none; letter-spacing: 1px; }
.demo-nav a:last-child { border-right: 1px solid #aaa; }
.demo-nav a::after { content: ''; position: absolute; bottom: 4px; left: calc(50% - 11px); border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 15px solid #3db8ff; }
.demo-nav a:hover { background: #eef9ff; }
#sidelink_r { visibility: hidden; }
body.demo-past-hero #sidelink_r { visibility: visible; }
.demo-mobile-links { padding: 20px 12px; text-align: center; }
.demo-mobile-links img { max-width: 100%; height: auto; }
.demo-mobile-links__apps { display: flex; gap: 10px; margin: 14px 0 24px; }
.demo-mobile-links__apps a { flex: 1; min-width: 0; }
@media (min-width: 641px) and (max-width: 930px) {
  .demo-hero { background-size: auto 75.2688vw; background-position: calc(50% - 6.4516vw) top; }
  .demo-hero__inner { zoom: calc(100vw / 930px); }
  .demo-hero__steps { width: 96.7742%; left: 1.6129%; top: 61.9355vw; }
  #header, #navi.demo-nav { max-width: 100%; }
  .demo-nav a { font-size: 15px; letter-spacing: 0; }
}
@media (max-width: 930px) {
  #header { height: 60px; padding: 14px 16px; }
  #header .head_cont { display: block; }
  #header .head_cont_sp { display: none; }
  #header .headtext { right: 16px; top: 14px; }
  #header .headtext img { width: 130px; height: auto; }
  #navi.demo-nav { display: none; }
}
@media (max-width: 640px) {
  .demo-hero {
    background: #daf4fc;
  }

  /* ボタン2つと下余白まで背景を表示 */
  .demo-hero__inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: auto;

    /* ボタン開始位置までのスペース */
    padding: 183.83vw 0 24px;

    background:
      url('../images/topimg/topimage_bgsp.webp')
      center / cover no-repeat;
  }

  /*
   * エリアの高さが変わっても、
   * 見出し・各パーツの位置が動かないようvwで指定
   */
  .demo-hero__title {
    left: 4%;
    top: 4.06vw;
    width: 92%;
  }

  .demo-hero__check {
    left: 2%;
    top: 62.97vw;
    width: 58%;
  }

  .demo-hero__badge {
    left: 62%;
    top: 60.94vw;
    width: 34%;
  }

  .demo-hero__points {
    left: 3%;
    top: 148.28vw;
    width: 94%;
    justify-content: center;
    gap: 2%;
  }

  .demo-hero__points li {
    width: 32%;
  }

  .demo-hero__points img {
    width: 100%;
  }

  /* 絶対配置をやめ、ボタンの高さをエリアに含める */
  .demo-hero__inner .demo-hero__actions {
    position: relative;
    inset: auto;
    width: 94%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .demo-hero__actions > .demo-hero__cta {
    position: relative;
    inset: auto;
    box-sizing: border-box;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 60px;
    margin: 0;
    padding: 12px 16px;
    gap: 16px;
    font-size: clamp(20px, 5.5vw, 28px);
  }

  /* ボタンの下に自然に続く */
  .demo-hero__steps {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0;
  }
}

/* Staggered entrances are enabled only when the observer is available. */
.demo-motion-ready .demo-reveal { opacity: 0; transform: translateY(18px) scale(.85); }
.demo-motion-ready .demo-reveal.is-visible { animation: demo-enter .75s cubic-bezier(.2,.8,.2,1) var(--demo-delay, 0s) both; }
.demo-motion-ready .demo-hero__title.is-visible img { animation: demo-title-float 10s ease-in-out 1.10s 10; }
.demo-motion-ready .demo-hero__badge.is-visible { animation: demo-enter 1.1s cubic-bezier(.22, 1, .36, 1) .25s both, demo-badge-float 5s ease-in-out 1.5s 3; }
.demo-hero__cta::after { content: ''; position: absolute; pointer-events: none; inset: -40% auto -40% -55%; width: 36%; background: linear-gradient(105deg, transparent 5%, rgba(255,255,255,.15) 30%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.15) 70%, transparent 95%); transform: skewX(-18deg); opacity: 0; }
.demo-hero__cta.is-visible::after { animation: demo-shine 4.5s ease-in-out 1s infinite; }
.demo-hero__cta:hover::after, .demo-hero__cta:focus-visible::after { animation-duration: 2s; }
@keyframes demo-enter {
  from { opacity: 0; transform: translateY(25px) scale(.90); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demo-title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes demo-badge-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
@keyframes demo-shine {
  0%, 10% { left: -55%; opacity: 0; }
  12% { opacity: .95; }
  36% { left: 120%; opacity: .95; }
  37%, 100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-motion-ready .demo-reveal,
  .demo-motion-ready .demo-reveal.is-visible,
  .demo-motion-ready .demo-hero__title.is-visible img { animation: none; opacity: 1; transform: none; }
  .demo-hero__cta::after { display: none; }
}