/* =========================
   Base
========================= */
:root{
  --teal:#61c6c6;
  --orange:#f57a19;
  --brown:#b7833d;
  --text:#ffffff;
  --ink:#111;
  --container:1120px;
  --shadowBtn:0 10px 18px rgba(0,0,0,.22);
}
body{
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  color:var(--ink);
  background:#fff;
}

/* =========================
   Header
========================= */
.lpHeader__bar{
  background:var(--teal);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.28);
}

.lpHeader__barInner{
  max-width:var(--container);
  margin:0 auto;
  padding:8px 16px;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.lpHeader__logo{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
}

.lpHeader__logo img{
  height:18px;
  width:auto;
  display:block;
}

.lpHeader__barText{
  margin:0;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  padding-left:110px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   MV
========================= */
.mv{
  position:relative;
  overflow:hidden;
  background:var(--teal);
  height:593px;
}

.mv__bg{
  position:absolute;
  inset:0;
  height:100%;
}

.mv__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mv__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.58) 0%, rgba(0,0,0,.52) 35%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.15) 40%, rgba(97,198,198,.55) 100%);
}

.mv__inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mv__copy{
  text-align:center;
  color:#fff;
  width:min(920px,100%);
}

.mv__title{
  margin:0 0 10px;
  font-weight:900;
  font-size: 36px;
  line-height:1.2;
  letter-spacing:.02em;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
}

.mv__hl{
  position:relative;
  display:inline-block;
  padding:0 .25em;
  z-index:1;
  font-size:50px;
}


.mv__hl::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom:2px;
  height:18px;
  background:url("./assets/img/y-line.png") no-repeat center/100% 100%;
  z-index:-1;
}

.mv__sub{
  margin:0 0 22px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
  text-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* CTA */
.mv__cta{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:nowrap;
}

.mvBtn{
  position:relative;
  width:50%;
  padding:16px 18px 14px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  box-shadow:var(--shadowBtn);
  transition:.2s;
}

.mvBtn--orange{ background:var(--orange); }
.mvBtn--brown{ background:var(--brown); }

.mvBtn__main{
  font-weight:900;
  font-size:18px;
  line-height:1.15;
}

.mvBtn__sub{
  margin-top:3px;
  font-weight:800;
  font-size:12px;
  opacity:.95;
}

.mvBtn__arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-weight:900;
  font-size:18px;
}

.mvBtn:hover{ filter:brightness(1.05); }
.mvBtn:active{ transform:translateY(1px); }

/* Responsive */
@media (max-width:767px){

  .lpHeader__barText{
    font-size:11px;
    padding-left:92px;
  }

  .mv{
    height:593px;
  }

  .mv__title{
    font-size:24px
    line-height:1.22;
  }

  
  .mv__hl{ font-size:32px; }
.mv__hl::after{
    left:-8px;
    right:-8px;
    height:16px;
    bottom:1px;
  }

  .mv__cta{
    gap:10px;
  }

  .mvBtn{
    width:50%;
    padding:14px 12px 12px;
  }

  .mvBtn__main{ font-size:14px; }
  .mvBtn__sub{ font-size:10px; }
  .mvBtn__arrow{ right:12px; font-size:14px; }
}

:root{
  --teal:#61c6c6;
  --grayBox:#7d7d7d;
  --yellow:#ffe34a;
  --ink: rgba(0,0,0,.78);
}

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }

.l-container{
  margin: 0 auto;
}

/* =========================
  ① 悩み（壁）セクション：キャプチャ4寄せ
========================= */
.lpWorries{
  /* 上は白、下はティールの帯になるように */
  background: linear-gradient(#ffffff 0%, #ffffff 72%, var(--teal) 72%, var(--teal) 100%);
  padding: 34px 0 0;
}

.lpWorriesHead{
  text-align:center;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  padding: 0 8px 18px;
}

/* 斜めの飾り線（左右） */
.lpWorriesHead::before,
.lpWorriesHead::after{
  content:"";
  position:absolute;
  top: 22px;
  width: 1px;
  height: 46px;
  background: rgba(0,0,0,.35);
  transform: rotate(18deg);
}
.lpWorriesHead::before{ left: 10px; }
.lpWorriesHead::after{ right: 10px; transform: rotate(-18deg); }

.lpWorriesHead__lead{
  margin: 0 0 6px;
  color: rgba(0,0,0,.75);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
}

.lpWorriesHead__title{
  margin: 0;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--ink);
}
.lpWorriesHead__note{
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

/* 吹き出し3つ */
.lpWorriesBubbles{
  max-width: 980px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: end;
}

.lpBubble{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.lpBubble__frame{
  width: 100%;
}

.lpBubble__text{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px 22px 30px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  color: #222;
}

/* 吹き出しの形で文字位置を微調整（キャプチャ4） */
.lpBubble--l .lpBubble__text{ padding-bottom: 63px; }
.lpBubble--c .lpBubble__text{ padding-bottom: 68px; }
.lpBubble--r .lpBubble__text{ padding-bottom: 70px; }

/* 下の人物（悩み） */
.lpWorriesIllust{
  max-width: 980px;
  margin: 18px auto 0;
}
.lpWorriesIllust img{
  width: 100%;
}

/* =========================
  ② 失敗ランキング：キャプチャ2寄せ
========================= */
.lpRank{
  background: var(--teal);
  padding: 18px 0 22px;
}

.lpRank__box{
  max-width: 980px;
  margin: 0 auto;
  background: var(--grayBox);
  border-radius: 10px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
}

.lpRank__title{
  margin: 0 0 10px;
  text-align:center;
  color:#fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .02em;
}
.lpRank__em{ color: var(--yellow); font-weight: 900; }

.lpRank__desc{
  margin: 0 0 14px;
  text-align:center;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.8;
  font-weight: 700;
}

.lpRank__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:center;
}

.lpRankList{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 12px;
}

.lpRankItem{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items:start;
}

/* 黒い台形（斜め） */
.lpRankBadge{
  height: 44px;
  background: #3f3f3f;
  transform: skewX(-18deg);
  border-radius: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.lpRankBadge__txt{
  transform: skewX(18deg);
  color:#fff;
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
}

.lpRankText__ttl{
  margin:0 0 4px;
  color:#fff;
  font-weight:900;
  font-size: 16px;
  line-height: 1.35;
  position:relative;
  display:inline-block;
  padding-bottom:3px;
}
.lpRankText__ttl::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: rgba(255,227,74,.9);
}
.lpRankText__sub{
  margin:0;
  color: rgba(255,255,255,.90);
  font-size: 11px;
  line-height: 1.7;
}
.lpRankText__hl,
.lpRankText__hl2{
  color: var(--yellow);
  font-weight: 900;
}

/* 右の薄グレー枠 */
.lpRankIllust{
  padding: 12px 0 12px 14px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.lpRankIllust img{
  width:100%;
  height:auto;
  max-width:none;
  display:block;
  margin-right:-6px;
}

.lpRank__arrow img{ width: 170px; height:auto; display:block; }

/* =========================
  ③ 解決宣言 + 5カード：キャプチャ3寄せ
========================= */
.lpSolve{
  background: var(--teal);
  padding: 18px 0 0;
}

.lpSolveHead{
  max-width: 980px;
  margin: 10px auto 43px;
  text-align:center;
}

.lpSolveHead__kicker{
  margin: 0 0 4px;
  color: rgba(0,0,0,.75);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .02em;
}

.lpSolveHead__title{
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: .02em;
}

.lpSolveHead__sub{
  margin: 6px 0 0;
  color: var(--ink);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: .02em;
}

/* 黄色マーカー（assets/img） */
.lpSolveHead__hl,
.lpSolveHead__hl2{
  position:relative;
  display:inline-block;
  padding: 0 .25em;
  z-index:1;
}
.lpSolveHead__hl::after,
.lpSolveHead__hl2::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom: 2px;
  height: 16px;
  background: url("./assets/img/y-line.png") no-repeat center/100% 100%;
  z-index:-1;
}

/* 5カード：上3 / 下2中央寄せ */
.lpSteps{
  max-width: 980px;
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items:start;
}

.lpStep{
  background:#fff;
  border: 3px solid rgba(243,195,60,.98);
  border-radius: 10px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
  min-height: 120px;
}

.lpStep__ttl{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
  color:#111;
}

.lpStep__txt{
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  font-weight: 700;
  color: #333;
  letter-spacing: .01em;
  word-break: keep-all;
}
.lpStep__txt strong{ font-weight: 900; }

/* 下段2つを中央に（キャプチャ3） */
.lpSteps > .lpStep:nth-child(4){
  grid-column: 1 / 2;
  justify-self: end;
  width: 86%;
}
.lpSteps > .lpStep:nth-child(5){
  grid-column: 2 / 3;
  justify-self: start;
  width: 86%;
}

/* 上段の均一感 */
@media (min-width: 768px){
  .lpSteps > .lpStep:nth-child(-n+3){ min-height: 130px; }
}

/* ③ 下イラスト */
.lpSolveIllust{
  max-width: 980px;
  margin: 22px auto 0;
}
.lpSolveIllust img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  /* ① */
  .lpWorries{ padding-top: 26px; }
  .lpWorriesHead__title{ font-size: 18px; }
  .lpWorriesHead::before,
  .lpWorriesHead::after{ height: 40px; top: 18px; }

  .lpWorriesBubbles{
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  .lpBubble__frame{ max-width: 360px; margin: 0 auto; }
  .lpBubble__text{ font-size: 14px; padding: 16px 18px 28px; }

  /* ② */
  .lpRank__box{ padding: 16px 14px 14px; }
  .lpRank__title{ font-size: 16px; line-height: 1.4; }

  .lpRank__grid{ grid-template-columns: 1fr; gap: 14px; }
  .lpRankItem{ grid-template-columns: 108px 1fr; gap: 10px; }

  .lpRankBadge{ height: 40px; }
  .lpRankBadge::after{
    right:-12px;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:12px solid #3f3f3f;
  }

  .lpRankText__ttl{ font-size: 14px; }
  .lpRank__arrow img{ width: 140px; }

  /* ③ */
  .lpSolveHead__kicker{ font-size: 13px; }
  .lpSolveHead__title{ font-size: 18px; }
  .lpSolveHead__sub{ font-size: 16px; }

  .lpSolveHead__hl::after,
  .lpSolveHead__hl2::after{
    left:-8px; right:-8px;
    height: 14px;
    bottom: 1px;
  }

  .lpSteps{
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  .lpSteps > .lpStep:nth-child(4),
  .lpSteps > .lpStep:nth-child(5){
    grid-column: auto;
    justify-self: auto;
    width: 100%;
  }
  .lpStep{ padding: 14px 14px 12px; min-height: auto; }
  .lpStep__ttl{ font-size: 15px; }
  .lpStep__txt{ word-break: normal; }
}

/* =========================
  ④ 3つのメリット（確定版HTML専用CSS）
========================= */

:root{
  --meritBorder: rgba(79, 168, 168, .75);
  --ink: rgba(0,0,0,.78);
}

/* section */
.lpMerits{
  background:#fff;
  padding: 34px 0 46px;
}

.lpMeritsHead{
  max-width: 980px;
  margin: 50px auto 50px;
  text-align:center;
}

.lpMeritsHead__kicker{
  margin: 0 0 8px;
  color: rgba(0,0,0,.78);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .02em;
}

.lpMeritsHead__title{
  display:inline-block;
  position:relative;
  margin:0;
  font-weight:800;
  font-size:30px;
  line-height:1.35;
  letter-spacing:.02em;
  padding:0 .35em;
  z-index: 2;
}
.lpMeritsHead__title::after{
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -9px;
  height: 57px;
  background: url(../img/y-line.png) no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}
/* 「3つ」だけ強調（黄マーカー＋オレンジ） */
.lpMeritsHead__hl{
  color:#FF8A00; /* 「3つの」だけ色変更 */
  font-weight:900;
  font-size: 48px;
}
/* SP: 帯を少し細くする */
@media (max-width: 767px){
  .lpMeritsHead__title{
    font-size:20px;
    padding:0 .3em;
  }
  .lpMeritsHead__title::after{
    left:-12px;
    right:-12px;
    bottom:3px;
    height:16px; /* SP */
  }
}

/* list */
.lpMeritList{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

/* item */
.lpMerit{
  position: relative;
  border: 10px solid var(--meritBorder);
  border-radius: 10px;
  padding: 0px 0px 0px 100px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
  align-items: center;
  background: #fff;
}

.lpMerit__body{
  min-width: 0;
}

.lpMerit__ttl{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: #4CBFBF;
  text-underline-offset: 5px;
  color: #111;
}

.lpMerit__txt{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0,0,0,.72);
  letter-spacing: .01em;
}
.lpMerit__txt strong{
  font-weight: 900;
}

/* 左オレンジバッジ（リボン風） */
.lpMerit__badge{
  position:absolute;
  left: 30px;
  top: 50px;
  width: 48px;
  height: 58px;
  background: #ff8a00;
  border-radius: 6px 6px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight: 900;
  line-height: 1.1;
}
.lpMerit__badge::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  margin:auto;
  width: 0;
  height: 0;
  border-left:24px solid transparent;
  border-right:24px solid transparent;
  border-top:14px solid #ff8a00;
}
.lpMerit__badgeTop{
  font-size: 10px;
  letter-spacing: .02em;
}
.lpMerit__badgeNo{
  font-size: 16px;
  margin-top: 2px;
}

/* 右イラスト */
.lpMerit__illust{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.lpMerit__illust img{
  max-width: 360px;
  height: auto;
  display: block;
  margin: 30px 0 0;
}

/* =========================
  Responsive（SP）
========================= */
@media (max-width: 767px){
  .lpMerits{
    padding: 0px 0 38px;
  }

  .lpMeritsHead__title{
    font-size: 18px;
  }
  .lpMeritsHead__hl::after{
    left:-8px;
    right:-8px;
    height: 14px;
    bottom: 1px;
  }

  .lpMerit{
    grid-template-columns: 1fr;
    padding: 16px 16px 14px 16px;
    gap: 12px;
  }

  .lpMerit__illust{
    justify-content:center;
  }
  .lpMerit__illust img{
    width: 260px;
    margin: 0;
  }
}

/* =========================
  ⑤ 制作の流れ：3ステップ（キャプチャ準拠：左画像）
  ※他セクション影響なし：lpFlow2*
========================= */

.lpFlow2{
  background: var(--teal);
  padding: 34px 0 46px;
}

/* 見出し */
.lpFlow2Head{
  max-width: 920px;
  margin: 0 auto 18px;
  text-align: center;
}
.lpFlow2Head__title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .02em;
  color: rgba(0,0,0,.78);
}
.lpFlow2Head__hl{
  position: relative;
  display: inline-block;
  padding: 0 .2em;
  color: #ff8a00;
  font-size: 48px;
  z-index: 1;
}
/*.lpFlow2Head__title::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  bottom: 2px;
  height: 16px;
  background: url("../img/y-line.png") no-repeat center/100% 100%;
  z-index:-1;
}*/
.lpFlow2Head__desc{
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #333333;
}

/* カード群 */
.lpFlow2Cards{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

/* カード（外側STEPバッジが食い込む） */
.lpFlow2Card{
  position: relative;
}

/* STEP丸：左画像は全STEPオレンジ */
.lpFlow2Card__step{
  position: absolute;
  left: 24px;
  top: 22px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: #ff8a00;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  z-index: 5;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.lpFlow2Card__stepTop{
  font-size: 16px;
  letter-spacing: .02em;
}
.lpFlow2Card__stepNo{
  font-size: 18px;
  margin-top: 2px;
}
/* 互換：HTMLに付いていても同じ見え方にする */
.lpFlow2Card__step--orange{
  background: #ff8a00;
}

/* 本体：黄枠＋クリーム＋影 */
.lpFlow2Card__inner{
  background: #fffbe1;
  border: 8px solid #ffe34a;
  border-radius: 10px;
  padding: 18px 108px 18px 108px; /* 左のSTEP丸ぶん空ける */
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
}

/* 上段：左イラスト／右見出し（タイトルは中央） */
.lpFlow2Card__top{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 10px;
}

/* 左イラスト */
.lpFlow2Card__illust{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.lpFlow2Card__illust img{
  width: 190px;
  height: auto;
  display: block;
}

/* 右側ヘッダ */
.lpFlow2Card__head{
  padding-right: 6px;
}
.lpFlow2Card__title{
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .02em;
  color: #111;
}
.lpFlow2Card__sub{
  margin: 2px 0 10px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: rgba(0,0,0,.65);
}
.lpFlow2Card__lead{
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: rgba(0,0,0,.72);
}

/* 下段：白い内枠に2カラム（左画像の白ボックス） */
.lpFlow2Card__cols{
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lpFlow2Col__ttl{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 14px;
  color: rgba(0,0,0,.78);
}

/* 箇条書き */
.lpFlow2List{
  margin: 0;
  padding-left: 1.2em;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(0,0,0,.70);
}

/* STEP03下の黄色帯（左：女性／中央：文／右：0円） */
.lpFlow2Cta{
  margin-top: 14px;
  background: #ffe34a;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 160px 1fr 190px;
  gap: 10px;
  align-items: center;
}
.lpFlow2Cta__girl{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.lpFlow2Cta__girl img{
  width: 160px;
  height: auto;
  display: block;
}
.lpFlow2Cta__center{
  text-align: center;
}
.lpFlow2Cta__ttl{
  margin: 0 0 4px;
  font-weight: 900;
  font-size: 14px;
  color: rgba(0,0,0,.78);
}
.lpFlow2Cta__txt{
  margin: 0;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.75;
  color: rgba(0,0,0,.65);
}
.lpFlow2Cta__yen{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.lpFlow2Cta__yen img{
  width: 190px;
  height: auto;
  display: block;
}

/* =========================
  Responsive（SP）
========================= */
@media (max-width: 767px){
  .lpFlow2{
    padding: 28px 0 38px;
  }
  .lpFlow2Head__title{
    font-size: 18px;
  }
  .lpFlow2Head__hl{
    font-size: 32px;
  }
  .lpFlow2Head__hl::after{
    left:-8px; right:-8px;
    height: 14px;
    bottom: 1px;
  }
  .lpFlow2Head__desc{
    font-size: 11px;
    line-height: 1.9;
  }

  .lpFlow2Cards{
    max-width: 92%;
    gap: 16px;
  }

  /* STEP丸：上中央 */
  .lpFlow2Card__step{
    left: 12%;
    top: 14px;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
  }

  .lpFlow2Card__inner{
    padding: 76px 14px 14px;
    border-width: 7px;
    border-radius: 10px;
  }

  .lpFlow2Card__top{
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 8px;
  }
  .lpFlow2Card__illust{
    justify-content: center;
  }
  .lpFlow2Card__illust img{
    width: 220px;
  }
  .lpFlow2Card__lead{
    font-size: 11px;
  }

  .lpFlow2Card__cols{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 12px;
  }

  .lpFlow2Cta{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .lpFlow2Cta__girl,
  .lpFlow2Cta__yen{
    justify-content: center;
  }
  .lpFlow2Cta__girl img{ width: 170px; }
  .lpFlow2Cta__yen img{ width: 210px; }
}
/* =========================
  ⑤-2 実際のお申込みからサイト公開までのフロー（キャプチャ8）
========================= */
.lpRealFlow{
  background: #eeeeee; /* 薄グレー */
}

.lpRealFlow__container{
  max-width: 980px;
  margin: 0 auto;
}

.lpRealFlow__title{
  margin: 0;
  padding: 80px;
  text-align: center;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0, 0, 0, .78);
  letter-spacing: .02em;
}

/* 4カード＋矢印 */
.lpRealFlowGrid{
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr;
  align-items: stretch;
  gap: 14px;
}

/* カード（ティール） */
.lpRealFlowCard{
  background: #79c7c7;     /* キャプチャのティール寄せ */
  border-radius: 6px;
  padding: 18px 14px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.lpRealFlowCard__icon{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.lpRealFlowCard__icon img{
  width: 52px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}

.lpRealFlowCard__ttl{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: .02em;
}

.lpRealFlowCard__txt{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.95);
  text-align: left;
}

.lpRealFlowCard__note{
  margin: auto 0 0;
  font-weight: 900;
  font-size: 10px;
  color: rgb(255 255 255 / 100%);
  background: rgb(14 14 14 / 85%);
  padding: 14px 10px;
  border-radius: 4px;
  text-align: center;
}

/* 矢印（＞） */
.lpRealFlowArrow{
  position: relative;
}
.lpRealFlowArrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid rgba(0,0,0,.35);
}

/* 下の人物 */
.lpRealFlowPeople{
  margin: 60px auto 0;
  display: flex;
  justify-content: center;
}
.lpRealFlowPeople img{
  width: min(520px, 88%);
  height: auto;
  display: block;
}

/* =========================
  Responsive（SP）
========================= */
@media (max-width: 767px){
  .lpRealFlow{
    padding: 22px 0 14px;
  }
  .lpRealFlow__title{
    font-size: 22px;
    margin-bottom: 14px;
    padding: 20px 46px;
  }

  /* SPは2列×2段（キャプチャの雰囲気を維持しつつ読みやすく） */
  .lpRealFlowGrid{
    grid-template-columns: 1fr 18px 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  /* 2段目の矢印は下向きにする */
  .lpRealFlowGrid .lpRealFlowArrow:nth-of-type(2),
  .lpRealFlowGrid .lpRealFlowArrow:nth-of-type(3){
    display: none;
  }

  .lpRealFlowCard{
    min-height: 190px;
    padding: 16px 12px 12px;
  }

  .lpRealFlowCard__icon{
    height: 52px;
  }
  .lpRealFlowCard__icon img{
    width: 48px;
  }

  .lpRealFlowPeople img{
    width: min(520px, 92%);
  }
}
/* =========================
  ⑥ 安心の定額制プラン（キャプチャ9）
========================= */
.lpPlan{
  background:#ffffff;
  padding: 22px 0 0;
}

.lpPlan__container{
  max-width: 980px;
  margin: 0 auto;
}

/* 見出し：黄色ライン装飾 */
.lpPlanHead{
  text-align:center;
  margin: 0 auto 60px;
}

.lpPlanHead__title{
  display: inline-block;
  margin: 0;
  padding: 20px 0 0;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0, 0, 0, .78);
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
}
.lpPlanHead__title::after{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  bottom: 2px;
  height: 16px;
  background: url("./assets/img/y-line.png") no-repeat center/100% 100%;
  z-index:-1;
}
.lpPlanHead__sub{
  margin: 4px 0 30px;
  font-weight: 800;
  font-size: 16px;
  color: rgba(0,0,0,.55);
}

.lpPlanHead__desc{
  margin: 0 auto 10px;
  max-width: 900px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0, 0, 0, .72);
}
.lpPlanHead__em{
  color:#ff8a00;
  font-weight: 900;
}
.lpPlanHead__note{
  margin: 0;
  font-weight: 800;
  font-size: 14px;
  color: rgba(0,0,0,.55);
}
.lpPlanHead__em2{
  color:#ff8a00;
  font-weight: 900;
}

/* 3列カード */
.lpPlanGrid{
  margin: 16px auto 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 860px;
}

.lpPlanCard{
  text-align:center;
}
.lpPlanCard__cap{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 16px;
  color: rgba(0,0,0,.72);
}

.lpPlanCard__box{
  background:#4CBFBF;
  border-radius: 6px;
  padding: 18px 16px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
}

.lpPlanCard__name{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 22px;
  color:#ffffff;
  letter-spacing:.08em;
}

.lpPlanCard__price{
  margin: 0 0 8px;
  color:#ffcf2d; /* 黄色 */
  font-weight: 900;
  line-height: 1;
}
.lpPlanCard__yen{
  font-size: 20px;
  vertical-align: baseline;
  text-shadow: 2px 2px #333;
}
.lpPlanCard__num{
  font-size: 38px;
  letter-spacing: .02em;
  text-shadow: 2px 2px #333;
}
.lpPlanCard__unit{
  font-size: 11px;
  color: rgba(255,255,255,.92);
  margin-left: 4px;
  font-weight: 900;
}

.lpPlanCard__pages{
  margin: 10px auto 10px;
  display:inline-block;
  font-weight: 900;
  font-size: 14px;
  color: rgba(0,0,0,.70);
  background: rgba(255,255,255,.85);
  padding: 6px 10px;
  border-radius: 5px;
}

.lpPlanCard__list{
  margin: 0;
  padding: 20px 40px;
  list-style: none;
  text-align: justify;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.9;
}
.lpPlanCard__list li{
  position: relative;
  padding-left: 12px;
}
.lpPlanCard__list li::before{
  content:"";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  position:absolute;
  left:0;
  top: .7em;
}

/* 下の注意書き */
.lpPlanFootnotes{
  max-width: 860px;
  margin: 30px auto 60px;
}
.lpPlanFootnotes__list{
  margin: 0;
  padding-left: 1.2em;
  text-align:left;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,.55);
}

/* 下部のティール帯＋2つのCV（SPも横2列） */
.lpPlanCtaBar{
  background:#9ad0d0;
  padding: 80px 0 80px;
}
.lpPlanCtaBar__inner{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  justify-content:center;
  max-width: 1000px;
  margin: 0 auto;
}

.lpPlanCtaBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  color:#ffffff;
  font-weight: 900;
  border-radius: 28px;
  padding: 12px 14px 10px;
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
  letter-spacing:.02em;
}
.lpPlanCtaBtn--left{
  background:#ff7a00;
}
.lpPlanCtaBtn--right{
  background:#b88a1c;
}

.lpPlanCtaBtn__arrow{
  margin-left: 6px;
}
.lpPlanCtaBtn__note{
  display:block;
  margin-top: 4px;
  font-weight: 900;
  font-size: 10px;
  opacity:.95;
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpPlan{
    padding-top: 18px;
  }
  .lpPlanHead__title{
    font-size: 17px;
  }
  .lpPlanHead__title::after{
    left:-12px; right:-12px; height: 14px; bottom: 1px;
  }

  .lpPlanGrid{
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 73%;
  }
  .lpPlanCtaBtn{
    padding: 11px 10px 9px;
    border-radius: 26px;
    font-size: 12px;
  }
  .lpPlanCtaBtn__note{
    font-size: 9.5px;
  }
}
/* =========================
  ⑦ お客様に選ばれる6つの理由（キャプチャ10）
========================= */
.lpChosen{
  /* 上：写真の上に黄色オーバーレイ／下：オレンジグラデ */
  background:
    linear-gradient(rgba(240,198,36,.78), rgba(240,198,36,.78)),
    url("../img/mv.png") center/cover no-repeat;
  position: relative;
  padding: 26px 0 30px;
}

/* 下側のオレンジ帯（キャプチャの下グラデ） */
.lpChosen::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 38%;
  background: linear-gradient(180deg, rgba(240,198,36,0) 0%, #f0a400 55%, #e68e00 100%);
  pointer-events:none;
}

.lpChosen__container{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}

/* 見出し（左右の月桂樹＋中央テキスト） */
.lpChosenHead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  margin: 0 0 14px;
}

.lpChosenHead__center{
  text-align:center;
  line-height: 1.1;
}

.lpChosenHead__lead{
  margin: 0 0 4px;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0,0,0,.70);
}

.lpChosenHead__title{
  margin: 0;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0,0,0,.78);
  letter-spacing: .02em;
}

.lpChosenHead__laurel{
  width: 58px;
  height: auto;
  display:block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}

/* 2列×3行カード */
.lpChosenGrid{
  max-width: 1000px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}

/* カード（白、黄色枠、内側余白） */
.lpChosenCard{
  background:#ffffff;
  border: 2px solid #ffd24d;         /* 黄色の枠 */
  border-radius: 4px;
  padding: 25px 60px 25px 60px;
  position: relative;
  min-height: 112px;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* 左上の「理由01」バッジ */
.lpChosenCard__no{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  background:#f7a91a;
  color:#ffffff;
  border-radius: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  font-weight: 900;
  font-size: 10px;
  line-height: 1.05;
  letter-spacing:.02em;
  box-shadow: 0 3px 0 rgba(0,0,0,.10);
}
.lpChosenCard__no b{
  font-size: 16px;
  line-height: 1;
}

/* 見出し・本文 */
.lpChosenCard__ttl{
  font-weight: 900;
  font-size: 18px;
  color: rgba(0,0,0,.78);
  letter-spacing:.01em;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-align: center;
}

.lpChosenCard__txt{
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(0,0,0,.62);
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpChosen{
    padding: 22px 0 26px;
    background:
      linear-gradient(rgba(240,198,36,.80), rgba(240,198,36,.80)),
      url("../img/mv2.png") center/cover no-repeat;
  }
  .lpChosenHead__laurel{
    width: 50px;
  }

  .lpChosenGrid{
    grid-template-columns: 1fr;
    max-width: 92%;
    gap: 12px;
  }

  .lpChosenCard{
    padding: 14px 12px 12px 62px;
    min-height: auto;
  }
}
/* =========================
  ⑧ ご利用者様の声（キャプチャ11）
========================= */
.lpVoice{
  background:#f2f2f2;
  padding: 28px 0 34px;
}

.lpVoice__container{
  max-width: 980px;
  margin: 0 auto;
}

.lpVoiceHead{
  text-align:center;
  margin: 0 0 40px;
}

.lpVoiceHead__lead{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.lpVoiceHead__title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  color: rgba(0,0,0,.72);
  letter-spacing: .02em;
}

/* 3カード */
.lpVoiceGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  align-items: stretch;
}

.lpVoiceCard{
  background:#ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
  overflow: hidden; /* 画像角丸を揃える */
  display:flex;
  flex-direction: column;
  min-height: 360px;
}

/* 画像：上部のみ角丸 */
.lpVoiceCard__media{
  margin: 0;
  background:#ddd;
}
.lpVoiceCard__media img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display:block;
}

/* 本文 */
.lpVoiceCard__body{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction: column;
  flex: 1;
}

.lpVoiceCard__ttl{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.45;
  color: #ff8a00; /* キャプチャのオレンジ見出し */
}

.lpVoiceCard__txt{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0, 0, 0, .62);
}

.lpVoiceCard__meta{
  margin-top: auto;
  text-align: right;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpVoice{
    padding: 24px 0 30px;
  }

  .lpVoiceGrid{
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 92%;
  }

  .lpVoiceCard__media img{
    height: 160px;
  }
}
/* =========================
  ⑨ 導入事例（キャプチャ12）
========================= */
.lpExamples{
  background:#C0EDED; /* ティール帯 */
  padding: 60px 0 60px;
}

/* 見出し（黄色ライン） */
.lpExamplesHead{
  text-align:center;
  margin: 0 0 40px;
}

.lpExamplesHead__title{
  display:inline-block;
  margin: 0;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0,0,0,.75);
  position: relative;
  padding: 0 .25em;
  letter-spacing: .02em;
  z-index: 1;
}
.lpExamplesHead__title::after{
  content:"";
  position:absolute;
  left:-16px;
  right:-16px;
  bottom: 2px;
  height: 14px;
  background: url("./assets/img/y-line.png") no-repeat center/100% 100%;
  z-index:-1;
}

/* サムネ横並び */
.lpExamplesRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  margin: 0 auto;
}

.lpExamplesItem{
  margin: 0;
  width: 250px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lpExamplesItem img{
  width: 100%;
  height: auto;
  display:block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.10)); /* 軽い影 */
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpExamples{
    padding: 18px 0 22px;
  }

  .lpExamplesHead__title{
    margin: 20px 0;
  }
  .lpExamplesHead__title::after{
    left:-12px;
    right:-12px;
    height: 12px;
    bottom: 1px;
  }

  .lpExamplesRow{
    gap: 12px;
    max-width: 92%;
    flex-wrap: wrap;        /* SPは折り返し */
  }

  .lpExamplesItem{
    width: 44%;
  }
}
/* =========================
  ⑩ よくあるご質問（キャプチャ13）
========================= */
.lpFaq{
  background:#ffffff;
  padding: 26px 0 80px;
}

.lpFaq__container{
  max-width: 980px;
  margin: 0 auto;
}

.lpFaq__title{
  text-align:center;
  margin: 40px 0 40px;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0,0,0,.78);
  letter-spacing:.02em;
}

/* リスト幅を中央に寄せる（キャプチャの余白感） */
.lpFaqList{
  max-width: 1000px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* 1項目（淡い黄色） */
.lpFaqItem{
  background:#fff6b3;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  overflow:hidden;
}

/* summaryのデフォルトマーカーを消す */
.lpFaqItem > summary{
  list-style:none;
}
.lpFaqItem > summary::-webkit-details-marker{
  display:none;
}

.lpFaqQ{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 40px 12px 12px;
  cursor:pointer;
  position: relative;
}

/* 左の番号丸（オレンジ） */
.lpFaqNo{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f28b1a;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.lpFaqQ__txt{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(0,0,0,.72);
}

/* 右端の＋／−（CSSで再現） */
.lpFaqQ::after{
  content:"+";
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: rgba(0,0,0,.55);
}

/* open時は「−」 */
.lpFaqItem[open] .lpFaqQ::after{
  content:"−";
}

/* 回答 */
.lpFaqA{
  padding: 0 14px 12px 44px; /* 番号丸分インデント */
}

.lpFaqA p{
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0,0,0,.62);
}

/* open時の境界線（キャプチャの段差感） */
.lpFaqItem[open] .lpFaqQ{
  border-bottom: 1px solid rgba(255,255,255,.75);
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpFaq{
    padding: 22px 0 30px;
  }

  .lpFaqList{
    max-width: 92%;
  }

  .lpFaqQ{
    padding: 12px 38px 12px 12px;
  }

  .lpFaqQ__txt{
    font-size: 16px;
  }
}
/* FAQ スムーズ開閉（details用） */
.lpFaqItem{
  /* 既存のままでOK */
}

.lpFaqA{
  /* 既存のpadding等は維持したまま、アニメ用に追記 */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height, opacity;
}

/* JSが付与するクラスで開く */
.lpFaqItem.is-open .lpFaqA{
  opacity: 1;
}

/* 回答内の余白が詰まらないように（開閉でも見た目が安定） */
.lpFaqA > *:first-child{ margin-top: 0; }
.lpFaqA > *:last-child{ margin-bottom: 0; }

/* 動きを減らしたいユーザーへ配慮 */
@media (prefers-reduced-motion: reduce){
  .lpFaqA{
    transition: none;
  }
}
/* =========================
  ⑪ お問い合わせ（キャプチャ14）
========================= */
.lpContact{
  background:#9ad0d0; /* ティール */
  padding: 34px 0 46px;
}

.lpContact__container{
  max-width: 980px;
  margin: 0 auto;
}

/* 上部タイトル＋注記 */
.lpContactHead{
  text-align:center;
  margin: 40px 0 30px;
}

.lpContactHead__title{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 30px;
  color: rgba(0,0,0,.78);
  letter-spacing: .02em;
}

.lpContactHead__note{
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 0, 0, .60);
}

/* 白いカード */
.lpContactCard{
  max-width: 1000px;
  margin: 0 auto;
  background:#ffffff;
  border-radius: 6px;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  padding: 22px 22px 18px;
}

/* フォーム内タイトル */
.lpContactCard__title{
  text-align:center;
  margin: 0 0 14px;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  color: rgba(0,0,0,.72);
  letter-spacing: .02em;
}

/* 中央の薄い仕切り線 */
.lpContactForm{
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 18px;
}

/* 行 */
.lpFormRows{
  display:flex;
  flex-direction: column;
}

.lpFormRow{
  display:grid;
  grid-template-columns: 230px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.lpFormRow:last-child{
  border-bottom: none;
}

/* ラベル左 */
.lpFormLabel{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 38px;
}

.lpReq{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 50px;
  padding: 0 8px;
  border-radius: 999px;
  background: #5fb6b4;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .10);
}

.lpFormLabel__txt{
  font-weight: 900;
  font-size: 14px;
  color: rgba(0,0,0,.68);
  line-height: 1.45;
}

/* 右入力 */
.lpFormField{
  display:flex;
  align-items:center;
}

.lpFormField input,
.lpFormField select,
.lpFormField textarea{
  width: 100%;
  background:#f2f3f6; /* 薄いグレー */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 4px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(0,0,0,.70);
  padding: 10px 12px;
  outline: none;
}

.lpFormField select{
  padding-right: 32px;
}

.lpFormField textarea{
  min-height: 120px;
  resize: vertical;
}

/* プレースホルダーの薄さ */
.lpFormField input::placeholder{
  color: rgba(0,0,0,.35);
  font-weight: 800;
}

/* テキストエリア行の縦位置（キャプチャの見え方に寄せる） */
.lpFormRow--textarea .lpFormLabel{
  align-items:flex-start;
  padding-top: 10px;
}
.lpFormRow--textarea .lpFormField{
  align-items: stretch;
}

/* 下部ボタン（左寄せ・小さめ） */
.lpFormActions{
  display:flex;
  gap: 10px;
  justify-content:flex-start;
  padding-top: 14px;
}

.lpBtn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.30);
  background:#ffffff;
  color: rgba(0,0,0,.70);
  font-weight: 900;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 3px;
  cursor:pointer;
}
.lpBtn:hover{
  filter: brightness(.98);
}

/* =========================
  Responsive（SP）
========================= */
@media (max-width: 767px){
  .lpContact{
    padding: 28px 0 40px;
  }

  .lpContactCard{
    max-width: 92%;
    padding: 20px 16px 16px;
  }

  .lpContactCard__title{
    font-size: 20px;
  }

  .lpFormRow{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0;
  }

  .lpFormLabel{
    min-height: auto;
  }

  .lpFormRow--textarea .lpFormLabel{
    padding-top: 0;
  }
}
/* =========================
  Footer（キャプチャ15）
========================= */
.lpFooter{
  background:#5f5f5f; /* 濃いグレー */
  padding: 30px 0;
}

.lpFooter__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* 左：ロゴ */
.lpFooter__brand{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.lpFooter__logo{
  height: 36px;
  width: auto;
  display:block;
}

/* 右：リンク */
.lpFooterNav__list{
  margin: 0;
  padding: 0;
  list-style:none;
  display:flex;
  align-items:center;
  gap: 18px;
}

.lpFooterNav__link{
  display:inline-block;
  text-decoration:none;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}

.lpFooterNav__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
  Responsive
========================= */
@media (max-width: 767px){
  .lpFooter{
    padding: 12px 0 14px;
  }

  .lpFooter__inner{
    flex-direction: column;
    align-items: center;
    justify-content:center;
    gap: 10px;
  }

  .lpFooterNav__list{
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
  }
}


/* =========================
   PATCH v8 (2026-02-03)
   - lpWorries / lpRank visual fixes
   - z-index: lpWorriesTitle above lpRankTitle
========================= */

/* Worries section background + spacing */
.lpWorries{
  background:#F3F3F3;
  padding:64px 0 0;
  position:relative;
  z-index:3;
}

/* Head (centered with diagonal lines hugging text) */
.lpWorriesHead{
  position:relative;
  text-align:center;
  margin: 0 auto;
  max-width:860px;
}
.lpWorriesHead__lead{
  margin:0 0 6px;
  font-weight:700;
  font-size:30px;
  letter-spacing:.02em;
}
.lpWorriesHead__title{
  margin:0;
  font-weight:800;
  font-size:30px; /* unify sizes (bigger one) */
  letter-spacing:.02em;
  line-height:1.35;
  position:relative;
  z-index:5; /* above rank title */
}
.lpWorriesHead__title .lpWorriesHead__hl,
.lpWorriesHead__title .hl,
.lpWorriesHead__title span{
  color:#1FB9C9;
}
.lpWorriesHead__note{
  margin:10px 0 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}

/* diagonal lines */
.lpWorriesHead::before,
.lpWorriesHead::after{
  content:"";
  position:absolute;
  top:4px;
  width:3px;
  height:116px;
  background:#777;
  opacity:.7;
}
.lpWorriesHead::before{
  left:157px;
  transform:rotate(-21deg);
  transform-origin:top;
}
.lpWorriesHead::after{
  right:164px;
  transform:rotate(21deg);
  transform-origin:top;
}

/* Bubbles */
.lpWorriesBubbles{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin:0 auto;
  max-width:1100px;
  position:relative;
  z-index:3;
}
.lpBubble{
  position: relative;
  flex: 0 0 auto;
  max-width: 33%;
}
}
.lpBubble__frame img{
  width:100%;
  height:auto;
  display:block;
}
.lpBubble__text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  color:#222;
  line-height:1.35;
  letter-spacing:.02em;
  font-size:20px;
  padding:24px 22px;
  transform-origin:center;
}

/* precise offsets/rotations to match comp */
.lpBubble--l{ transform:translateY(12px) rotate(-2deg); position: relative; top: 50px;}
.lpBubble--l .lpBubble__text{ transform:rotate(-18deg) translate(-8px, 0); }

.lpBubble--c{ transform:translateY(-8px); width:310px; max-width:34%; }
.lpBubble--c .lpBubble__text{ font-size:20px; transform:rotate(0deg) translate(0, -6px); }

.lpBubble--r{ transform:translateY(8px) rotate(2deg); position: relative; top: 50px; }
.lpBubble--r .lpBubble__text{ transform:rotate(18deg) translate(8px, 0); }

/* Illustration (people) + teal band */
.lpWorriesIllust{
  margin:18px auto 0;
  max-width:980px;
  position:relative;
  z-index:2;
}
.lpWorriesIllust img{
  width:100%;
  height:auto;
  display:block;
}
.lpWorries::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:44px;
  background:#89cfd1;
  z-index:1;
}

/* z-index layer for following rank section title */
#lpRankTitle,
.lpRank__title{
  position: relative;
  z-index: 1;
  background: #5d5d5d;
  border-radius: 10px 10px 0 0;
  padding: 20px;
}

/* Responsive tuning */
@media (max-width: 900px){
  .lpWorries{ padding:48px 0 0; }
  .lpWorriesHead__title{ font-size:26px; }
  .lpWorriesHead::before{ left:70px; }
  .lpWorriesHead::after{ right:70px; }
  .lpWorriesBubbles{ gap:18px; padding:0 14px; }
  .lpBubble{ width:30vw; max-width:260px; }
  .lpBubble--c{ width:34vw; max-width:290px; }
  .lpBubble__text{ font-size:14px; padding:18px 16px; }
}
@media (max-width: 600px){
  /* keep 3 columns like comp; allow slight squeeze */
  .lpWorriesHead__lead{ font-size:15px; }
  .lpWorriesHead__title{ font-size:22px; }
  .lpWorriesHead::before{
    left: -9px;
    height: 92px;
   }
  .lpWorriesHead::after{
    right: -8px;
    height: 92px;
   }
  .lpWorriesBubbles{ gap:10px; max-width:100%; padding:0 10px; }
  .lpBubble{ width:30.5vw; max-width:none; }
  .lpBubble--c{ width:34vw; }
  .lpBubble__text{ font-size:12.5px; padding:14px 10px; }
  .lpWorries::after{ height:96px; }
}

/* Rank section: match comp proportions (right reference) */
.lpRank{
  background:#89cfd1;
  padding:38px 0 44px;
  position:relative;
  z-index:1;
}
.lpRank__box{
  background:#8d8d8d;
  border-radius:10px;
  padding: 0px 1px 18px;
  box-shadow:0 8px 0 rgba(0,0,0,.07);
}
.lpRank__title{
  margin:0;
  text-align:center;
  color:#fff;
  font-weight:800;
  font-size:26px;
  letter-spacing:.02em;
}
.lpRank__desc{
  text-align:center;
  color:#fff;
  margin:12px 0 18px;
  font-size:18px;
  line-height:1.7;
}
.lpRank__grid{
  display:grid;
  grid-template-columns: 1fr 350px;
  gap:26px;
  align-items:center;
  margin: 20px;
}
.lpRankList{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.lpRankItem{
  display:grid;
  grid-template-columns: 128px 1fr;
  gap:16px;
  align-items:center;
}
.lpRankBadge{
  background:#3f3f3f;
  color:#fff;
  width:128px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.02em;
  transform:skewX(-18deg);
}
.lpRankBadge__txt{ transform:skewX(18deg); }
.lpRankText__ttl{
  margin:0 0 4px;
  color:#fff;
  font-weight:800;
  font-size:22px;
  line-height:1.35;
}
.lpRankText__sub{
  margin:0;
  color:#fff;
  font-size:12px;
  line-height:1.6;
  opacity:.95;
}
.lpRankText__hl,
.lpRankText__hl2{
  color:#ffd400;
}
.lpRankIllust img{ width:100%; height:auto; max-width:380px; }

.lpRank__arrow{
  display:flex;
  justify-content:center;
  margin:16px 0 0;
}
.lpRank__arrow img{ width:198px; height:auto; display:block; }

@media (max-width: 980px){
  .lpRank__grid{ grid-template-columns: 1fr 360px; }
  .lpRankIllust img{ max-width:200px; }
}
@media (max-width: 768px){
  .lpRank__grid{ grid-template-columns:1fr; margin: 0 20px; }
  .lpRankIllust{ order:2; }
  .lpRankList{ order:1; }
  .lpRank__title{ font-size:18px; }
}


/* === MV 黄色マーカー最終調整 === */
.mv__hl{
  position:relative;
  display:inline-block;
  padding:0 .25em;
  z-index:1;
  text-shadow: 3px 2px #333;
}

.mv__hl::after{
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: -7px;
    bottom: 4px;
    height: 88px;
    background: url(../img/y-line.png) no-repeat center / 100% 100%;
    z-index: -1;
    pointer-events: none;
}

/* 親要素で隠れないように */
.mv__title,
.mv__copy{
  overflow:visible;
}

/* =========================================================
   PATCH: lpSteps (改善し続けられる仕組み 5カード) デザイン調整
   - 3枚＋2枚（中央寄せ）を「キャプチャ（正）」に合わせて微調整
   - 既存CSSは残し、このブロックで上書きします
========================================================= */
.lpSteps{
  max-width: 900px;
  margin: 22px auto 0;
  column-gap: 28px;
  row-gap: 26px;
}
.lpStep{
  border-width: 4px;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  min-height: 150px;
}
.lpStep__ttl{
  font-size: 22px;
  margin: 0 0 10px;
  text-decoration: underline;
  text-align: center;
}
.lpStep__txt{
  font-size: 13px;
  line-height: 1.7;
  padding: 4%;
}
.lpSteps > .lpStep:nth-child(4),
.lpSteps > .lpStep:nth-child(5){
  width: 78%;
}
@media (max-width: 767px){
  .lpSteps{
    max-width: none;
    margin-top: 18px;
    gap: 14px;
  }
  .lpStep{
    padding: 14px 14px 12px;
    min-height: auto;
    box-shadow: 0 8px 0 rgba(0,0,0,.12);
  }
  .lpStep__txt{ font-size: 13px; }
  .lpSteps > .lpStep:nth-child(4),
  .lpSteps > .lpStep:nth-child(5){
    width: 100%;
  }
}

/* =========================================================
   PATCH: lpSteps（5カード）レイアウト調整
   - 上段：3枚横並び
   - 下段：2枚を中央寄せで横並び
   - すべて同サイズ（同一行で高さ揃え）
   - SP：2列 → 1列
   ※既存デザイン（枠線/影/色など）は触らず、レイアウト系のみ上書き
========================================================= */

.lpSteps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch; /* 同一行で高さを揃える */
  gap: 28px 30px;      /* 行間 / 列間（必要なら微調整OK） */
  max-width: 1040px;   /* 3枚が気持ちよく収まる幅 */
  margin: 0 auto;
}

.lpSteps .lpStep{
  flex: 0 1 calc((100% - 60px) / 3); /* 3列（列間30px×2） */
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height: 168px; /* デザイン上の統一感（必要なら微調整） */
}

/* 既存の幅指定がある場合の打ち消し（クラス付与の有無に関係なく統一） */
.lpSteps .lpStep.lpStep--bottom,
.lpSteps .lpStep.lpStep--wide{
  flex: 0 1 calc((100% - 60px) / 3);
}

/* 2列（タブレット〜SP） */
@media (max-width: 860px){
  .lpSteps{
    gap: 22px 22px;
    max-width: 760px;
  }
  .lpSteps .lpStep,
  .lpSteps .lpStep.lpStep--bottom,
  .lpSteps .lpStep.lpStep--wide{
    flex-basis: calc((100% - 22px) / 2);
    min-height: 170px;
  }
}

/* 1列（狭いSP） */
@media (max-width: 520px){
  .lpSteps{
    gap: 16px;
    max-width: 420px;
  }
  .lpSteps .lpStep,
  .lpSteps .lpStep.lpStep--bottom,
  .lpSteps .lpStep.lpStep--wide{
    flex-basis: 100%;
    min-height: 0; /* 1列時は自然な高さに */
  }
}


/* === メリット見出しデザイン調整（今回修正分のみ） === */
.meritsHead {
  text-align: center;
  margin-bottom: 40px;
}

.meritsHead__lead {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.meritsHead__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  position: relative;
  display: inline-block;
}

.meritsHead__title .hl {
  position: relative;
  z-index: 1;
}

.meritsHead__title .hl::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 6px;
  height: 14px;
  background: #ffe45c;
  z-index: -1;
  border-radius: 6px;
  transform: skewX(-12deg);
}

/* SP調整 */
@media (max-width: 768px) {
  .meritsHead__title {
    font-size: 22px;
  }
}


/* =========================================================
   PATCH: lpFlow2 STEP03（添付キャプチャ2）に合わせた再調整
   - STEP03カードに .lpFlow2Card--03 を付与して、このCSSを適用
   - 下部の黄色帯を「全幅＋境界線＋左右イラスト重なり」へ
========================================================= */

/* 「無料相談」赤文字（既にあっても上書きOK） */
.lpFlow2 .is-accent{
  color:#e60012;
  font-weight:900;
  font-size: 30px;
}

/* STEP03だけ帯をキャプチャ寄せに */
.lpFlow2Card--03 .lpFlow2Cta{
  position: relative;
  /* カード内余白ぶんを打ち消して、黄枠の内側いっぱいに広げる */
  margin: 14px -108px -18px;
  padding: 18px 18px 16px;
  background: #ffe34a;
  border-top: 1px solid rgba(0,0,0,.12);
  min-height: 138px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  overflow: visible; /* 0円などの重なりを許可 */
}

/* 左：女性（下に揃えつつ、少し上へ食い込ませる） */
.lpFlow2Card--03 .lpFlow2Cta__girl{
  position:absolute;
  left: 18px;
  bottom: -2px;
  display:block;
  z-index: 2;
}
.lpFlow2Card--03 .lpFlow2Cta__girl img{
  width: 170px;
  height: auto;
  display:block;
}

/* 右：0円（境界線に少し重なる） */
.lpFlow2Card--03 .lpFlow2Cta__yen{
  position:absolute;
  right: 18px;
  bottom: -10px;
  display:block;
  z-index: 2;
}
.lpFlow2Card--03 .lpFlow2Cta__yen img{
  width: 200px;
  height: auto;
  display:block;
}
.lpFlow2Card--03 .lpFlow2Cta__note{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 16px;
  color: rgba(0,0,0,.72);
}
.lpFlow2Card--03 .lpFlow2Cta__ttl{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 16px;
  color: rgba(0,0,0,.82);
  letter-spacing: .02em;
}
.lpFlow2Card--03 .lpFlow2Cta__txt{
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: rgba(0,0,0,.72);
}

/* SP：縦積み、イラストは下に回す */
@media (max-width: 767px){
  .lpFlow2Card--03 .lpFlow2Cta{
    margin: 12px -14px -14px; /* SPの .lpFlow2Card__inner padding(左右14px) に合わせる */
    padding: 14px 12px 12px;
    min-height: auto;
    border-radius: 0 0 10px 10px;
  }
  .lpFlow2Card--03 .lpFlow2Cta__girl,
  .lpFlow2Card--03 .lpFlow2Cta__yen{
    position: static;
    bottom:auto;
    left:auto;
    right:auto;
    transform:none;
    margin-top: 10px;
  }
  .lpFlow2Card--03 .lpFlow2Cta__center{
    padding: 0;
    max-width: none;
  }
  .lpFlow2Card--03 .lpFlow2Cta__girl img{ width: 160px; margin: 0 auto; }
  .lpFlow2Card--03 .lpFlow2Cta__yen img{ width: 210px; margin: 6px auto 0; }
}



/* =========================
  PATCH (2026-02-13)
  ⑥ 安心の定額制プラン 見出しをキャプチャ3の見た目へ寄せる
  - 「安心の定額制プラン」：太字＋黄マーカー（y-line）
  - 「（月額サブスク型ホームページ制作）」：下に小さく・行間を詰める
  ※他セクション影響なし：lpPlanHead__*
========================= */

.lpPlanHead{
  text-align:center;
  margin: 0 auto 60px;
}

/* タイトル（2行目の主見出しの見え方） */
.lpPlanHead__title{
  display:inline-block;
  margin: 0;
  padding: 0 .35em;           /* マーカーの左右余白 */
  font-weight: 900;
  font-size: 30px;
  line-height: 1.25;          /* 行間を詰める */
  color: rgba(0,0,0,.78);
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
}

/* 黄マーカー（y-line） */
.lpPlanHead__title::after{
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -6px;
  height: 37px;
  background: url(../img/y-line.png) no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}

/* サブ（括弧の1行） */
.lpPlanHead__sub{
  margin: 8px 0 30px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(0,0,0,.55);
}

/* 任意：タイトル内で強調したい語（使う場合のみ） */
.lpPlanHead__hl{
  color:#ff8a00;
  font-weight: 900;
}

/* SP */
@media (max-width: 767px){
  .lpPlanHead__title{
    line-height: 1.25;
    padding: 0 .3em;
    margin-top: 30px;
  }
  .lpPlanHead__title::after{
    left:-12px;
    right:-12px;
    bottom: 2px;
    height: 14px;            /* SP */
  }
  .lpPlanHead__sub{
    margin-top: 6px;
    font-size: 12px;
  }
}


/* =========================
   PATCH: lpPlan CTA → MVと完全一致
   ※既存は触らず上書き
========================= */
.lpPlanCtaBtn{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;

  width:100%;
  padding:16px 18px 14px;
  border-radius:999px;

  color:#fff;
  font-weight:900;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.02em;

  box-shadow:var(--shadowBtn);
  transition:.2s;
}

.lpPlanCtaBtn__arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-weight:900;
  font-size:18px;
}

.lpPlanCtaBtn__note{
  display:block;
  margin-top:3px;
  font-weight:800;
  font-size:12px;
  opacity:.95;
}

.lpPlanCtaBtn:hover{ filter:brightness(1.05); }
.lpPlanCtaBtn:active{ transform:translateY(1px); }

@media (max-width:767px){
  .lpPlanCtaBtn{
    padding:14px 12px 12px;
    font-size:14px;
  }
  .lpPlanCtaBtn__arrow{
    display: none;
  }
  .lpPlanCtaBtn__note{
    font-size:10px;
  }
}
/* =========================
   PATCH: lpVoice 見出しをキャプチャ準拠
   ※他には影響なし
========================= */
.lpVoiceHead__lead{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 22px;
  color: #ff8a00;
  letter-spacing: .02em;
}

.lpVoiceHead__title{
  margin: 0;
  font-weight: 900;
  font-size: 28px;
  color: rgba(0,0,0,.85);
  letter-spacing: .02em;
  line-height: 1.35;
}

@media (max-width:767px){
  .lpVoiceHead__lead{
    font-size: 22px;
  }
}
/* =========================
   PATCH: 導入事例 見出し（lpExamplesHead）をキャプチャ準拠
   - マーカー画像: ../img/y-line.png
   - 太さ/位置/はみ出し/わずかな傾き調整
   ※他には影響なし（上書きのみ）
========================= */
.lpExamplesHead__title{
  position: relative;
  display: inline-block;
  z-index: 1;
}

.lpExamplesHead__title::after{
      content: "";
    position: absolute;
    left: -34px;
    right: -34px;
    bottom: -2px;
    height: 37px;
    background: url(../img/y-line.png) no-repeat center / 100% 100%;
    z-index: -1;
    transform: rotate(-2deg);
    transform-origin: center;
    pointer-events: none;
}

@media (max-width: 767px){
  .lpExamplesHead__title::after{
    left:-22px;
    right:-22px;
    bottom: 4px;
    height: 16px;
    background: url("../img/y-line.png") no-repeat center/100% 100%;
    transform: rotate(-2deg);
  }
}
/* =========================
   PATCH: SP（スマホ）最適化
   - 左右余白 10px
   - 文字が大きすぎる箇所を調整（タイトルは強調維持）
   - はみ出し防止
   ※既存CSSは変更せず、上書きのみ
========================= */
@media (max-width: 767px){

  /* 画面外はみ出し防止（横スクロール抑止） */
  html, body{
    overflow-x: hidden;
  }

  /* 左右余白（ベース） */
  .l-container,
  .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 画像・動画などがはみ出さない */
  img, svg, video, iframe{
    width: 140px;
    height: auto;
  }

  /* 基本文字サイズ（大きすぎる印象の是正） */
  body{
    font-size: 14px;
    line-height: 1.75;
  }

  /* 段落・注記 */
  p, li, small{
    font-size: 16px;
    line-height: 1.75;
  }

  /* タイトルは強調：h2/h3やセクション見出しは少し大きめに維持 */
  h1{ font-size: 22px; line-height: 1.35; }
  h2{ font-size: 20px; line-height: 1.35; }
  h3{ font-size: 16px; line-height: 1.45; }

  /* MV：見出しが崩れやすいので最適化 */
  .mv__title{
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: .01em;
  }
  .mv__lead{
    font-size: 13px;
    line-height: 1.75;
  }

  /* CTAボタン：はみ出し防止 + タップしやすさ */
  .mv__cta,
  .lpPlanCtaBar__inner{
    gap: 10px;
  }
  .mvBtn,
  .lpPlanCtaBtn{
    width: 100%;
    max-width: 100%;
  }

  /* セクション見出し周りの余白を詰めて縦長を抑える */
  .lpMeritHead,
  .lpFlow2Head,
  .lpVoiceHead,
  .lpExamplesHead{
    margin: 20px 0 30px;
  }
  /* カード類：内側余白を少し縮めて読みやすく */
  .lpVoiceCard,
  .lpChosenCard,
  .lpFlow2Card__inner{
    padding: 20px 14px 14px;
  }

  /* 2カラム→1カラムの取りこぼし対策（はみ出し防止） */
  .lpFlow2Card__cols,
  .lpVoiceGrid,
  .lpChosenGrid{
    grid-template-columns: 1fr !important;
  }

  /* 長い単語やURLがはみ出すのを防ぐ */
  .lpVoiceCard,
  .lpChosenCard,
  .lpFlow2Card,
  .lpPlan,
  .mv{
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* =========================
   SP追加調整（2026-02-16）
   - 導入事例：横スライダー化
   - 実際のフロー：4つ目崩れ修正
   - 悩み吹き出し：はみ出し＆文字サイズ調整
   - SP共通：左右10px余白
========================= */
@media (max-width: 767px){

  /* 共通：左右余白 10px */
  .l-container,
  .lpExamples__container,
  .lpPlan__container,
  .lpFaq__container{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ついでに：本文の過度な大きさを抑える（タイトルは各セクション側で強調） */
  body{
    font-size: clamp(14px, 3.8vw, 16px);
  }

  /* =========================
     ⑨ 導入事例：SPは横スクロール（スライダー風）
  ========================= */
  .lpExamplesRow{
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px 6px; /* 端の欠け防止 */
  }
  .lpExamplesRow::-webkit-scrollbar{ height: 0; }
  .lpExamplesRow{ scrollbar-width: none; }

  .lpExamplesItem{
    width: 72%;
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  /* =========================
     実際のお申込み〜公開まで：SP 2列グリッド崩れ対策
     → 矢印は非表示、カードのみ 2列で整列
  ========================= */
  .lpRealFlowGrid{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .lpRealFlowArrow{ display:none !important; }

  .lpRealFlowCard{
    width: calc(50% - 6px);
    min-height: 0;            /* 高さ強制を解除して崩れ防止 */
    padding: 14px 10px 12px;  /* 余白を詰めて収める */
  }

  /* =========================
     こんな壁で止まっていませんか？：吹き出しはみ出し＆文字サイズ
  ========================= */
  .lpWorriesHead{
    padding-left: 10px;
    padding-right: 10px;
  }

  .lpWorriesBubbles{
    max-width: 100%;
    padding: 0 10px;
    gap: 10px;
  }

  /* 角度・上下ズレで外側へはみ出すのを抑制 */
  .lpBubble--l,
  .lpBubble--r{
    top: 0 !important;
    transform: translateY(0) rotate(0deg) !important;
  }

  .lpBubble--c{
    width: auto !important;
    max-width: 34% !important;
    transform: translateY(0) !important;
  }

  .lpBubble{
    max-width: 33%;
  }

  .lpBubble__text{
    font-size: 11px;
    line-height: 1.25;
    padding: 14px 10px 16px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 中央の「ホームページを〜」だけ少し小さく（はみ出し対策） */
  .lpBubble--c .lpBubble__text{
    font-size: 10px;
    top: 29px;
  }

  /* 文字の回転が原因で外へ出る場合があるので、SPは回転を弱める */
  .lpBubble--l .lpBubble__text,
  .lpBubble--r .lpBubble__text{
    transform: translate(0, 0) !important;
    font-size: 10px;
    font-weight: 600;
    top: 25px;
}
/* =========================
   PATCH: MV SP微調整
   - .mv__hl::after の top をSPで調整
   - .mvBtn__arrow をSP用にmedia追加
   ※既存CSSは変更せず上書き
========================= */
@media (max-width: 767px){

  /* ハイライト位置調整 */
  .mv__hl::after{
    top: 13px;
    height: 50px;
  }

  /* CTA矢印位置調整 */
  .mvBtn__arrow{
    right: -4px;
    font-size: 14px;
    position: relative;
    top: 6px;
    height: 13px;
  }

}
/* =========================
   PATCH: SP 吹き出しテキスト最小修正（指定箇所のみ）
   ※他の調整は一切変更しない
========================= */
@media (max-width: 767px){
  .lpBubble__text{
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
/* =========================
   PATCH: SP .lpRankItem + desc調整（指定のみ）
========================= */
@media (max-width: 767px){
  .lpRankItem{
    display: block;
  }
  .lpRank__desc{
    font-size: 12px;
  }
}
/* =========================
   PATCH: SP .lpRankBadge サイズ調整（指定のみ）
========================= */
@media (max-width: 767px){
  .lpRankBadge{
    width: 85px;
    height: 22px;
  }
}
/* =========================
   PATCH: SP .lpMerit__badge 位置調整（指定のみ）
========================= */
@media (max-width: 767px){
  .lpMerit__badge{
    left: 9px;
    top: 2px;
  }
}
/* =========================
   PATCH: SP .lpMerit font size (requested)
========================= */
@media (max-width: 767px){
  .lpMerit__txt{
    font-size: 14px;
  }
  .lpMerit__ttl{
    text-align: center;
    padding: 0 0 30px 50px;
  }
}
/* =========================
   PATCH: ランキングタイトルサイズ調整（2位以下）
   ※既存スタイルは変更せず上書き
========================= */
.lpRankItem:nth-child(2) .lpRankText__ttl{
  font-size: 15px;
}
.lpRankItem:nth-child(3) .lpRankText__ttl{
  font-size: 14px;
}
/* =========================
   SP改行制御
========================= */
.sp-br{
  display: none;
}

@media (max-width: 767px){
  .sp-br{
    display: block;
  }

  .lpMeritsHead__title{
    font-size: 22px;
  }

  .lpMeritsHead__hl{
    font-size: 38px;
  }
}
@media (max-width: 767px){
  .lpMeritsHead__kicker{
    font-size: 22px;
    margin: 0;
  }
}

/* =========================
   SP: lpRankIllust padding reset
========================= */
@media (max-width: 767px){
  .lpRankIllust{
    padding: 0;
  }
}
@media (max-width: 767px){
  .lpRank__grid{
    gap: 6px;
  }
}
/* =================================
   SP版：lpFlow2Head__desc の <br> を無効化
================================= */
@media (max-width: 767px){
  .lpFlow2Head__desc br{
    display: none;
  }
}

/* =========================
   SP: lpFlow2Cta（無料相談への誘導）をキャプチャ寄せ
   - 女の子はSPで非表示
   - テキスト→0円画像の縦並び
========================= */
@media (max-width: 767px){
  .lpFlow2Cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 14px 20px;
    text-align: center;
  }

  .lpFlow2Cta__girl{
    display: none !important;
  }

  .lpFlow2Cta__center{
    text-align: center;
    width: 100%;
    max-width: 320px;
  }

  .lpFlow2Cta__ttl{
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 8px;
  }

  .lpFlow2Cta__note{
    margin: 0 0 10px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(0,0,0,.72);
  }

  .lpFlow2Cta__txt{
    font-size: 12px;
    line-height: 1.75;
    margin: 0;
    color: rgba(0,0,0,.72);
  }

  .lpFlow2Cta__yen{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lpFlow2Cta__yen img{
    width: 260px;
    max-width: 88%;
    height: auto;
  }
  .lpPlanCard__list{
    padding: 0px 30px;
  }
  .lpChosenCard__ttl {
    padding-left: 60px;
    padding-right: 60px;
    margin: 0 0 20px;
  }
  .lpContactHead{
    margin: 20px 0 30px
  }
  .lpContactHead__note {
    font-size: 12px;
  }
  .lpFaqA {
    padding: 0 20px 12px 20px;
  }
  .lpChosenHead {
    gap: 0px;
  }
  .lpPlanFootnotes__list li {
    font-size: 10px;
  }
}

@media (max-width: 920px){
  html, body{ overflow-x:hidden; }

  .mv__cta{ gap:10px; }

  .mvBtn{
    box-sizing:border-box;
    width: calc(50% - 5px); /* 2枚 + gap10 = 100% */
    min-width: 0;
  }

  .mv__inner{
    padding-left:10px;
    padding-right:10px;
  }
}