@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');

/* =========================================================================
   monocosmelab  /shop_redesign1/  ヒーロー（Cover ブロック）スタイル
   -------------------------------------------------------------------------
   多摩の森ヒノキのキービジュアルを背景にした Cover ブロック用。
   背景画像・オーバーレイ濃度は Cover ブロックの編集UIで設定するため、
   本CSSは「内側の見出し・タグラインのタイポgrafィと余白」のみを担当する。

   ◆ 適用方法
     子テーマ custom.css（または追加CSS）の末尾に追記。
     全セレクタを .page-id-2784 配下にスコープ（page-id方式）。

   ◆ 前提
     Cover ブロックに「追加CSSクラス = shop-hero-cover」を付与。
     旧グラデの .shop-hero グループは削除して置き換える想定
     （旧 .shop-hero* ルールは未使用化するので後日クリーンアップ可）。

   ◆ 配色
     オーバーレイ前提でテキストは白/ベージュ。--kage-* 変数は
     B-7（shop_redesign1_product_cards.css）の .page-id-2784 定義を再利用。
   ========================================================================= */

/* Cover 全体の最小高さ（編集UIの「最小の高さ」未設定でも担保） */
.page-id-2784 .shop-hero-cover {
  min-height: 600px;
}

/* 内側コンテナを中央寄せ */
.page-id-2784 .shop-hero-cover .wp-block-cover__inner-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

/* 主見出し（例: 多摩の森の、香りのはじまり）— 明朝・白・やわらかい影 */
.page-id-2784 .shop-hero-title {
  font-family: var(--kage-serif, "Noto Serif JP", "游明朝", "YuMincho", serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.55;
  letter-spacing: .12em;
  color: #FFFFFF;
  margin: 0 0 .8rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* 英タグライン（AROMA THAT SOFTENS THE MIND）— サンセリフ・広い字間 */
.page-id-2784 .shop-hero-tagline {
  font-family: var(--kage-sans, "Montserrat", "Lato", sans-serif);
  font-weight: 300;
  font-size: clamp(.72rem, 2vw, 1rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #FEF5EE;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* 和文サブ（任意・薬機法セーフ：例「香りで、心にひと呼吸を。」） */
.page-id-2784 .shop-hero-sub {
  font-family: var(--kage-serif, "Noto Serif JP", "游明朝", serif);
  font-size: clamp(.85rem, 2.2vw, 1rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: #FFFFFF;
  margin: 1rem 0 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* タグラインの上に細い区切り線を入れたい場合（任意） */
.page-id-2784 .shop-hero-tagline::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(254, 245, 238, .7);
  margin: 0 auto 1rem;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .page-id-2784 .shop-hero-cover {
    min-height: 440px;
  }
  .page-id-2784 .shop-hero-title {
    letter-spacing: .08em;
  }
}

/* =========================================================================
   ヒーロー見出しの alignfull を CSS で打ち消す
   -------------------------------------------------------------------------
   見出し「嗅いで休息を。」に alignfull クラスが付いているが、Cover 内では
   ツールバーから幅制御を解除できない（＆HTML編集はブロック検証エラー）。
   ブロックを触らずに、コンテンツ幅で中央寄せに戻して「余白を無視した全幅伸び」を防ぐ。
   ※ タイポ(色/サイズ)は上の .shop-hero-title ルールがそのまま効く。
   ========================================================================= */
.page-id-2784 .shop-hero-cover h1.shop-hero-title.alignfull,
.page-id-2784 .shop-hero-cover .wp-block-cover__inner-container > h1.shop-hero-title.alignfull {
  max-width: var(--wp--style--global--content-size, 640px) !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================================
   B-12 ヒーロースライダー（MetaSlider）の表示方針
   -------------------------------------------------------------------------
   画像は 1536×1024（3:2）。object-fit:cover は「枠を埋める」ため、枠が画像より
   横長だと上下が、縦長だと左右が切れる。MetaSlider は本来データ比(1536:1024)で
   フル表示するが、以前は height:900px;cover で上書きしてPCの上下を切っていた。
   ・PC（既定 / ≥601px）：枠を画像と同じ 3:2 に保ち【上下も左右も切らずフル表示】。
     横長すぎる画面（>1350px）では中央寄せにし、両脇は親(.entry-content)の
     base 背景＝ベージュで埋まる。最大高さは 1350 / 1.5 ≒ 900px。
   ・モバイル（≤600px）：従来どおり全幅(100vw)＋高さ固定の cover で左右をトリミング
     （縦構図で美しく収まる見え方を維持）。
   ※ .metaslider クラス指定なのでスライドショーIDが変わっても効く。
   ========================================================================= */

/* --- PC（既定）：3:2 の枠で画像フル表示・最大幅で中央寄せ（両脇はベージュ余白）--- */
.page-id-2784 .metaslider {
  width: 100% !important;
  max-width: 1350px !important;            /* 3:2 で高さ最大 ≒900px。広い画面では中央寄せ */
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-id-2784 .metaslider .slides img {
  width: 100%;
  height: auto;                            /* 高さは幅に追従＝クロップしない */
  aspect-ratio: 1536 / 1024;               /* 画像と同比率（3:2）なので上下左右切れない */
  object-fit: cover;
  display: block;
}

/* --- モバイル（≤600px）：全幅＋高さ固定で左右クロップ（従来の見え方を維持）--- */
@media (max-width: 600px) {
  .page-id-2784 .metaslider {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .page-id-2784 .metaslider .slides img {
    height: 440px;
    aspect-ratio: auto;                     /* 固定高さに戻す（左右クロップ）*/
  }
}

/* =========================================================================
   B-12 ヒーロー 1枚目キャプション「嗅いで休息を。」の調整
   -------------------------------------------------------------------------
   MetaSlider「Simply Dark」テーマが以下を当てているのを上書きする：
     .caption-wrap { background: rgba(0,0,0,0.7) }      ← 黒オーバーレイ70%
     .caption-wrap .caption { font-family: Arial,... }  ← 素っ気ないsans
   page-id+metaslider で特異度を上げているため !important なしで勝てる。
   ========================================================================= */

/* ① 帯の色＝やわらかいウォームブラウン（KAGU&EASEトーン）
   暗くて黒っぽく見えていたので、暖かみのある茶色に振り柔らかい印象に。
   もっと明るく＝末尾の 0.42 を小さく（例 0.32）／濃く＝大きく。
   色みを変える＝rgb の 124,92,66（栗茶 ≒ #7C5C42）を調整。 */
.page-id-2784 .metaslider .caption-wrap {
  background: rgba(124, 92, 66, 0.42);
  /* 縦パディングを広げて窮屈さを解消（数値を増減で調整可） */
  padding-top: 1.6em;
  padding-bottom: 1.6em;
}

/* ② フォントを細く上品な明朝（Noto Serif JP ExtraLight / weight 200）に。
   文字色は白に近い薄グレー。最も細いヘアライン明朝で、端正で現代的な印象。 */
.page-id-2784 .metaslider .caption-wrap .caption,
.page-id-2784 .metaslider .caption-wrap .caption * {
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  font-weight: 200;
  letter-spacing: .16em;
  color: #e9e9e9;                       /* 白に近い薄いグレー */
  text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}

/* ③ フォントサイズ（span のインライン font-size:40px を上書き＝!important 必須）。
   ご要望でさらに少し大きく。 */
.page-id-2784 .metaslider .caption-wrap .caption span {
  font-size: clamp(2.4rem, 6vw, 3.5rem) !important;
  line-height: 1.7;
}