@charset "UTF-8";

/* =========================================================
   bycaree  lower.css  ─ 下層ページ専用（プライバシーポリシー / 会員規約）
   ・TOP とは別構成。可読性重視の静的テキストページ（アニメなし）
   ・共有トークン(:root)・フッターは common.css（先に読み込む）
   ・単位は rem 固定基準（html font-size:10px＝Figma 1440 の px÷10）。
     これで common.css のフッター(rem)も TOP と同一に効く。
   背景＝ダークオレンジ(bk_bg) 全面＋クリーム(#F9EEDA)文字。Footer だけクリーム地。
   ========================================================= */

html{ font-size:10px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-jp);
  font-weight:500;
  color:var(--c-cream);
  line-height:1.75;
  /* ダークオレンジのテクスチャ地（TOP と同じ bk_bg）。固定でスクロールしても地は不動 */
  background:var(--c-bk) url("../img/common/bk_bg.png") center top / cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }

/* ===== 共通：LINE ボタン（紫） ===== */
.line-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  height:5.2rem; padding-inline:2.8rem; min-width:31rem;   /* 文言短縮（LINEで事前登録）でも旧テキスト幅を維持 */
  background:var(--c-purple); color:var(--c-cream);
  font-family:var(--f-jp); font-weight:700; font-size:1.6rem; line-height:1;
  border-radius:.8rem; white-space:nowrap; text-decoration:none;
  transition:background-color .25s ease;   /* ホバーは色変化のみ（自然にtransition） */
}
.line-btn__main{ line-height:1; }   /* font-sizeは.line-btnを継承（PC1.6rem / SPフローティング1.4rem） */
.line-btn__note{ margin-top:.4rem; font-size:1.1rem; font-weight:500; line-height:1.2; opacity:.9; }   /* ボタン内の受付注記＝小さく控えめ（上に少し間隔） */
.line-btn:hover{ background:var(--c-black); }   /* ホバーで貼り付けた色（ダーク）へ */

/* ===== ヘッダー（h120・ロゴ左＋LINE右・下端クリームボーダー） ===== */
.lower-header{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  height:9.6rem;
  /* 帯・下端ボーダーは全幅のまま、中身(ロゴ＋ボタン)を最大1200px中央に収める */
  padding-inline:max(2.4rem, calc((100% - 120rem) / 2));
  border-bottom:.3rem solid var(--c-cream);
}
.lower-header__logo-link{ display:inline-block; }
.lower-header__logo{ width:11.2rem; }   /* Figma 141px → 収まり良く縮小 */

/* ===== タイトル（👄 タイトル 👄・中央） ===== */
.lower-tit{ padding:14rem 8rem 8rem; text-align:center; }
.lower-tit__h1{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  margin:0; color:var(--c-cream);
  font-family:var(--f-jp); font-weight:900; font-size:3.2rem;
  line-height:1.39; letter-spacing:-.1rem;
}
.lower-tit__mouth{ width:2.6rem; height:2.1rem; flex:none; }

/* ===== 本文（幅800中央・セクション見出し＋本文＋箇条書き） ===== */
.lower-content{
  width:min(80rem, calc(100% - 4rem));
  margin-inline:auto;
  padding-bottom:14rem;
  color:var(--c-cream);
}
.lower-sec{ margin-bottom:6rem; }        /* Figma pb60 */
.lower-sec:last-child{ margin-bottom:0; }
.lower-sec__h{
  margin:0 0 2.4rem;                     /* Figma gap24（見出し→本文） */
  color:var(--c-cream);
  font-family:var(--f-jp); font-weight:900; font-size:3.2rem;
  line-height:1.38; letter-spacing:-.1rem;
}
.lower-sec p{ margin:0; font-size:1.6rem; line-height:2.8rem; font-weight:500; }
.lower-sec p + p{ margin-top:2.8rem; }
.lower-sec ul,
.lower-sec ol{ margin:1.2rem 0 0; padding-left:2.4rem; }   /* li ms-24 */
.lower-sec ul{ list-style:disc; }
.lower-sec ol{ list-style:decimal; }
.lower-sec li{ font-size:1.6rem; line-height:2.8rem; font-weight:500; }
.lower-sec li + li{ margin-top:.6rem; }
.lower-sec :first-child{ margin-top:0; }
/* 手動採番の入れ子リスト（会員規約の (1)(2)… ＝自動採番と混在するため段落で表現） */
.lower-sec .lower-numlist{ margin-top:1.2rem; }
.lower-sec .lower-numlist p{ margin:0; font-size:1.6rem; line-height:2.8rem; }
.lower-sec .lower-numlist p + p{ margin-top:.6rem; }
/* 許可取得前：適用時期の但し書き（※本条は…開始後に適用されます 等）＝小さめ・控えめ */
.lower-sec .lower-note{ margin-top:1.2rem; font-size:1.4rem; line-height:2.4rem; opacity:.8; }
.lower-content a{ color:var(--c-cream); text-decoration:underline; text-underline-offset:.2em; }
.lower-content a:hover{ opacity:.85; }

/* ===== フローティング LINE CTA（PC＝右下固定・スクロール追従。本文に被らない） ===== */
.lower-float-cta{
  position:fixed; right:3.2rem; bottom:3.2rem;
  z-index:60;
}
.lower-float-cta .line-btn{ box-shadow:0 .6rem 2rem rgba(0,0,0,.25); }

/* =========================================================
   SP（≤767px）：全幅1カラム。ヘッダーはロゴ中央、LINE CTA は下端固定バー。
   ========================================================= */
@media (max-width:767px){
  .lower-header{ height:8.8rem; padding-inline:1.6rem; }
  .lower-header__logo{ width:12rem; }
  .lower-header__cta{ display:none; }   /* SPヘッダーはロゴのみ（CTAは右下フローティングへ） */

  .lower-tit{ padding:6rem 2rem 4rem; }
  .lower-tit__h1{ font-size:2.4rem; gap:.6rem; }

  .lower-content{ width:calc(100% - 4rem); padding-bottom:12rem; }
  .lower-sec{ margin-bottom:4.8rem; }
  .lower-sec__h{ font-size:2.4rem; margin-bottom:1.6rem; }

  /* フローティング：SPも右下に配置（追従）＝Figma準拠（紫・14px・padding 12/20px・角丸8px） */
  .lower-float-cta{ right:1.6rem; bottom:calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .lower-float-cta .line-btn{ height:auto; padding:1.2rem 2rem; font-size:1.4rem; min-width:24rem; }   /* SPは全幅化しすぎないよう控えめの固定幅 */
  .line-btn__note{ font-size:.9rem; }   /* SPは注記をさらに小さく */
}

/* 追従ボタンが右下に常駐＝フッター下端に余白を足してコピーライト等と被らせない。
   ボタンはタブレット帯(768〜)ではPC寸(下から〜84px域)なので余裕を持たせる。
   ≤900px で iPad Mini(744/768)/Air(820)/Pro11(834) をカバー、Pro12.9(1024)は据置（被らない）。 */
@media (max-width: 900px){
  .footer{ padding-bottom:calc(12rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce){
  .line-btn{ transition:none; }
}