/* トップページ */
/* ==========================
   ヒーローバナー設定
========================== */

/* 1. 一番外側のセクションから、中のテキスト領域まで縦書きを伝播させる */
.hero-vertical-text.wp-block-snow-monkey-blocks-section-with-bgimage {
  display: block !important;
}

/* 2. 縦書きの実行と配置（右寄せ・上寄せ） */
.hero-vertical-text .smb-section__inner {
  display: flex !important;
  flex-direction: row-reverse !important; /* 右から左へ並べる */
  justify-content: flex-start !important;
  align-items: flex-start !important; /* 上端に揃える */
  padding-top: 40px !important; /* 全体の上端位置 */
  padding-right: 8% !important;
}

/* ★縦書きを強制する重要な指定 */
.hero-vertical-text .c-container,
.hero-vertical-text .smb-section__contents-wrapper,
.hero-vertical-text .smb-section__body {
  writing-mode: vertical-rl !important;
  -webkit-writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: block !important;
  height: auto !important;
}

/* --- 各段落の共通設定 --- */
.hero-vertical-text p.hero-main-text,
.hero-vertical-text p.hero-middle-text,
.hero-vertical-text p.hero-sub-text {
  font-family: "YuMincho", "Yu Mincho", "Sawarabi Mincho", serif !important;
  writing-mode: vertical-rl !important; /* 段落単位でも念押し */
  line-height: 1.8 !important;
  letter-spacing: 0.3em !important;
  margin: 0 !important;
  white-space: nowrap !important; /* 勝手に改行させない */
}

/* --- 1. メイン（一番右：一番上から） --- */
.hero-vertical-text p.hero-main-text {
  font-size: 38px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
}

/* --- 2. 中間（真ん中：少し下げる） --- */
.hero-vertical-text p.hero-middle-text {
  font-size: 28px !important;
  font-weight: 500 !important;
  margin-top: 2.5em !important; /* 1段下げる */
  margin-right: 1em !important; /* 右隣（メイン）との間隔 */
}

/* --- 3. サブ（一番左：さらに下げる） --- */
.hero-vertical-text p.hero-sub-text {
  font-size: 20px !important;
  font-weight: 400 !important;
  margin-top: 8em !important; /* さらにもう1段下げる */
  margin-right: 1.7em !important; /* 右隣（中間）との間隔 */
}

/* --- スマホ表示 --- */
@media (max-width: 767px) {
  .hero-vertical-text .smb-section__inner {
    padding-top: 30px !important;
    padding-right: 5% !important;
  }
  .hero-vertical-text p.hero-main-text {
    font-size: 32px !important;
  }
  .hero-vertical-text p.hero-middle-text {
    font-size: 24px !important;
    margin-top: 2em !important;
    margin-right: 0.85em !important;
  }
  .hero-vertical-text p.hero-sub-text {
    font-size: 20px !important;
    margin-top: 4em !important;
    margin-right: 1em !important;
  }
}
/* ==========================
   お供えヒーローセクション
   お供えギフトのことでの悩み
========================== */
.sp-only {
  display: inline;
}

.osonae-hero {
  position: relative;
}

/* 内側コンテナ */
.osonae-hero__inner > .smb-container__body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* 悩みカードグループ左側 */
.osonae-worries {
  flex: 0 0 55%;
  max-width: 55%;
}

/* 各カード */
.osonae-worry {
  background: rgba(255, 255, 255, 0.9);
  padding: 24px 28px;
  margin-bottom: 24px;
  border-radius: 8px;
  line-height: 1.8;
}

/* 縦書きタイトル */
/* 50:50 の右カラム */
.osonae-vertical {
  flex: 0 0 50%;
  max-width: 50%;

  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center; /* 縦方向中央 */
}

/* 縦書きそのもの */
.osonae-vertical__inner {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.15em;
}

/* 下部テキスト */
.osonae-bottom-text {
  text-align: center;
  margin-top: 64px;
  font-size: 30px;
  line-height: 1.75;
}

/* ==========================
   レスポンシブ
========================== */

@media (max-width: 768px) {
  .sp-only {
    display: none;
  }

  .osonae-hero__inner > .smb-container__body {
    flex-direction: column;
  }

  /* 左カラムをフル幅に戻す */
  .osonae-worries {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  /* ボックス自体もフル幅 */
  .osonae-worry {
    max-width: 100%;
    width: 100%;
  }

  .osonae-vertical {
    max-width: 100%;
  }

  .osonae-vertical__inner {
    writing-mode: horizontal-tb;
    text-align: left;
    font-weight: bold;
    /* font-size: 25px; */
  }
  /* 下部テキスト */
  .osonae-bottom-text {
    text-align: left;
    font-size: 24px;
  }
}

/* おくやみ撰雅CTA */
/* ==========================================
 *  画像がPCは両サイド
    スマホは上下に配置
    全体：親要素の「高さを揃える機能」を解除
 * ========================================== */
.custom-gift-layout .wp-block-columns {
  display: flex !important;
  align-items: center !important; /* 中央カラムに合わせる */
}

/* 左右のカラム：高さを自動(中身に合わせる)にし、余計な余白を消す */
.custom-gift-layout .wp-block-column:nth-child(1),
.custom-gift-layout .wp-block-column:nth-child(3) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* 画像を中央に寄せる */
  height: auto !important; /* これが重要：親の高さに引きずられない */
  gap: 15px !important; /* 画像同士の固定の間隔 */
}

/* 中央カラムの中身をすべてセンターに強制する */
.custom-gift-layout .wp-block-column:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* 垂直方向中央 */
  align-items: center !important; /* 水平方向中央（これでボタンも揃います） */
  text-align: center !important;
}

/* ボタンブロック自体のマージンを自動にして中央へ */
.custom-gift-layout .wp-block-button {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* ボタンの横幅が広がりすぎないように調整（既存の装飾を補完） */
.custom-gift-layout .wp-block-button__link {
  width: auto !important; /* 文字量に合わせる場合はauto */
  min-width: 280px !important; /* 最低限の幅を確保 */
  max-width: 100% !important;
}

/* ==========================================
 * PC用設定（画面幅 768px 以上）
 * ========================================== */
@media (min-width: 768px) {
  .custom-gift-layout .wp-block-column:nth-child(1) {
    width: 20% !important;
  }
  .custom-gift-layout .wp-block-column:nth-child(2) {
    width: 60% !important;
    text-align: center;
  }
  .custom-gift-layout .wp-block-column:nth-child(3) {
    width: 20% !important;
  }

  /* PCでは画像の形を維持 */
  .custom-gift-layout img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ==========================================
 * スマホ用設定（画面幅 767px 以下）
 * ========================================== */
@media (max-width: 767px) {
  .custom-gift-layout .wp-block-columns {
    flex-direction: column !important;
  }

  /* 上下のカラムを横並びに変更 */
  .custom-gift-layout .wp-block-column:nth-child(1),
  .custom-gift-layout .wp-block-column:nth-child(3) {
    flex-direction: row !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 20px 0 !important;
  }

  /* 順序：1(上画像) -> 2(テキスト) -> 3(下画像) */
  .custom-gift-layout .wp-block-column:nth-child(1) {
    order: 1;
  }
  .custom-gift-layout .wp-block-column:nth-child(2) {
    order: 2;
    text-align: center;
  }
  .custom-gift-layout .wp-block-column:nth-child(3) {
    order: 3;
  }

  /* 画像を横長に切り抜き（マスク） */
  .custom-gift-layout .wp-block-image {
    width: 32% !important;
    margin: 0 !important;
  }

  .custom-gift-layout img {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important; /* 横長の比率 */
    object-fit: cover !important; /* 切り抜き */
  }
}

/* ボタン装飾 */
.custom-gift-layout .wp-block-button__link {
  background-color: #b0413e !important;
  color: #fff !important;
  padding: 15px 30px !important;
  border-radius: 0 !important;
}