/* -------------------------------
HERO slider
---------------------------------*/
.index-hero{
position:relative;
width:100%;
height:90vh;
overflow:hidden;
display:grid;
place-items:start center;
isolation:isolate;
/* background:var(--color-gray5) url('/2026-image/texture/bg3.png') repeat; */
}

.index-hero__slider{
position:absolute;
inset:0;
overflow:hidden;
}

.index-hero__slide{
position:absolute;
inset:0;
margin:0;
opacity:0;
animation:topFade 18s infinite;
}

.index-hero__slide picture{
display:block;
width:100%;
height:100%;
}

.index-hero__slide img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1);
/* animation:topZoom 18s infinite ease-out; */
}


/* -------------------------------
animation delay
---------------------------------*/
.index-hero__slide--01,
.index-hero__slide--01 img{
animation-delay:0s;
}

.index-hero__slide--02,
.index-hero__slide--02 img{
animation-delay:6s;
}

.index-hero__slide--03,
.index-hero__slide--03 img{
animation-delay:12s;
}


/* -------------------------------
Fade
---------------------------------*/
@keyframes topFade{

0%{
    opacity:0;
}

5%{
    opacity:1;
}

28%{
    opacity:1;
}

33.333%{
    opacity:0;
}

100%{
    opacity:0;
}

}


/* -------------------------------
Zoom

@keyframes topZoom{

0%{
    transform:scale(1);
}

33.333%{
    transform:scale(1.08);
}

100%{
    transform:scale(1.08);
}

}
---------------------------------*/

/* -------------------------------
position
---------------------------------*/
.index-hero__slide--01 img{
object-position:center bottom;
}

.index-hero__slide--02 img{
object-position:left bottom;
}

.index-hero__slide--03 img{
object-position:right bottom;
}

/* -------------------------------
HERO overlay
---------------------------------*/
.index-hero::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;

background:
linear-gradient(
    to bottom,
    rgba(0,0,0,.0) 0%,
    rgba(0,0,0,.10) 20%,
    rgba(0,0,0,.15) 40%,
    rgba(0,0,0,.15) 80%,
    rgba(0,0,0,.0) 100%
);
}

.index-hero__title,
.index-hero__brand,
.index-hero__lead{
text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 3px 12px rgba(0,0,0,.18);
}


/* -------------------------------
HERO content
---------------------------------*/
.index-hero__content{
position:relative;
z-index:2;
margin-top:20vh;
border:0px #FF0000 solid;
text-align:center;
}

.index-hero__brand{
width:50%;
margin:0 auto 0 auto;
max-width:260px;
position:relative;
z-index:2;
}

.index-hero__label{
color:var(--color-gray5);
font-family: "brittany", serif;
font-size:5.7rem;
opacity:.7;
margin-top:-.5rem;
transform:rotate(-7deg) scale(1.7,1);
position:relative;
z-index:1;
line-height:1.8;
padding:0 0 .5em 0;
overflow:visible;
}

.index-hero__title{
color:#FFF;
margin-top:0rem;
font-family: "mincho", serif;
font-size: 2.7rem;
font-weight: 500;
line-height:1.5;
letter-spacing: .1rem;
position:relative;
z-index:2;
}

.index-hero__lead{
color:#FFF;
margin-top:3rem;
font-family: "notera", serif;
font-size:3rem;
}


@keyframes topFade{
0%{ opacity:0; }
6%{ opacity:1; }
30%{ opacity:1; }
38%{ opacity:0; }
100%{ opacity:0; }
}

@keyframes topZoom{
0%{ transform:scale(1.06); }
38%{ transform:scale(1.12); }
100%{ transform:scale(1.12); }
}


/* SP */
@media (max-width:1000px){
.index-hero__content{
margin-top:17rem;
}

.index-hero__label{
font-size:4.7rem;
margin-left:-2rem;
margin-top:0;
}

.index-hero__title{
font-size: 2.7rem;
}

.index-hero__lead{
font-size:3rem;
}

}


/* SP */
@media (max-width:500px){
.index-hero{
height:95vh;
}

.index-hero__content{
margin-top:13rem;
}

.index-hero__label{
font-size:3.6rem;
margin-left:-3rem;
}

.index-hero__title{
margin-top:2rem;
font-size: 2.3rem;
line-height:1.8;
}

.index-hero__brand{
margin-top:4rem;
font-size: 1.8rem;
}

.index-hero__lead{
margin-top:4rem;
font-size:2rem;
}

}