/* =========================
Layout
========================= */

.style-archive .section-inner{
  max-width:1100px;
  margin:0 auto;
  padding:100px 20px 80px;
}

/*==================================
Filter Area
==================================*/

.section-sub .hair-filter-wrap,
.section-filter .hair-filter-wrap{

max-width:1200px;

margin:0 auto 55px; /* 80→55 */

padding:28px 40px; /* 40→28 */

background:
rgba(255,255,255,.68);

backdrop-filter:blur(18px);

border-radius:28px;

border:
1px solid rgba(188,158,120,.08);

box-shadow:
0 15px 50px rgba(0,0,0,.04);

position:relative;

overflow:hidden;

}
/* =========================
MENU FILTER = HAIR STYLE
========================= */

.menu-filter,
.hair-filter{
  max-width:900px;
  margin:0 auto 55px;
  padding:28px 40px;

  background:rgba(255,255,255,.68);
  backdrop-filter:blur(18px);

  border-radius:28px;
  border:1px solid rgba(188,158,120,.08);

  box-shadow:0 15px 50px rgba(0,0,0,.04);

  position:relative;
  overflow:hidden;
}

.menu-filter::before,
.hair-filter-wrap::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* =========================
BLOCK
========================= */

.filter-block{
  margin-bottom:24px;
}

.filter-block:last-child{
  margin-bottom:0;
}

/* =========================
HEAD
========================= */

.filter-head{
  text-align:center;
  margin-bottom:14px;
}

.filter-head span{
  display:block;
  font-size:10px;
  letter-spacing:.35em;
  color:var(--accent);
}

.filter-head p{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  letter-spacing:.12em;
}

/* =========================
GROUP
========================= */

.filter-group{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}

/* =========================
BUTTON
========================= */

.filter-group button{
  background:none;
  border:none;
  cursor:pointer;

  font-size:13px;
  letter-spacing:.22em;

  color:#777;
  position:relative;

  transition:.5s;
}

.filter-group button:hover{
  color:var(--accent);
  transform:translateY(-2px);
}

.filter-group button::before,
.filter-group button::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:0;
  height:1px;
  background:var(--accent);
  transition:.5s;
}

.filter-group button::after{
  bottom:-6px;
  opacity:.5;
}

.filter-group button.active{
  color:var(--accent);
}

.filter-group button.active::before{
  width:100%;
}

.filter-group button.active::after{
  width:65%;
}


/*=========================
SP
=========================*/

@media(max-width:768px){

.hair-filter-wrap{

padding:18px 14px;

margin-bottom:35px;

border-radius:18px;

}
	
.filter-head{

margin-bottom:10px;

}
	
.filter-head p{

font-size:16px;

}

.filter-group{

gap:14px;

}

.filter-group button{

font-size:11px;

letter-spacing:.12em;

}

}


/* =========================
Grid
========================= */

.grid-hair{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(0.22,1,0.36,1);
}
#menu-result{
 transition:
 opacity .5s ease,
 transform .5s ease;
}

#menu-result.is-loading{
 opacity:0;
 transform:translateY(8px);
}

.grid-hair.is-loading{
  opacity:0;
  transform:scale(.98);
}

.grid-hair.is-loaded{
  opacity:1;
  transform:scale(1);
}

/* =========================
Card（高級感の核）
========================= */

.item-hair{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:#fff;

  transition:
    transform .6s cubic-bezier(0.22,1,0.36,1),
    box-shadow .6s cubic-bezier(0.22,1,0.36,1);
}

/* 余白で勝つ */
.item-hair:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}


/* =========================
Image
========================= */

.item-hair img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;

  transition:
    transform 1.4s cubic-bezier(0.22,1,0.36,1),
    filter 1.2s ease;
}


/* =========================
Overlay
========================= */

.item-hair::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
	transition:.6s ease;
	pointer-events: none;
}


/* =========================
Text（品のある情報）
========================= */

.item-hair p{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:20px;

  color:#fff;

  opacity:0;
  transform:translateY(12px);

  transition:.6s cubic-bezier(0.22,1,0.36,1);

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0)
  );

  font-size:0;
}

.hair-title{
  display:block;
  font-size:12px;
  letter-spacing:2.5px;
  font-weight:400;
}

.hair-desc{
  display:block;
  margin-top:6px;

  font-size:11px;
  letter-spacing:1.5px;
  line-height:1.7;

  opacity:0.85;
}


/* =========================
Label（右上）
========================= */

.hair-labels{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  gap:6px;
  z-index:5;
}

.label{
  font-size:9px;
  letter-spacing:1.5px;
  padding:4px 7px;

  border-radius:2px;
  border:1px solid rgba(255,255,255,0.6);
  color:#fff;

  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(4px);

  transition:.4s ease;
}

.label.type{
  opacity:0.85;
  border-color:rgba(255,255,255,0.4);
}


/* =========================
Hover（タイミング命）
========================= */

/* ① まず画像 */
.item-hair:hover img{
  transform:scale(1.06);
  filter:brightness(.92);
}

/* ② 少し遅れてオーバーレイ */
.item-hair:hover::after{
  background:rgba(0,0,0,0.35);
}

/* ③ 最後にテキスト（遅延が重要） */
.item-hair:hover p{
  opacity:1;
  transform:translateY(0);
  transition-delay:.15s;
}

/* ラベルもほんの少し浮かせる */
.item-hair:hover .label{
  transform:translateY(-1px);
  background:rgba(0,0,0,0.45);
}


/* =========================
Animation（上品に）
========================= */

.item-hair{
  opacity:0;
  transform:translateY(20px) scale(.98);
  animation:fadeUp .8s cubic-bezier(0.22,1,0.36,1) forwards;
}

.item-hair:nth-child(1){animation-delay:.05s;}
.item-hair:nth-child(2){animation-delay:.1s;}
.item-hair:nth-child(3){animation-delay:.15s;}
.item-hair:nth-child(4){animation-delay:.2s;}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


/* =========================
Responsive
========================= */

@media(max-width:768px){
  .grid-hair{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .item-hair img{
    height:240px;
  }
}