@charset "UTF-8";

.rico-logo-size{
  height:300px;
  opacity: 0.29;
  }
  @media (max-width: 768px) {
    .rico-logo-size{
  height:180px;
  }
  }
  
  
.hero {
position: relative;
/*min-height: 90svh;*/
height: 92svh;
overflow: hidden;
background: #112aba;
color: #fff;
margin-top:8svh;
}


.hero video.bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity .5s ease;
}
.hero video.bg.is-ready { opacity: 1; }


.hero .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55));
pointer-events: none;
}


.hero .content {
position: relative;
z-index: 1;
display: grid;
place-items: center;
text-align: center;
padding: 6rem 1.25rem;
min-height: 100svh;
}
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .75rem; }
.hero p { font-size: clamp(1rem, 1.6vw, 1.125rem); margin: 0 0 1.25rem; opacity: .9; }
.hero .btn {
display: inline-block;
padding: .8rem 1.25rem;
border-radius: 999px;
background: rgba(255,255,255,.1);
backdrop-filter: blur(6px);
color: #fff; text-decoration: none; font-weight: 600;
border: 1px solid rgba(255,255,255,.35);
}


/* スマホ画面では高さを画面の40%に制限 */
@media (max-width: 768px) {
.hero {
/* min-height: 40svh; */
height: 50svh;
margin-top:11svh;
}
.hero .content {
min-height: 50svh;
/* padding: 2rem 1rem; */
}
}


@media (prefers-reduced-motion: reduce) {
.hero video.bg { display: none; }
}