/* ================================================================
   LUPICIA Coffee – 記事スタイル
================================================================ */

    /* =====================================================
       COFFEE BOOK ページ固有スタイル
    ===================================================== */

    /* ── ヒーロービジュアル（豆を炒るシーン） ── */
    .cb-hero {
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .cb-hero img {
      width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    }

    /* ── ページタイトルエリア ── */
    .cb-title-area {
      background: #f5f3ef;
      text-align: center;
      padding: 120px 0 60px
    }
    .cb-title-eyebrow {
      font-size: 19px;
      letter-spacing: 0.28em;
      color: #555269;
      margin-bottom: 0.5rem;
    }
    .cb-title-ja {
      font-family: 'Noto Serif JP', serif;
      font-size: 37px;
      color: #555269;
      letter-spacing: 0.05em;
    }

    /* ── メインコンテンツ背景 ── */
    .cb-main {
      background: #f5f3ef;
      padding-bottom: 4rem;
    }

    /* ── メイン画像（ドリップ全景） ── */
    .cb-main-photo {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      aspect-ratio: 16/9;
      overflow: hidden;
    }

 #wrapper {
      max-width: 1200px;
      margin: 0 auto;
    }
 /* 奇数（テキスト左＋写真右） */
    .cb-recipe-grid {
      display: grid;
      grid-template-columns: 1.64fr 1fr;
      gap: 50px;
      align-items: start;
      margin: 76px auto;
    }
    /* 偶数（写真左＋テキスト右） → order で入れ替え */
    .cb-recipe-grid.reverse .cb-recipe-text { order: 2; }
    .cb-recipe-grid.reverse .cb-recipe-photo { order: 1; }

    .cb-recipe-text { padding: 0.5rem 0; }
    .cb-recipe-heading {
      font-family: 'Noto Serif JP', serif;
      font-size: 28px;
      color: #555269;
      line-height: 1.7;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #555269;
    }
    .cb-recipe-body {
      font-size: 15px;
      color: #555;
      line-height: 2.1;
    }
    .cb-recipe-body p + p { margin-top: 0.8em; }

    /* ── 最終セクション（写真左＋テキスト右、フル幅横並び） ── */
    .cb-final-grid {
      display: grid;
      grid-template-columns: 1fr 1.64fr;
      gap: 50px;
      align-items: start;
    }
    .cb-final-photo { overflow: hidden; }

    /* ── TOPへ戻るボタン ── */
    .cb-back-wrap {
      text-align: center;
      padding: 8.5rem 0 1rem;
    }
    .cb-back-btn {
      display: inline-block;
      border: 1px solid #8a7560;
      font-size: 17px; letter-spacing: 0.2em;
      padding: 22px 110px;
      color: #5a4a38;
      text-decoration: none;
      background: none;
      transition: background 0.2s, color 0.2s;
    }
    .cb-back-btn:hover { background: #5a4a38; color: #fff; }

    /* ── フッター上部グレー帯（元デザイン） ── */
    .cb-footer-top {
      background: #e8e3dc;
      height: 6px;
    }

    /* ── レスポンシブ ── */
    @media (max-width: 768px) {
      .cb-recipe-grid,
      .cb-recipe-grid.reverse,
      .cb-final-grid {
        grid-template-columns: 1fr;
      }
      .cb-recipe-grid.reverse .cb-recipe-text { order: 0; }
      .cb-recipe-grid.reverse .cb-recipe-photo { order: 0; }
      .cb-final-photo { aspect-ratio: 16/9; }
    }

/* ================================================================
   コラム共通：リード文・〆文スタイル
================================================================ */
.cb-lead-box {
  max-width: 800px;         /* 文字拡大に合わせて横幅も少しゆったりに */
  margin: 40px auto 120px;  /* 【修正】ボトム余白を「120px」に大幅拡大（上:60px、左右:auto、下:120px） */
  padding: 0 20px;
  text-align: center;
}
.cb-lead-box p {
  /* 【修正】既存のメインデザインと完全に同じ「しっぽり明朝」に統一 */
  font-family: "Shippori Mincho", serif; 
  font-size: 18px;          /* 【修正】文字サイズを「20px」に大きく（視線を引きつけます） */
  line-height: 2.4;         /* 文字拡大に合わせて行間もさらにゆったり調整 */
  color: #333333;
  letter-spacing: 0.08em;   /* 文字間隔も少し広げて高級感を出しています */
  text-align: justify;      /* テキストの端を綺麗に揃える */
  display: inline-block; 
}


/* スマホ用のレスポンシブも合わせて調整 */
@media (max-width: 768px) {
  .cb-lead-box {
    margin: 40px auto 70px; /* スマホでも下の余白を少し広めに */
  }
  .cb-lead-box p {
    font-size: 16px;        /* スマホ時も少し大きめの16pxに */
    line-height: 2.0;
  }
}

/* ================================================================
   汎用パーツ：カコミ（コラム枠）＆ 吹き出し（ラベル）
================================================================ */

/* 汎用カコミ枠（背景を#fdf7f9に、枠線、角丸なし、レスポンシブ対応） */
.cb-kakomi-box {
  background-color: #fdf7f9;
  border: 1px solid #dcd8d1;
  padding: 50px 40px;
  margin: 80px auto;
  border-radius: 0px !important;
  box-sizing: border-box;
}

/* 汎用吹き出しラベル（中央寄せ版・角丸なし・通常文字） */
.cb-balloon-wrapper {
  text-align: center; /* 親要素でセンター配置にするためのラッパー */
  margin-bottom: 20px;
}
.cb-balloon-label {
  position: relative;
  display: inline-block;
  background-color: #555269; /* ブランドのネイビー */
  color: #ffffff;
  font-size: 18px;
  font-weight: normal;
  padding: 8px 24px;
  border-radius: 0px !important;
  line-height: 1.4;
}

/* 吹き出しの下向き突起（三角：中央寄せに合わせて center に配置） */
.cb-balloon-label::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%); /* 常に真ん中にくるよう調整 */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555269;
}

/* カコミ内の特別調整 */
.cb-kakomi-box .cb-recipe-heading {
  text-align: center; /* タイトルも中央寄せ */
  border-top: none;
  padding-top: 0;
  margin-bottom: 40px;
}

.cb-kakomi-flex {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
}

/* カコミ専用のボタン位置調整 */
.cb-kakomi-box .card-btn-wrapper {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 10px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .cb-lead-box {
    margin: 40px auto;
  }
  .cb-lead-box p {
    font-size: 14px;
    line-height: 2.0;
  }
  .cb-kakomi-box {
    padding: 30px 20px;
    margin: 50px auto;
  }
  .cb-balloon-label {
    font-size: 15px;
    padding: 6px 18px;
  }
  .cb-balloon-label::after {
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555269;
  }
}