@charset "UTF-8";
/*
 * esience 2026 / page-brand styles（PC）
 * 出典: Downloads/brand_pc.html の <style> BRAND セクション部分を移植。
 *
 * 方針:
 *   - 全セレクタを .has-2026-template スコープ配下に置く（旧テーマ非干渉）
 *   - 色/フォントは _base.css のトークンへマッピング（SSOT）
 *   - header/footer/support/floating-line は _global.css 担当（ここには書かない）
 *   - @media は書かない（SP は _sp.css の @media(max-width:797px) に一元化）
 *   - 汎用クラス（.heading/.body/.label/.inner/.content 等）は必ず親スコープ付き
 *
 * 依存: _base.css → _global.css → page-brand.css → _sp.css
 */

/* =========================================================
   PAGE BACKGROUND（PC/SP 共通の背景画像）
   SP 側 (_sp.css) でも同ルールを宣言しているが PC でも同じ画像を表示する。
   各セクションは背景色を持たない（透過）想定。
   ========================================================= */
.has-2026-template .site-main.page-brand {
  background-image: url('../img/brand/head-back.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* =========================================================
   PANKUZU（BRAND 固有・PC のみ。SP は _sp.css で display:none）
   Downloads: .pankuzu。scroll で白背景＋グレー文字。
   scroll クラスは header-scroll.js が .brand-pankuzu にも is-scrolled を付与
   ========================================================= */
.has-2026-template .brand-pankuzu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 90;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 中身を全ページ共通の 1280px コンテンツ枠に中央寄せ（背景バーは全幅維持）。
     INTERVIEW のパンくずと共通化（ユーザー指示 2026-05-19・共有トークン参照）。 */
  padding: 16px max(var(--content-gutter), calc((100% - var(--content-max)) / 2));
  background: transparent;
  border-bottom: 0.909px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.has-2026-template .brand-pankuzu a,
.has-2026-template .brand-pankuzu .sep,
.has-2026-template .brand-pankuzu .current {
  font-family: var(--font-jp-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* FV 上（初期）: 半透明白文字 */
.has-2026-template .brand-pankuzu a { color: rgba(255, 255, 255, 0.85); }
.has-2026-template .brand-pankuzu a:hover { color: var(--color-gray-base); }
.has-2026-template .brand-pankuzu .sep { color: rgba(255, 255, 255, 0.7); letter-spacing: 0; }
.has-2026-template .brand-pankuzu .current { color: var(--color-gray-base); }

/* scroll 後: 白背景＋グレー文字 */
.has-2026-template .brand-pankuzu.is-scrolled {
  background: var(--color-white);
  border-bottom-color: rgba(76, 76, 76, 0.1);
}
.has-2026-template .brand-pankuzu.is-scrolled a { color: var(--color-text-sub); }
.has-2026-template .brand-pankuzu.is-scrolled a:hover { color: var(--color-text); }
.has-2026-template .brand-pankuzu.is-scrolled .sep { color: var(--color-text-sub); }
.has-2026-template .brand-pankuzu.is-scrolled .current { color: var(--color-text); }

/* =========================================================
   共通: special page ボタン（白枠 / dark variant）
   ========================================================= */
.has-2026-template .btn-special {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 60px;
  padding: 22px 28px 22px 23px;
  border: 1px solid var(--color-base-dark);
  border-radius: var(--radius-btn);
  background: transparent;
  font-family: var(--font-en-btn);
  font-size: 16px;
  color: var(--color-gray-base);
  letter-spacing: 2.56px;
  line-height: 16px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.3s, color 0.3s;
}

.has-2026-template .btn-special:hover {
  background: var(--color-gray-base);
  color: var(--color-accent);
}

.has-2026-template .btn-special .arrow {
  width: 4.2px;
  height: 12.75px;
  flex-shrink: 0;
}

.has-2026-template .btn-special .arrow svg {
  width: 100%;
  height: 100%;
}

.has-2026-template .btn-special--dark {
  color: var(--color-text);
  border-color: var(--color-text);
}

.has-2026-template .btn-special--dark:hover {
  background: var(--color-text);
  color: var(--color-white);
}

/* INTERVIEW ボタン: SP 専用ラベルは PC では非表示（PC は label-pc + svg矢印のまま）*/
/* SP 専用 SVG ボタン画像は PC では非表示。SP は _sp.css で表示・他要素を隠す */
.has-2026-template .btn-special__sp-img {
  display: none;
}

.has-2026-template .brand-interview .btn-special--dark .btn-special__label-sp {
  display: none;
}

/* =========================================================
   HERO (FV)
   ========================================================= */
.has-2026-template .brand-hero {
  position: relative;
  width: 100%;
  height: 923px;
  overflow: hidden;
}

.has-2026-template .brand-hero .bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.has-2026-template .brand-hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.has-2026-template .brand-hero .content {
  position: relative;
  z-index: 10;
  height: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
}

.has-2026-template .brand-hero .tagline {
  font-family: var(--font-jp-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: 7.68px;
  line-height: 1;
  font-feature-settings: 'pwid' 1, 'halt' 1;
}

.has-2026-template .brand-hero .tagline-en {
  margin-top: 8px;
  font-family: var(--font-jp-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: 1.6px;
  line-height: 40px;
}

/* =========================================================
   BRAND MESSAGE
   ========================================================= */
.has-2026-template .brand-message {
  padding: 140px 0 60px;
  display: flex;
  justify-content: center;
}

.has-2026-template .brand-message .inner {
  max-width: 1192px;
  width: 100%;
  padding: 0 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.has-2026-template .brand-message .label {
  font-family: var(--font-en-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 4.48px;
  line-height: 1;
}

.has-2026-template .brand-message .heading {
  font-family: var(--font-jp-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 5.76px;
  line-height: 1;
  font-feature-settings: 'pwid' 1, 'halt' 1;
}

.has-2026-template .brand-message .heading .accent { color: var(--color-accent); }

.has-2026-template .brand-message .heading-en {
  margin-top: 16px;
  font-family: var(--font-jp-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 1.28px;
  line-height: 1;
}

.has-2026-template .brand-message .body {
  font-family: var(--font-jp-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 2.56px;
  line-height: 27px;
  width: 615px;
  max-width: 100%;
  white-space: pre-wrap;
}

.has-2026-template .brand-message .closing {
  font-family: var(--font-jp-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 1.96px;
  line-height: 43.5px;
}

/* =========================================================
   CONCEPT（画像 + テキスト）
   ========================================================= */
.has-2026-template .brand-concept {
  padding: 80px 0 140px;
  display: flex;
  justify-content: center;
}

.has-2026-template .brand-concept .inner {
  width: 1512px;
  padding: 0 160px;
  display: flex;
  align-items: center;
  gap: 120px;
}

.has-2026-template .brand-concept .image {
  flex: 0 0 595px;
  height: 575px;
  overflow: hidden;
  border-radius: 2px;
}

.has-2026-template .brand-concept .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-2026-template .brand-concept .text {
  flex: 1 1 auto;
  max-width: 615px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--color-text);
}

.has-2026-template .brand-concept .heading {
  font-family: var(--font-jp-heading);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1.96px;
  line-height: 43.5px;
}

.has-2026-template .brand-concept .body {
  font-family: var(--font-jp-heading);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2.56px;
  line-height: 27px;
}

.has-2026-template .brand-concept .body p { margin-bottom: 27px; }
.has-2026-template .brand-concept .body p:last-child { margin-bottom: 0; }

.has-2026-template .brand-concept .note {
  font-family: var(--font-jp-base);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.92px;
  line-height: 24px;
}

/* =========================================================
   SPECIAL INTERVIEW
   ========================================================= */
.has-2026-template .brand-interview {
  position: relative;
  width: 100%;
  aspect-ratio: 3024 / 1698;          /* pc-3.webp の実比率に一致（cover クロップ解消）*/
  overflow: hidden;
}

.has-2026-template .brand-interview .bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.has-2026-template .brand-interview .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.has-2026-template .brand-interview .content {
  position: relative;
  z-index: 10;
  height: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
}

.has-2026-template .brand-interview .heading {
  font-family: var(--font-jp-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 7.68px;
  line-height: 1.15;
  font-feature-settings: 'pwid' 1, 'halt' 1;
}

.has-2026-template .brand-interview .heading p + p { margin-top: 12px; }

.has-2026-template .brand-interview .sub {
  margin-top: 20px;
  font-family: var(--font-jp-base);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 1.6px;
  line-height: 1.6;
}

/* =========================================================
   INGREDIENTS
   ========================================================= */
.has-2026-template .brand-ingredients {
  padding: 120px 0 160px;
  display: flex;
  justify-content: center;
}

.has-2026-template .brand-ingredients .inner {
  max-width: 1512px;
  width: 100%;
  padding: 0 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.has-2026-template .brand-ingredients .label {
  font-family: var(--font-en-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 5.12px;
  line-height: 1;
}

.has-2026-template .brand-ingredients .cards {
  display: flex;
  gap: 30px;
  width: 100%;
  flex-wrap: wrap;
}

/* セクション末尾の注釈「※角質層まで」（PC/SP 共通、フォント 13px・ユーザー指示 2026-05-26）*/
.has-2026-template .brand-ingredients__note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--color-text-sub);
}

.has-2026-template .ingredient-card {
  position: relative;
  width: 378px;
  min-height: 333px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.has-2026-template .ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.has-2026-template .ingredient-card .head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.has-2026-template .ingredient-card .num {
  font-family: var(--font-en-product);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-text-sub);
  letter-spacing: 1.5px;
  line-height: 18px;
}

.has-2026-template .ingredient-card .product {
  font-family: var(--font-jp-base);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-sub);
  letter-spacing: 0.96px;
  line-height: 13px;
  text-align: right;
  font-feature-settings: 'palt' 1;
}

.has-2026-template .ingredient-card .pic {
  width: 180px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.has-2026-template .ingredient-card .pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.has-2026-template .ingredient-card .summary {
  font-family: var(--font-jp-base);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-sub);
  letter-spacing: 0.96px;
  line-height: 25px;
  width: 100%;
  font-feature-settings: 'palt' 1;
}

.has-2026-template .ingredient-card .arrow {
  position: absolute;
  bottom: 16px;
  right: 18px;
  width: 7px;
  height: 14px;
  color: var(--color-text-sub);
}

.has-2026-template .ingredient-card .arrow svg { width: 100%; height: 100%; }

/* =========================================================
   Fade-in（IntersectionObserver で .visible 付与）
   ========================================================= */
.has-2026-template .fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.has-2026-template .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* BRAND ページの special page ボタン全部を一時非表示・PC/SP 共通（ユーザー指示 2026-05-28）。
   対象: brand-hero / brand-interview セクションの .btn-special 全て（2箇所）。
   復活時はこのルールごと削除。HTML は各 PHP テンプレに残置済。
   注: 元定義 `.has-2026-template .btn-special` (0,2,0) に勝つため同 specificity にしてファイル後勝ちで上書き。 */
.has-2026-template .btn-special {
  display: none;
}