.pb-hero{height:var(--hero-height,100svh);min-height:600px;position:relative;display:block;overflow:hidden;width:100%;box-sizing:border-box;}
/* alignfull のときだけ全幅ブレイクアウト */
.pb-hero.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
/* alignwide */
.pb-hero.alignwide{max-width:1180px;margin-left:auto;margin-right:auto;}
/* 標準（align未設定） */
.pb-hero:not(.alignfull):not(.alignwide){max-width:760px;margin-left:auto;margin-right:auto;}
.pb-hero__bg{position:absolute;inset:0;background:linear-gradient(130deg,var(--pb-cream) 0%,var(--pb-sand) 55%,var(--pb-taupe) 100%);}
.pb-hero__img{position:absolute;right:0;top:0;width:60%;height:100%;clip-path:polygon(6% 0%,100% 0%,100% 100%,0% 100%);overflow:hidden;}
.pb-hero__img img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.pb-hero__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--pb-cream) 0%,rgba(0,0,0,0) 22%),linear-gradient(to top,rgba(0,0,0,.32) 0%,transparent 52%);}
.pb-hero__content{position:absolute;z-index:2;padding:0 64px 88px;max-width:760px;box-sizing:border-box;width:auto;}
.pb-hero__eyebrow{font-family:var(--pb-font-sans);font-size:10.5px;letter-spacing:.42em;color:var(--pb-accent);text-transform:uppercase;margin-bottom:22px;animation:pb-up .7s ease .15s both;}
.pb-hero__h2{font-family:var(--pb-font-serif);font-size:clamp(34px,4.6vw,56px);font-weight:600;line-height:1.6;letter-spacing:.04em;color:var(--pb-text);margin-bottom:28px;animation:pb-up .8s ease .3s both;}
.pb-hero__h2 em{font-style:normal;color:var(--pb-accent);position:relative;display:inline-block;}
.pb-hero__h2 em::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--pb-blush);transform:scaleX(0);transform-origin:left;animation:pb-bar-in .55s ease 1.2s forwards;}
@keyframes pb-bar-in{to{transform:scaleX(1);}}
.pb-hero__sub{font-family:var(--pb-font-sans);font-size:13.5px;color:var(--pb-text-sub);line-height:1.9;letter-spacing:.07em;margin-bottom:44px;animation:pb-up .8s ease .48s both;}
.pb-hero__btns{display:flex;gap:14px;flex-wrap:wrap;animation:pb-up .8s ease .64s both;}
.pb-btn{display:inline-flex;align-items:center;font-family:var(--pb-font-sans);font-size:13px;letter-spacing:.14em;text-decoration:none;border-radius:1px;transition:all .28s ease;}
.pb-btn--fill{background:var(--pb-accent);color:#fff;padding:16px 34px;box-shadow:0 4px 18px rgba(192,122,82,.32);}
.pb-btn--fill:hover{background:var(--pb-accent-dark);transform:translateY(-2px);}
.pb-btn--line{background:transparent;color:var(--pb-text);padding:15px 30px;border:1px solid var(--pb-taupe);}
.pb-btn--line:hover{border-color:var(--pb-accent);color:var(--pb-accent);transform:translateY(-2px);}
.pb-hero__badge{position:absolute;bottom:88px;right:64px;z-index:3;background:rgba(250,247,242,.92);backdrop-filter:blur(10px);border:1px solid var(--pb-sand);padding:18px 24px;text-align:center;animation:pb-up .8s ease .9s both;}
.pb-hero__badge-num{font-family:var(--pb-font-serif);font-size:36px;font-weight:700;color:var(--pb-text);line-height:1;}
.pb-hero__badge-num span{font-size:16px;color:var(--pb-text-sub);}
.pb-hero__badge-label{font-family:var(--pb-font-sans);font-size:10px;color:var(--pb-text-light);letter-spacing:.2em;margin-top:6px;}
.pb-hero__scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:pb-up .8s ease 1.1s both;}
.pb-hero__scroll span{font-family:var(--pb-font-sans);font-size:9.5px;letter-spacing:.36em;color:var(--pb-text-light);}
.pb-hero__scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--pb-taupe),transparent);animation:pb-pulse 2.2s ease infinite;}
@keyframes pb-up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes pb-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(max-width:600px){
  /* ── スマホ：縦積みレイアウト ── */
  /* height をCSS変数経由で auto に上書き（inline styleに勝てるよう変数で制御） */
  .pb-hero { --hero-height: auto; min-height: 0; display: flex; flex-direction: column; }

  /* 画像：上部に相対配置で表示 */
  .pb-hero__img,
  .pb-hero--mode-full .pb-hero__img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 56vw !important;
    min-height: 220px;
    max-height: 380px;
    clip-path: none !important;
    opacity: 1 !important;
    flex-shrink: 0;
  }
  .pb-hero__img img { object-position: center top; }
  .pb-hero__overlay { display: none; }

  /* コンテンツ：画像の直下に通常フローで表示 */
  .pb-hero__content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    padding: 28px 24px 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    background: var(--pb-cream, #FAF7F2);
    text-align: left !important;
    color: var(--pb-text, #332518) !important;
  }
  /* 全面背景モードのテキスト色をデフォルトに戻す */
  .pb-hero--mode-full .pb-hero__eyebrow { color: var(--pb-accent, #C07A52) !important; }
  .pb-hero--mode-full .pb-hero__h2      { color: var(--pb-text, #332518) !important; }
  .pb-hero--mode-full .pb-hero__h2 em   { color: var(--pb-accent, #C07A52) !important; }
  .pb-hero--mode-full .pb-hero__sub     { color: var(--pb-text-sub, #7A6550) !important; }

  /* バッジ・スクロール・背景 */
  .pb-hero__badge {
    position: relative !important;
    bottom: auto !important; right: auto !important;
    margin: 0 24px 24px;
    padding: 12px 16px;
    display: inline-block;
  }
  .pb-hero__badge-num { font-size: 26px; }
  .pb-hero__scroll    { display: none; }
  .pb-hero__bg        { display: none; }
}

/* ════════════════════════════════
   コンテンツ位置制御（absolute配置）
   --hero-valign : top | center | bottom  （縦位置）
   --hero-halign : left | center | right  （横位置）
   render.php から CSS変数として渡す
   ════════════════════════════════ */

/* デフォルト：左下 */
.pb-hero__content {
  bottom: 0;
  left:   0;
  right:  auto;
  top:    auto;
  transform: none;
}

/* ── 縦位置 ── */
.pb-hero[style*="--hero-valign:top"] .pb-hero__content,
.pb-hero[style*="--hero-valign: top"] .pb-hero__content {
  top: 0; bottom: auto; transform: translateY(0);
}
.pb-hero[style*="--hero-valign:center"] .pb-hero__content,
.pb-hero[style*="--hero-valign: center"] .pb-hero__content {
  top: 50%; bottom: auto; transform: translateY(-50%);
}
.pb-hero[style*="--hero-valign:bottom"] .pb-hero__content,
.pb-hero[style*="--hero-valign: bottom"] .pb-hero__content {
  bottom: 0; top: auto; transform: translateY(0);
}

/* ── 横位置 ── */
.pb-hero[style*="--hero-halign:center"] .pb-hero__content,
.pb-hero[style*="--hero-halign: center"] .pb-hero__content {
  left: 50%; right: auto;
  max-width: 100%;
  transform: translateX(-50%);
}
/* 縦と横が両方centerのとき */
.pb-hero[style*="--hero-valign:center"][style*="--hero-halign:center"] .pb-hero__content,
.pb-hero[style*="--hero-valign: center"][style*="--hero-halign: center"] .pb-hero__content {
  top: 50%; left: 50%; bottom: auto; right: auto;
  transform: translate(-50%, -50%);
}
.pb-hero[style*="--hero-halign:right"] .pb-hero__content,
.pb-hero[style*="--hero-halign: right"] .pb-hero__content {
  left: auto; right: 0;
}

/* テキスト揃えに連動してボタン群も揃える */
.pb-hero__content[style*="text-align:center"] .pb-hero__btns,
.pb-hero__content[style*="text-align: center"] .pb-hero__btns { justify-content: center; }
.pb-hero__content[style*="text-align:right"] .pb-hero__btns,
.pb-hero__content[style*="text-align: right"] .pb-hero__btns  { justify-content: flex-end; }

/* ════════════════════════════════
   全面背景モード（imageMode: full）
   ════════════════════════════════ */
.pb-hero--mode-full .pb-hero__bg { display: none; }

.pb-hero--mode-full .pb-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  clip-path: none !important;
}
.pb-hero--mode-full .pb-hero__img::after { display: none; }
.pb-hero--mode-full .pb-hero__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.pb-hero__overlay {
  position: absolute; inset: 0;
  background: #000; pointer-events: none;
}

/* 全面背景時のデフォルトテキスト色 */
.pb-hero--mode-full .pb-hero__eyebrow { color: rgba(255,255,255,.75); }
.pb-hero--mode-full .pb-hero__h2      { color: #fff; }
.pb-hero--mode-full .pb-hero__h2 em   { color: #fff; }
.pb-hero--mode-full .pb-hero__sub     { color: rgba(255,255,255,.82); }
.pb-hero--mode-full .pb-hero__badge {
  background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.25);
}
.pb-hero--mode-full .pb-hero__badge-num      { color: #fff; }
.pb-hero--mode-full .pb-hero__badge-num span { color: rgba(255,255,255,.7); }
.pb-hero--mode-full .pb-hero__badge-label    { color: rgba(255,255,255,.55); }
.pb-hero--mode-full .pb-hero__scroll span    { color: rgba(255,255,255,.5); }
.pb-hero--mode-full .pb-hero__scroll-bar     { background: linear-gradient(to bottom,rgba(255,255,255,.4),transparent); }

@media (max-width: 600px) {
  .pb-hero__content { padding: 0 24px 72px; max-width: 100%; }
}