@charset "UTF-8";
/* ==========================================================================
   LP_SCOPE : lp-otomodachi 内だけに適用
   ========================================================================== */
.lp-otomodachi * { box-sizing: border-box; }

/* ==========================================================================
   基本（PC/SP共通）
   ========================================================================== */
.lp-otomodachi .container{
  max-width: 1500px;
  margin: 0 auto;
  background: #fff;
}

.lp-otomodachi .full-width-img{
  width: 100%;
  display: block;
}

.lp-otomodachi .section-box{
  margin-bottom: 10px;
}

/* ==========================================================================
   上部テキスト
   ========================================================================== */
.lp-otomodachi .lp-font-w6{
  font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W6",sans-serif !important;
  font-weight: 600 !important;
  text-align: center;
  color: #000;
  line-height: 1.6;
  padding: 30px 15px;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.lp-otomodachi .campaign-title-w6,
.lp-otomodachi .campaign-description-w6{
  font-size: 16px;
  display: block;
}

/* ==========================================================================
   注意事項
   ========================================================================== */
.lp-otomodachi .notes-box-w6{
  padding: 30px 20px;
  background: #fff;
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W6",sans-serif !important;
}

.lp-otomodachi .notes-title-w6{
  font-size: 18px;
  font-weight: 600 !important;
  display: block;
  margin-bottom: 25px;
  text-align: center;
  letter-spacing: .05em;
}

.lp-otomodachi .campaign-note{
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.6;
}

.lp-otomodachi .notes-list-w6{
  list-style: none;
  padding: 0;
  max-width: 650px;
  text-align: left;
  margin: 0 auto;
}

.lp-otomodachi .notes-list-w6 li{
  position: relative;
  padding-left: 4.5em;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: normal !important;
}

.lp-otomodachi .notes-list-w6 li::before{
  content: "\30FB";
  position: absolute;
  left: 4em;
  top: 0;
  font-size: 12px;
  color: #333;
}

/* ==========================================================================
   PC/SP 表示切替（テーマ側に負けないよう !important を維持）
   ========================================================================== */
.lp-otomodachi .pc-only-content{ display: block !important; }
.lp-otomodachi .sp-only-content{ display: none !important; }

/* ==========================================================================
   640px以下：文字まわり調整
   ========================================================================== */
@media (max-width: 640px){
  .lp-otomodachi .notes-title-w6{ font-size: 17px; }

  .lp-otomodachi .notes-list-w6 li{
    font-size: 12px;
    padding-left: 1.2em !important;
  }

  .lp-otomodachi .notes-list-w6 li::before{
    font-size: 10px;
    left: 0 !important;
    top: 2px;
  }

  .lp-otomodachi .campaign-note{
    font-size: 12px !important;
    line-height: 1.5;
  }

  .lp-otomodachi .lp-font-w6{
    font-size: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 5px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.5 !important;
  }

  .lp-otomodachi .campaign-title-w6,
  .lp-otomodachi .campaign-description-w6{
    font-size: 12px !important;
  }

  .lp-otomodachi .lp-font-w6 br{ display: inline !important; }
}

/* ==========================================================================
   SP（<=767px）: スライダー & sp-flow
   ※ ここにSP用スタイルを集約
   ========================================================================== */
@media screen and (max-width: 767px){

  /* PC/SP 表示切替 */
  .lp-otomodachi .pc-only-content{ display: none !important; }
  .lp-otomodachi .sp-only-content{ display: block !important; }

  /* ----------------------------------------------------------
     sp-flow：セクション背景
     1つ目：白、2つ目：グレー、3つ目：白…（交互）
     ※ sp-only-content の直下に sp-flow が並ぶ想定
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-only-content .sp-flow{
    width: 100%;
    margin: 0;
    padding: 28px 0 34px;
    background: #fff;
  }
  .lp-otomodachi .sp-only-content .sp-flow + .sp-flow{
    margin-top: 0;
  }
  .lp-otomodachi .sp-only-content .sp-flow:nth-of-type(even){
    background: #f2f2f2;
  }

  .lp-otomodachi .sp-flow__ttl{
    margin: 0 16px 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .04em;
    color: #333;
  }

  /* ----------------------------------------------------------
     slider 基本（背景は sp-flow 側で管理）
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-slider{
    position: relative;
    overflow: hidden;
  }
  .lp-otomodachi .sp-slider__viewport{
    overflow: hidden;
    touch-action: pan-y;
  }
  .lp-otomodachi .sp-slider__track{
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
  }

  /* slide：矢印分の余白だけ確保、背景は透明 */
  .lp-otomodachi .sp-slider__slide{
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 36px;
    background: transparent;
  }
  .lp-otomodachi .sp-slider__slide.is-gray{
    background: transparent;
  }

  /* ----------------------------------------------------------
     card：外枠は使わず（画像をそのまま表示）
     caption を絶対配置するための土台
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-slider__card{
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .lp-otomodachi .sp-slider__card .full-width-img{
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
  }

  /* pointkakunin1 画像内の「ポイント」表示を補正 */
  .lp-otomodachi .sp-only-content .sp-flow:nth-of-type(3) .sp-slider__slide:first-child .sp-slider__card::after,
  .lp-otomodachi .sp-slider__card:has(> .full-width-img[src*="pointkakunin1.png"])::after{
    content: "ポイント";
    position: absolute;
    left: 37.0%;
    top: 38.0%;
    width: 16.9%;
    height: 4.7%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1013;
    color: #fff;
    font-size: clamp(7px, 2.2vw, 11px);
    line-height: 1;
    z-index: 3;
    pointer-events: none;
  }

  /* ----------------------------------------------------------
     caption：画像の下部中央に重ねる
     ・改行は強制しない（枠に当たったら自動改行）
     ・BRを入れた場合はその位置で改行
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-slider__caption{
    position: absolute;
    left: 4px;
    right: 4px;
    transform: none;
    bottom: 4%;          /* 8%〜14%で微調整 */
    width: auto;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: #333;
    z-index: 2;
    pointer-events: none;

    /* 文字をできるだけ自然に見せつつ、枠内で折り返す */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-break: auto;
  }

  /* ----------------------------------------------------------
     arrows
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-slider__arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    opacity: .75;
    -webkit-tap-highlight-color: transparent;
  }
  .lp-otomodachi .sp-slider__arrow--prev{ left: 5px; }
  .lp-otomodachi .sp-slider__arrow--next{ right: 5px; }

  .lp-otomodachi .sp-slider__arrow img{
    display: block;
    width: 100%;
    height: auto;
  }
  .lp-otomodachi .sp-slider__arrow--prev img{
    transform: rotate(180deg);
  }

  /* ----------------------------------------------------------
     dots
     ---------------------------------------------------------- */
  .lp-otomodachi .sp-slider__dots{
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 0;
  }
  .lp-otomodachi .sp-slider__dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: #cfcfcf;
    cursor: pointer;
    padding: 0;
  }
  .lp-otomodachi .sp-slider__dot.is-active{
    background: #333;
  }
}
/* =========================================================
   SPスライダー（LP内の sp-flow 用）
   ========================================================= */
@media screen and (max-width: 767px){

  /* 表示切替 */
  .lp-otomodachi .pc-only-content{ display:none; }
  .lp-otomodachi .sp-only-content{ display:block; }

  /* 各 sp-flow の背景（ブロックごとに切替） */
  .lp-otomodachi .sp-only-content .sp-flow{
    margin: 0;
    padding: 28px 0 34px;
    background: #fff;
  }
  .lp-otomodachi .sp-only-content .sp-flow + .sp-flow{ margin-top: 18px; }
  .lp-otomodachi .sp-only-content .sp-flow:nth-of-type(even){ background:#f2f2f2; }

  .lp-otomodachi .sp-flow__ttl{
    margin: 0 16px 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #333;
  }

  /* slider */
  .lp-otomodachi .sp-flow .sp-slider{ position:relative; overflow:hidden; }
  .lp-otomodachi .sp-flow .sp-slider__viewport{ overflow:hidden; touch-action:pan-y; }
  .lp-otomodachi .sp-flow .sp-slider__track{ display:flex; transition:transform .35s ease; will-change:transform; }

  /* 端末が小さくても caption が入るよう左右余白はやや小さめ */
  .lp-otomodachi .sp-flow .sp-slider__slide{
    min-width:100%;
    box-sizing:border-box;
    padding: 0 32px;        /* ここで画像の左右幅を調整 */
    background: transparent;
  }

  /* card（外枠は使わない） */
  .lp-otomodachi .sp-flow .sp-slider__card{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 auto;
    overflow:hidden;
  }

  .lp-otomodachi .sp-flow .sp-slider__card .full-width-img{
    display:block;
    width:100%;
    height:auto;
  }

  /* caption：画像の下部エリアに重ねる（中央寄せ） */
  .lp-otomodachi .sp-flow .sp-slider__caption{
    position:absolute;
    left:4px;
    right:4px;
    transform:none;
    bottom: 7%;
    width: auto;
    max-width: none;
    padding: 0 6px;
    box-sizing: border-box;
    margin: 0;
    display: block;
    overflow: hidden;
    text-align:center;
    font-size:12px;
    line-height:1.45;
    color:#333;

    /* 改行ルールを緩めて、狭い幅でも枠内で折り返す */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-break: auto;

    /* 以前のline-clampを無効化（もし残っていても打ち消す） */
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: hidden;
  }

  /* arrows */
  .lp-otomodachi .sp-flow .sp-slider__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    background:transparent;
    border:0;
    padding:0;
    z-index:10;
    opacity:.75;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .lp-otomodachi .sp-flow .sp-slider__arrow--prev{ left:5px; }
  .lp-otomodachi .sp-flow .sp-slider__arrow--next{ right:5px; }
  .lp-otomodachi .sp-flow .sp-slider__arrow img{ display:block; width:100%; height:auto; }
  .lp-otomodachi .sp-flow .sp-slider__arrow--prev img{ transform: rotate(180deg); }

  /* dots */
  .lp-otomodachi .sp-flow .sp-slider__dots{
    display:flex;
    justify-content:center;
    gap:8px;
    padding-top:12px;
  }
  .lp-otomodachi .sp-flow .sp-slider__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:0;
    background:#cfcfcf;
    padding:0;
    cursor:pointer;
  }
  .lp-otomodachi .sp-flow .sp-slider__dot.is-active{ background:#333; }
}

/* さらに小さい端末：文字を少し下げて重なりを防ぐ */
@media screen and (max-width: 360px){
  .lp-otomodachi .sp-flow .sp-slider__slide{ padding: 0 26px; }
  .lp-otomodachi .sp-flow .sp-slider__caption{
    bottom: 6%;
    font-size: 10px;
    left: 4px;
    right: 4px;
    width: auto;
  }
}
@media screen and (max-width: 320px){
  .lp-otomodachi .sp-flow .sp-slider__slide{ padding: 0 22px; }
  .lp-otomodachi .sp-flow .sp-slider__caption{
    bottom: 5%;
    font-size: 9px;
    left: 4px;
    right: 4px;
    width: auto;
  }
}

/* is-gray は背景を使わない（flow 側で背景を切替） */
@media screen and (max-width: 767px){
  .lp-otomodachi .sp-slider__slide.is-gray{ background: transparent; }
}

/* ==========================================================================
   PC（>=768px）
   ========================================================================== */
@media screen and (min-width: 768px){
  .lp-otomodachi .pc-only-content{ display: block !important; }
  .lp-otomodachi .sp-only-content{ display: none !important; }
}