/* ============================================================
   HERO v5（完全版）
   ・PC/スマホ共通で背景固定（body::before）
   ・背景は cover で画面いっぱいに表示
   ・タイトル周りの半透明枠（四隅が滑らかな丸角）
   ============================================================ */

/* =========================
   0) 固定背景レイヤー（PC/スマホ共通）
   ========================= */
body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-image: url("/img/poster.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #c8e6c0;
  z-index: -1;
  pointer-events: none;
}

/* =========================
   1) Hero セクション
   ========================= */
#hero{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background-image: none !important;
  background-color: transparent !important;
}

/* hero より下は白背景で固定背景を隠す */
#hero ~ section{
  position: relative;
  z-index: 1;
  background-color: #fff;
}
#hero ~ div:not(.floating-menu):not(.mobile-footer-menu){
  position: relative;
  z-index: 1;
  background-color: #fff;
}

footer, .footer, .site-footer{
  position: relative;
  z-index: 1;
}

/* 不要な疑似要素・旧パネルを無効化 */
#hero::before,
#hero::after,
#hero .hero-container::before,
#hero .hero-container::after{
  content: none !important;
  display: none !important;
}

#hero .hero-overlay,
#hero .hero-panel{
  display: none !important;
}

/* =========================
   2) Hero 内の基準
   ========================= */
#hero .hero-container{
  position: relative;
  z-index: 1;
}

/* =========================
   3) タイトル〜キャラを囲むラッパー
   ========================= */
#hero .hero-panel-area{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 54px 18px 44px;
}

@media (min-width: 768px){
  #hero .hero-panel-area{
    padding: 76px 26px 62px;
  }
}

/* =========================
   4) 外枠（半透明ガラス + 丸角の縦長長方形）
   ========================= */
#hero .hero-panel-area::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: rgba(255,255,255,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* SVGマスクで滑らかな形を作る */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'>\
<path fill='white' d='\
M140,0 \
H340 \
C410,0 455,20 500,62 \
C545,20 590,0 660,0 \
H860 \
C938,0 1000,62 1000,140 \
V340 \
C1000,410 980,455 938,500 \
C980,545 1000,590 1000,660 \
V860 \
C1000,938 938,1000 860,1000 \
H660 \
C590,1000 545,980 500,938 \
C455,980 410,1000 340,1000 \
H140 \
C62,1000 0,938 0,860 \
V660 \
C0,590 20,545 62,500 \
C20,455 0,410 0,340 \
V140 \
C0,62 62,0 140,0 Z'/>\
</svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'>\
<path fill='white' d='\
M140,0 \
H340 \
C410,0 455,20 500,62 \
C545,20 590,0 660,0 \
H860 \
C938,0 1000,62 1000,140 \
V340 \
C1000,410 980,455 938,500 \
C980,545 1000,590 1000,660 \
V860 \
C1000,938 938,1000 860,1000 \
H660 \
C590,1000 545,980 500,938 \
C455,980 410,1000 340,1000 \
H140 \
C62,1000 0,938 0,860 \
V660 \
C0,590 20,545 62,500 \
C20,455 0,410 0,340 \
V140 \
C0,62 62,0 140,0 Z'/>\
</svg>");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
}

/* =========================
   5) タイトル（背景上で読みやすく）
   ========================= */
#hero .hero-title{
  margin: 0 0 18px;
  line-height: 1.25;
  text-shadow: 0 2px 16px rgba(255,255,255,0.85),
               0 0 40px rgba(255,255,255,0.5);
}

#hero .hero-subtitle{
  text-shadow: 0 1px 10px rgba(255,255,255,0.7);
}

#hero .csd-title-badge{
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* =========================
   6) キャラクター
   ========================= */
#hero .characters{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  margin-top: 16px;
}

#hero .character{
  width: 42%;
  max-width: 220px;
}

#hero .character-img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   7) 外枠の外にある案内文・ボタン
   ========================= */
#hero .info-card{
  position: relative;
  z-index: 1;
  margin-top: 24px;
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#hero .text-center.mt-5{
  position: relative;
  z-index: 1;
  margin-top: 24px !important;
}

/* =========================
   8) スマホ調整（背景は固定のまま）
   ========================= */
@media (max-width: 767px){

  body::before{
    background-position: center 20%;
  }

  #hero .hero-panel-area{
    padding: 50px 14px 32px;
    margin-top: -16px;
  }

  #hero .hero-title{
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.3;
  }

  #hero .characters{
    gap: 8px;
    margin-top: 10px;
  }

  #hero .character{
    width: 32%;
    max-width: 108px;
  }

  /* スマホ用：SVGマスクで浅めの滑らかな形に調整 */
  #hero .hero-panel-area::before{
    top: 0;
    bottom: 0;
    left: 8px;
    right: 8px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'>\
<path fill='white' d='\
M120,0 \
H355 \
C425,0 468,16 500,42 \
C532,16 575,0 645,0 \
H880 \
C946,0 1000,54 1000,120 \
V355 \
C1000,425 984,468 958,500 \
C984,532 1000,575 1000,645 \
V880 \
C1000,946 946,1000 880,1000 \
H645 \
C575,1000 532,984 500,958 \
C468,984 425,1000 355,1000 \
H120 \
C54,1000 0,946 0,880 \
V645 \
C0,575 16,532 42,500 \
C16,468 0,425 0,355 \
V120 \
C0,54 54,0 120,0 Z'/>\
</svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'>\
<path fill='white' d='\
M120,0 \
H355 \
C425,0 468,16 500,42 \
C532,16 575,0 645,0 \
H880 \
C946,0 1000,54 1000,120 \
V355 \
C1000,425 984,468 958,500 \
C984,532 1000,575 1000,645 \
V880 \
C1000,946 946,1000 880,1000 \
H645 \
C575,1000 532,984 500,958 \
C468,984 425,1000 355,1000 \
H120 \
C54,1000 0,946 0,880 \
V645 \
C0,575 16,532 42,500 \
C16,468 0,425 0,355 \
V120 \
C0,54 54,0 120,0 Z'/>\
</svg>");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
  }
}