@charset "UTF-8";
/* ==========================================================================
   kaibo PILLOW / 2周年記念 第二弾セールLP（ig4-sale8）
   --------------------------------------------------------------------------
   デザイン基準
     SP  : 幅 500px（Figma アートボード sale2-sp(129-2560)）
     PC  : 1440 × 960px（Figma アートボード sale2-pc(129-948)）
           - 中央 500px のカラムだけがスクロールする
           - 背景／左サイドナビ／右サイドイメージは position:fixed で固定
   ブレイクポイント
     ~767px    : SPレイアウト（カラム 100%）
     768px~    : 背景を表示＋カラムを 500px 固定で中央寄せ
     1200px~   : 左サイドナビを表示
     1400px~   : 右サイドイメージを表示
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スコープ内リセット（ecforceの他要素に影響させないため .l-lp 配下限定）
   -------------------------------------------------------------------------- */
.l-lp,
.l-lp *,
.l-lp *::before,
.l-lp *::after {
  box-sizing: border-box;
}

.l-lp img,
.l-lp picture {
  display: block;
  max-width: 100%;
}

.l-lp img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.l-lp ul,
.l-lp ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-lp h1,
.l-lp h2,
.l-lp p,
.l-lp figure {
  margin: 0;
}

.l-lp a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   2. レイアウト
   -------------------------------------------------------------------------- */
.l-lp {
  position: relative;
  background-color: #f9f9f9;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #1a2e33;
  line-height: 1.5;
  overflow-x: clip; /* サイド要素のはみ出しでの横スクロールを防ぐ */
}

/* 本文カラム（PCではここだけがスクロールする） */
.l-lp__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background-color: #ffffff;
}

/* --- 固定背景 ------------------------------------------------------------ */
.l-lp__bg {
  display: none;
}

@media screen and (min-width: 768px) {
  .l-lp__bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #f9f9f9;
    overflow: hidden;
    pointer-events: none;
  }

  /* 右上のファブリック：左端は必ず中央カラムの下に隠れる幅にしている */
  .l-lp__bgTop {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 3px); /* 1440px時 = 717px（デザイン通り） */
    height: 328px;
  }

  /* 左下のファブリック：右端は必ず中央カラムの下に隠れる幅にしている */
  .l-lp__bgBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(50% + 53px); /* 1440px時 = 773px（デザイン通り） */
    height: 353px;
  }

  .l-lp__bgTop img,
  .l-lp__bgBottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .l-lp__bgTop img {
    object-position: right top;
  }

  .l-lp__bgBottom img {
    object-position: left bottom;
  }
}

/* --------------------------------------------------------------------------
   3. セクション（画像の切り貼り）
   -------------------------------------------------------------------------- */
.p-sec {
  position: relative;
  display: block;
}

/* CTAボタン（購入フォームへスクロール） */
.p-sec--cta {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.p-sec--cta:hover img {
  opacity: 0.85;
}

.p-sec--cta img {
  transition: opacity 0.2s ease;
}

/* ページ内リンクのアンカー（セクション内の任意位置に置く） */
.p-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 12px;
}

.p-anchor--top {
  top: 0;
}

/* sec02内：お客様の声（お手紙）見出し位置 = デザイン y1390 */
#voice {
  top: 37.55%;
}

/* sec12内：開発者からのごあいさつ 見出し位置 = デザイン y11200 */
#developer {
  top: 22.64%;
}

/* --------------------------------------------------------------------------
   4. 動画（sec02 の「使用前 / 3分後」枠に重ねる YouTube埋め込み）
      デザイン座標 : x48 / y1153 / w403 （sec02 = y942〜2135, h1193）
   -------------------------------------------------------------------------- */
.p-sec--movie {
  overflow: hidden;
}

.p-movie {
  position: absolute;
  left: 9.6%;   /*  48 / 500 */
  top: 17.686%; /* (1153 - 942) / 1193 */
  width: 80.6%; /* 403 / 500 */
  border-radius: 4px;
  overflow: hidden;
  background-color: #000;
  /* iframeの高さを16:9で確保する（アスペクト比未対応ブラウザ向けの保険） */
  aspect-ratio: 16 / 9;
}

.p-movie__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   5. PC左サイド（ロゴ／セール告知／ページ内リンク／CTA）
      デザイン座標 : x90 / y58 / w300
   -------------------------------------------------------------------------- */
.p-pcnav {
  display: none;
}

@media screen and (min-width: 1200px) {
  .p-pcnav {
    display: block;
    position: fixed;
    top: 58px;
    left: max(16px, calc(50% - 630px)); /* 1440px時 = 90px（デザイン通り） */
    z-index: 2;
    width: 300px;
  }

  .p-pcnav__head {
    width: 100%;
  }

  /* デザイン上の間隔 290.93 - 251 = 39.93px */
  .p-pcnav__list {
    position: relative;
    width: 100%;
    margin-top: 40px;
  }

  /* 画像の上に重ねる透明リンク（1項目 25px / 40px間隔） */
  .p-pcnav__link {
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    top: calc(var(--i) * 40px - 4px);
    cursor: pointer;
  }

  .p-pcnav__link span {
    /* 読み上げ用テキスト（画像で表示済みのため視覚的には隠す） */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .p-pcnav__link:hover {
    background-color: rgba(26, 46, 51, 0.05);
    border-radius: 4px;
  }

  /* デザイン上の間隔 579.93 - (290.93 + 265) = 24px */
  .p-pcnav__btn {
    display: block;
    width: 100%;
    margin-top: 24px;
    transition: opacity 0.2s ease;
  }

  .p-pcnav__btn:hover {
    opacity: 0.85;
  }
}

/* --------------------------------------------------------------------------
   6. PC右サイド（イメージカット・装飾）
      デザイン座標 : x1010 / y125 / w390
   -------------------------------------------------------------------------- */
.p-pcside {
  display: none;
}

@media screen and (min-width: 1400px) {
  .p-pcside {
    display: block;
    position: fixed;
    top: 125px;
    right: calc(50% - 680px); /* 1440px時 = 40px（デザイン通り） */
    z-index: 2;
    width: 390px;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   7. よくある質問（既存LPから移植）
   -------------------------------------------------------------------------- */
.p-faq {
  padding-bottom: 40px;
  background-color: #d4dadb;
  scroll-margin-top: 12px;
}

.p-faq__inner {
  padding: 0 20px;
}

.p-faq__ttl {
  max-width: 100%;
  margin: 0 auto;
}

.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 16px;
}

.p-faq__trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  padding: 16px 18px;
}

.p-faq__triggerTxt {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.p-faq__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.p-faq__arrow::before,
.p-faq__arrow::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #1a2e33;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition-duration: 0.5s;
}

.p-faq__arrow::after {
  transform: rotate(-90deg);
}

.p-faq__content {
  display: flex;
  gap: 12px;
  padding: 0 18px 0 50px;
  background-color: #fff;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}

.p-faq__contentTxt {
  flex: 1;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.p-faq__contentTxt a {
  color: #1a2e33;
  text-decoration: underline;
}

.p-faq__item.is-active .p-faq__content {
  padding: 16px 18px 16px 50px;
  line-height: normal;
  height: auto;
  opacity: 1;
}

.p-faq__item.is-active .p-faq__arrow::after {
  transform: rotate(0deg);
}

/* --------------------------------------------------------------------------
   8. 決済エリア／購入フォーム（既存LPから移植）
   -------------------------------------------------------------------------- */
#order {
  scroll-margin-top: 12px;
}

/* ecforceが差し込む購入フォーム内は、上のリセットの影響を最小限にする */
.l-lp .form_container_ec img,
.l-lp .form_container_sp_ec img {
  width: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   9. ecforce購入フォームの横幅調整
      ecforceのPC用フォーム（テンプレート108）は
        .form_container_ec      width: 940px
        table.landing_form_ec   width: 852px
        .landing_form_ec td     width: 584px
      と固定幅のため、本文カラム（500px）からはみ出す。
      本文カラム内に収まるよう可変幅で上書きする。
      ※SP（スマホUA）は .form_container_sp_ec が出力され元々可変のため対象外
   -------------------------------------------------------------------------- */
.l-lp .form_container_ec {
  width: 100%;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

.l-lp table.landing_form_ec {
  width: 100%;
  table-layout: fixed;
}

.l-lp .landing_form_ec th {
  width: 36%;
  padding: 12px 8px;
  word-break: break-all;
}

.l-lp .landing_form_ec td {
  width: auto;
  padding: 12px 6px;
}

.l-lp .landing_form_ec th .form_box_label_ec strong {
  font-size: 13px;
}

.l-lp span.form_required_ec {
  float: none !important;
  margin-left: 0;
  vertical-align: middle;
}

/* 入力欄がセル幅を超えないようにする */
.l-lp .form_main_container_ec div.form_group_ec {
  padding-left: 0;
  padding-right: 0;
}

.l-lp .form_main_container_ec div.form_group_ec input,
.l-lp .form_main_container_ec div.form_group_ec select {
  max-width: 100%;
}

.l-lp .form_main_container_ec input.input_box_name1_ec,
.l-lp .form_main_container_ec input.input_box_name2_ec,
.l-lp .form_main_container_ec input.input_box_kana1_ec,
.l-lp .form_main_container_ec input.input_box_kana2_ec {
  width: 60%;
}

.l-lp .form_main_container_ec select.input_box_pref_ec {
  width: 100%;
  max-width: 150px;
}

/* 「入力を省略する」ボックス（元は width: 852px 固定） */
.l-lp .login_message_box_ec {
  width: 100%;
}

.l-lp p.login_message_wrapper_ec {
  font-size: 13px;
  padding: 0 8px;
}

/* エラー吹き出しがはみ出さないように */
.l-lp .form_main_container_ec .formError {
  width: auto;
  max-width: 100%;
}

/* 購入ボタン */
.l-lp .submit_bottom_ec,
.l-lp .login_button_ec,
.l-lp .submit_button_complete_ec {
  max-width: 100%;
}

.l-lp .payarea {
  padding: 20px 0;
  background-color: #fff;
}