@charset "UTF-8";

/*
 * CMS が出力する #labelImg 内の picture / img はそのまま利用し、
 * 表示領域は維持したまま、画像だけを背景としてビューポートに固定する。
 *
 * Ver7.0：固定背景がヘッダーの下に潜らないよう、ヘッダー高ぶん下げて表示する。
 * 上流は label_top.html のインラインJSで #header / #headerInner を実測して
 * --labelImgPlaceholderHeight と margin-top を毎回書き換えていたが、
 * テーマでは --uaHeaderHeight（common_sp.css / common_pc.css の :root）だけを見る。
 * JS の実測・多重呼び出し・--labelImgHeaderHeight は不要になったので持ち込まない。
 */

/*
 * Ver8.2：SPのアドレスバー伸縮対策。
 *
 * ここは高さを1本の --labelImgPlaceholderHeight（dvh 基準）で持っていたが、
 * dvh は「アドレスバーの開閉に1pxずつ追従する動的な値」なので、
 *   ① #labelImg / #labelImg img の height が伸縮する
 *      → 幅はそのままで高さだけ変わり object-fit: cover が再クロップされ、
 *        画像がズームしたように見える
 *   ② #labelLead の margin-top が伸縮する
 *      → ドキュメント全体の高さが変わってスクロール位置がズレ、
 *        それでアドレスバーが再表示され…という帰還ループでバネのように揺れる
 * の2症状が出ていた。用途ごとに高さを分け、どちらも動かない値にする。
 *
 * --labelImgPlaceholderHeight … レイアウトが占める高さ（#labelLead の margin-top）。
 *   ドキュメント高さを決めるので固定値であることが必須。svh（アドレスバー表示時の高さ）。
 * --labelImgVisualHeight … 固定背景を描く箱の高さ（#labelImg / #labelImg img）。
 *   アドレスバー非表示時に下端へ隙間が出ないよう lvh（アドレスバー非表示時の高さ）で取る。
 *   placeholder より大きいぶんは cover で切れるだけなので見た目には影響しない。
 *
 * さらに SP では js/label_top.js の initSpFixedLabelTopHeight() が
 * 初回表示の innerHeight を --spLabelTopViewportHeight に、
 * 100lvh の実測値を --spLabelTopVisualHeight に入れて、下の2変数を px で確定させる。
 * svh / lvh 非対応環境の保険であると同時に、単位の挙動に頼らず値を固定する意味もある。
 * 実測値の更新は幅が変わったとき＝画面回転時だけで、アドレスバーの開閉では更新しない。
 * 同じ手法が js/look.js の initSpFixedVisualHeight() と css/look.css の #look .noItem にある。
 *
 * カスタムプロパティは「同じ宣言を2行並べて古い方に落とす」書き方が効かない
 * （パース時は何でも通り、使う側で無効値になって height: auto になってしまう）ため、
 * 新しい単位は @supports で切り替える。#labelTopIntro のような通常プロパティは
 * common_sp.css / common_pc.css のとおり2行並べで問題ない。
 */
#labelTop {
  position: relative;
  --labelImgPlaceholderHeight: calc(100vh - var(--uaHeaderHeight));
  --labelImgVisualHeight: calc(100vh - var(--uaHeaderHeight));
}

@supports (height: 100svh) {
  #labelTop {
    --labelImgPlaceholderHeight: calc(100svh - var(--uaHeaderHeight));
  }
}

@supports (height: 100lvh) {
  #labelTop {
    --labelImgVisualHeight: calc(100lvh - var(--uaHeaderHeight));
  }
}

/*
 * JS実測値による上書き。is-sp-labeltop-height-fixed は js/label_top.js が
 * SP幅のときだけ付ける（PC幅では外す）が、common_pc.css より詳細度が高くなるので
 * メディアクエリでも SP に閉じておく。
 *
 * #labelTopIntro（素の値は common_sp.css / common_pc.css。dvh → svh 済み）も
 * 通常フローでドキュメント高さに効くので、同じ実測値に合わせる。
 */
@media only screen and (max-width: 999px) {
  html.is-sp-labeltop-height-fixed #labelTop {
    --labelImgPlaceholderHeight: calc(var(--spLabelTopViewportHeight) - var(--uaHeaderHeight));
    --labelImgVisualHeight: calc(var(--spLabelTopVisualHeight) - var(--uaHeaderHeight));
  }

  html.is-sp-labeltop-height-fixed #labelTopIntro {
    height: calc(var(--spLabelTopViewportHeight) - var(--uaHeaderHeight) * 2);
  }
}

#labelImg {
	--labelImgScale: 1.1;
  width: 100%;
  height: var(--labelImgVisualHeight, 0px);
  margin-bottom: 0;
  position: fixed;
  top: var(--uaHeaderHeight);
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--motion-soft), visibility 0s linear 0.6s;
}

/*
 * 本番・ステージングの EWWW は img を <picture> で包んで webp の <source> を足す
 * （ローカルの docker には EWWW が無いので、この構造は再現しない）。
 * PC / SP の出し分けは .onlyPc / .onlySp（else.css）で、クラスは **img 側**に付く。
 * picture に高さを持たせると、SP では「中身が display:none の PC 用 picture」が
 * 画面1枚分の空箱として残り、SP 画像入りの picture は overflow:hidden の外へ
 * 押し出されて完全に見えなくなる（PC は1つ目が実画像なので気づけない）。
 * wrapper はレイアウトから外し、従来どおり img の display だけで切り替える。
 */
#labelImg picture {
  display: contents;
}

#labelImg img {
  display: block;
  width: 100%;
  height: var(--labelImgVisualHeight, 0px);
}

#labelImg img {
  object-fit: cover;
  object-position: center;
	transform: scale(var(--labelImgScale));
	transform-origin: center center;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	#labelImg img {
		transform: none;
	}
}

/*
 * 画像用に確保した領域と重なる間だけ固定背景を表示する。
 * Ver7.0：イントロ演出中（is-label-top-intro-pending）は出さない。
 * ロゴのフェードイン前に背景画像が先に見えてしまうのを防ぐ。
 */
html.is-label-img-visible:not(.is-label-top-intro-pending) #labelImg {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--motion-soft), visibility 0s linear 0s;
}

#labelImg a {
  cursor: pointer;
}

/* 画像領域以外を白背景の前面レイヤーにする。 */
#labelTopIntro,
#labelTopName,
#labelLead {
  position: relative;
  z-index: 1;
  background: #fff;
}

#labelTopName {
  margin: 0;
  padding: 36px 0 200px;
}

/* ロゴ表示後にヘッダーとブランド名を出す、2段階のイントロ。 */
#labelTopLogo,
#header,
#labelTopName {
  opacity: 1;
  transition: opacity 0.6s var(--motion-soft);
}

#labelTopLogo {
  transform: translateY(-50%) scale(1.2);
  transform-origin: center center;
  transition:
    opacity 0.6s var(--motion-soft),
    transform 0.8s var(--motion-soft);
}

#labelTopLogo img {
  will-change: transform, opacity;
}

html.is-label-top-intro-pending #labelTopLogo {
  opacity: 0;
  transform: translateY(-50%) scale(1.2);
}

html.is-label-top-intro-pending.is-label-top-logo-visible #labelTopLogo {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}

html.is-label-top-logo-visible.is-label-top-logo-scaled #labelTopLogo {
  opacity: 1;
  transform: translateY(-50%) scale(0.9);
}

html.is-label-top-intro-pending #header,
html.is-label-top-intro-pending #labelTopName {
  opacity: 0;
  visibility: hidden;
}

/* Label name strip reveal */
#labelTopName.labelTopNameStrip .labelTopNameStripRow {
	display: block;
	overflow: hidden;
	line-height: 1.3;
	transform: scale(1);
	transform-origin: center center;
	transition: none;
	position: static;
	z-index: auto;
	will-change: transform;
}

#labelTopName.labelTopNameStrip .labelTopNameStripRow::before {
	display: none;
}

#labelTopName.labelTopNameStrip .labelTopNameStripWord {
	display: inline-block;
	white-space: nowrap;
	transform: none;
	transition: none;
	position: static;
	z-index: auto;
}

#labelTopName.labelTopNameStrip .labelTopNameStripChar {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	transition: transform 1.15s var(--motion-luxury);
	will-change: transform;
}

#labelTopName.labelTopNameStrip.isStripActive .labelTopNameStripChar {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	#labelTopName.labelTopNameStrip .labelTopNameStripChar {
		transform: none;
		transition: none;
	}
}

/* Label lead line-by-line masked fade-in */
#labelLead .labelLeadFadeLine {
	display: block;
	overflow: hidden;
}

#labelLead .labelLeadFadeLineInner {
	display: block;
	opacity: 0;
	transform: translate3d(0, 0.75em, 0);
	transition:
		opacity 1s var(--motion-soft),
		transform 1.3s var(--motion-luxury);
	will-change: opacity, transform;
}

#labelLead.isLeadFadeActive .labelLeadFadeLineInner {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

#labelLead.isLeadBtnsFadeReady #labelLeadBtns {
	opacity: 0;
	transform: translate3d(0, 0.75em, 0);
	transition:
		opacity 0.85s var(--motion-soft),
		transform 1.1s var(--motion-luxury);
}

#labelLead.isLeadBtnsFadeReady.isLeadFadeActive #labelLeadBtns {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: var(--labelLeadBtnsDelay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	#labelLead .labelLeadFadeLineInner {
		opacity: 1;
		transform: none;
		transition: none;
	}

	#labelLead.isLeadBtnsFadeReady #labelLeadBtns {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

#labelLead {
  margin: var(--labelImgPlaceholderHeight, 0px) 0 0 !important;
  padding: 30px 15px 80px;
}

#main > section:not(#labelTop),
#footer {
  position: relative;
  z-index: 1;
  background: #fff;
}

@media screen and (min-width: 1000px) {
  #labelLead {
    padding: 140px 0 100px;
  }
}

/*
 * LOOKスライダーの調整値
 * 画像サイズ・画像間の余白・1周の速度は、以下の3変数で変更できます。
 */
 
#labeltopSlider {
  --labeltop-slide-width: 14vw;
  --labeltop-slide-gap: 80px;
  --labeltop-loop-duration: 60s;
}

#labeltopSliderInner {
  display: flex;
  width: max-content;
  min-height: 0;
  will-change: transform;
}

#labeltopSliderInner.isLoopReady {
  animation: labeltop-infinite-loop var(--labeltop-loop-duration) linear infinite;
}

#labeltopSlider .labeltopSliderGroup {
  display: flex;
  flex: none;
  gap: var(--labeltop-slide-gap);
  padding-right: var(--labeltop-slide-gap);
}

#labeltopSlider .labeltopCell {
  position: static;
  flex: 0 0 var(--labeltop-slide-width);
  width: var(--labeltop-slide-width);
  transform: none;
}

#labeltopSlider .labeltopCell img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes labeltop-infinite-loop {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--labeltop-loop-offset, 0px), 0, 0);
  }
}

@media screen and (max-width: 719px) {
  #labeltopSlider {
    --labeltop-slide-width: 49vw;
    --labeltop-slide-gap: 60px;
    --labeltop-loop-duration: 60s;
  }
}

/*---------------------------------------------------------------
イントロの保険（テーマ独自。上流 UA-26Autumn には無い）

is-label-top-intro-pending は #labelTopLogo / #header / #labelTopName を
隠した状態で描画し、js/label_top.js がクラスを外して演出を始める。
つまり **JSが動かないとページが白いまま**になる。
JSエラー・静的書き出し時のJS欠落・読み込み失敗のいずれでも起きるため、
4秒経ったらCSSだけで最終状態まで持っていく。

通常時は js が 2秒以内（js/label_top.js の startIntroWhenImageIsReady）に
pending クラスを外すので、このアニメーションは発火しない。
---------------------------------------------------------------*/
html.is-label-top-intro-pending #labelTopLogo {
  animation: uaLabelTopIntroFailSafeLogo 0.6s var(--motion-soft) 4s forwards;
}

html.is-label-top-intro-pending #header,
html.is-label-top-intro-pending #labelTopName {
  animation: uaIntroFailSafeReveal 0.6s var(--motion-soft) 4s forwards;
}

@keyframes uaLabelTopIntroFailSafeLogo {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes uaIntroFailSafeReveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Match the no-item label page's mobile first-view geometry. */
@media only screen and (max-width: 999px) {
  #list #labelTopIntro {
    height: calc(100svh - 88px) !important;
  }

  /*
   * picture は対象に入れないこと。本番の EWWW（とテーマ自身の webp 出力）は img を
   * <picture> で包むので、picture に display:block と高さを与えると「中身が display:none の
   * PC 用 picture」が画面1枚分の空箱として残り、SP 用画像が overflow:hidden の外へ押し出されて
   * 見えなくなる（2026-08-29 に本番 SP で発生）。picture は上の display:contents のまま。
   */
  #list #labelImg,
  #list #labelImg > a,
  #list #labelImg img {
    height: calc(100svh - 44px) !important;
  }

  #list #labelImg > a,
  #list #labelImg img {
    display: block;
  }

  #list #labelImg > a {
    position: relative;
  }

  /*
   * #labelImg は position:fixed で top: var(--uaHeaderHeight)（SP 44px）に置いてあるので、
   * ここで margin-top を足すとヘッダー分が二重になり、画像の上に 44px の空白が出て
   * 下端が画面外に出る（noitem 側は top:0 + margin-top:44px なので値は同じでも意味が違う）。
   */
  #list #labelImg {
    margin-top: 0 !important;
  }

  #list #labelLead {
    margin-top: calc(100svh - 44px) !important;
  }
}