.ew-hero{height:var(--hero-height,100svh);min-height:600px;position:relative;display:block;overflow:hidden;width:100%;box-sizing:border-box;}
/* alignfull のときだけ全幅ブレイクアウト */
.ew-hero.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
/* alignwide */
.ew-hero.alignwide{max-width:1180px;margin-left:auto;margin-right:auto;}
/* 標準（align未設定） */
.ew-hero:not(.alignfull):not(.alignwide){max-width:760px;margin-left:auto;margin-right:auto;}
.ew-hero__bg{position:absolute;inset:0;background:linear-gradient(130deg,var(--ew-cream) 0%,var(--ew-sand) 55%,var(--ew-taupe) 100%);}
.ew-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;}
.ew-hero__img img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.ew-hero__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--ew-cream) 0%,rgba(0,0,0,0) 22%),linear-gradient(to top,rgba(0,0,0,.32) 0%,transparent 52%);}
.ew-hero__content{position:absolute;z-index:2;padding:0 64px 88px;max-width:760px;box-sizing:border-box;width:auto;}
.ew-hero__eyebrow{font-family:var(--ew-font-sans);font-size:10.5px;letter-spacing:.42em;color:var(--ew-accent);text-transform:uppercase;margin-bottom:22px;animation:ew-up .7s ease .15s both;}
.ew-hero__h2{font-family:var(--ew-font-serif);font-size:clamp(34px,4.6vw,56px);font-weight:600;line-height:1.6;letter-spacing:.04em;color:var(--ew-text);margin-bottom:28px;animation:ew-up .8s ease .3s both;}
.ew-hero__h2 em{font-style:normal;color:var(--ew-accent);position:relative;display:inline-block;}
.ew-hero__h2 em::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ew-blush);transform:scaleX(0);transform-origin:left;animation:ew-bar-in .55s ease 1.2s forwards;}
@keyframes ew-bar-in{to{transform:scaleX(1);}}
.ew-hero__sub{font-family:var(--ew-font-sans);font-size:13.5px;color:var(--ew-text-sub);line-height:1.9;letter-spacing:.07em;margin-bottom:44px;animation:ew-up .8s ease .48s both;}
.ew-hero__btns{display:flex;gap:14px;flex-wrap:wrap;animation:ew-up .8s ease .64s both;}
.ew-btn{display:inline-flex;align-items:center;font-family:var(--ew-font-sans);font-size:13px;letter-spacing:.14em;text-decoration:none;border-radius:1px;transition:all .28s ease;}
.ew-btn--fill{background:var(--ew-accent);color:#fff;padding:16px 34px;box-shadow:0 4px 18px rgba(192,122,82,.32);}
.ew-btn--fill:hover{background:var(--ew-accent-dark);transform:translateY(-2px);}
.ew-btn--line{background:transparent;color:var(--ew-text);padding:15px 30px;border:1px solid var(--ew-taupe);}
.ew-btn--line:hover{border-color:var(--ew-accent);color:var(--ew-accent);transform:translateY(-2px);}
.ew-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(--ew-sand);padding:18px 24px;text-align:center;animation:ew-up .8s ease .9s both;}
.ew-hero__badge-num{font-family:var(--ew-font-serif);font-size:36px;font-weight:700;color:var(--ew-text);line-height:1;}
.ew-hero__badge-num span{font-size:16px;color:var(--ew-text-sub);}
.ew-hero__badge-label{font-family:var(--ew-font-sans);font-size:10px;color:var(--ew-text-light);letter-spacing:.2em;margin-top:6px;}
.ew-hero__scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:ew-up .8s ease 1.1s both;}
.ew-hero__scroll span{font-family:var(--ew-font-sans);font-size:9.5px;letter-spacing:.36em;color:var(--ew-text-light);}
.ew-hero__scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--ew-taupe),transparent);animation:ew-pulse 2.2s ease infinite;}
@keyframes ew-up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes ew-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(max-width:600px){
  /* ── スマホ：グリッド縦積みレイアウト ──
     flexではなくgridを使い、全要素をgrid-areaで配置順を強制する
     inline styleのleft/right/top/bottomはgridレイアウトでは無視される */
  .ew-hero {
    --hero-height: auto;
    min-height: 0;
    display: grid !important;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "content"
      "badge";
    overflow: hidden;
  }

  /* grid-areaなし要素をすべて非表示 */
  .ew-hero__bg     { display: none !important; }
  .ew-hero__scroll { display: none !important; }
  .ew-hero__img,
  .ew-hero--mode-full .ew-hero__img {
    grid-area: img;
    position: relative !important;
    /* inline styleのleft/right/top/bottom/clip-pathを上書き */
    left: auto !important; right: auto !important;
    top:  auto !important; bottom: auto !important;
    inset: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 60vw !important;
    min-height: 200px;
    max-height: 360px;
  }
  .ew-hero__img img { object-position: center top; width:100%; height:100%; object-fit:cover; }
  .ew-hero__overlay { display: none !important; }

  /* コンテンツ：grid-areaで2番目に固定 */
  .ew-hero__content {
    grid-area: content;
    position: relative !important;
    left: auto !important; right: auto !important;
    top:  auto !important; bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 24px 32px !important;
    box-sizing: border-box !important;
    background: var(--ew-cream, #FAF7F2);
    text-align: left !important;
    color: var(--ew-text, #332518) !important;
  }
  .ew-hero__eyebrow { color: var(--ew-accent, #C07A52) !important; }
  .ew-hero__h2      { color: var(--ew-text, #332518) !important; font-size: clamp(24px,6vw,36px) !important; }
  .ew-hero__h2 em   { color: var(--ew-accent, #C07A52) !important; }
  .ew-hero__sub     { color: var(--ew-text-sub, #7A6550) !important; }

  /* バッジ */
  .ew-hero__badge {
    grid-area: badge;
    position: relative !important;
    left: auto !important; right: auto !important;
    top:  auto !important; bottom: auto !important;
    inset: auto !important;
    margin: 0 24px 16px;
    padding: 12px 16px;
    display: inline-block;
  }
  .ew-hero__badge-num { font-size: 24px; }

  /* スクロール非表示 */
  /* ew-hero__scroll は上部で display:none 済み */
}

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

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

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

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

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

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

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

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

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