@charset "utf-8";
/* ==========================================================================
   style_sp.css — LINE友だち登録LP（レスポンシブ）
   ※ @media はこのファイルに集約する（既存 line_newoffer と同じ運用）
   ※ 主ブレイクポイント 767 / 768px（既存サイト準拠）
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET 以下（〜930px）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 930px) {

  .cp-lp article.contents {
    margin: 48px auto;
    padding: 20px 20px;
  }

  .cp-lp ul.product {
    gap: 0 20px;
  }

  .cp-lp ul.product li,
  .cp-lp ul.product li img {
    width: 200px;
  }

}

/* --------------------------------------------------------------------------
   SP（〜767px）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

  /* --- 表示出し分け --- */
  .cp-lp .pc_only { display: none; }
  .cp-lp .sp_only { display: inline; }
  .cp-lp img.pc_only { display: none; }
  .cp-lp img.sp_only { display: inline-block; }
  .cp-lp .pc_taC { text-align: left; }

  /* --- レイアウト --- */
  .cp-lp article.contents {
    margin: 40px auto;
    padding: 16px 16px;
  }

  /* --- FV --- */
  .cp-lp .main_visual img {
    width: 100%;
  }

  /* --- 見出し --- */
  .cp-lp h3.ribon,
  .cp-lp h5.ribon {
    font-size: 17px;
    margin-bottom: 32px;
  }

  /* 絶対配置のままでは left:50% 起点で利用幅が半分になり不自然に折り返すため、
     SPでは left/right:0 ＋ margin:auto で中央寄せする */
  .cp-lp h3.ribon span,
  .cp-lp h5.ribon span {
    padding: 10px 12px;
    white-space: normal;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 88%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .cp-lp p.fukidashi {
    font-size: 16px;
  }

  .cp-lp h3.fukidashi {
    font-size: 18px;
  }

  /* 斜線のぶんだけ内側に収める（横スクロール防止） */
  .cp-lp p.fukidashi > span,
  .cp-lp h3.fukidashi > span {
    max-width: calc(100% - 64px);
  }

  .cp-lp h3.fukidashi .fz20 {
    font-size: 14px;
  }

  .cp-lp p.fukidashi > span::before,
  .cp-lp h3.fukidashi > span::before {
    left: -26px;
    width: 30px;
    height: 30px;
    top: -6px;
  }

  .cp-lp p.fukidashi > span::after,
  .cp-lp h3.fukidashi > span::after {
    right: -26px;
    width: 30px;
    height: 30px;
    top: -6px;
  }

  /* --- 本文 --- */
  .cp-lp .read_txt .main,
  .cp-lp .main {
    font-size: 19px;
    margin-bottom: 24px;
  }

  .cp-lp article.contents > p {
    font-size: 15px;
  }

  /* --- ボタン --- */
  .cp-lp .btn_area {
    margin: 24px auto;
  }

  .cp-lp .btn_area.cta_repeat {
    margin: 32px auto 0;
  }

  .cp-lp .btn {
    font-size: 17px;
    width: 100%;
    padding: 14px 10px;
  }

  .cp-lp .btn-line::after {
    right: 14px;
  }

  .cp-lp a.basic-btn {
    font-size: 16px;
    width: 100%;
    padding: 12px 0;
  }

  .cp-lp .member_btn_block {
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
  }

  .cp-lp .member_btn_block .btn-wrap {
    font-size: 13px;
  }

  /* --- リスト --- */
  .cp-lp ul.disc {
    margin-bottom: 32px;
  }

  .cp-lp ul.disc li {
    font-size: 15px;
  }

  .cp-lp ul.comment {
    padding: 16px;
    font-size: 13px;
  }

  /* --- 登録特典 --- */
  .cp-lp .offer {
    padding: 24px 18px 20px;
  }

  .cp-lp .offer_lead { font-size: 14px; }
  .cp-lp .offer_num  { font-size: 18px; }
  .cp-lp .offer_note { font-size: 13px; margin-bottom: 20px; }
  .cp-lp .fz36 { font-size: 30px; }

  /* 定義リストは縦積みに */
  .cp-lp dl.offer_spec { font-size: 14px; }

  .cp-lp dl.offer_spec dt {
    float: none;
    width: auto;
    padding: 14px 0 2px;
  }

  .cp-lp dl.offer_spec dd {
    padding: 0 0 14px;
  }

  /* --- 登録メリット（1カラム） --- */
  .cp-lp ul.benefit li {
    width: 100%;
    padding: 20px 4px;
  }

  .cp-lp ul.benefit li:nth-child(odd) {
    border-right: 0;
  }

  .cp-lp .benefit_ttl { font-size: 16px; }
  .cp-lp .benefit_txt { font-size: 14px; }

  /* --- 配信イメージ（SPは横スライド） ---
     縦積みだと3枚ぶんで極端に縦長になるため、
     .talk_list 自体を scroll-snap のトラックにして1枚ずつ送る。
     PC（768px以上）の3カラム横並びは style.css のままで変更なし。 */
  .cp-lp ul.talk_list {
    flex-direction: row;
    flex-wrap: nowrap;
    /* PC用の justify-content:center を必ず打ち消す。
       中央寄せのままだと溢れた分が左側にはみ出してスクロールできなくなる。 */
    justify-content: flex-start;
    gap: 0;
    margin-top: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .cp-lp ul.talk_list::-webkit-scrollbar {
    display: none;
  }

  .cp-lp ul.talk_list li {
    width: 100%;
    flex: 0 0 100%;
    padding: 0 6px;
    scroll-snap-align: start;
  }

  .cp-lp .talk_img img {
    max-width: 260px;
  }

  .cp-lp .talk_cap { font-size: 15px; }
  .cp-lp .talk_txt { font-size: 14px; }

  /* 左右の矢印。画像（最大260px幅）の左右の余白に収まる位置に置く。 */
  .cp-lp .talk_arrow {
    display: block;
    position: absolute;
    top: 38%;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    color: #333;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
  }

  .cp-lp .talk_arrow_prev { left: 0; }
  .cp-lp .talk_arrow_next { right: 0; }

  /* ドットインジケーター */
  .cp-lp .talk_dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }

  .cp-lp .talk_dots .talk_dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background-color: #ccc;
  }

  .cp-lp .talk_dots .talk_dot.is-active {
    background-color: #06C755;
  }

  /* --- 登録ステップ（縦積み・画像は中央寄せ） --- */
  .cp-lp ol.steps {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
  }

  .cp-lp ol.steps li {
    width: 100%;
    padding: 16px 4px 0;
    text-align: center;
  }

  .cp-lp .step_img img {
    max-width: 220px;
  }

  .cp-lp .step_ttl { font-size: 16px; }
  .cp-lp .step_txt { font-size: 14px; text-align: left; }

  /* --- 商品カテゴリ（2カラム） --- */
  .cp-lp ul.product {
    gap: 0 12px;
    margin-top: 24px;
  }

  .cp-lp ul.product li {
    width: calc(50% - 6px);
    font-size: 13px;
    margin-bottom: 20px;
  }

  .cp-lp ul.product li img {
    width: 100%;
  }

  /* --- 横ループ ---
     既存LPはSPでもサイズを変えていない（wrapper 1020px固定・高さ110px）ため
     上書きしない。overflow:hidden で窓のように切り取られる挙動も同じ。 */
  .cp-lp #example {
    margin: 40px auto;
  }

  /* --- FAQ --- */
  .cp-lp dl.faq dt {
    font-size: 15px;
    padding: 16px 36px 16px 32px;
  }

  .cp-lp dl.faq dt::before {
    top: 16px;
    font-size: 16px;
  }

  .cp-lp dl.faq dd {
    font-size: 14px;
    padding: 16px 16px 20px 32px;
  }

  .cp-lp dl.faq dd::before {
    top: 16px;
    font-size: 16px;
  }

  /* --- 最終CTA --- */
  .cp-lp .final_cta {
    padding: 40px 16px;
  }

  /* --- 追従CTAバー ---
     本文が追従バーに隠れないよう、ページ下部に逃げを確保する。 */
  .cp-lp {
    padding-bottom: 84px;
  }

  .cp-lp .sticky_cta {
    padding: 10px 12px;
  }

  .cp-lp .sticky_cta .btn {
    width: 100%;
    font-size: 16px;
    padding: 12px 10px;
  }

}

/* --------------------------------------------------------------------------
   小型端末（〜380px）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 380px) {

  .cp-lp .read_txt .main,
  .cp-lp .main {
    font-size: 17px;
  }

  .cp-lp .btn {
    font-size: 15px;
  }

  .cp-lp h3.ribon,
  .cp-lp h5.ribon {
    font-size: 16px;
  }

  .cp-lp h3.fukidashi {
    font-size: 16px;
  }

  .cp-lp h3.fukidashi .fz20 {
    font-size: 14px;
  }

  .cp-lp ul.product li {
    font-size: 12px;
  }

}