/* =========================================
REVIEW GRID
========================================= */

.review-grid{
  display:grid;
  gap:24px;
}

/* カラム数 */

.review-grid.review-grid-1{
  grid-template-columns:1fr;
}

.review-grid.review-grid-2{
  grid-template-columns:repeat(2,1fr);
}

.review-grid.review-grid-3{
  grid-template-columns:repeat(3,1fr);
}

.review-grid.review-grid-4{
  grid-template-columns:repeat(4,1fr);
}


/* =========================================
CARD
========================================= */

.reviews{
  position:relative;

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.95),
  rgba(250,248,245,.95)
  );

  border:1px solid rgba(139,115,85,.12);

  border-radius:14px;

  padding:40px 26px 24px 72px;

  overflow:hidden;

  backdrop-filter:blur(14px);

  transition:
  transform .45s ease,
  box-shadow .45s ease,
  border-color .45s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,.04);

}


/* hover */

.reviews:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(139,115,85,.25);

  box-shadow:
  0 25px 50px rgba(0,0,0,.08);

}


/* =========================================
左アクセント
========================================= */

.reviews::before{

content:"";

position:absolute;

left:0;
top:0;

width:2px;
height:100%;

background:
linear-gradient(
to bottom,
var(--accent),
transparent
);

opacity:.7;

}


/* =========================================
上ハイライト
========================================= */

.reviews::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);

opacity:.8;

}


/* =========================================
巨大Quote
========================================= */

.review-quote{

position:absolute;

right:18px;
top:10px;

font-size:72px;

line-height:1;

font-family:
"Cormorant Garamond",
serif;

color:
rgba(139,115,85,.08);

pointer-events:none;

z-index:1;

}


/* =========================================
ICON
========================================= */

.review-icon{
position:absolute;

left:24px;
top:30px;

width:34px;
height:34px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;

z-index:3;

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.4);

box-shadow:
0 5px 15px rgba(0,0,0,.05);

}


/* 男性 */

.review-icon.male{

background:
linear-gradient(
135deg,
rgba(108,133,170,.16),
rgba(108,133,170,.08)
);

color:#6d87aa;

}


/* 女性 */

.review-icon.female{

background:
linear-gradient(
135deg,
rgba(198,140,156,.16),
rgba(198,140,156,.08)
);

color:#c58a9c;

}


/* 未回答 */

.review-icon.other{

background:
linear-gradient(
135deg,
rgba(150,150,150,.14),
rgba(150,150,150,.06)
);

color:#888;

}

/* =========================================
STAR
========================================= */

.star{

display:block;

font-size:12px;

letter-spacing:3px;

margin-bottom:14px;

color:var(--accent);

position:relative;

z-index:2;

font-weight:600;

}


/* =========================================
TEXT
========================================= */

.reviews p{

margin:0 0 18px;

font-size:13px;

line-height:2;

color:#333;

position:relative;

z-index:2;

}


/* =========================================
NAME
========================================= */

.who{

display:flex;

align-items:center;

gap:10px;

font-size:11px;

color:#777;

letter-spacing:.08em;

position:relative;

z-index:2;

}


/* 線 */

.who::before{

content:"";

width:20px;

height:1px;

background:
rgba(139,115,85,.35);

}


/* =========================================
微妙な背景模様
========================================= */

.reviews .review-bg{

position:absolute;

right:-20px;
bottom:-20px;

width:120px;
height:120px;

border-radius:50%;

background:
radial-gradient(
rgba(139,115,85,.05),
transparent 70%
);

pointer-events:none;

}


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

@media(max-width:768px){

.review-grid,
.review-grid.review-grid-2,
.review-grid.review-grid-3,
.review-grid.review-grid-4{

grid-template-columns:1fr;

gap:14px;

}

.reviews{

padding:
34px 18px 22px 62px;

border-radius:10px;

}

.review-icon{

left:18px;
top:24px;

width:28px;
height:28px;

font-size:11px;

}

.review-quote{

font-size:50px;

right:10px;

top:6px;

}

.reviews p{

font-size:12px;

line-height:1.9;

margin-bottom:14px;

}

.who{

font-size:10px;

}

}