@charset "utf-8";
/* =========================================================
 Live Switcher Mobile LP - Campaign Marquee Banner (Sticky)
 File: ../css/lpsm-campaign-marquee.css
 ========================================================= */

/* =========================================================
 Variables (1か所に集約)
 ========================================================= */
:root{
  /* Header height */
  --lpsm-header-height: 46px; /* SP */

  /* Banner size */
  --lpsm-banner-height: 40px; /* 32px→40px */
  --lpsm-banner-font-size: 14px;
  --lpsm-banner-pad-x: 16px;

  /* Colors */
  --lpsm-banner-bg: rgba(0, 0, 0, 0.25);
  --lpsm-banner-border: rgba(255, 255, 255, 0.22);
  --lpsm-banner-text: #333333;
  --lpsm-banner-text_Link: #ffffff;

  /* Typography */
  --lpsm-banner-letter-spacing: 0.02em;

  /* Marquee */
  --lpsm-marquee-gap: 32px;
}

/* PC（必要ならブレークポイント調整） */
@media (min-width: 768px){
  :root{
    --lpsm-header-height: 76px; /* PC */
    --lpsm-banner-height: 44px;
    --lpsm-banner-font-size: 15px;
  }
}

/* =========================================================
 Campaign banner (Sticky)
 ========================================================= */
.lpsm-campaignMarqueeBanner{
  position: sticky;
  top: var(--lpsm-header-height);
  z-index: 1050;

  height: var(--lpsm-banner-height);
  display: flex;
  align-items: center;

  background: var(--lpsm-banner-bg);
  border-top: 1px solid var(--lpsm-banner-border);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* OFF control: bodyスイッチ（推奨） */
body[data-campaign="off"] .lpsm-campaignMarqueeBanner{
  display: none;
}

/* 互換：旧スイッチが残っていても消せるように（任意） */
.lpsm-campaignMarqueeBanner[data-campaign-banner="off"]{
  display: none;
}

/* =========================================================
 Viewport
 ========================================================= */
.lpsm-marqueeViewport{
  position: relative;
  width: 100%;
  min-width: 0; /* flex環境での縮み込み安定 */
  padding: 0 var(--lpsm-banner-pad-x);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* =========================================================
 Static text (default)
 ========================================================= */
.lpsm-marqueeSourceText{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: var(--lpsm-banner-text);
  font-size: var(--lpsm-banner-font-size);
  letter-spacing: var(--lpsm-banner-letter-spacing);
  line-height: 1;
}

/* Link style (inside source text) */
.lpsm-marqueeSourceText a,
.lpsm-marqueeLink{
  color: var(--lpsm-banner-text_Link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
 B) 非マーキー時だけセンタリング
 - JSが overflow のときだけ .is-marquee を付与する前提
 ========================================================= */
.lpsm-marqueeViewport:not(.is-marquee){
  justify-content: center;
}
.lpsm-marqueeViewport:not(.is-marquee) .lpsm-marqueeSourceText{
  width: 100%;
  text-align: center;
}

/* =========================================================
 Marquee mode
 ========================================================= */
/* marquee ON：静止テキストは視覚的に隠す（SRには残る） */
.lpsm-marqueeViewport.is-marquee .lpsm-marqueeSourceText{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Track（通常非表示） */
.lpsm-marqueeTrack{
  display: none;
  align-items: center;
  gap: var(--lpsm-marquee-gap);
  white-space: nowrap;
  will-change: transform;
}

/* marquee ON：表示＋アニメーション */
.lpsm-marqueeViewport.is-marquee .lpsm-marqueeTrack{
  display: inline-flex;
  animation: lpsmMarquee var(--lpsm-marquee-duration, 12s) linear infinite;
}

/* Item */
.lpsm-marqueeItem{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  color: var(--lpsm-banner-text);
  font-size: var(--lpsm-banner-font-size);
  letter-spacing: var(--lpsm-banner-letter-spacing);
  line-height: 1;
}
.lpsm-marqueeItem a{
  color: var(--lpsm-banner-text_Link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Animation */
@keyframes lpsmMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--lpsm-marquee-distance, -50%)); }
}

/* OS設定で「動きを減らす」場合は流さない */
@media (prefers-reduced-motion: reduce){
  .lpsm-marqueeViewport.is-marquee .lpsm-marqueeTrack{
    animation: none;
  }
}

/* =========================================================
 Pause controls (hover / press)
 - JSが is-paused を付ける前提
 ========================================================= */
.lpsm-marqueeViewport.is-paused .lpsm-marqueeTrack{
  animation-play-state: paused;
}

/* PC: hoverで停止（hoverできるデバイスだけ） */
@media (hover: hover) and (pointer: fine){
  .lpsm-marqueeViewport.is-marquee:hover .lpsm-marqueeTrack{
    animation-play-state: paused;
  }
}

/* キーボード操作時の停止 */
.lpsm-marqueeViewport.is-marquee:focus-within .lpsm-marqueeTrack{
  animation-play-state: paused;
}

/* =========================================================
 SAFE PATCH (campaign ON only) - unified
 目的：
 1) ハンバーガーはバナー下に（topだけ調整）
 2) 右側ナビはバナーより前に（z-indexだけ）
 3) 右側ナビの上余白は「バナー分だけ」（取りすぎ防止）
 ※ position は触らない（外部業者の制御を壊さない）
 ========================================================= */
@media screen and (max-width: 1204px){
  /* (1) ハンバーガー：バナー下へ */
  body[data-campaign="on"] .bl_hamburer_menu{
    top: calc(var(--lpsm-header-height) + var(--lpsm-banner-height) + 8px) !important;
    z-index: 3200 !important; /* バナー(1050)より上でクリック可能に */
  }

  /* (2) 右側ナビ：前面にだけ出す */
  body[data-campaign="on"] nav.mobile_nav{
    z-index: 3000 !important;
  }

  /* (3) 右側ナビの中身：上余白はバナー分だけ */
  body[data-campaign="on"] nav.mobile_nav .mobile_nav_inner{
    padding-top: var(--lpsm-banner-height);
    box-sizing: border-box;
  }
}

/* =========================================================
 Campaign section ON/OFF (body data-campaign switch)
 ========================================================= */
/* OFFなら #campaign セクションを完全に非表示 */
body[data-campaign="off"] .js-campaignSection{
  display: none !important;
}

/* =========================================================
 Card表示　不要かもしれない（既存維持）
 ========================================================= */
.bt .card-recommend.card-recommend--left{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.bt .card-recommend.card-recommend--left .card-title{
  width: 100% !important;
  text-align: left !important;
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.bt .card-recommend.card-recommend--left .text-center,
.bt .card-recommend.card-recommend--left .align-center{
  text-align: left !important;
}
.bt .card-recommend.card-recommend--left *{
  text-align: left !important;
}

/* =========================================================
 Cookie同意バナー表示中は、直後のキャンペーン告知バーを非表示
 ※ campaign=on のページだけ CSSだけで解決
 ========================================================= */
@supports selector(header:has(#cookieAreaBase)) {
  body[data-campaign="on"] header:has(#cookieAreaBase) + .lpsm-campaignMarqueeBanner{
    display: none !important;
  }
}

/* =========================================================
 キャンペーン告知バーの体裁（確定版）
 ========================================================= */
.lpsm-campaignMarqueeBanner{
  /* 影（面として浮かせる） */
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);

  /* 背景：艶＋マルチカラー */
  background-image:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.10) 35%,
      rgba(0,0,0,0.00) 60%,
      rgba(0,0,0,0.16) 100%
    ),
	/* 紫→マゼンタ→ピンクのマルチカラー */ 
    /*linear-gradient(
      90deg,
      #5a23aa 0%,
      #7a35ff 35%,
      #b43cff 68%,
      #ff2bd6 100%
    );
	*/
	/* アールグレイカラー *//* 20260220 */
    linear-gradient(
      90deg,
      #FEEF88 0%,
      #FAD710 35%,
      #F9B807 68%,
      #E6940E 100%
    );
	/* サイバーグリーン *//* 20260220 */
    /*linear-gradient(
      90deg,
      #DDE9B5 0%,
      #6DC594 35%,
      #189B90 68%,
      #30749A 100%
    );*/	


  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* CTAリンク（右側ボタン） */
.lpsm-marqueeLink{
  color: #ffffff;
  font-weight: 400;
  text-decoration: none;

  font-size: 14px;
  line-height: 1;
  height: 30px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  box-sizing: border-box;
  white-space: nowrap;
}
.lpsm-marqueeLink:hover{
  background: rgba(0,0,0,0.55);
}

/* 緊急復旧：キャンペーンバーの高さを強制的に固定（必要な限り残す） */
body[data-campaign="on"] .lpsm-campaignMarqueeBanner{
  height: var(--lpsm-banner-height) !important;
  min-height: var(--lpsm-banner-height) !important;
  align-items: center;
}

/* =========================================================
 FINAL FIX 確定（ul固定・位置ズレ確実除去）:
 - SP/PCとも「ヘッダー直下」に言語メニュー（白パネル）を固定
 - 告知バー（.lpsm-campaignMarqueeBanner / z-index:1050）より前面
 - 既存CSSの margin/transform/top の影響を受けにくい
========================================================= */

/* 1) ヘッダー層は z-index のみ（positionは触らない） */
header.ly_header_wrap{
  z-index: 2000 !important;
}

/* 2) 外側(nav)は“器”扱い：余計なズレ要因を潰す */
header.ly_header_wrap nav.un_language_list{
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  z-index: 99998 !important; /* ulより少し下 */
}

/* 3) ★白いパネル(ul)を固定してヘッダー直下へ */
header.ly_header_wrap nav.un_language_list ul.un_language_list_inner{
  position: fixed !important;
  top: var(--lpsm-header-height) !important; /* ← 常にヘッダー直下（PCは76px） */
  right: 0 !important;

  z-index: 99999 !important; /* ← 告知バー(1050)より確実に上 */
  margin: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
}

/* 4) nav側に疑似要素の背景帯がある場合の保険 */
header.ly_header_wrap nav.un_language_list::before,
header.ly_header_wrap nav.un_language_list::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
 PATCH: ページ最上部だけ隙間が出る対策（告知バーの初期ズレ要因を潰す）
========================================================= */
.lpsm-campaignMarqueeBanner{
  margin-top: 0 !important;
  transform: none !important;
}