/* ===============================
   Hero: 固定オーバーレイ + 背景フェード
   =============================== */
.hero-fade{
  /* 可変パラメータ */
  --hero-h: clamp(260px, 60vh, 660px); /* セクション高さ */
  --fade: 2400ms;                       /* フェード時間 */
  --interval: 6000ms;                  /* 切替間隔 */
  --overlay-pad: clamp(16px, 4vw, 36px);
  --title-size: 30px;                  /* ← ご指定サイズ */
  --copy-size: clamp(14px, 2.2vw, 18px);
  --tint: 51, 0, 0;                     /* 色ベールの色 (R,G,B) */
  --tint-alpha: .5;                   /* 色ベールの濃さ (0〜1) */

  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  color: #fff;
  background: #000;
  margin-bottom: 1px;
}

/* 背景レイヤ（画像のみが切り替わる） */
.hero-bg{
  position: absolute;
  inset: 0;
}
.hero-bg .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 画像全体をカバー。全体表示なら contain */
  opacity: 0;
  transition: opacity var(--fade) linear;
  filter: contrast(1.05) saturate(1.02);
  z-index: 0;
}
.hero-bg .bg.is-active{ opacity: 1; }

/* 色ベール（画像の上・テキストの下） */
.hero-tint{
  position: absolute;
  inset: 0;
  background: rgba(var(--tint), var(--tint-alpha));
  pointer-events: none;
  z-index: 2;
}
/* 乗算を使いたい場合：.hero-fade に is-multiply を付与 */
.hero-fade.is-multiply .hero-tint{ mix-blend-mode: multiply; }

/* 端の暗幕（任意。不要なら削除可） */
.hero-fade::before,
.hero-fade::after{
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.hero-fade::before{
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.hero-fade::after{
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* ===============================
   固定オーバーレイ（中央寄せ・やや上）
   =============================== */
.hero-fixed-overlay{
  position: absolute;
  top: 55%;                     /* 50%が真ん中。45%で少し上 */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: grid;
  gap: 16px;
  max-width: min(92%, z00px);
  background: none;             /* 半透明背景が不要なら none */
  padding: 0;
  z-index: 3;
}

/* 見出し（ご指定フォントとサイズ/行間） */
.hero-title{
  margin: 0;
  font-family: 'Noto Serif JP', serif;  /* ← ご指定 */
  font-size: var(--title-size);         /* 30px */
  line-height: 1.8;                     /* ← ご指定 */
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  letter-spacing: .01em;
}

/* （任意）スマホで少し小さくしたい場合 */
@media (max-width: 480px){
	
	
  .hero-title{
  	font-size: 18px;
  }
  .hero-fixed-overlay{
	width: 100%;  
	}

  
}


/* 説明文を使う場合（任意） */
.hero-copy{
  margin: 0 0 6px 0;
  font-size: var(--copy-size);
  line-height: 1.6;
}

/* ===============================
   CTAボタン（中央横並び）
   =============================== */
/* ボタンを円形に（直径180px）、中央に文字を配置 */
.hero-ctas{
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn.primary{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fc864c;   /* ご指定カラー */
  color: #fff;           /* ご指定カラー */
  border: none;
  display: flex;         /* 円の中央に文字を配置 */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;            /* 円にフィットさせる */
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;      /* 2行になっても読みやすく */
  transition: opacity .15s ease, transform .15s ease;
  word-break: normal;
}
.btn.primary:hover{ opacity: .7; transform: translateY(0px); }
.btn.primary:active{ transform: translateY(0); }

/* （任意）スマホで少し小さくしたい場合 */
@media (max-width: 480px){

	.hero-ctas{
	  display: flex;
	  justify-content: center;
	  gap: 12px;
	  flex-wrap: wrap;
	  margin-top: 30px;
	}
	
  .btn.primary{
    width: 81px;
    height: 81px;
  }
  
  
}


/* ===============================
   モバイル微調整
   =============================== */
@media (max-width: 480px){
  .hero-fixed-overlay{
    top: 48%;                 /* モバイルではやや下げる（お好みで） */
  }
  .btn.primary,
  .btn.ghost{
    padding: 11px 14px;
  }
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce){
  .hero-bg .bg{ transition: none !important; }
}



/* 初期は非表示（レイアウトは確保）→ JSで外すとフェードイン */
.hero-fade {
  transition: opacity 160ms linear;
}
.hero-fade.prehero {
  opacity: 0;
  visibility: hidden;  /* クリック無効。レイアウトは維持される */
}

/* 動きを控える設定の人には瞬時表示（任意） */
@media (prefers-reduced-motion: reduce) {
  .hero-fade { transition: none; }
}

/* ===============================
   初回“コンテナだけ”ふわっと表示（prehero）
   =============================== */
.hero-fade { transition: opacity 160ms linear; }
.hero-fade.prehero { opacity: 0; visibility: hidden; }

/* 初回はスライドのフェードを無効化（= パッと出す） */
.hero-fade.prehero .hero-bg .bg {
  transition: none !important;
  opacity: 0;
}
.hero-fade.prehero .hero-bg .bg.is-active { opacity: 1; }

/* 通常のスライド切替フェードは変数で一元管理 */
.hero-bg .bg { opacity: 0; transition: opacity var(--fade) linear; }
.hero-bg .bg.is-active { opacity: 1; }

/* 動きを控える設定を尊重 */
@media (prefers-reduced-motion: reduce){
  .hero-fade { transition: none; }
  .hero-bg .bg { transition: none !important; }
}