@charset "utf-8";

/* INDEX KV */
.kv-area { position: relative; margin-bottom:10rem;}
.kv-area h1 { position: relative; z-index: 1; letter-spacing: .01em; margin: 10rem auto; width: 90%; max-width: 1600px; }
.kv-area h1 b { font-size: 650%; font-weight: 600; display: block; line-height: 1.2; opacity: .5; color: #54B2F6; background: linear-gradient(90deg, #54B2F6, #185AA5);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.kv-area h1 span { font-size: 100%; display: block; color: #043CA3; font-weight: 600; white-space: nowrap; }
h2.marker{  }
h2.marker span{ background: linear-gradient(transparent 60%, #FFF1A4 60%, #FFF1A4 90%,transparent 90%);  }

#foot-entry{ padding:5%; }
header #nav { display:none; }

/* benefit */
.benefit-area{ padding-bottom:8rem; }
.benefit{ position:relative; min-height:100vh; padding-bottom:10rem; }
.benefit > picture{ position:absolute; right:0; top: 0; width:45%; padding:2rem 0 0; }
.benefit > picture.fixed{ position:fixed; }
.benefit > picture img{ border-radius:3rem 0 0 3rem; }
.benefit > picture b{ font-size: 6.5vw; position:absolute; right:1rem; bottom:-.4em; line-height:.8; color:var(--color-base); opacity:.3; mix-blend-mode: multiply; font-weight:600; }
.benefit-text{ width:41%; margin-left:7%; padding:8rem 0 0; }
.benefit.right > picture{ right:auto; left:0; }
.benefit.right > picture img{ border-radius:0 3rem 3rem 0; }
.benefit.right  > picture b{ color:#043CA3; }
.benefit.right .benefit-text{ margin-left:52%; }
.benefit-text h2{ font-size:230%; margin-bottom:.5em; }
.benefit-text h2 + p{ line-height:2; } 
.benefit-list{  }
.benefit-list li{ margin-top:4rem; background:#fff; box-shadow:4px 4px 0 rgba(4, 205, 252, .2); border-radius:5px;  position:relative; padding:1.5rem 2rem; }
.benefit-list li:before{ content:""; width:1rem; height:1rem; background:var(--color-base); position:absolute; left:-.5rem; top:50%; transform:translateY(-50%) rotate(45deg); border-radius:5px; }
.benefit-list li h3{ font-size:170%; color:#043CA3; }
.benefit-list li h3 span{ font-size:80%; display:inline-block; margin-left:.5em; }
.benefit-list li p{ font-size:95%; }
.benefit-list.flex,.benefit-list.flex2{ display:flex; justify-content: space-between; flex-wrap: wrap; font-size:80%; gap:4%; }
.benefit-list.flex2 li{ width:48%; }

@media screen and (max-width: 810px) {
  .kv-area { margin-bottom:6rem;}
  .kv-area h1 { margin: 6rem auto; }
  .kv-area h1 span { font-size:130%; }
  #foot-entry{ padding:15% 5%; }

  .benefit-area { padding-bottom: 2rem; }
  .benefit { width:90%; margin:0 auto; padding-bottom: 6rem; }
  .benefit > picture{ position:relative; top: 0 !important; left: 0; right: 0; display:block; width:100%; }
  .benefit > picture b { font-size:600%; }
  .benefit > picture img { border-radius:2rem !important; }
  .benefit-text { padding:0; margin:5rem auto 0  !important; width:90% !important; }
  .benefit-text h2 { font-size:200%; }
  .benefit-list li { margin-top:2rem; }
}

@media screen and (max-width: 600px) {
  .kv-area h1 { width:80% }
  .kv-area h1 b { font-size: 500%; }

  .benefit > picture b { font-size:400%; }
  .benefit-text h2 { font-size:180%; }
  .benefit-list li h3 { font-size:150%; }
  .benefit-list li p { font-size:100%; }
}



@media screen and (max-width: 810px){
  .benefit > picture.fixed{
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}