@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// BRAND（Figma に詳細ページのデザインが無い）
///// 2026-10-13 ユーザー指定でブランド紹介のページに（ブランドごとのガラス調カード .brandSet。今は 202 SKIN CLUB の1件）
///// 下の「記事一覧」は以前のブランドニュース（NEWS 一覧「PC_NEWS - ALL」108:439 と同じ。news/css/style.css の記事一覧部分を複製）。
///// 今は出していない（inc/conts.php の $brandShowNews）
///// 共通部品（背景・左のロゴ・ガラス調カード・単位 --d）は common/css/detail.css
//////////////////////////////////////////////////////////////////// */

/* 背景：TOP の BRAND 欄の写真（Figma で見えている 1280×832 を切り抜いたもの）をそのまま全面に */

/* ==================================================
記事一覧
・SP：1列 / TAB：2列 / PC：2列（カード 456 幅、間隔 48px）
================================================== */
.BrandAllArea {
  position: relative;
  z-index: 10;
  padding: calc(120 * var(--d)) calc(16 * var(--d)) calc(80 * var(--d));
}
/* ==================================================
ブランド紹介（.brandSet：ガラス調カードに写真・ブランド名・紹介文・リンク）
・SP・TAB：写真 → 文章の縦積み
・PC：コンテンツの幅 964 のカード（内側 32）。左に写真（下層のグリッドの2列分 456。写真の縦横比 1200:628）、右に文章（間 40）
・リンク（Official / Instagram / LINE）は下線のリンク（detail.css の .moreLinkObj）を英字で縦に並べる。別タブで開く
================================================== */
.brandLists {
  display: flex;
  flex-flow: column;
  gap: calc(24 * var(--d));
}
.brandSet {
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(28 * var(--d));
}
.brandSet .imgObj {
  overflow: hidden;
  aspect-ratio: 1200 / 628;
}
.brandSet .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brandSet .nameObj {
  margin-top: calc(20 * var(--d));
  font-size: calc(24 * var(--d));
  font-weight: 640;
  line-height: 1.4;
}
.brandSet .copyObj {
  margin-top: calc(16 * var(--d));
  font-size: max(12px, calc(13 * var(--d)));
  line-height: 2.1;
  letter-spacing: 0.02em;
}
.brandSet .copyObj p {
  line-height: inherit; /* lib.css の p { line-height: 1.5 } を打ち消す */
}
.brandSet .copyObj p + p {
  margin-top: 1.4em;
}
.brandSet .linkLists {
  display: flex;
  flex-flow: column;
  gap: calc(4 * var(--d));
  margin-top: calc(24 * var(--d));
}
.brandSet .moreLinkObj {
  font-family: var(--dtEn);
  font-size: max(12px, calc(14 * var(--d)));
}
.brandSet .moreLinkObj .iconObj {
  width: calc(7 * var(--d));
}
@media screen and (min-width: 961px) {
  .brandLists {
    width: calc(964 * var(--d));
    gap: calc(48 * var(--d));
  }
  .brandSet {
    display: grid;
    grid-template-columns: calc(456 * var(--d)) 1fr;
    column-gap: calc(40 * var(--d));
    align-items: start;
    padding: calc(32 * var(--d));
  }
  .brandSet .nameObj {
    margin-top: calc(-6 * var(--d)); /* 行の高さの上の空きぶん、写真の上端に文字をそろえる */
    font-size: calc(32 * var(--d));
  }
  .brandSet .copyObj {
    margin-top: calc(20 * var(--d));
    font-size: max(12px, calc(14 * var(--d)));
  }
  .brandSet .linkLists {
    margin-top: calc(28 * var(--d));
  }
}

/* 以前のブランドニュース（今は出していない） */
.brandLists + .newsLists {
  margin-top: calc(64 * var(--d));
}
.newsLists {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24 * var(--d));
}

/* カード：内側の余白 16px、下だけ 30px */
.newsList a {
  display: block;
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(30 * var(--d));
  color: inherit;
  text-decoration: none;
}

/* 画像：上に薄い白のすりガラス（Figma の GLASS 4）を重ね、ホバーで外す（共通のサムネイルカード .dtThumbImg。detail.css） */
.newsList .imgObj {
  aspect-ratio: 255 / 166;
}
.newsList .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* タイトル：枠の高さは Figma の 58px で固定、文字は3行まで（超えた分は「…」） */
.newsList .ttl {
  height: calc(58 * var(--d));
  margin-top: calc(16 * var(--d));
  font-size: calc(12 * var(--d));
  line-height: 1.45;
  color: #231815;
}
.newsList .ttl span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.newsList .date {
  margin-top: calc(5 * var(--d));
  font-size: calc(12 * var(--d));
  line-height: calc(17 * var(--d));
}

@media screen and (min-width: 769px) {
  .newsLists {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC：カードは下層のグリッド「coogee_blk_PC」の2列の大きさ（456、間隔 48、左 284）。2026-10-13 ユーザー指定で3列から変更。
   カードの下からフッターまでは 20vw（下層共通） */
@media screen and (min-width: 961px) {
  .BrandAllArea {
    padding: calc(119 * var(--d)) 0 var(--dtFtrGap) calc(284 * var(--d));
  }
  .newsLists {
    grid-template-columns: repeat(2, calc(456 * var(--d)));
    gap: calc(48 * var(--d));
  }
}