@charset "utf-8";
/* =========================
   LINE 登録LP（スマホ最優先）
========================= */

/* 1) Base */
.lineLP{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 12px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
.spOnly{ display:none; }

/* 2) HERO */
.lineLP__hero{
  position: relative;
  margin: 16px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.lineLP__heroBg{
  position: absolute;
  inset: 0;
  background: url("../order/images/hero-fruit.jpg") center top / cover no-repeat;
  z-index: 1;
}

/* 画像だけフェードアウト（下側） */
.lineLP__heroBg::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:50%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.6) 50%,
    #ffffff 100%
  );
}

/* テキストは最前面（フェードの影響を受けない） */
.lineLP__heroInner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 16px 20px;
  text-align: center;
  background: rgba(255,255,255,0);
  backdrop-filter: none;
}

.lineLP__title{
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .03em;
  text-shadow: 0 3px 10px #fff;
}
.lineLP__titleEm{
  display:block;
  font-size: 54px;
  color:#06C755;
  font-weight: 800;
  margin-top: 8px;
}
.lineLP__sub{
  font-size: 20px;
  margin: 18px 0 22px;
  color:#444;
}

/* 3) CTA button / meta */
.lineLP__cta{ text-align:center; margin-top: 8px; }

.lineLP__btn{
  display:inline-block;
  background:#06C755;
  color:#fff !important;
  font-weight: 800;
  font-size: 22px;
  text-decoration:none;
  padding: 12px 18px;
  min-width: 260px;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.lineLP__btn:hover{ opacity:.92; }

.lineLP__btn--ghost{
  background:#fff;
  color:#06C755 !important;
  border:2px solid #06C755;
  box-shadow:none;
  text-align:center;
}

.lineLP__meta{
  margin: 10px 0 0;
  font-size: 18px;
  color:#555;
  line-height: 1.6;
}
.lineLP__metaSep{ margin: 0 6px; color:#999; }

/* 4) Sections / cards */
.lineLP__section,
.lineLP__card,
.lineLP__last{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding: 28px 24px;
  margin: 14px 0;
}

.lineLP__h2{
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  color:#06C755;
}

/* 5) QR card layout */
.lineLP__cardGrid{
  display:flex;
  gap: 40px;
  align-items: center;
}
.lineLP__cardLeft{ flex: 1 1 auto; min-width:0; }
.lineLP__cardRight{ flex: 0 0 320px; text-align:center; }

.lineLP__checks{
  margin: 10px 0 0 1.2em;
  font-size: 18px;
  line-height: 1.9;
}
.lineLP__checks li{ margin: 0 0 10px; }
.lineLP__checks li::marker{ color:#06C755; font-size:1.2em; }

.lineLP__qrImg{
  display:block;
  width: 70%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}
.lineLP__qrId{ margin: 12px 0 0; font-size: 24px; color:#555; }

/* 6) 配信例吹き出し */
.lineLP__bubble{
  background:#f7f7f7;
  border-radius: 14px;
  padding: 22px;
}
.lineLP__bubbleTtl{ margin:0 0 12px; font-weight: 800; font-size: 20px; }
.lineLP__examples{ font-size: 18px; line-height: 1.9; }
.lineLP__note{ margin: 16px 0 0; font-size: 16px; color:#555; }

/* 7) details */
.lineLP__howItem{ margin: 0 0 10px; }
.lineLP__howTtl{ margin: 0 0 8px; font-weight: 800; font-size: larger; }
.lineLP__details{ margin: 10px 0 0; }
.lineLP__details summary{ cursor:pointer; font-weight: 800; font-size: larger; }
.lineLP__detailsBody{ padding: 10px 0 0; line-height: 1.8; }

.lineLP__cta--mid{ margin-top: 14px; }
.lineLP__text{ margin: 0; line-height: 1.8; text-align:center; font-size: 18px; }
.lineLP__top{ text-align:right; margin: 14px 0 0; }

/* 8) Back links */
.lineLP__backlink{
  text-align:center;
  margin:40px 0 10px;
  font-size:15px;
}
.lineLP__backlink a{
  color:#555;
  margin:0 10px;
  text-decoration:underline;
}

/* =========================
   Smartphone (<= 640px)
========================= */
@media (max-width: 640px){

  /* LPをフル幅 */
  .lineLP{
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .lineLP, .lineLP *{ box-sizing: border-box; }

  /* HERO：横長に寄せる（PCに近い見え方） */
  .lineLP__hero{
    min-height: 260px !important;
    margin: 12px 0 12px !important;
    border-radius: 0 !important;
  }
  .lineLP__heroBg{ background-position: center center !important; }

  .lineLP__heroBg::after{
    height: 40% !important;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 55%,
      #fff 100%
    ) !important;
  }

  .lineLP__heroInner{
    padding: 10px 12px 12px !important;
    margin-bottom: 10px !important;
  }

  /* タイトル */
  .lineLP__title{ font-size: 24px !important; }
  .lineLP__titleEm{ font-size: 32px !important; }
  .lineLP__sub{ font-size: 14px !important; margin: 10px 0 14px !important; }

  /* ボタン：はみ出し防止 */
  .lineLP__btn{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding: 16px 14px !important;
    font-size: 20px !important;
  }

  /* セクション（※枠を4辺出したいなら、ここは後で調整） */
  .lineLP__section,
  .lineLP__card,
  .lineLP__last{
    padding: 20px 16px !important;
  }

  /* 見出し・本文 */
  .lineLP__h2{ font-size: 22px !important; }
  .lineLP__checks,
  .lineLP__examples,
  .lineLP__text{ font-size: 18px !important; }

  /* QR：スマホは縦並び */
  .lineLP__cardGrid{
    display:block !important;
    gap: 0 !important;
  }
  .lineLP__cardRight{ margin-top: 18px; }
  .lineLP__qrImg{ max-width: 320px !important; }
  .lineLP__qrId{ font-size: 18px !important; }
}

/* =========================
   QRカード レイアウト制御
========================= */

/* PC：2列固定 */
@media (min-width: 769px){

  .lineLP__cardGrid{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px;
  }

  .lineLP__cardLeft{
    flex: 1 1 auto;
  }

  .lineLP__cardRight{
    flex: 0 0 320px;
    text-align: center;
  }

}

/* スマホ：縦並び */
@media (max-width: 768px){

  .lineLP__cardGrid{
    display: block !important;
  }

  .lineLP__cardRight{
    margin-top: 18px;
  }

}