@charset "UTF-8";
/* ==========================================================================
   記事内CTA
   --------------------------------------------------------------------------
   記事中は細帯（.lg-cta）、記事末尾はカード型オファー（.lg-offer）。
   現行は導入文の直後に高さ450pxの画像バナーが入っており、目次が659px下へ
   押し出されていた。

   マークアップは記事内の「カスタムHTML」ブロック、または
   Cocoon のウィジェット（記事内middle／記事下）に貼り付けて使う。
   クラス名は Cocoon と衝突しないよう lg- を付けている。

   ブランドガイド 6.1 の CTA 階層
     .lg-btn          Primary   … 黄 ＋ 黒文字（登録・申込み）
     .lg-btn--ghost   Tertiary  … 白 ＋ 紫枠（併記する補助アクション）
   ========================================================================== */

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.lg-btn{
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  min-height:      44px;
  padding:         0 24px;
  border:          0;
  border-radius:   999px;
  background:      var(--c-accent);
  color:           var(--c-on-accent);
  font-size:       15px;
  font-weight:     700;
  line-height:     1.4;
  letter-spacing:  .02em;
  text-align:      center;
  text-decoration: none;
}
/* Cocoon には a:hover{color:#e53900}（オレンジ寄りの赤）がある。
   .lg-btn（0,1,0）では a:hover（0,1,1）に負けて文字が赤くなるため、
   ホバー・フォーカス・アクティブでも文字色を明示する。 */
.lg-btn:hover,
.lg-btn:focus,
.lg-btn:active,
.lg-btn:visited{
  color:           var(--c-on-accent);
  text-decoration: none;
}
.lg-btn:hover{ background: var(--c-accent-deep); }

.lg-btn--lg{ min-height: 56px; padding: 0 32px; font-size: 17px; }

.lg-btn--ghost,
.lg-btn--ghost:hover,
.lg-btn--ghost:focus,
.lg-btn--ghost:active,
.lg-btn--ghost:visited{
  color:  var(--c-brand-dark);
  border: 1px solid var(--c-brand);
}
.lg-btn--ghost{ background: var(--c-bg); }
.lg-btn--ghost:hover{ background: var(--c-brand-pale); }

/* --------------------------------------------------------------------------
   記事中の細帯CTA
   該当する見出しの直後など、文脈のある位置に置く。
   -------------------------------------------------------------------------- */
.lg-cta{
  display:       flex;
  align-items:   center;
  gap:           14px;
  flex-wrap:     wrap;
  margin:        32px 0;
  padding:       14px 18px;
  border:        1px solid var(--c-brand-line);
  border-radius: var(--radius);
  background:    var(--c-brand-pale);
}

/* マークは白い正方形に内接する円なので、円形にクリップすれば白背景ごと切り落とせる。
   画像は CSS の背景で読む。こうすると貼り付けるHTMLに絶対URLが入らず、
   ローカルでも本番でもそのまま動く（パスは このCSSファイルからの相対）。 */
.lg-cta .lg-cta__mark{
  flex:          none;
  width:         36px;
  height:        36px;
  margin:        0;
  border:        0;
  border-radius: 50%;
  overflow:      hidden;
  background:    url("../img/mark-lsite.png") center / cover no-repeat;
}

.lg-cta .lg-cta__text{
  flex:        1 1 260px;
  margin:      0;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--c-ink-2);
}
.lg-cta .lg-cta__text b{ color: var(--c-brand-deep); }

.lg-cta .lg-btn{ flex: none; }

/* --------------------------------------------------------------------------
   記事末尾のオファーカード
   現行は 1200×400 の画像バナー1枚。何ができるサービスなのかが伝わらないので、
   「できること6つ ＋ ボタン2つ ＋ 補足」に構造化する。
   -------------------------------------------------------------------------- */
.lg-offer{
  margin:        56px 0 0;
  border:        1px solid var(--c-brand);
  border-radius: var(--radius-lg);
  background:    var(--c-bg);
  overflow:      hidden;
}

.lg-offer .lg-offer__head{
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     22px 26px 0;
}
/* ロゴも背景で読む（元画像 2521×625 → 高さ28pxなら幅113px） */
.lg-offer .lg-offer__logo{
  display: block;
  flex:    none;
  width:   113px;
  height:  28px;
  margin:  0;
  border:  0;
  background: url("../img/logo-lsite.png") left center / contain no-repeat;
}
.lg-offer .lg-offer__eyebrow{
  margin:      0;
  font-size:   12px;
  font-weight: 700;
  letter-spacing: .06em;
  color:       var(--c-brand-deep);
}

.lg-offer .lg-offer__body{ padding: 14px 26px 26px; }

.lg-offer .lg-offer__title{
  margin:      0 0 8px;
  padding:     0;
  border:      0;
  background:  none;
  font-size:   22px;
  line-height: 1.55;
  font-weight: 700;
  color:       var(--c-ink);
}
.lg-offer .lg-offer__title::before{ content: none; }

.lg-offer .lg-offer__lead{
  margin:      0 0 18px;
  font-size:   15px;
  line-height: 1.85;
  color:       var(--c-ink-2);
}

/* できること（2列） */
.lg-offer .lg-offer__list{
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px 20px;
  margin:                0 0 22px;
  padding:               0;
  list-style:            none;
  background:            none;
}
.lg-offer .lg-offer__list li{
  position:    relative;
  margin:      0;
  padding-left: 26px;
  font-size:   14px;
  line-height: 1.8;
}
.lg-offer .lg-offer__list li::marker{ content: none; }

/* 丸い地（::before）に チェック（::after）を重ねる。
   ::after は 6×3 の箱に border-left / border-bottom を 2px ずつ引いたもので、
   ボーダーを含めた実寸は 8×5px。回転は中心を軸にするので、
   この 8×5 の中心（+4, +2.5）を 丸の中心（+8, .5em+8）に合わせる。
     left = 8 - 4        = 4px
     top  = .5em + 8 - 2.5 = .5em + 5.5px
   ただし回転後は「レ」の墨が左下に寄るため、計算どおりだと中心より下がって見える。
   8倍に拡大してピクセル単位で実測し、いちばん中心に近い .5em + 4.5px を採る
   （5px だと +0.62px 下、4.5px だと -0.38px 上）。 */
.lg-offer .lg-offer__list li::before{
  content:  "";
  position: absolute;
  left:     0;
  top:      .5em;
  width:    16px;
  height:   16px;
  border-radius: 50%;
  background: var(--c-brand-tint);
}
.lg-offer .lg-offer__list li::after{
  content:  "";
  position: absolute;
  left:     4px;
  top:      calc(.5em + 4.5px);
  width:    6px;
  height:   3px;
  border-left:   2px solid var(--c-brand-dark);
  border-bottom: 2px solid var(--c-brand-dark);
  transform: rotate(-45deg);
}

.lg-offer .lg-offer__foot{
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}
.lg-offer .lg-offer__note{
  font-size: 12px;
  color:     var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   SP（834px以下）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  .lg-cta{
    gap:     12px;
    padding: 14px;
  }
  .lg-cta .lg-cta__text{ flex-basis: 100%; font-size: 13.5px; }
  .lg-cta .lg-btn{ width: 100%; }

  .lg-offer{ margin-top: 44px; }
  /* ロゴと横並びのままだと「INSTAGRAM 運用自動化ツール」が折り返して窮屈になる */
  .lg-offer .lg-offer__head{
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    padding:        18px 18px 0;
  }
  .lg-offer .lg-offer__body{ padding: 12px 18px 20px; }
  .lg-offer .lg-offer__title{ font-size: 19px; }
  .lg-offer .lg-offer__lead{ font-size: 14px; margin-bottom: 14px; }

  /* 2列だと1項目が2行に折り返すので1列にする */
  .lg-offer .lg-offer__list{ grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; }

  .lg-offer .lg-offer__foot{ gap: 10px; }
  .lg-offer .lg-offer__foot .lg-btn{ width: 100%; }
  .lg-btn--lg{ min-height: 50px; font-size: 15px; }
}