/* ════════════════════════════════
   ew-hero 基本レイアウト
   ════════════════════════════════ */
.ew-hero {
  height: var(--hero-height, 100svh);
  min-height: 600px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* align */
.ew-hero.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.ew-hero.alignwide  { max-width: 1180px; margin-left: auto; margin-right: auto; }
.ew-hero:not(.alignfull):not(.alignwide) { max-width: 760px; margin-left: auto; margin-right: auto; }

/* アスペクト比クラス（PCのみ有効・SP側でリセット） */
.ew-hero--aspect-16-9  { aspect-ratio: 16/9;  height: auto; min-height: 0; }
.ew-hero--aspect-4-3   { aspect-ratio: 4/3;   height: auto; min-height: 0; }
.ew-hero--aspect-3-2   { aspect-ratio: 3/2;   height: auto; min-height: 0; }
.ew-hero--aspect-1-1   { aspect-ratio: 1/1;   height: auto; min-height: 0; }
.ew-hero--aspect-custom {
  aspect-ratio: var(--hero-aspect-w, 16) / var(--hero-aspect-h, 9);
  height: auto;
  min-height: 0;
}

/* 背景 */
.ew-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, var(--ew-cream) 0%, var(--ew-sand) 55%, var(--ew-taupe) 100%);
}

/* 画像（clipモード） */
.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;
  /* デフォルト位置：左下 */
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
  transform: none;
}

/* テキスト要素 */
.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-taupe); 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; } }

/* ════════════════════════════════
   コンテンツ位置制御（CSS変数で制御）
   ════════════════════════════════ */
.ew-hero[style*="--hero-valign:top"] .ew-hero__content,
.ew-hero[style*="--hero-valign: top"] .ew-hero__content      { top: 0; bottom: auto; transform: none; }
.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: none; }

.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%); }
.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; width: 100%; height: 100%; clip-path: none; }
.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); }

/* ════════════════════════════════
   SP（600px以下）
   画像全面 + コンテンツ重ね表示
   ════════════════════════════════ */
@media (max-width: 600px) {

  /* アスペクト比クラスをリセットして全高に戻す */
  .ew-hero,
  .ew-hero--aspect-16-9,
  .ew-hero--aspect-4-3,
  .ew-hero--aspect-3-2,
  .ew-hero--aspect-1-1,
  .ew-hero--aspect-custom {
    aspect-ratio: unset !important;
    height: 100svh;
    min-height: 500px;
  }

  /* 背景グラデーション不要 */
  .ew-hero__bg { display: none; }

  /* 画像を全面に */
  .ew-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
  }

  /* オーバーレイ：下を暗くしてテキストを読みやすく */
  .ew-hero__img::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.6) 100%
    );
  }

  /* コンテンツを左下に固定 */
  .ew-hero__content {
    position: absolute;
    inset: auto 0 80px 0;
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    transform: none;
  }

  /* テキスト色：白 + shadow で可読性確保 */
  .ew-hero__eyebrow {
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ew-hero__h2 {
    color: #fff;
    font-size: clamp(24px, 7vw, 36px);
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ew-hero__h2 em {
    color: #fff;
  }
  .ew-hero__sub {
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ew-hero__btns {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ew-hero__content .ew-btn--line {
    color: #fff;
    border-color: rgba(255,255,255,.7);
  }

  /* バッジ：右下に小さく */
  .ew-hero__badge {
    bottom: 16px;
    right: 16px;
    animation: none;
    opacity: 1;
    transform: none;
    padding: 10px 14px;
  }
  .ew-hero__badge-num { font-size: 22px; }

  /* スクロールインジケーター非表示 */
  .ew-hero__scroll { display: none; }

  /* スクロールインジケーター非表示済み */
}