/* =========================================================
   ハジスタ LP — C案「読みものカード」(2026-10-30)
   - 参考: ほぼ日・スープストック(白地+差し色1色+明朝、1ブロック=ラベル+短い見出し+絵)
   - styles.css(ヘッダー・フッター・FAQ開閉・法務ページ)の上に重ねる。新しい部品は lp- 接頭辞
   - 細かい説明は <details>(くわしく)にたたみ、内容は消さない
   ========================================================= */

.lp{
  --c-bg:#f7f6f3;
  --c-card:#ffffff;
  --c-ink:#333333;
  --c-sub:#5c5a55;
  --c-mute:#6b6862;      /* 白地・生成り地とも4.5:1以上 */
  --c-line:#e3dfd6;
  --c-accent:#c0532f;    /* テラコッタ。白文字・白地上の文字とも4.5:1以上 */
  --c-accent-soft:#f6e6df;
  --r:12px;
  background:var(--c-bg);
  color:var(--c-ink);
}

.lp-wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.lp-wrap--narrow{max-width:760px;}
.lp-center{text-align:center;}
.lp-accent{color:var(--c-accent);}
.lp-br-sp{display:none;}
.lp-sp-only{display:none;}

.lp-label{font-family:var(--gothic);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--c-accent);margin:0 0 10px;}
.lp-h2{font-family:var(--mincho);font-weight:600;font-size:28px;line-height:1.55;margin:0 0 22px;color:var(--c-ink);}
.lp-note{font-size:13px;line-height:1.8;color:var(--c-mute);margin:14px 0 0;}
.lp-small{font-size:12px;line-height:1.8;color:var(--c-mute);margin:12px 0 0;}
.lp-card{background:var(--c-card);border-radius:var(--r);padding:22px;}

.lp-block{padding:56px 0 8px;}

/* ---------- buttons ---------- */
.lp-btn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:8px;
  background:var(--c-accent);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;border:1.5px solid var(--c-accent);
  transition:opacity .15s ease, transform .15s ease;}
.lp-btn:hover{opacity:.9;transform:translateY(-1px);}
.lp-btn--outline{background:transparent;color:var(--c-ink);border-color:var(--c-ink);}
.lp-btn--sm{min-height:40px;font-size:13px;padding:0 18px;}

/* ---------- header(白) ---------- */
.lp .site-header{background:rgba(255,255,255,.94);border-bottom-color:#ebe8e1;}
.lp .brand{font-weight:700;}
.lp-header-cta{display:none;}
.lp .site-nav>a.lp-btn{color:#fff;}
.lp .site-nav>a.lp-btn:hover{color:#fff;}

/* ---------- HERO ---------- */
.lp-hero{background:var(--c-card);padding:56px 0 48px;border-bottom:1px solid #ebe8e1;}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;}
.lp-kicker{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;margin:0 0 14px;}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);flex:none;}
.lp-hero__title{font-family:var(--mincho);font-weight:700;font-size:40px;line-height:1.5;margin:0;}
.lp-hero__lede{font-size:15px;line-height:1.8;color:var(--c-sub);margin:16px 0 0;}
.lp-hero__basis{font-size:12px;line-height:1.7;color:var(--c-mute);margin:18px 0 0;}

/* 商品カード=開始ボタン(アプリのトップを経由しない) */
.lp-products{display:flex;flex-direction:column;gap:12px;}
.lp-product{display:flex;align-items:center;gap:14px;padding:10px;background:var(--c-bg);border:1px solid #ebe8e1;border-radius:var(--r);
  transition:border-color .15s ease, transform .15s ease;}
.lp-product:hover{border-color:var(--c-accent);transform:translateY(-1px);}
.lp-product__img{width:132px;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:8px;flex:none;}
.lp-product__body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lp-product__name{font-size:16px;font-weight:700;}
.lp-product__sub{font-size:12px;color:var(--c-sub);line-height:1.5;}
.lp-product__go{font-size:14px;font-weight:700;color:var(--c-accent);margin-top:2px;}

/* ---------- PROMO(30秒の紹介動画・押したときだけ YouTube を読み込む) ---------- */
.lp-promo__frame{position:relative;max-width:880px;}

/* ---------- MOVIE(押したときだけ動画を読み込む) ---------- */
.lp-movies{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.lp-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:#222;cursor:pointer;}
.lp-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lp-yt__pill{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;
  background:rgba(255,255,255,.95);border-radius:999px;font-family:var(--gothic);font-size:13px;font-weight:700;color:var(--c-ink);}
.lp-yt__pill svg{fill:var(--c-accent);}
.lp-yt-frame{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r);background:#000;}

/* ---------- HOW TO ---------- */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.lp-step{background:var(--c-card);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;}
.lp-step__num{font-family:var(--mincho);font-size:26px;line-height:1;color:var(--c-accent);}
.lp-step__title{font-size:15px;font-weight:700;line-height:1.5;}
.lp-step__text{font-size:13px;line-height:1.7;color:var(--c-sub);}
.lp-step--shot{padding:0;overflow:hidden;background:#efece6;align-items:center;justify-content:center;}
.lp-step--shot img{width:100%;height:100%;max-height:260px;object-fit:cover;object-position:top;}

/* ---------- PRICE ---------- */
.lp-price{max-width:560px;}
.lp-price__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.lp-price__name{font-size:15px;font-weight:700;}
.lp-price__amount{font-family:var(--mincho);font-size:38px;line-height:1;color:var(--c-accent);}
.lp-price__list{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--c-sub);}
.lp-price__list li::before{content:"・";}

/* くわしく(たたみ) */
.lp-more{margin-top:10px;max-width:560px;}
.lp-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--c-ink);text-decoration:underline;text-underline-offset:4px;}
.lp-more>summary::-webkit-details-marker{display:none;}
.lp-more>summary::after{content:"＋";color:var(--c-accent);text-decoration:none;display:inline-block;}
.lp-more[open]>summary::after{content:"－";}
.lp-more__body{padding:6px 0 4px;}
.lp-more__body p{font-size:14px;line-height:1.9;color:var(--c-sub);margin:0 0 10px;}
.lp-more__body a{color:var(--c-accent);text-decoration:underline;}

.lp-compare{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;}
.lp-compare__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px 16px;font-size:14px;border-top:1px solid var(--c-line);}
.lp-compare__row--head{border-top:none;font-size:12px;color:var(--c-mute);}
.lp-compare__row--us{background:var(--c-accent-soft);font-weight:700;}
.lp-compare__row--us span:nth-child(2){color:var(--c-accent);}

/* ---------- GUIDE(タイルを押すと、その場で全幅に開く) ---------- */
.lp-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;}
.lp-tile{background:var(--c-card);border-radius:var(--r);border:1px solid transparent;}
.lp-tile[open]{grid-column:1 / -1;border-color:var(--c-line);}
.lp-tile--new{border-color:var(--c-accent);}
.lp-tile>summary{list-style:none;cursor:pointer;padding:16px;min-height:120px;display:flex;flex-direction:column;gap:6px;color:var(--c-accent);position:relative;}
.lp-tile>summary::-webkit-details-marker{display:none;}
.lp-tile>summary::after{content:"＋";position:absolute;right:14px;top:12px;font-size:16px;color:var(--c-accent);}
.lp-tile[open]>summary::after{content:"－";}
.lp-tile__title{font-size:15px;font-weight:700;color:var(--c-ink);}
.lp-tile__sub{font-size:12px;color:var(--c-mute);}
.lp-tile__body{padding:0 16px 18px;}
.lp-tile__body p{font-size:14px;line-height:1.9;color:var(--c-sub);margin:0 0 12px;}
.lp-tile__body ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.85;color:var(--c-sub);}
.lp-tile__body b{color:var(--c-ink);margin-right:.4em;}
.lp-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--c-accent);padding:2px 8px;border-radius:4px;}
.lp-swatches{display:flex;gap:4px;}
.lp-swatches span{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.06);}
.lp-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 16px;margin-top:8px;
  border:1px solid var(--c-ink);border-radius:10px;background:var(--c-bg);font-size:14px;line-height:1.5;}
.lp-link small{font-size:12px;color:var(--c-mute);}
.lp-link--quiet{border-color:var(--c-line);}

/* ---------- VOICE ---------- */
.lp-voice{display:flex;gap:16px;align-items:flex-start;max-width:760px;}
.lp-voice__img{width:64px;height:64px;object-fit:contain;flex:none;background:var(--c-bg);border-radius:50%;}
.lp-voice__main{min-width:0;}
.lp-voice__quote{font-family:var(--mincho);font-size:19px;font-weight:600;line-height:1.7;margin:0;}
.lp-more--inline{margin-top:4px;}

/* ---------- SAFETY ---------- */
.lp-trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.lp-trust li{background:var(--c-card);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--c-sub);line-height:1.6;}
.lp-trust b{font-size:14px;color:var(--c-ink);}
.lp-trust a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;}

/* ---------- FAQ(styles.css の開閉を流用・1列) ---------- */
.lp #faq .faq{display:block;}
.lp #faq .faq__item{border-top-color:var(--c-line);}
.lp #faq .faq__q{font-family:var(--gothic);font-size:15px;min-height:56px;padding:14px 2px;}
.lp #faq .faq__a p{font-family:var(--gothic);font-size:14px;color:var(--c-sub);}
.lp #faq .faq__icon{color:var(--c-accent);}
.lp-more--faq{max-width:none;margin-top:0;border-top:1px solid var(--c-line);}
.lp-more--faq>summary{width:100%;}
.lp #faq .faq__contact{font-family:var(--gothic);}
.lp #faq .faq__contact a{color:var(--c-accent);}

/* ---------- FINAL ---------- */
.lp-final{margin-top:56px;background:var(--c-card);padding:56px 0 64px;border-top:1px solid #ebe8e1;}
.lp-final__btns{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto;}

/* ---------- footer ---------- */
.lp .site-footer{background:var(--c-bg);}

/* ---------- sticky bar(スマホのみ。開始ボタンが見えない間だけ) ---------- */
.lp-sticky{display:none;}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:860px){
  .lp-br-sp{display:inline;}
  .lp-sp-only{display:block;}
  .lp-h2{font-size:21px;margin-bottom:16px;}
  .lp-block{padding:40px 0 4px;}

  .site-header__inner{gap:10px;}
  .site-header__inner .brand{margin-right:auto;}
  .lp-header-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--c-accent);color:#fff;font-size:13px;font-weight:700;}
  .nav-toggle{min-width:44px;min-height:44px;}
  .mobile-menu>a:not(.btn){min-height:44px;display:flex;align-items:center;}

  .lp-hero{padding:24px 0 20px;}
  .lp-hero__grid{grid-template-columns:1fr;gap:18px;}
  .lp-kicker{font-size:12px;margin-bottom:10px;}
  .lp-hero__title{font-size:26px;line-height:1.55;}
  .lp-hero__lede{font-size:14px;margin-top:10px;}
  .lp-hero__basis{font-size:11.5px;margin-top:10px;}
  .lp-product__img{width:120px;}
  .lp-product__name{font-size:15px;}

  .lp-movies{grid-template-columns:1fr;}

  .lp-steps{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:4px;margin:0 -20px;padding-left:20px;padding-right:20px;}
  .lp-step{flex:none;width:158px;scroll-snap-align:start;padding:14px;}
  .lp-step--shot{width:150px;}
  .lp-step--shot img{max-height:none;height:240px;}

  .lp-price__amount{font-size:32px;}

  .lp-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .lp-tile>summary{min-height:112px;padding:14px;}

  .lp-voice{padding:18px;gap:12px;}
  .lp-voice__img{width:52px;height:52px;}
  .lp-voice__quote{font-size:16px;}

  .lp-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .lp-trust li{padding:14px;}

  .lp-compare__row{padding:11px 12px;font-size:13px;}

  .lp-final{margin-top:40px;padding:40px 0 120px;}

  .lp-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #ebe8e1;
    transform:translateY(110%);transition:transform .25s ease;}
  .lp-sticky.is-visible{transform:none;}
  .lp-sticky__price{font-size:12px;line-height:1.45;color:var(--c-sub);flex:none;}
  .lp-sticky__btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:8px;background:var(--c-accent);color:#fff;font-size:15px;font-weight:700;}
}

@media (max-width:360px){
  .lp-hero__title{font-size:23px;}
  .lp-product__img{width:100px;}
}

@media (prefers-reduced-motion:reduce){
  .lp-btn,.lp-product,.lp-sticky{transition:none;}
}