@charset "UTF-8";
/* =====================================================================
   lp-style.css ｜ LP共通レイアウト・部品スタイル（全LP共通／通常は編集不要）
   ※ 色・背景画像・フォントは各HTMLの <style id="lp-theme"> 側で定義
   ===================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-base);
  color:var(--c-ink);
  background:#DDE4E3;
  line-height:1.75;
  font-size:15px;
  letter-spacing:.02em;
}
img{max-width:100%;height:auto;display:block;margin: 0 auto;}
a{color:var(--c-primary);text-decoration:none;}
a:hover{opacity: 0.6;text-decoration:underline;}

.hidden-fb{ display: none; }
.hidden-sp{ display: block; }

section.sec:nth-of-type(odd) {
	background-color: var(--c-bg);
}
section.sec:nth-of-type(even) {
	background-color: var(--c-bg-soft);
}

@media print, screen and (max-width: 767px) {
  .hidden-fb{ display: block; }
  .hidden-sp{ display: none; }
}


/* SP基準コンテナ：PCでも中央にSP幅で表示 */
.lp{max-width:var(--lp-width);margin:0 auto;background:var(--c-bg);overflow:hidden}

/* ---------- サイトヘッダー（ロゴ中央配置） ---------- */
.site-header{display:flex;justify-content:center;align-items:center;padding:14px 20px;background:#fff;border-bottom:1px solid var(--c-line)}
.site-header__logo{display:inline-flex}
.site-header__logo img{height:60px;width:auto}

.sec{padding:48px 20px}
.sec__eyebrow{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.14em;
  color:var(--c-primary);margin-bottom:10px
}
.sec__title{font-size:24px;font-weight:800;line-height:1.45;margin-bottom:8px}
.sec__title em{font-style:normal;color:var(--c-accent)}
.sec__lead{font-size:16px;color:var(--c-ink-sub);margin-bottom:24px}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;color: var(--c-ink);text-align:center;
  padding:64px 22px 56px;
  background:var(--hero-bg);
  background-size:cover;background-position:center;
}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
.hero>*{position:relative;z-index:1}
.hero__badge{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.1em;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.45);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(2px)
}
.hero__title{font-size:30px;font-weight:900;line-height:1.4;margin:0 auto 14px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero__title em{font-style:normal;color:var(--c-ink-sub)}
.hero__sub{font-size:15px;margin-bottom:26px;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero__img{margin:0 auto 26px;max-width:100%;border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* ---------- ボタン ---------- */
.btn{
  display:block;width:100%;max-width:600px;margin:0 auto;
  padding:17px 20px;border-radius:999px;border:none;cursor:pointer;
  font-size:17px;font-weight:800;color:#fff;text-align:center;font-family:inherit;line-height:1.45;
  background:linear-gradient(180deg,var(--c-accent),var(--c-accent-dark));
  box-shadow:0 8px 18px rgba(240,104,46,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(240,104,46,.45)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid #FFD66B;outline-offset:2px}
.btn__note{display:block;font-size:11px;font-weight:600;opacity:.9;margin-top:2px}

/* ---------- 導入 ---------- */
#introduction .read {
  font-weight:600;
  font-size: 18px;
}
.mail_note::before {
content: "※";
}
.mail_note {
    text-align: left;
    font-size: 13px;
    margin-top: 20px;
    line-height: 1.6;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

/* 本文中の素のリスト（CMS入稿の ul/ol）：リセットで消える左余白を復元し、
   list-style: outside のビュレットがコンテナ左へはみ出すのを防ぐ */
.sec ul:not([class]),
.sec ol:not([class]){padding-left:1.5em;margin:12px 0}
.sec ul:not([class]) li,
.sec ol:not([class]) li{margin-bottom:6px}

/* ---------- 課題提起（タップで開閉するアコーディオン） ---------- */
.checklist{list-style:none;display:grid;gap:12px;margin-top:8px}
.checklist__item{background:#fff;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.checklist__q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:14px 44px 14px 46px;font-size:15px;font-weight:700;color:var(--c-ink);position:relative
}
/* 左：チェックマーク */
.checklist__q::before{
  content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--c-primary);color:#fff;
  font-size:13px;line-height:22px;text-align:center
}
/* 右：開閉を示すVアイコン（シェブロン） */
.checklist__q::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--c-primary);border-bottom:2px solid var(--c-primary);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease
}
.checklist__item.is-open .checklist__q::after{transform:translateY(-30%) rotate(225deg)}
/* 回答（.checklist__a）が無い項目：開閉不可のためシェブロンを隠しカーソルも通常に */
.checklist__item.is-static .checklist__q{cursor:default}
.checklist__item.is-static .checklist__q::after{display:none}
.checklist__q:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
.checklist__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.checklist__a p{padding:0 16px 16px 46px;font-size:16px;color:var(--c-ink-sub);font-weight:400}

/* ---------- レビュー星評価（共通部品 / .revico-star-block 参照） ---------- */
.stars{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:1px;white-space:nowrap;color:#dce0df}
.stars__off{color:#dce0df}
.stars__on{position:absolute;left:0;top:0;width:var(--rate,0%);overflow:hidden;color:#FFB400}
.rating{display:flex;align-items:center;gap:6px;margin:6px 0 10px}
.rating__score{font-weight:800;color:#FFB400;font-size:14px}
.rating__count{font-size:14px;color:var(--c-ink-sub)}
.revico-multicomment-top .revico-widget .revico-review-comment-row[data-pickup-review=true] .revico-review-comment-detail::after{ background: #fe0000 !important;}

/* ---------- 特徴（カード）※旧テンプレ部品。横展開用に残置 ---------- */
.features{display:grid;gap:18px}
.feature{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.feature__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-bg-soft)}
.feature__body{padding:18px}
.feature__no{font-size:14px;font-weight:800;color:var(--c-accent);letter-spacing:.1em}
.feature__title{font-size:18px;font-weight:800;margin:4px 0 8px}
.feature__text{font-size:16px;color:var(--c-ink-sub)}

/* ---------- 商品ラインナップ（1カラム＋表示切替タブ） ---------- */
.product-tabs{display:flex;gap:8px;margin-bottom:20px}
.product-tab{
  flex:1;padding:12px 8px;border:1px solid var(--c-line);border-radius:999px;background:#fff;
  font-size:16px;font-weight:700;color:var(--c-ink-sub);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}
.product-tab.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.product-tab:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.products{display:grid;gap:18px}            /* 1カラム */
.products[hidden]{display:none}             /* タブ非選択グループを隠す（display:grid が hidden を上書きするため明示） */
.product{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:14px
}
.product__img{width:120px;height:120px;object-fit:cover;border-radius:10px;background:var(--c-bg-soft)}
.product__body{min-width:0}
.product__name{font-size:16px;font-weight:800;line-height:1.4}
.product__price{font-size:13px;color:var(--c-ink-sub);margin-bottom:10px}
.product__price-label{font-size:14px;font-weight:600;margin-right:2px}/* 「通常価格：」の前置きラベル */
.product__price strong{font-size:24px;font-weight:900;color:var(--c-accent);margin-right:2px}
.product__btn{padding:10px 16px;font-size:16px;max-width:none}

/* ---------- お客様の声（商品レビュー / 横スライダー：画像・商品名・評価★・コメント） ---------- */
.voices{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;margin:0 -20px;padding:4px 20px 16px;scrollbar-width:thin;
}
.voice{
  flex:0 0 72%;scroll-snap-align:center;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden
}
.voice__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--c-bg-soft)}
.voice__product{font-size:16px;font-weight:800;line-height:1.45;color:var(--c-ink);margin:12px 14px 8px}
.voice .stars{margin:0 14px;font-size:15px}
.voice__text{font-size:13px;color:var(--c-ink-sub);line-height:1.75;margin:8px 14px 16px}
.voices::-webkit-scrollbar{height:6px}
.voices::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:3px}
#voice .sec__title{margin-bottom: 32px;}

/* ---------- もっと見る（商品の追加表示ボタン） ---------- */
.product-more{
  display:block;margin:20px auto 0;padding:12px 28px;cursor:pointer;
  background:#fff;border:1.5px solid var(--c-primary);border-radius:999px;
  color:var(--c-primary);font-size:16px;font-weight:800;font-family:inherit
}
.product-more:hover{background:var(--c-primary);color:#fff}
.product-more:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.product-more[hidden]{display:none}

/* ---------- 動画（YouTube埋め込み・16:9レスポンシブ） ---------- */
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000; margin-top: 12px;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- FAQ（アコーディオン） ---------- */
.faq{display:grid;gap:10px}
.faq__item{background:#fff;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.faq__q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:16px 46px 16px 16px;font-size:15px;font-weight:700;position:relative;color:var(--c-ink)
}
.faq__q::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:700;color:var(--c-primary);transition:transform .2s ease
}
.faq__item.is-open .faq__q::after{transform:translateY(-50%) rotate(45deg)}
.faq__q:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
.faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq__a p{padding:0 16px 16px;font-size:16px;color:var(--c-ink-sub)}

/* ---------- インラインのオファー ---------- */
.offer a{background:linear-gradient(180deg, var(--c-accent), var(--c-accent-dark));color:#fff;}
.offer__price{font-size:16px;margin-bottom:4px}
.offer__price strong{font-size:38px;font-weight:900;color:var(--c-accent);letter-spacing:.02em}
.offer__price small{font-size:16px;font-weight:700}
.offer__note{font-size:14px;opacity:.85;margin:10px 0 22px}
.offer__lead{font-size:15px;line-height:1.7;margin:6px 0 22px}
.offer__lead strong{color:var(--c-accent);font-size:1.15em;font-weight:900}
.offer strong{color: var(--c-accent);}


/* ---------- フッター ---------- */
.footer{background:#0E1A19;color:#aebbb8;font-size:14px;text-align:center;padding:28px 20px}
.footer a{text-decoration:underline}
.footer__links{margin-bottom:12px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.footer .logo img{ max-width:60px; margin: 0 auto 8px;}

/* ---------- 追従オファー（画面下部固定） ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-top:1px solid var(--c-line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  transform:translateY(0);transition:transform .3s ease;
}
.sticky-cta.is-hidden{transform:translateY(110%)} /* インラインCTA表示中は隠す */
.sticky-cta__inner{max-width:var(--lp-width);margin:0 auto}
.sticky-cta .btn{padding:13px 20px;font-size:14px}

/* ---------- お届けまでの流れ（Flow） ---------- */
.flow{list-style:none;display:grid;gap:14px}
.flow > li{background:#fff;border:1px solid var(--c-line);border-radius:12px;padding:16px 16px 16px 56px;position:relative}
.flow > li::before{counter-increment:flow;content:counter(flow);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--c-primary);color:#fff;font-weight:800;font-size:16px;line-height:28px;text-align:center}
.flow{counter-reset:flow}
.flow__title{font-size:16px;font-weight:800;margin-bottom:4px}
.flow__text{font-size:16px;color:var(--c-ink-sub)}
.flow__link{display:inline-block;margin:8px 0 6px;padding:9px 18px;border:1.5px solid var(--c-primary);border-radius:999px;background:#fff;color:var(--c-primary);font-size:13px;font-weight:800}
.flow__link:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.flow__notes{list-style:none;margin-top:4px;display:grid;gap:3px}
.flow__notes li{font-size:14px;color:var(--c-ink-sub);line-height:1.6;padding-left:1.2em;text-indent:-1.2em}
.flow__notes li::before{content:"※"}
.flow__notes a,.flow__text a{color:var(--c-primary);text-decoration:underline}
.flow strong{color:var(--c-accent)}

/* ---------- 会員のメリット ---------- */
.member_benefit{list-style:none;display:grid;gap:12px;counter-reset:benefit;margin-bottom:22px}
.member_benefit>li{background:#fff;border:1px solid var(--c-line);border-radius:12px;padding:14px 16px 14px 50px;position:relative;font-weight:700;font-size:15px;line-height:1.6}
.member_benefit>li::before{counter-increment:benefit;content:counter(benefit);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--c-accent);color:#fff;font-weight:800;font-size:13px;line-height:26px;text-align:center}
.member_benefit strong{color:var(--c-accent)}
.member_benefit__note{display:block;font-size:14px;color:var(--c-ink-sub);font-weight:400;margin-top:4px}
.member_benefit__more{text-align:center}
.member_benefit__more a{color:var(--c-primary);font-weight:700;text-decoration:underline;font-size:14px}

/* ============================================================
   ナビゲーション（PC=追従カード / SP=ハンバーガー）
   ・メニュー項目は .site-nav 内が正本。SP用オーバーレイへJSで複製
   ============================================================ */

.nav-title{display:inline-block;font-size:18px;font-weight:800;letter-spacing:.04em;padding-bottom:10px;margin-bottom:22px;border-bottom:2px solid currentColor}
.nav-list{list-style:none;display:grid;gap:18px}
.nav-list a{display:block}
.nav-list .sec__eyebrow{font-size: 12px; color: #FFF; margin-bottom: 0;}
.nav-list .sec__title{font-size: 16px; color: #fff;}
.nav-list .sec__title em{color: #fff;}
.nav-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;background:#fff;padding:12px;border-radius:12px}
.nav-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;overflow:hidden}
.nav-social img{width:100%;height:100%;object-fit:contain}


/* PC：右ガターに追従するカード */
.site-nav{display:none}
@media (min-width:1240px){
  .site-nav{
    display:block;position:fixed;top:32px;left:calc(50% + 344px);width:350px;
    background:var(--c-primary);color:#fff;border-radius:18px;padding:26px 24px;
    box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:40;
    /* ウィンドウ高がカードより低い環境ではメニュー内をスクロールさせる。
       下側は追従CTA（約88px）+余白12px=100px を確保し被りを防ぐ。
       dvh=動的ビューポート高（非対応ブラウザは直前の vh 行にフォールバック） */
    max-height:calc(100vh - 132px);
    max-height:calc(100dvh - 132px);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent;
  }
}

/* SP/タブレット：ハンバーガー */
.hamburger{
  position:fixed;top:14px;right:14px;z-index:60;width:48px;height:48px;border:none;cursor:pointer;
  background:var(--c-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.hamburger span{display:block;width:20px;height:2px;background:#fff;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .25s ease,top .25s ease}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.is-menu-open .hamburger span{background:transparent}
.is-menu-open .hamburger span::before{top:0;transform:rotate(45deg)}
.is-menu-open .hamburger span::after{top:0;transform:rotate(-45deg)}

/* SP：全画面オーバーレイメニュー */
.nav-overlay{
  position:fixed;inset:0;z-index:55;background:var(--c-primary);color:#fff;
  padding:84px 32px 40px;opacity:0;visibility:hidden;transition:opacity .25s ease;overflow-y:auto;
}
.is-menu-open .nav-overlay{opacity:1;visibility:visible}
.is-menu-open{overflow:hidden}
.nav-overlay .nav-list{gap:22px}
.nav-overlay .nav-list .ja{font-size:20px}

@media (min-width:1240px){
  .hamburger,.nav-overlay{display:none}
  .is-menu-open{overflow:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/*キャンペーンコード*/
.campaign-code {
  margin: 16px 0;
}

.campaign-code__lead {
  font-size: 14px;
  line-height: 1.6;
  color: #1B2A28;
  margin: 0 0 8px;
}

/* コードボックス兼コピーボタン */
.campaign-code__box {
  /* 既存の inline-flex を flex に変更し、margin auto で中央寄せ */
  display: flex;
  width: fit-content;      /* 中身の幅に合わせる */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 2px dashed #F0682E;
  border-radius: 999px;
  background: #FFF6F1;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background-color .2s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}

.campaign-code__box:hover { background: #FFEDE3; }
.campaign-code__box:active { transform: scale(.98); }

.campaign-code__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #F0682E;
}

.campaign-code__hint {
  font-size: 11px;
  color: #8a8a8a;
  white-space: nowrap;
}

/* コピー完了ツールチップ */
.campaign-code__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1B2A28;
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.campaign-code__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1B2A28;
}

.campaign-code__box.is-copied .campaign-code__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}