/* styles.css */
:root{
  --border:#11223F;
  --muted:#6B7280;
  --bg:#fff;
  --chip:#fff;
  --chip-border:#FF6B6B;
  --chip-text:#FF3B3B;
  --radius:15px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background:#fafafa;
  color:#111;
}
.tabs{
display: flex;
	gap:20px;
	flex-wrap:wrap;
margin-bottom: 50px;
justify-content: center;
}
.tabs__btn.is-active{
  background: #fff !important;
  border-color: #FF7D56 !important;
  color: #FF7D56 !important;
}
.shop-wrap {
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
}
#shop .scroll-btn {
font-size: 1.125rem;
}
/* grid */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}

/* card */
.card{
  background:var(--bg);
  border-radius:var(--radius);
  overflow:hidden;
}
.card__media{
  width: 95%;
  display: block;
  background: #f0f0f0;
  margin: 10px auto 0;
  border-radius: 10px;
}
.card__body{ padding:14px 14px 16px; }
.card__name{
  margin:10px 0 8px;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--chip-border);
  color:var(--chip-text);
  background:var(--chip);
  font-size:12px;
  font-weight:bold;
}
.chip--kids{
  border-color:#ffc400;
  color:#ffc400;
}
.card__descWrap{
  margin-top:10px;
  position:relative;
}

/* ▼ 150pxを超えたら制限する（JSでis-clampedを付与） */
.card__desc{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#111;
  white-space:pre-wrap;
}
.card.is-clamped .card__desc{
  max-height:100px;
  overflow:hidden;
  position:relative;
}


.card.is-clamped:not(.is-expanded) .card__desc::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:48px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}


.more{
  text-align: center;
  margin-top:8px;
  display:none; 
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  font-size:13px;
  font-weight:700;
}
.card.is-clamped .more{ 
  display:flex; 
  align-items:center;
  gap:6px; 
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}
.card.is-expanded .more__icon{ transform:rotate(180deg); }
.more__icon{ transition:transform .2s ease; }
/* links */
.links{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.linkRow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
}
.linkRow span {
white-space: nowrap;
}
.linkRow a{
  display: flex;
  gap: 20px;
  color:#333;
  text-decoration:underline;
  word-break:break-all;
}
.card.is-expanded .card__desc{
  max-height: none;
  overflow: visible;
}
.card.is-expanded .card__desc::after{
  display: none;
}
.linkRow .sns-icon::before {
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image: url(../images/marche/instagram_icon.svg);
}