/* =========================================================
   LivLiv Home – FV Overlay 完全安定版（PC/SP）
   JS（pc1,pc1,pc2,pc3）構造に完全対応
========================================================= */

/* ---------- 共通 ---------- */
.hm-hero-ov{
  position:absolute;
  inset:0;
  display:flex;
  z-index:2147483000 !important;
}
.hm-hero-ov__box{
  pointer-events:auto;
  margin:auto;
  padding:clamp(14px,4vw,46px);
  width:100%;
  max-width:92%;
  text-align:left;
}
/* ★ ここは共通：SPにはフォントサイズを指定しない */
.hm-hero-ttl{
  margin:0 0 .55em;
  font-weight:800;
  line-height:1.25;
  color:#000 !important;
}
@media(min-width:769px){
  .hm-hero-ttl{
    font-size:44px !important;
  }
}

/* ===== FV見出し：白アウトライン＋白グロー（PC/SP共通） ===== */
.fv-outline-layer{
  position:relative;
  display:inline-block;
  z-index:0;
}

/* 擬似要素でテキストを複製してレイヤー化 */
.fv-outline-layer::before,
.fv-outline-layer::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  left:0;
  top:0;
  white-space:pre-wrap;
  pointer-events:none;
}

/* ::before = 白の太めアウトライン */
.fv-outline-layer::before{
  -webkit-text-stroke:4px rgba(255,255,255,0.95);
  text-stroke:3px rgba(255,255,255,0.95); /* 対応ブラウザ用 */
  color:transparent;
  z-index:-1;
}

/* ::after = ふんわり白グロー */
.fv-outline-layer::after{
  color:transparent;
  text-shadow:
    0 0 8px  rgba(255,255,255,0.9),
    0 0 20px rgba(255,255,255,0.75),
    0 0 34px rgba(255,255,255,0.55);
  z-index:-2;
}

.hm-hero-btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.hm-hero-btn{
  pointer-events:auto !important;
  background:#fff !important;
  color:#111 !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  padding:12px 38px !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  margin-top:25px !important;
  text-decoration:none !important;
}

/* =========================================================
   PC（769px〜）
========================================================= */
@media(min-width:769px){

  /* ---------- PC1（スライド1） ---------- */
  .hm-hero-ov[data-slide="pc1"] .hm-hero-ov__box{
    text-align:center !important;
    padding-left:0 !important;
  }
  .hm-hero-ov[data-slide="pc1"] .hm-hero-btns{
    justify-content:center !important;
  }

  /* ---------- ★ PC1 と PC2（折り返し1枚目）を完全に揃える ---------- */
  .hm-hero-ov[data-slide="pc1"] .hm-hero-ttl,
  .hm-hero-ov[data-slide="pc2"] .hm-hero-ttl{
    font-size: clamp(48px, 4.8vw, 48px) !important;
  }

  .hm-hero-ov[data-slide="pc1"] .hm-hero-btns,
  .hm-hero-ov[data-slide="pc2"] .hm-hero-btns{
    margin-top:-18px !important;
    justify-content:center !important;
  }

}

	
	
  /* ======================================================
     ★ PC2（絶対中央） ← 完全修正版
  ====================================================== */
  .hm-hero-ov[data-slide="pc2"] .hm-hero-ov__box{
    /* 追加：内部を flex の中央揃えにして “中央ズレ” を完全除去 */
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;        /* テキスト中央 */
    padding-left:0 !important;

    margin-left:auto !important;         /* 水平方向の中央 */
    margin-right:auto !important;
  }
  .hm-hero-ov[data-slide="pc2"] .hm-hero-btns{
    justify-content:center !important;
  }
  /* PC2 の文字色は黒に固定（折返し誤爆対策） */
  .hm-hero-ov[data-slide="pc2"] .hm-hero-ttl{
    color:#000 !important;
  }

 

  /* ---------- PC3（左寄せ・完璧だったやつ） ---------- */
  .hm-hero-ov[data-slide="pc3"] .hm-hero-ov__box{
    text-align:left !important;
    margin-left:max(4vw,80px) !important;
  }
  .hm-hero-ov[data-slide="pc3"] .hm-hero-btns{
    justify-content:flex-start !important;
  }

  /* ★ PC3だけフォント49px */
  .hm-hero-ov[data-slide="pc4"] .hm-hero-ttl{
    font-size:49px !important;
  }

  /* ---------- PC4（フォールバック） ---------- */
  .hm-hero-ov[data-slide="pc4"] .hm-hero-ttl{
    color:#000 !important;
  }
}


/* =========================================================
   SP（〜768px）
========================================================= */
@media(max-width:768px){

  .hm-hero-ttl{
    font-size:clamp(18px,5vw,24px) !important;
    line-height:1.32 !important;
  }
  .hm-hero-btn{
    padding:10px 22px !important;
    font-size:.9rem !important;
    margin-top:20px !important;
  }

  /* SP1〜SP2 中央 */
  .hm-hero-ov[data-slide="sp1"] .hm-hero-ov__box,
  .hm-hero-ov[data-slide="sp2"] .hm-hero-ov__box{
    text-align:center !important;
  }
  .hm-hero-ov[data-slide="sp1"] .hm-hero-btns,
  .hm-hero-ov[data-slide="sp2"] .hm-hero-btns{
    justify-content:center !important;
  }


  /* ---------- SP3（左寄せ & シャドウ極薄） ---------- */
  .hm-hero-ov[data-slide="sp3"] .hm-hero-ov__box{
    text-align:left !important;
    padding-left:10vw !important;
  }
  .hm-hero-ov[data-slide="sp3"] .hm-hero-btns{
    justify-content:flex-start !important;
  }
  .hm-hero-ov[data-slide="sp3"] .hm-hero-ttl{
    text-shadow:
      0 1px 0 rgba(255,255,255,0.25),
      0 0 2px rgba(255,240,220,0.25),
      0 2px 4px rgba(240,220,200,0.15) !important;
  }
}

/* =========================================================
   ★ PC2：タイトル＆ボタンを“視覚的に中央”へ微調整（1400px基準版）
   - 1400px のとき：今まで通り 170px / 440px
   - 1400px より広いとき：画面が広がるほど少しずつ右へスライド
========================================================= */

/* 〜1399px：今まで通りの固定px（1400px付近の見え方を壊さない） */
@media (min-width: 769px) and (max-width: 1399px){

  .hm-hero-ttl.is-pc2{
    position: relative;
    left: 180px;
    display: inline-block;
    color:#90673d !important;
  }

  .hm-hero-ttl.is-pc2 ~ .hm-hero-btns{
    position: relative;
    left: 440px;
  }
}

/* 1400px〜：1400px を基準に、広くなるほど右へ寄っていく */
@media (min-width: 1400px){

  .hm-hero-ttl.is-pc2{
    position: relative;
    /* 170px ＋「(画面幅 - 1400px) の 45%」だけ右に足す */
    left: calc(170px + (100vw - 1400px) * 0.46);
    display: inline-block;
    color:#90673d !important;
  }

  .hm-hero-ttl.is-pc2 ~ .hm-hero-btns{
    position: relative;
    /* ボタンも同じロジックで右へ追従 */
    left: calc(440px + (100vw - 1400px) * 0.46);
  }
}


/* =========================================================
   PC2：句読点「、」の直後を強制的に詰める（最終版）
========================================================= */

/* PC2：句読点「、」の後を詰める */
.hm-hero-ov[data-slide="pc3"] .tight{
  margin-left:-0.38em !important;
  display:inline-block;
}
/* PC2 のタイトル全体を2px下げる */
.hm-hero-ov[data-slide="pc3"] .hm-hero-ttl{
  position: relative;
  top: 8px;
}

/* =========================================================
   PC1：ボタンを右と上にずらす
========================================================= */
@media (min-width:769px){
  .hm-hero-ov[data-slide="pc1"] .hm-hero-btn.is-xxl{
    position: relative;
    left: 10px;  /* ★ 右に10px */
  }
}
@media (min-width:769px){
  .hm-hero-ov[data-slide="pc1"] .hm-hero-btn.is-xxl{
    position: relative;
    top: -30px; /* ★ 上に30px */
  }
}

/* =========================================================
   PC3：タイトル全体を10px上に 
========================================================= */
@media (min-width:769px){
  /* PC3：タイトル全体を12px上に */
  .hm-hero-ov[data-slide="pc4"] .hm-hero-ttl{
    position: relative;
    top: -12px;
  }
}

/* =========================================================
   SP3：文字＋ボタンまるごと左に寄せる
========================================================= */
@media(max-width:768px){
  .hm-hero-ov[data-slide="sp3"] .hm-hero-ov__box{
    text-align:left !important;
    margin-left: -2px; /* ← 左に寄せる量（調整可能） */
  }

  /* ボタンの揃え方も左に統一 */
  .hm-hero-ov[data-slide="sp3"] .hm-hero-btns{
    justify-content:flex-start !important;
  }
}
@media(max-width:768px){
  #js-mv1 { display:none !important; }
  #hm-sp-mv{ display:block !important; position:relative !important; z-index:999999 !important; }
}


/* =========================================================
   SP2：文字色かえる
========================================================= */
@media(max-width:768px){
  .hm-hero-ov[data-slide="sp2"] .hm-hero-ttl{
    color:#90673d !important;
  }
}
/* 表示中スライドだけ前面へ */
.splide__slide.is-active .hm-hero-ov{
  opacity: 1 !important;
  z-index: 99999 !important;
}

/* 非表示スライドは消す */
.splide__slide:not(.is-active) .hm-hero-ov{
  opacity: 0 !important;
  z-index: -1 !important;
}

/* ===== アウトラインを無効化する（SP2 用） ===== */
.no-outline,
.no-outline::before,
.no-outline::after {
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
  text-shadow:none !important;
  color:inherit !important;
}
@media(max-width:768px){
  .hm-hero-ov[data-slide="sp2"] .hm-hero-ttl{
    color:#90673d !important;
  }
}
@media(min-width:769px){
  .hm-hero-ov[data-slide="pc3"] .hm-hero-ttl{
    color:#000 !important;
  }
}
@media(max-width:768px){
  #hm-sp-mv .hm-hero-ov[data-slide="sp2"] .hm-hero-ttl{
    color:#90673d !important;
  }
}
/* =========================================================
   ★ PC2：タイトルはブラウンに強制（優先度MAX）
========================================================= */
@media(min-width:769px){
  #js-mv1 .hm-hero-ov[data-slide="pc3"] .hm-hero-ttl{
    color:#90673d !important;
  }
}
/* =========================================================
   SP FV：テキスト揃え＆サイズ（完全決定版）
========================================================= */
@media(max-width:768px){

  /* ★ SP1 と SP2 → テキスト中央寄せ（親ごと中央化） */
  .hm-hero-ov[data-slide="sp1"] .hm-hero-ov__box,
  .hm-hero-ov[data-slide="sp2"] .hm-hero-ov__box{
    text-align:center !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* SP1 → 今のままのサイズ（24px固定） */
  .hm-hero-ov[data-slide="sp1"] .hm-hero-ttl{
    font-size:clamp(24px,5vw,24px) !important;
  }

  /* SP2 → 文字サイズだけ20pxに */
  .hm-hero-ov[data-slide="sp2"] .hm-hero-ttl{
    font-size:21px !important;
  }

  /* ★ SP3 → 左寄せ（レイアウトそのまま） */
  .hm-hero-ov[data-slide="sp3"] .hm-hero-ov__box{
    text-align:left !important;
    padding-left:5vw !important;
  }

  /* SP3：文字を少し大きく（そのまま） */
  .hm-hero-ov[data-slide="sp3"] .hm-hero-ttl{
    font-size:clamp(20px,5.5vw,26px) !important;
  }

  /* ★ SP3：ボタンを少し短く（そのまま） */
  .hm-hero-ov[data-slide="sp3"] .hm-hero-btn{
    padding:10px 18px !important;
  }
}

/* =========================================================
   SP：ボタン位置＆サイズ調整（最終安定版）
========================================================= */
@media(max-width:768px){

  /* ★ SP1 / SP2 → ボタン中央寄せ */
  .hm-hero-ov[data-slide="sp1"] .hm-hero-btns,
  .hm-hero-ov[data-slide="sp2"] .hm-hero-btns{
    justify-content:center !important;
  }
	

@media(min-width:769px){
  .hm-hero-ov[data-slide="pc1"] .hm-hero-ttl {
    background: yellow !important;
  }
}
/* =========================================================
   ★ iPad（768px〜1024px）：SP版FVの文字だけ大きくする
   （レイアウトはSPのまま）
========================================================= */
@media (min-width:768px) and (max-width:1024px){

  /* FV タイトル（hm-sp-mv 内だけ対象） */
  #hm-sp-mv .hm-hero-ttl{
    font-size: clamp(26px, 4.5vw, 34px) !important;
    line-height: 1.28 !important;
  }

  /* ボタンも少し大きめ＆押しやすく */
  #hm-sp-mv .hm-hero-btn{
    padding: 14px 32px !important;
    font-size: 1.05rem !important;
  }
}
/* =========================================================
   iPad縦（幅768px）の SP2 タイトルだけ少し上へ
========================================================= */
@media (width:768px){
  #hm-sp-mv .hm-hero-ov[data-slide="sp2"] .hm-hero-ttl{
    position: relative;
    top: -42px;  /* ← 上に持ち上げる量。お好みで -10〜-20px ぐらいで調整 */
  }
}