@charset "UTF-8";
/*
 * esience 2026 / INTERVIEW ページ（SPECIAL INTERVIEW・沢尻エリカさん特別企画）
 *
 * Downloads interview_pc.html のデザインを並走方式で移植。
 * 全ルール .has-2026-template スコープ（page-brand.css と同方針）。
 * 本 CSS は functions.php で page-interview.php 適用時のみ enqueue。
 * 読込順: _base → _global → page-interview → _sp（最後）。
 *
 * ヘッダ/フッタ/フローティングLINE は _global.css（共通）。
 * INTERVIEW のヘッダは BRAND と同一挙動（透明初期→スクロールで赤背景）。
 * 本文オフセットは付けず、FV は透明ヘッダーの下に潜る（ユーザー指示 2026-05-19）。
 * PC コンテンツ幅は 1280px 中央寄せ、FV/虹色背景は 100% フルブリード。
 *
 * SP（<=797px）は _sp.css の「INTERVIEW」節で上書き。
 */

/* =========================================================
   PAGE BACKGROUND（PC のみ）
   BRAND ページと同じ head-back.webp を全面に。SP は _sp.css 側で何も指定しない。
   各セクションは背景色を持たない（透過）想定。
   ========================================================= */
.has-2026-template .site-main.page-interview {
  background-image: url('../img/brand/head-back.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* =========================================================
   本文オフセット: 無し
   ユーザー指示（2026-05-19）で BRAND と同じ「透明初期ヘッダ＋FVがヘッダ下に潜る」
   挙動に統一したため、ヘッダ/パンくず分の padding-top は付けない（FV フルブリード）。
   旧 .page-interview{padding-top:52px} と _global の body.is-interview-2026 は撤去済。
   ========================================================= */

/* =========================================================
   PANKUZU（INTERVIEW）背景挙動を BRAND の .brand-pankuzu に統一
   （ユーザー指示 2026-05-19）: 初期は透明 → スクロールで白背景＋下線。
   .is-scrolled は header-scroll.js が .interview-pankuzu にも付与する。
   文字色は BRAND が暗色 hero 前提の半透明白なのに対し、INTERVIEW の FV は
   明るいため暗色（text-sub/text）を初期から維持（白文字だと明るいFVで不可視）。
   ========================================================= */
.has-2026-template .interview-pankuzu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 90;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* バーの背景は全幅。中身(リンク群)は 1280px コンテンツ枠に中央寄せ
     （他PCコンテンツと同じ --iv-content / --iv-gutter 方式）。ユーザー指示 2026-05-19 */
  padding: 16px max(var(--iv-gutter), calc((100% - var(--iv-content)) / 2));
  background: transparent;
  border-bottom: 0.909px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

/* スクロール後: 白背景＋下線（BRAND の .brand-pankuzu.is-scrolled と同様） */
.has-2026-template .interview-pankuzu.is-scrolled {
  background: var(--color-white);
  border-bottom-color: rgba(76, 76, 76, 0.1);
}

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

.has-2026-template .interview-pankuzu a {
  color: var(--color-text-sub);
  transition: opacity 0.3s ease;
}
.has-2026-template .interview-pankuzu a:hover { opacity: 0.7; }
.has-2026-template .interview-pankuzu .sep { color: var(--color-text-sub); letter-spacing: 0; }
.has-2026-template .interview-pankuzu .current { color: var(--color-text); }

/* =========================================================
   SP 専用要素の PC 既定非表示
   （_sp.css は <=797px のみ。PC では SP 専用要素を出さない）
   interview_sp.html にしかない: 縦書きFVテキスト / FV spacer / BRAND MESSAGE
   ========================================================= */
.has-2026-template .interview-fv__sp-overlay,
.has-2026-template .interview-fv__spacer,
.has-2026-template .interview-brand-message {
  display: none;
}

/* =========================================================
   FV（SPECIAL INTERVIEW）reference .fv
   ワイドビューポートでも左右余白が出ないようフル幅、高さは viewport 比例
   ========================================================= */
.has-2026-template .interview-fv {
  position: relative;
  width: 100%;
  min-height: calc(100vw * 1097 / 1291);
  padding: 0 clamp(40px, 10.5vw, 160px);
  background: transparent;
  overflow: hidden;
}

.has-2026-template .interview-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.has-2026-template .interview-fv__bg picture,
.has-2026-template .interview-fv__bg img {
  position: absolute;
  left: -4.38%;
  top: 0;
  width: 108.82%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* テキスト直下のみのごく薄い白グロー（可読性確保）。
   旧: 全高 左→右 白フェード(最大0.85)で左下の商品が白く曇る問題があった
   （ユーザー指摘 2026-05-19）。上左へ radial 限定＋低濃度にし、左下の商品には
   一切かけない。テキストは自前の text-shadow でも十分可読。 */
.has-2026-template .interview-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    115% 75% at 10% 22%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 30%,
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}

.has-2026-template .interview-fv__text {
  position: absolute;
  z-index: 2;
  left: max(40px, 7.5vw);
  top: calc(100vw * 240 / 1512);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.has-2026-template .interview-fv__title {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 60px);
  letter-spacing: 9.6px;
  line-height: 1.45;
  color: var(--color-text);
  text-shadow: 0 0 70px #fff, 0 0 70px #fff;
  font-feature-settings: 'pwid' 1, 'halt' 1;
}
.has-2026-template .interview-fv__title .accent {
  color: var(--color-accent);
  display: block;
}

.has-2026-template .interview-fv__ambassador {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: clamp(16px, 1.85vw, 28px);
  letter-spacing: 2.24px;
  line-height: 1.6;
  color: var(--color-text);
  text-shadow: 0 0 30px #fff;
}

/* =========================================================
   MIDDLE（VIDEO + INTERVIEW を包む虹色背景）reference .middle-bg
   ========================================================= */
.has-2026-template .interview-middle {
  position: relative;
  background: url('../img/interview/back.webp') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}

/* =========================================================
   VIDEO（最新を、最深へ）reference .video-section
   ========================================================= */
.has-2026-template .interview-video {
  padding: 160px 0;
  display: flex;
  justify-content: center;
}

.has-2026-template .interview-video__intro {
  width: 1280px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.has-2026-template .interview-video__logo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

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

.has-2026-template .interview-video__sub {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.6px;
  line-height: 40px;
  color: var(--color-text);
}

.has-2026-template .interview-video__wrap {
  width: 100%;
  margin: 0;
}

.has-2026-template .interview-video__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

/* 動画未提供時のプレースホルダ枠（受領後 section-video.php で差し替え） */
.has-2026-template .interview-video__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 76, 76, 0.06);
  border: 1px dashed rgba(76, 76, 76, 0.3);
  border-radius: 4px;
}
.has-2026-template .interview-video__placeholder-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-en-btn);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--color-text-sub);
}
.has-2026-template .interview-video__placeholder-label small {
  font-family: var(--font-jp-base);
  font-size: 13px;
  letter-spacing: 2px;
}

/* =========================================================
   INTERVIEW 本文（interview Q&A + 写真）reference .interview
   ========================================================= */
.has-2026-template .interview-body {
  max-width: 1512px;
  margin: 0 auto;
  padding: 120px clamp(24px, 10.5vw, 160px) 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(80px, 10vw, 160px);
}

.has-2026-template .interview-body__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-en-heading);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 5.12px;
  color: var(--color-accent);
  text-align: left;
}

.has-2026-template .interview-body__text {
  max-width: 1192px;
  width: 100%;
  margin: 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.56px;
  line-height: 24px;
  color: var(--color-text);
}
.has-2026-template .interview-body__text p { margin: 0 0 5px; line-height: 24px; }
.has-2026-template .interview-body__text p.spacer { margin-bottom: 5px; }
.has-2026-template .interview-body__text p.interview-body__question {
  font-weight: 700;
}

.has-2026-template .interview-body__image {
  width: 100%;
  margin: 0;
}
.has-2026-template .interview-body__image picture { display: block; }
.has-2026-template .interview-body__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   LINE UP（5商品グリッド）
   ※ DUPLICATED FROM: assets-2026/css/front-page.css
       - .section-eyebrow / .container 系: front-page.css L151-199
       - .tag / .section-eyebrow--left / .section-lineup / .lineup-card 系: front-page.css L372-504
     最終同期: 2026-05-19（このコメントの行範囲が古くなったら diff し直すこと）
   TOP の section-lineup.php パーシャルを流用しているが、その PC CSS は
   front-page.css 専属（TOP のみ enqueue）で INTERVIEW では未ロードのため、
   front-page.css を一切変更せず（未目視 TOP の回帰リスク回避）ここへ複製する。
   注意: front-page.css 側は素のセレクタ（.section-lineup 等・スコープ無し）、
   本複製は .has-2026-template 付き。将来 _lineup.css へ共通抽出する際は
   両者の specificity 非対称（裸 vs .has-2026-template）を必ず解消すること。
   SP は _sp.css の .has-2026-template .section-lineup 共通ルールが既に効く。
   設計判断の経緯・受容した MEDIUM 指摘は tasks/decisions/2026-05-19.md を参照。
   複製元（front-page.css の上記行）を変更したら本ブロックも追従すること。
   ========================================================= */
.has-2026-template .section-eyebrow {
  margin: 0;
  font-family: var(--font-en-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 5.12px;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: left;
  align-self: flex-start;
  width: 100%;
}
.has-2026-template .section-eyebrow--left {
  text-align: left;
  align-self: flex-start;
}

.has-2026-template .container-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.has-2026-template .container {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 16px;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
}
.has-2026-template .container--white {
  background: var(--color-gray-base);
  color: var(--color-text-sub);
}
.has-2026-template .container--red {
  background: var(--color-base-dark);
  color: var(--color-accent);
  border: 0.5px solid var(--color-accent);
}

.has-2026-template .tag {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.85px;
  border-top-left-radius: var(--radius-tag-tl);
}
.has-2026-template .tag--red {
  background: var(--color-accent);
  color: var(--color-base-dark);
}

/* LINE UP のスタイルは _global.css に共通化（ユーザー指示 2026-05-25）。
   個別ページの上書きが必要になった場合のみここに追加する。 */

/* =========================================================
   PC: コンテンツ幅 1280px 中央寄せ / 背景は 100% フルブリード
   ユーザー指示（2026-05-19）。FV 背景・虹色 middle は 100vw のまま、
   テキスト/動画/本文/LINE UP の「中身」だけ 1280 に収め中央寄せ。
   末尾追加＝同 specificity の先行ルールに source order で勝つ。
   SP(<=797px) は _sp.css が後ロードで上書き（5%）なので影響しない。
   ========================================================= */
.has-2026-template .page-interview {
  /* 全2026ページ共通トークン（_base.css）を参照。これにより INTERVIEW の
     コンテンツ幅・パンくず内側が BRAND/TOP と完全に同一基準になる。
     値を変えるときは _base.css の --content-max / --content-gutter を変更する。 */
  --iv-content: var(--content-max);
  --iv-gutter: var(--content-gutter);
}

/* 中身を 1280 中央寄せ（背景要素 .interview-fv / .interview-middle には付けない） */
.has-2026-template .interview-video__intro,
.has-2026-template .interview-body,
body.is-interview-2026 .section-lineup {
  width: 100%;
  max-width: var(--iv-content);
  margin-left: auto;
  margin-right: auto;
}

/* 左右ガター（<1280 用）。上下 padding は各セクション既存値を維持するため
   padding-left/right のみ上書き */
.has-2026-template .interview-video,
.has-2026-template .interview-body,
body.is-interview-2026 .section-lineup {
  padding-left: var(--iv-gutter);
  padding-right: var(--iv-gutter);
}

/* LINE UP セクション下に余白を追加（フッターとの間隔確保） */
body.is-interview-2026 .section-lineup {
  padding-bottom: 120px;
}

/* FV テキストは 1280 コンテンツ枠の左端に合わせる（背景はフルブリード維持） */
.has-2026-template .interview-fv__text {
  left: max(var(--iv-gutter), calc((100% - var(--iv-content)) / 2));
}

/* PC: LINE UP を TOP（front-page.css）と同じレイアウトに揃える。
   1260px 中央寄せ・左右ガターなし（上記の max-width/gutter 上書きを打ち消す）。
   セクション自体はフルブリード（虹色背景を interview-middle と連続させる）。
   ユーザー指示 2026-06-08。SP は _sp.css 側が後ロードで効くため対象外。 */
@media (min-width: 798px) {
  body.is-interview-2026 .section-lineup {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 180px;
    padding-left: 0;
    padding-right: 0;
    background: url('../img/interview/back.webp') no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
  }

  body.is-interview-2026 .section-lineup .section-eyebrow,
  body.is-interview-2026 .section-lineup .lineup-grid {
    width: 1260px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* PC: interview 本文の上下余白を 80px・左右 0 に（ユーザー指示 2026-06-08） */
@media (min-width: 798px) {
  .has-2026-template .interview-body {
    padding: 80px 0px !important;
  }
}

/* =========================================================
   LINE UP カードの hover「キラン」= TOP（front-page.css L987-1041）の複製。
   front-page.css は TOP のみ enqueue されるため INTERVIEW では未ロード。
   front-page.css を変更せずここへ複製（複製元を変えたら本ブロックも追従）。
   ユーザー指示 2026-06-08。@keyframes holoGradient も併せて複製する。
   ========================================================= */
.has-2026-template .section-lineup .lineup-card {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;
  transition: background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .has-2026-template .section-lineup .lineup-card:hover {
    background-color: #F2F2F2;
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;
  }
}
@keyframes holoGradient {
  0%   { background-position: 150% 150%; filter: brightness(1); }
  10%  { background-position: 120% 120%; }
  20%  { background-position: 100% 100%; filter: brightness(1.01); }
  30%  { background-position: 80% 80%; }
  40%  { background-position: 60% 60%; }
  50%  { background-position: 40% 40%; filter: brightness(0.98); }
  60%  { background-position: 20% 20%; }
  70%  { background-position: 0% 0%; filter: brightness(1.01); }
  80%  { background-position: -10% -10%; }
  90%  { background-position: -30% -30%; }
  100% { background-position: -50% -50%; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .has-2026-template .section-lineup .lineup-card:hover,
  .has-2026-template .section-lineup .lineup-card:active { animation: none; }
}
/* SP（タッチ）: hover が無いので :active（タップ）でキランを出す。 */
@media (hover: none) {
  .has-2026-template .section-lineup .lineup-card:active {
    background-color: #F2F2F2;
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;
  }
}