/* -----------------------------
sticky-wrapper
----------------------------- */
.sticky-wrapper{
background: inherit;
}

/* -----------------------------
brand-concept
----------------------------- */
.brand-concept{
position: sticky;
top: 0;
z-index: 1;
min-height: 100vh;
display: grid;
place-items: center;
background:var(--color-gray4) url('/2026-image/texture/bg3.png') repeat;
overflow: hidden;
}


/* -----------------------------
背景
----------------------------- */
.brand-concept__bg{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
width:100%;
height:100%;
border:0px #FF0000 solid;
}

.brand-concept__bg .image{
position:absolute;
aspect-ratio:1/1;
border-radius:50%;
overflow:hidden;
filter: grayscale(100%) blur(0px) brightness(1.2) contrast(.8);
}

.brand-concept__bg img{
width:100%;
height:100%;
object-fit:cover;
opacity:.9;
}

.brand-concept__bg .image:nth-child(1){
top:-10%;
left:3%;
width:30%;
}

.brand-concept__bg .image:nth-child(2){
top:10%;
right:8%;
width:20%;
}

.brand-concept__bg .image:nth-child(3){
bottom:-3%;
left:20%;
width:22%;
}


/* SP */
@media (max-width:900px){
.brand-concept__bg .image:nth-child(1){
top:-8%;
left:-6%;
width:35%;
}
.brand-concept__bg .image:nth-child(2){
top:5%;
right:-10%;
width:30%;
}
.brand-concept__bg .image:nth-child(3){
bottom:3%;
left:20%;
width:30%;
}

}


@media (max-width:600px){
.brand-concept__bg .image:nth-child(1){
top:-8%;
left:-6%;
width:50%;
}
.brand-concept__bg .image:nth-child(2){
top:5%;
right:-10%;
width:35%;
}
.brand-concept__bg .image:nth-child(3){
bottom:3%;
left:20%;
width:35%;
}

}


@media (max-width:500px){
.brand-concept__bg .image:nth-child(1){
top:-8%;
left:-6%;
width:60%;
}

.brand-concept__bg .image:nth-child(2){
top:5%;
right:-10%;
width:40%;
}

.brand-concept__bg .image:nth-child(3){
bottom:5%;
left:20%;
width:40%;
}
}


/* -----------------------------
中身
----------------------------- */
.brand-concept__inner{
position:relative;
z-index:3;
text-align: center;
padding:0 0 15vh 0;
border:0px #FF0000 solid;
}

.brand-concept__label{
margin:0 0 10rem 0;
color:var(--color-pink2);
font-family: "brittany", serif;
font-weight: 100;
font-size:6.2rem;
letter-spacing: 0rem;
opacity:1;
transform:rotate(-7deg) scale(1.5,1);
position:relative;
white-space:nowrap;
/* overflow:hidden; */
z-index:1;
}

.brand-concept__title{
margin-bottom: 2rem;
font-family: "mincho", serif;
font-size:4.7rem;
line-height: 1.5;
font-weight: 500;
color: #FFF;
}


.brand-concept__lead{
margin:3.2rem 0 0 0;
color: var(--color2);
font-family: "mincho", serif;
font-size: 1.8rem;
line-height: 2;
letter-spacing: 0.08em;
color: #FFF;
}


/* 手書き風に表示 */
.js-handwriting{
clip-path:inset(0 100% 0 0);
animation:handwritingReveal 6s ease forwards;
animation-delay:.5s;
}

@keyframes handwritingReveal{
0%{
clip-path:inset(0 100% 0 0);
opacity:.2;
}
100%{
clip-path:inset(0 0 0 0);
opacity:1;
}
}


/* SP */
@media (max-width:1000px){
.brand-concept__label{
font-size:5.3rem;
margin:0 0 10rem 0;
}
.brand-concept__title{
font-size:4.1rem;
}
}

@media (max-width:800px){
.brand-concept__label{
font-size:4.7rem;
}
.brand-concept__title{
font-size:3.7rem;
}
}

@media (max-width:600px){
.brand-concept__label{
font-size:4.1rem;
margin:10rem 0 7rem;
}
.brand-concept__title{
font-size:3.9rem;
}
}

@media (max-width:500px){
.brand-concept__label{
font-size:3.8rem;
}
.brand-concept__title{
font-size:3.2rem;
}
}