/* hero-fullbleed-center-overlay — 全面写真 + スクリム + 中央テキスト（リデザイン v4）
 * ★スクリムは common.css の .hero-overlay を使う(契約C5/C9 の対象クラス)。
 *   独自クラスで作り直すとスクリム検査に引っかからず、可読性の担保が効かなくなる。
 * ★写真の上のテキストは #fff 固定でよい(common.css .hero-content と同じ扱い)。
 *   写真の明るさは案件ごとに変わるため、スクリムで下地を作ってから白を乗せる。
 *
 * v4 リデザイン方針:
 *  - スクリムを「重厚な劇場のカーテンが開く」ような、上下非対称の深い陰影構成に刷新。
 *    左右の縦グラデーション(額縁)+中心へ向かう放射状の光量調整で、視線を自然に中央へ導く。
 *  - ブランドカラー(primary/secondary)を隅々に極薄で滲ませ、単色の黒幕から
 *    「温度のある夜」を感じさせるトーンへ。
 *  - コンテンツカードはガラスモーフィズムを強化し、上部に金線のようなアクセントラインを追加。
 *  - 見出しに縦のアクセントバー+エンブレムを配置し、ブランドの格式を表現。
 *  - CTAは光の反射(シマー)を強めたプライマリボタン+繊細なゴーストボタンの2構成。
 *  - スクロールインジケーターをドット+ラベルの組み合わせに変更。
 */

.hero-fullbleed-center-overlay {
  position: relative;
  min-height: min(94vh, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-fullbleed-center-overlay__media {
  position: absolute;
  inset: 0;
}

.hero-fullbleed-center-overlay__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* ゆっくりとした呼吸のようなズーム。派手さより「生きている」感を出す */
  animation: hero-fullbleed-center-overlay-kenburns 24s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.03);
}

@keyframes hero-fullbleed-center-overlay-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-0.5%, -0.5%); }
}

/* ── スクリム v4: 劇場のカーテンが開くような、額縁+放射状の光量調整 ──
   ★クラスは変更しない(契約C5/C9対象)。background/疑似要素の重ね合わせのみ変更。
   構成:
   1) 中心を明るく残す放射グラデーション(視線誘導・被写体を活かす)
   2) 上下の深い陰影(シネマスコープ・可読性の下地)
   3) 左右の額縁のような縦グラデーション(劇場のカーテン効果)
   4) 隅にブランドカラーを極薄で滲ませる(温度感) */
.hero-fullbleed-center-overlay .hero-overlay {
  position: absolute;
  z-index: 1;
  /* v5 リデザイン: 右下のテキストエリア(.hero-kw)を確実に暗化しつつ、
     ブランドカラー(primary/secondary)を極薄で滲ませて「温度のある夜」を演出。
     左上〜中央は写真が見えるクリアな領域として残し、奥行きのある額縁効果を追加。 */
  background:
    /* 1) 右下: テキストの可読性を確保する深い暗部(最重要) */
    radial-gradient(ellipse 100% 85% at 100% 100%, rgba(4,2,2,0.90) 0%, rgba(4,2,2,0.62) 30%, rgba(4,2,2,0.28) 52%, rgba(4,2,2,0) 74%),
    /* 2) 下部全体を舞台の底のように沈める帯 */
    linear-gradient(0deg, rgba(6,3,2,0.72) 0%, rgba(6,3,2,0.34) 24%, rgba(6,3,2,0) 48%),
    /* 3) 右側の縦の陰影(額縁の右柱) */
    linear-gradient(265deg, rgba(6,3,2,0.46) 0%, rgba(6,3,2,0) 36%),
    /* 4) secondary(赤)を右下の隅にごく薄く滲ませ、温度感を追加 */
    radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, var(--color-secondary) 30%, transparent) 0%, transparent 70%),
    /* 5) primary(茶)を左上にごく薄く乗せ、写真全体に統一感を持たせる */
    radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 65%),
    /* 6) 上部の極薄な暗部(ヘッダーとの境界を馴染ませる) */
    linear-gradient(180deg, rgba(4,2,2,0.28) 0%, rgba(4,2,2,0) 22%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-center-overlay .hero-overlay::before { animation: none; opacity: 0.4; }
}

/* コンテンツ全体は必ず表示・前面に出す(スクリムより手前)。
   v6: 右寄せ+すりガラス調カードへリデザイン。写真は左〜中央に見せたまま、
   コピー欄を右側の縦長カードへ集約する。 */
.hero-fullbleed-center-overlay {
  align-items: flex-end;
}

.hero-fullbleed-center-overlay__content {
  position: relative;
  isolation: isolate;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 460px;
  margin: auto clamp(16px, 5vw, 64px) clamp(28px, 5vw, 64px) auto;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 44px);
  text-align: left;
  border-radius: calc(var(--radius-card) * 1.4);
  color: #fff;
}

.hero-fullbleed-center-overlay__content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.07) 55%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 45%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 100% 100%, #000 45%, transparent 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}

.hero-fullbleed-center-overlay__emblem { max-width: none; width: 100%; }

.hero-fullbleed-center-overlay__actions { justify-content: flex-start; }

/* サブコピー(リード文)。他の .hero-kw__lead 定義より後に置き、確実に可視化する */
.hero-fullbleed-center-overlay__content .hero-fullbleed-center-overlay__lead {
  display: block;
  visibility: visible;
  opacity: 1;
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: rgba(255,255,255,0.94);
  margin: 0;
  max-width: 42ch;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

@media (max-width: 768px) {
  .hero-fullbleed-center-overlay__content {
    max-width: 100%;
    margin: 0 clamp(12px, 4vw, 20px);
    align-items: center;
    text-align: center;
  }
  .hero-fullbleed-center-overlay__content .hero-fullbleed-center-overlay__lead { text-align: center; margin: 0 auto; }
  .hero-fullbleed-center-overlay__actions { justify-content: center; }
}

/* 極細のビネット枠(額縁のような没入感) */
.hero-fullbleed-center-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 min(16vw, 180px) rgba(0,0,0,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-center-overlay__media img { animation: none; }
}

/* ── 縦書きコピー構成 (山形さんサロン風): 右側に縦組みの見出し・リード・CTAを配置 ──
   写真を全面に見せたまま、日本語の縦書き(writing-mode: vertical-rl)で
   ブランドコピーを"書"のように置く。中央カードは廃止し、右寄せの2ブロック構成に。 */
.hero-fullbleed-center-overlay__vertical-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  height: 100%;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 96px) clamp(48px, 7vw, 96px);
  animation: hero-fullbleed-center-overlay-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes hero-fullbleed-center-overlay-rise {
  from { transform: translateY(20px); opacity: 0.001; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-center-overlay__vertical-wrap { animation: none; opacity: 1; }
}

.hero-fullbleed-center-overlay__vtitle-group {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  color: #fff;
}

.hero-fullbleed-center-overlay__veyebrow {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.75);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.hero-fullbleed-center-overlay__vtitle {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.7;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding-right: 22px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
}

/* 見出し右側に一本の縦アクセントライン(掛け軸のような表装) */
.hero-fullbleed-center-overlay__vtitle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--color-secondary) 65%, #fff) 50%,
    transparent);
  opacity: 0.9;
}

.hero-fullbleed-center-overlay__vlead-group {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 22px;
  height: 100%;
  padding-bottom: 4px;
}

.hero-fullbleed-center-overlay__vlead {
  font-size: 0.94rem;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
=======REMOVED_DUPLICATE_MARKER_UNUSED2

/* エンブレム風の飾り: 見出し上部に細い横線+中央の小さなダイヤモンド(二重) */
.hero-fullbleed-center-overlay__emblem {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  color: rgba(255,255,255,0.85);
}
.hero-fullbleed-center-overlay__emblem::before,
.hero-fullbleed-center-overlay__emblem::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55));
}
.hero-fullbleed-center-overlay__emblem::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.55), transparent);
}
.hero-fullbleed-center-overlay__emblem-mark {
  flex: 0 0 auto;
  position: relative;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--color-secondary, #9e2c24);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 0 18px color-mix(in srgb, var(--color-secondary) 60%, transparent);
}
.hero-fullbleed-center-overlay__emblem-mark::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(255,255,255,0.35);
  transform: rotate(45deg);
}

.hero-fullbleed-center-overlay__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

/* 見出し: 縦のアクセントバーを左に添え、格式を演出 */
.hero-fullbleed-center-overlay__heading {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--fs-hero-lg);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0;
  padding-top: 6px;
  text-shadow: 0 3px 28px rgba(0,0,0,0.4);
}

.hero-fullbleed-center-overlay__light { font-weight: 300; opacity: 0.92; }

.hero-fullbleed-center-overlay__lead {
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 48ch;
}

/* CTA群を横並びに: メインは塗り+シマー、サブはガラス調アウトライン */
.hero-fullbleed-center-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.hero-fullbleed-center-overlay__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 48px;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 75%, #000) 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 16px 38px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: var(--transition);
  overflow: hidden;
}
.hero-fullbleed-center-overlay__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.75s ease;
}
.hero-fullbleed-center-overlay__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.1) inset;
  opacity: 1;
}
.hero-fullbleed-center-overlay__cta:hover::before {
  transform: translateX(130%);
}

/* 縦書きレイアウト内のCTAは横書きのまま、リードの隣に立てて置く */
.hero-fullbleed-center-overlay__cta--vertical {
  writing-mode: horizontal-tb;
  padding: 14px 20px;
  white-space: nowrap;
}

/* スクロール誘導インジケーター: ドット+ラベル */
.hero-fullbleed-center-overlay__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.2vw, 36px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  pointer-events: none;
}
.hero-fullbleed-center-overlay__scroll-bar {
  position: relative;
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.hero-fullbleed-center-overlay__scroll-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.95), transparent);
  animation: hero-fullbleed-center-overlay-scrollpulse 2.2s ease-in-out infinite;
}
@keyframes hero-fullbleed-center-overlay-scrollpulse {
  0% { top: -100%; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-center-overlay__scroll-bar::after { animation: none; top: 0; }
}

@media (max-width: 768px) {
  .hero-fullbleed-center-overlay { min-height: min(88vh, 640px); }
  .hero-fullbleed-center-overlay__scroll { display: none; }
}

/* ── ko-wafix.com 風: 左下に構える、横書きミニマル構成 ──
   縦書きカードを廃し、控えめなエンブレム罫+ラベル+大見出し+細い一本の罫+
   リード+アウトラインCTAという「凛とした余白」の構成に変更。
   写真は既存の .hero-overlay(薄いスクリム)のまま、テキストは左下基点。 */
.hero-kw {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 640px;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 96px) clamp(48px, 7vw, 96px);
  animation: hero-kw-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  isolation: isolate;
}
/* すりガラス面(薄め)は疑似要素として文字の背後に配置し、マスクによるぼかしは
   この面だけに掛ける。こうすることでテキスト(直下の子要素)はマスクの影響を受けず
   常にくっきり表示される。 */
.hero-kw::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, rgba(20,14,10,0.22) 0%, rgba(20,14,10,0.12) 55%, rgba(20,14,10,0.05) 100%);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-top-left-radius: calc(var(--radius-card) * 1.3);
  /* 縁をフェードさせ、ガラス面と背景写真の境界線を無くす(四辺とも内側へ滲むようにマスク) */
  -webkit-mask-image: linear-gradient(155deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%),
    radial-gradient(120% 120% at 100% 100%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(155deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%),
    radial-gradient(120% 120% at 100% 100%, #000 55%, transparent 100%);
  mask-composite: intersect;
}
=======REMOVED_UNUSED

@keyframes hero-kw-rise {
  from { transform: translateY(24px); opacity: 0.001; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kw { animation: none; opacity: 1; }
}

/* エンブレム的な小さな飾り罫(ひし形+左右の線) */
.hero-kw__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 180px;
  margin-bottom: 22px;
}
.hero-kw__mark::before {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), transparent);
}
.hero-kw__mark span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--color-secondary, #9e2c24);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}

.hero-kw__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0 0 18px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}

.hero-kw__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  line-height: 1.35;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5);
}

/* 見出しとリードを分ける、一本の細い罫(余白を効かせる) */
.hero-kw__divider {
  width: 64px;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-secondary) 70%, #fff),
    transparent);
  opacity: 0.9;
}

.hero-kw__lead {
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.92);
  margin: 0 0 32px;
  max-width: 42ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

.hero-kw__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: var(--transition);
}
.hero-kw__cta::after {
  content: '\2192';
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}
.hero-kw__cta:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}
.hero-kw__cta:hover::after {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .hero-kw { padding: 26px 18px 40px; max-width: 100%; }
  .hero-kw__title { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  .hero-kw__lead { font-size: 0.9rem; line-height: 1.85; }
  .hero-kw__mark { margin-bottom: 16px; }
  .hero-kw__divider { margin: 20px 0; }
  .hero-kw__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}