/* =====================================================================
   bySENSE — line-guidance.css （LINE誘導 共通スニペット = shop/snippets/_line_guidance.html.liquid）
   ────────────────────────────────────────────────────────────────────────
   このCSSはスニペット自身が <link> で読み込む（自己完結・呼び出し元ページのCSSに依存しない）。
   呼び出し先（2箇所・同一マークアップ/CSSを共有）:
     ・ITEM LIST（/shop/products）      … shop/sections/products_index_content.liquid の
       .items-content グリッド内（named line: [wide-start]…[wide-end]）に展開される。
     ・商品詳細（/shop/products/<sku>） … shop/products/show.html.liquid の
       .p-product_content（通常フロー・グリッドではない・左右 padding 40px／SP 15px）内に展開される。
   2つの呼び出し元でレイアウト機構（グリッド vs 通常フロー）が異なるため:
     ・outer(.lg-guidance) には「祖先がグリッドの場合のみ効く」grid-column を持たせる
       （祖先がグリッドでない＝商品詳細側では単に無視され、通常のブロック要素として振る舞う）。
     ・実際の最大幅/中央寄せは inner(.lg-guidance__inner) 側で
       width:100% + max-width + margin:0 auto という、ec-force標準の
       .p-product_content__inner（bundle.css）と同じ考え方の指定にしてある。
       これは「幅100%だが max-width を超える分は auto margin で中央寄せ」という定型手法で、
       祖先の幅がどうであっても正しく収まる（グリッド内では既に wide 列＝1152px以下に
       収まっているため max-width:1200px は実質発火しない＝グリッド側は素直に列幅いっぱいに広がる）。
   ボタン意匠は共通CTA `.sub-btn`（mockup/ecforce build の subscription.css）の
   「枠線→ホバーで塗り反転」を踏襲。角丸は contact.css/account.css 系ボタンに合わせ 2px。
   共通トークン（--ink/--white/--line/--sans/--ease 等）は base.css（_head でグローバル読込済）。
   全クラスは .lg-guidance 配下にスコープ＝他コンポーネント無影響。
   ===================================================================== */

.lg-guidance {
  grid-column: wide-start / wide-end; /* .items-content グリッド内でのみ有効。通常フロー内では無視される */
  margin-top: 40px;
}
.lg-guidance__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
}
.lg-guidance__text {
  font-family: var(--sans); font-weight: 400;
  font-size: 15px; line-height: 1.85; color: var(--ink);
}
.lg-guidance__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 40px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; white-space: nowrap;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.lg-guidance__btn:hover { background: var(--ink); color: var(--white); }

/* =====================================================================
   [Phase3] スマホ専用 (<768) — 他コンポーネント（items/contact/account）と同じブレークポイントを踏襲
   ===================================================================== */
@media (max-width: 767px) {
  .lg-guidance { margin-top: 32px; }
  .lg-guidance__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }
  .lg-guidance__btn { width: 100%; }
}