@charset "UTF-8";
/*
 * esience 2026 / Base Layer
 * 旧テーマと完全独立した設計トークン + リセット + ユーティリティ。
 * すべての 2026 系 CSS（single-shohin.css / front-page.css / page-brand.css）はこの _base.css を依存として読み込む。
 *
 * 出典: 30.product/esience-redesign/figma-spec/setsuko-pc.md
 * Single Source of Truth: 旧 esience-2026 テーマの style.css
 */

/* =========================================================
   Design tokens（色・タイポ・間隔・レイアウト・角丸・枠線・影）
   ========================================================= */
:root {
  /* Color */
  --color-base:           #F9FAFB;
  --color-base-dark:      #F1F2F5;
  --color-gray-base:      #F2F2F2;
  --color-accent:         #BA0016;
  --color-text:           #4C4C4C;
  --color-text-sub:       #8C8C8C;
  --color-text-on-accent: #F1F2F5;
  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-line:           rgba(76, 76, 76, 0.18);

  /* Typography */
  --font-en-heading: "Copperplate", "Hoefler Text", serif;
  --font-en-product: "Scheherazade New", serif;
  --font-en-btn:     "Work Sans", sans-serif;
  --font-jp-heading: "Noto Serif JP", serif;
  --font-jp-base:    "Noto Sans JP", sans-serif;
  --font-jp-special: "Zen Kaku Gothic New", sans-serif;

  /* Spacing scale (Figma 観察値) */
  --gap-2xs: 8px;
  --gap-xs:  16px;
  --gap-sm:  20px;
  --gap-md:  24px;
  --gap-lg:  40px;
  --gap-xl:  60px;
  --gap-2xl: 80px;
  --gap-3xl: 160px;

  /* Layout */
  --frame-pc:           1512px;
  /* 全2026ページ共通のコンテンツ内側幅。パンくず/本文/FVテキストの中央寄せ基準。
     ユーザー指示 2026-05-24: 1280→1260 に変更（shohin FV の Figma 比率 1260 に統一）。
     使用: front-page.css max-width / page-brand・page-interview のパンくず内側 /
     site-footer__top・__bottom-inner / single-shohin の how-text__inner・review__actions・FV body 等 */
  --content-max:        1260px;
  --content-gutter:     clamp(24px, 4vw, 60px);
  --section-pad-x:      80px;
  --section-pad-y:      160px;
  --header-height:      110px;
  --header-spacer-top:  78px;

  /* Radius */
  --radius-card:   3px;
  --radius-btn:    4px;
  --radius-tag-tl: 10px;
  --radius-line:   44px;

  /* Borders */
  --border-card:        1px solid var(--color-black);
  --border-btn-white:   1px solid var(--color-base-dark);
  --border-cta:         2px solid var(--color-accent);
  --border-line-float:  2px solid var(--color-text);

  /* Shadows */
  --shadow-product-card: 5px 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-line-icon:    0px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-line-float:   0px 4px 2px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   Reset（modern minimal）
   旧テーマ style.css が掛けている ul/li / a / button 等の規則を打ち消す目的も兼ねる。
   ※ html/body の margin/padding 0 は 2026 ページにだけ適用される（_base.css 自体が 2026 限定 enqueue のため）
   ========================================================= */
.site-main *,
.site-main *::before,
.site-main *::after {
  box-sizing: border-box;
}

/* デバイス別改行タグ（ユーザー指示 2026-05-31）
   <br>    = 常に改行（標準タグ・そのまま使用）
   <pc-br> = PC（≥798px）でのみ改行 / スマホでは改行しない
   <sm-br> = スマホ（≤797px）でのみ改行 / PC では改行しない
   仕組み: display:block の空要素が直前/直後のテキストを改行させる（高さ0で余白は増えない）。
   投稿本文に入れる場合は「カスタムHTML」/コードエディタで記述する。 */
pc-br,
sm-br {
  display: none;
}
@media (min-width: 798px) {
  pc-br { display: block; }
}
@media (max-width: 797px) {
  sm-br { display: block; }
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;     /* iOS Safari の Text Autosizing 無効化（実機で文字が肥大化する症状の対策） */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-jp-base);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.site-main img,
.site-main picture,
.site-main video,
.site-main canvas,
.site-main svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-main input,
.site-main button,
.site-main textarea,
.site-main select {
  font: inherit;
  color: inherit;
}

.site-main button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-main a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.site-main ul,
.site-main ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.site-main p {
  margin: 0;
  font-weight: inherit;
}

/* h2 だけは下マージンを確保（ユーザー指示 2026-05-25） */
.site-main h2 {
  margin-bottom: 40px;
}

/* PC のみ: h2 の前にもスペースを確保（ユーザー指示 2026-05-27） */
@media (min-width: 798px) {
  .site-main h2 {
    margin-top: 100px;
  }
}

/* =========================================================
   Utilities
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.esience-section {
  padding: var(--section-pad-y) var(--side-pad);
}

/* 2026 ページ全セクション: 左右余白をヘッダ inner と揃える（max-width: 1400 中央寄せと等価） */
.has-2026-template .section-hero,
.has-2026-template .section-product,
.has-2026-template .section-lineup,
.has-2026-template .section-concept,
.has-2026-template .section-news,
.has-2026-template .section-media,
.has-2026-template .section-banner,
.has-2026-template .section-contents {
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

/* =========================================================
   トップ: Hero 〜 Concept にまたがる共通背景画像（topback.webp）
   .front-topback wrapper の背景画像として敷き、内側のセクションは透過させる
   ========================================================= */
.front-topback {
  position: relative;
  background-image: url("../img/front/2026/topback.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* wrapper 内の各セクションは背景透明に（topback が透けて見える） */
.front-topback > .section-product,
.front-topback > .section-lineup,
.front-topback > .section-concept {
  background: transparent;
}

/* =========================================================
   PC / SP ブレークポイント
   - >= 798px : PC レイアウト（フルードに、1400 を中央センター上限）
   - <  798px : SP レイアウト（将来実装、今は PC 縮小で許容）
   ========================================================= */
:root {
  --frame-pc: 1400px;       /* コンテンツ最大幅（ヘッダ inner と同じ） */
  --section-pad-x: 60px;     /* 左右内余白（コンテンツ内側、ヘッダと揃える基準値） */
  --bp-sp:     797px;        /* これ以下が SP */

  /* セクションの左右パディングを「ヘッダー inner の左右端」と揃える計算式
     ・viewport <= frame-pc(1400px): 余白 = section-pad-x(60px)
     ・viewport >  frame-pc:        余白 = (viewport - frame-pc) / 2 + section-pad-x
     これによりコンテンツの開始/終了 X 座標がヘッダ inner と完全一致する */
  --side-pad: max(var(--section-pad-x), calc((100vw - var(--frame-pc)) / 2 + var(--section-pad-x)));
}

/* PC 域では body 全体が 1400 に達するまでフルード、超えたら 1400 center */
@media (min-width: 798px) {
  /* 横スクロールを完全に防ぐ（旧設定の min-width: 1512 は撤去） */
  html.has-2026-template-html,
  body.has-2026-template {
    min-width: 0;
    overflow-x: hidden;
  }
}

/* =========================================================
   旧テーマからの leak 打ち消し
   旧 esience の style.css:7776 で `.container { width: 100vw; overflow-x: hidden; }`
   が定義されており、2026 で `.container--white` 等のバッジ要素にも適用されて崩れる。
   2026 ページ内では .container を「単なる class 名」として使っているので無効化する。
   ========================================================= */
.has-2026-template .container,
.site-main .container {
  width: auto !important;
  overflow-x: visible !important;
}