@charset "utf-8";
/* ==========================================================
   グッドガイブラザーズ 出張買取LP スタイルシート
   ==========================================================
   命名ルール：BEM風（緩め）
     .lp                  → LP全体のラッパー
     .lp-block             → ブロック（セクション単位）
     .lp-block__element    → ブロック内の要素
     .lp-block--modifier   → 状態・バリエーション違い

   構成：
     1. 基本設定（変数・共通パーツ）
     2. ヘッダー（固定）
     3. KV（メインビジュアル／Splide）
     4. お悩みセクション
     5. 解決セクション
     6. 選ばれる4つの理由
     7. 買取実績（カスタム投稿ループ）
     8. 買取強化ジャンル
     9. 査定風景（YouTube）
     10. ご利用者の声
     11. 手続き3ステップ
     12. 電話CTAバナー（中間）
     13. FAQ（カスタム投稿ループ・アコーディオン）
     14. 店舗一覧
     15. フッター
     16. レスポンシブ調整（768px以上＝PC）
   ========================================================== */


/* ==========================================================
   1. 基本設定
   ========================================================== */
.lp {
    /* ---- カラー定義 ----
       ※ Illustratorの実データに合わせて、正式なカラーコードが
       確定したらここだけ差し替えればサイト全体に反映されます。 */
    --lp-green:        #1E7A3D;  /* メインカラー（ブランドグリーン） */
    --lp-green-dark:   #00871e;  /* 濃いグリーン（ヘッダー等） */
    --lp-green-light:  #EAF6EE;  /* 薄いグリーン（背景用） */
    --lp-orange:       #ff5a00;  /* アクセント・CTAカラー */
    --lp-orange-dark:  #D9720A;  /* CTAホバー時 */
    --lp-text:         #2B2B2B;  /* 基本テキスト色 */
    --lp-text-sub:     #6B6B6B;  /* サブテキスト色 */
    --lp-bg:           #FFFFFF;  /* 基本背景 */
    --lp-bg-soft:      #F7F7F4;  /* セクション背景（薄いグレー） */
    --lp-border:       #E3E3E0;  /* 罫線色 */
    --lp-star:         #FFB400;  /* レビュー星の色 */

    /* ---- 業態カラー ---- */
    --lp-hobby:        #e50012;
    --lp-hard:         #004097;
    --lp-house:        #006d3b;

    /* ---- 余白・角丸の基準値 ---- */
    --lp-radius:  12px;
    --lp-gap-sm:  16px;
    --lp-gap-md:  32px;
    --lp-gap-lg:  64px;

    /* ---- タイポグラフィ ---- */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: var(--lp-text);
    background: var(--lp-bg);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    overflow-x: hidden;
    font-feature-settings: "palt";
    letter-spacing: 1px;
}
.lp *,
.lp *::before,
.lp *::after {
    box-sizing: inherit;
}
.lp img {
    max-width: 100%;
    height: auto;
    display: block;
}
.lp a {
    color: inherit;
    text-decoration: none;
}



.lp .tx_bk .txbk_point{
white-space: nowrap;
display: inline-block;
}




/* セクション共通：中身の横幅制御 */
.lp-block__inner {
    max-width: 1030px;
    margin: 0 auto;
    padding: 0 15px;
}

/* セクション共通：見出し */
.lp-heading {
    text-align: center; 
/*    font-size: 22px; */
    font-size:clamp(30px, 5.3vw, 40px);
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 var(--lp-gap-md);
    color: var(--lp-text);
}
.lp-solution__inner-flex .lp-heading {
text-align: left;
}
.lp-solution__inner-flex .lp-heading span {
display: block;
}




.lp-heading__en {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--lp-green);
    margin-top: 4px;
}

/* セクション共通：見出し前の飾りライン（実際に区切りとして意味を持たせる） */
.lp-heading--line {
    position: relative;
    padding-bottom: 16px;
}
.lp-heading--line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--lp-orange);
    border-radius: 2px;
}

/* 共通CTAボタン（電話） */
.lp-tel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    border-radius: 999px;
    transition: opacity .2s ease, transform .2s ease;
}


.lp-tel-btn:active {
    transform: scale(0.98);
}

/* 共通CTAボタン（LINE／フォーム） */
.lp-sub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 23px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    flex: 1;
    background-color: #83939c;
}

.lp-sub-btn:nth-of-type(1){
background-color: #44af35;
}

.lp_cta_last{
color: #000;
font-size: 18px;
font-weight: 700;
}



/* スクロールで戻ってくる分、ヘッダー固定ぶんの余白をセクション先頭に確保 */
.lp-block[id] {
    scroll-margin-top: 76px;
}







.lp-header__inner {
    padding: 0 15px 0 0;
    margin: 0 auto;
    max-width: 1200px;
}

.lp-header__logo {
    background-color: #e50012;
    margin: 0;
    padding: 20px;
}

 .lp-header__logo + p {

}


    .lp-header__tel {
        font-size: 20px;
        padding: 10px 20px;
     border-radius: 10px;
    }

 .lp-header-line-btn img{height: 30px;}
 .lp-header-form-btn img{height: 15px;}

.lp-header-line-btn{
    background-color: #44af35;
    padding: 0 20px;
    border-radius: 20px;
}

.lp-header-form-btn {
    background-color: #83939c;
    padding: 7px 40px 7px  25px;
    border-radius: 20px;
}








/* ==========================================================
   2. ヘッダー（固定）
   ========================================================== */
.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.lp-header__logo img {
  /*  width: 120px; */
}
.lp-header__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 235px;
}
.lp-header__cta .lp-header-line-btn{margin-bottom: 5px;}
.lp-header__tel {
    background: var(--lp-orange);
    color: #fff;
    padding: 8px 14px;
    font-size: 15px;
    line-height: 1.2;
}
.lp-header__tel span {
    display: block;
    font-size: 9px;
    font-weight: 400;
}
.lp-header__form-btn {
    background: var(--lp-green);
    color: #fff;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
}

/* ヘッダー固定ぶん、ページ本体を押し下げる */
.lp-body-offset {
    height: 56px;
}



/* ==========================================================
   3. KV（メインビジュアル）
   ========================================================== */
.lp-kv {
    position: relative;
}
.lp-kv__slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.lp-kv__copy {
    padding: 20px 16px 8px;
    text-align: center;
    background: var(--lp-green-dark);
    color: #fff;
}
.lp-kv__copy-small {
    font-size: 13px;
    letter-spacing: 0.05em;
}
.lp-kv__copy-main {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.4;
    margin: 6px 0;
}
.lp-kv__copy-main em {
    font-style: normal;
    color: var(--lp-orange);
}
.lp-kv__copy-note {
    font-size: 12px;
    opacity: 0.85;
}

/* 実績バッジ（画像差し替え運用） */
.lp-kv__badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 15px;
    list-style: none;
}
/* .lp-kv__badge img {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
} */

/* Splideの矢印・ページネーションを控えめな配色に上書き */
.lp-kv .splide__pagination__page.is-active {
    background: var(--lp-orange);
}
.lp-kv .splide__arrow {
    background: rgba(0,0,0,0.4);
}
.lp-kv .splide__arrow svg {
    fill: #fff;
}


/* ==========================================================
   4. お悩みセクション
   ========================================================== */
.lp-worry {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg);
}

.lp-worry h2{font-size: 32px;}

.lp-worry__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lp-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-worry__item {
    /* text-align: center; */
    background-color: #dadfe1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 1em;
}
.lp-worry__item img {
    width: auto;
}
.lp-worry__item p {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
}


/* ==========================================================
   5. 解決セクション
   ========================================================== */
.lp-solution {
    padding: var(--lp-gap-lg) 0;
/*    background: var(--lp-green); */
/*   color: #fff; */
}

.lp-solution h2 {
    font-size: clamp(30px, 4.9vw, 51px);
    font-weight: 600;
    line-height: 1.4em;
}


.lp-solution .lp-heading {
/*   color: #fff; */
}
.lp-solution__lead {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: var(--lp-gap-md);
}
.lp-solution__text {
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: var(--lp-gap-md);
   font-weight: 700;
}
.lp-solution__photo img {
    border-radius: var(--lp-radius);
    overflow: hidden;
}

.lp-solution__photo img:first-child{
margin-bottom: 20px;
}

.lp_solution_gotai {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    gap: 15px;
}
.lp_solution_gotai li {
    background-color: #555;
    height: 40px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp_solution_gotai li:nth-of-type(1) {background-color: var(--lp-hobby);}
.lp_solution_gotai li:nth-of-type(2) {background-color: var(--lp-hard);}
.lp_solution_gotai li:nth-of-type(3) {background-color: var(--lp-house);}
.lp_solution_gotai img {
}

/* ==========================================================
   6. 選ばれる4つの理由
   ========================================================== */
.lp-reason {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-green);
}

.lp-reason h2{color: #fff;}


.lp-reason__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-reason__item {
    background: #fff;
    /* border-radius: var(--lp-radius); */
    padding: 20px 12px;
    /* text-align: center; */
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.06); */
    display: flex;
    justify-content: center;
    gap: 20px;
}

.lp-reason__list li:nth-of-type(1){border-radius: 15px 0 0 0;}
.lp-reason__list li:nth-of-type(2){border-radius: 0 15px 0 0;}
.lp-reason__list li:nth-of-type(3){border-radius: 0 0 0 15px;}
.lp-reason__list li:nth-of-type(4){border-radius: 0 0 15px 0;}

.lp-reason__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
    position: absolute;
    left: 15px;
    top: 15px;
}
.lp-reason__item img {
    width: 75px;
 /*   margin: 4px auto 10px; */
}

.lp-reason__item:nth-of-type(4) img{
margin: 0 0em 0 3em;
} 


.lp-reason__title {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
}


/* ==========================================================
   7. 買取実績（カスタム投稿ループ）
   ========================================================== */
.lp-results {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg);
}
.lp-results h2{
color: #ff5a00;
}

.lp-results__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-results__item {
    border: 1px solid #00871e;
    border-radius: var(--lp-radius);
    overflow: hidden;
    background: #fff;
}
.lp-results__thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.lp-results__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
object-position: top;
}
.lp-results__body {
    padding: 10px;
}
.lp-results__price {
    color: var(--lp-orange);
    font-size: 28px;
    line-height: 1;
    text-align: right;
    margin: 0.5em 10px 0.2em;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.lp-results__price small {
    font-size: 12px;
    font-weight: 700;
}
.lp-results__meta {
    margin-top: 6px;
    font-size: 11px;
   /* color: var(--lp-text-sub); */
   /* display: flex; */
    justify-content: space-between;
}

.lp-results__meta span:nth-of-type(1) {
    font-size: 19px;
    font-weight: 700;
}
.lp-results__meta span:nth-of-type(2) {
    font-size: 15px;
    font-weight: 700;
    margin-top: 1em;
    display: inline-block;
}
.lp-results__meta span:nth-of-type(3){
    font-size: 15px;
    font-weight: 700;
}

.lp-results__empty {
    text-align: center;
    color: var(--lp-text-sub);
    font-size: 13px;
    padding: var(--lp-gap-md) 0;
}


/* ==========================================================
   8. 買取強化ジャンル
   ========================================================== */
.lp-genre {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg-soft);
}

.lp-genre .lp-heading{
color: var(--lp-orange);
}


.lp-genre__list {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    flex-wrap: wrap;
}
.lp-genre__item {
    /* position: relative; */
    /* border-radius: var(--lp-radius); */
    /* overflow: hidden; */
    /* aspect-ratio: 1 / 1; */
    flex: 24%;
    background-color: aquamarine;
    text-align: center;
 background-color: var(--lp-orange);
 color: #fff;
}
.lp-genre__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-genre__name { 
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    font-size: 21px;
    margin: 0.7em 0;
/*
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 16px 4px 6px; */
}


/* ==========================================================
   9. 査定風景（YouTube／サムネイルクリックで再生）
   ========================================================== */
.lp-movie {
    padding: var(--lp-gap-lg) 15px 140px;
    background: var(--lp-green-dark);
    color: #fff;
    margin: 0 auto;
    border-radius: 40px 40px 0 0;
}
.lp-movie .lp-heading {
    color: #fff;
}
/* ---- 動画エリア全体のグリッド：メイン1＋サブ2 ----
   580px超  ：メイン（大）＋サブ2本を縦積み、を横並び
   580px以下：メイン・サブすべて同じ幅で縦に3つ並べる（下の @media で上書き） */
.lp-movie__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--lp-gap-sm);
    align-items: stretch;
}

/* ---- サムネイル（メイン・サブ共通の土台） ---- */
.lp-movie__player {
    position: relative;
    aspect-ratio: 16 / 9;
 /*   border-radius: var(--lp-radius); */
    overflow: hidden;
    background: #000;
}
.lp-movie__thumb {
    /* position: absolute; */
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    flex: 1;
}
.lp-movie__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 再生ボタン（三角アイコンをCSSだけで作成） */
.lp-movie__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 50px;
    border-radius: 10px;
    background: rgb(255 0 0 / 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.lp-movie__thumb:hover .lp-movie__play {
    background: var(--lp-orange);
}
.lp-movie__play::after {
    content: "";
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}
/* サブ動画の再生ボタンはメインより一回り小さく */
.lp-movie__play--sub {
    width: 54px;
    height: 40px;
}
.lp-movie__play--sub::after {
    border-width: 8px 0 8px 13px;
    margin-left: 2px;
}

/* ---- サブ動画リスト（右側／縦並び） ---- */
.lp-movie__subs {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: var(--lp-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-movie__sub {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* サブのサムネはアスペクト比を保ったまま幅固定（縦並び用） */
.lp-movie__sub .lp-movie__player {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 16 / 9;
}
.lp-movie__sub-title {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
    color: #fff;
    width: 30%;
}

/* ==========================================================
   査定動画エリア：580px以下ではメイン・サブすべて同じ幅で縦積み
   （このブロックだけ独自のブレークポイントのため、他の
    @media 767px/480pxとは別に用意しています）
   ========================================================== */
@media (max-width: 767px) {
    .lp-movie__grid {
        grid-template-columns: 1fr;
    }
    .lp-movie__subs {
        flex-direction: column;
    }
    .lp-movie__sub {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    /* サブもメインと同じ「幅いっぱい・16:9」に切り替え */
    .lp-movie__sub .lp-movie__player {
        width: 100%;
        flex-basis: auto;
    }
    .lp-movie__sub-title {
        text-align: center;
width: auto;
    }

.lp-movie__play--sub {
    width: 80px;
    height: 50px;
}

.lp-movie__player--main{margin-bottom: 15px;}

.lp-movie__play::after {
    border-width: 8px 0 8px 13px;
    margin-left: 2px;
}


}


@media (max-width: 380px) {

.lp-movie__play,
.lp-movie__play--sub {
        width: 50px;
        height: 30px;
        border-radius: 4px;
}

}
/* ==========================================================
   動画再生モーダル（メイン・サブ共通で1個を使い回す）
   ========================================================== */
.lp-movie-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none; /* JSが is-open 付与時に flex へ切り替え */
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lp-movie-modal.is-open {
    display: flex;
}
.lp-movie-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}
.lp-movie-modal__inner {
    position: relative;
    width: 100%;
    max-width: 960px;
}
.lp-movie-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--lp-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
/* プレーヤー本体（16:9を維持しつつ幅いっぱいに表示） */
.lp-movie-modal__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--lp-radius);
    overflow: hidden;
}
.lp-movie-modal__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* モーダル表示中は背面のスクロールを止める（bodyにJSで付与） */
body.lp-modal-open {
    overflow: hidden;
}


/* ==========================================================
   10. ご利用者の声
   ========================================================== */
.lp-voice {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg);
    margin: -40px auto 0;
    border-radius: 40px 40px 0 0;
}

.lp-voice h2{
color: var(--lp-green-dark);
font-size: 50px;
}


.lp-voice__list {
    display: flex;
    flex-direction: column;
    gap: var(--lp-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-voice__item {
    border: 1px solid #00871e;
    border-radius: var(--lp-radius);
    padding: 18px;
}
.lp-voice__stars {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lp-voice__stars span:nth-of-type(1){
    color: var(--lp-star);
    font-size: 25px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.lp-voice__stars span:nth-of-type(2){
    font-size: 14px;
    margin-bottom: 8px;
}

.lp-voice__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 8px;
font-feature-settings: "palt";
letter-spacing: 1px;
}
.lp-voice__text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--lp-text);
    margin: 0 0 10px;
}
.lp-voice__meta {
    font-size: 14px;
    margin: 1em 0 1.5em;
    /* color: var(--lp-text-sub); */
    /* display: flex; */
    /* justify-content: space-between; */
}


/* ==========================================================
   11. 手続き3ステップ
   ========================================================== */
.lp-step {
    padding: var(--lp-gap-lg) 0;
    background-color: var(--lp-orange);
}
.lp-step h2{
color: #fff;
}

.lp-step__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: lp-step;
    display: flex;
    flex-direction: column;
    gap: var(--lp-gap-sm);
}
.lp-step__item {
    background: #fff;
    border-radius: var(--lp-radius);
    padding: 24px 16px;
    text-align: center;
    position: relative;
}


.lp-step__item:nth-of-type(1)::after,
.lp-step__item:nth-of-type(2)::after {
    content: url("../images/step_sp.png");
    position: absolute;
    left: calc(50% - 20px);
    bottom: -17px;
}




/* 「1→2→3」の順番そのものに意味があるステップなので番号を明示 */
/*
.lp-step__item::before {
    counter-increment: lp-step;
    content: counter(lp-step);
    display: inline-block;
    background: var(--lp-green);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
*/
.lp-step__item img {
 /*   width: 56px; */
    margin: 20px auto;
}
.lp-step__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1em;
}
.lp-step__text {
    font-size: 16px;
    line-height: 1.5;
    /* color: var(--lp-text-sub); */
    margin: 0;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0;
    display: table;
    margin: 0 auto;
}
.lp-step__text span{
    font-size: 16.5px;
color: var(--lp-orange);
    font-weight: 900;
}


.lp-step__arrow {
    text-align: center;
    color: var(--lp-green);
    font-size: 20px;
}


/* ==========================================================
   12. 電話CTAバナー（中間）
   ========================================================== */
.lp-cta-banner {
    padding: 28px 15px;
    text-align: center;
    color: #fff;
    display: table;
    margin: 0 auto;
}
.lp-cta-banner__lead {
    font-size: clamp(31px, 5.3vw, 41px);
    font-weight: 800;
    margin: 0 0 12px;
}
.lp-cta-banner__tel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    color: var(--lp-orange-dark);
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
}
.lp-cta-banner__tel span {
    font-size: 11px;
    font-weight: 400;
    color: var(--lp-text-sub);
}
.lp-cta-banner__sub {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
}



.lp-cta-banner .contact-box {
    background: var(--lp-orange);
    display: table;
    margin: 0 auto;
    padding: 1em 2em;
    border-radius: 2.5em;
}
.lp-cta-banner .cta-flb {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.lp-cta-banner .cta-flb:nth-of-type(1){
margin-bottom: 20px;
}

.lp-cta-banner .cta-flb:nth-of-type(1) img:nth-of-type(1){
width:25%;
}

.lp-cta-banner .cta-flb:nth-of-type(1) img:nth-of-type(2){
width:75%;
}





.lp-cta-banner .contact-box .lp-cta-banner__lead {
}
.lp-cta-banner .contact-box p {
}
.lp-cta-banner .contact-box img {
}



/* ==========================================================
   13. FAQ（カスタム投稿ループ・アコーディオン）
   ========================================================== */
.lp-faq {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg);
}

.lp-faq h2{
font-size: 40px;
}

.lp-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-faq__item {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
}
.lp-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: none;
    text-align: left;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.lp-faq__question::before {
    content: "Q";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}
.lp-faq__question-text {
    flex: 1;
}
.lp-faq__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
}
.lp-faq__icon::before,
.lp-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--lp-text-sub);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lp-faq__icon::before {
    width: 14px;
    height: 2px;
}
.lp-faq__icon::after {
    width: 2px;
    height: 14px;
    transition: transform .2s ease;
}
/* 開いている時は「＋」→「－」になる（縦棒を消す） */
.lp-faq__item.is-open .lp-faq__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.lp-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
    background: var(--lp-bg-soft);
}
.lp-faq__item.is-open .lp-faq__answer {
    grid-template-rows: 1fr;
}
.lp-faq__answer-inner {
    overflow: hidden;
}
.lp-faq__answer-inner p {
    display: flex;
    gap: 10px;
    padding: 17px 16px;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--lp-text);
}
.lp-faq__answer-inner p::before {
    content: "A";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lp-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}


/* ==========================================================
   14. 店舗一覧
   ========================================================== */
.lp-shop {
    padding: var(--lp-gap-lg) 0;
    background: var(--lp-bg-soft);
}

.lp-shop h2{
font-size: 40px;
}

.lp-shop__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0 0 var(--lp-gap-md);
    padding: 0;
}
.lp-shop__item {
    display: block;
    max-width: 480px;
    background: #fff;
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
margin-right: auto;
margin-left: auto;
}
.lp-shop__photo {
/*    width: 40%; */
    flex-shrink: 0;
    aspect-ratio: 4 / 2.7;
}
.lp-shop__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-shop__body {
    padding: 10px 12px;
}
.lp-shop__name {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
}
.lp-shop__area {
    font-size: 13px;
    /* color: var(--lp-text-sub); */
    margin: 0;
    font-weight: 700;
    border: solid 1px var(--lp-text-sub);
    border-radius: 5px;
    display: table;
    padding: 2px 10px;
    margin: 10px 0 5px;
}

/* ==========================================================
   15. フッター
   ========================================================== */
.lp-footer {
    padding: 20px 15px 20px !important;
    background: var(--lp-green-dark);
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1.9;
    overflow: hidden;
}
.lp-footer__company {
    font-weight: 500;
    font-size: 27px;
}
.lp-footer__links {
    margin-top: 12px;
}
.lp-footer__links a {
    margin: 0 8px;
}

.lp-footer .lp-block__inner ul li:nth-of-type(2) p:first-child {
    font-weight: 700;
    font-size: 18px;
}

.lp-footer .lp-block__inner ul {
    list-style: none;
padding: 0;
}

.lp-footer .lp-block__inner ul li{
margin-bottom: 0.8em;
}

.lp-footer .lp-block__inner ul p{
margin: 0;
}



/* スマホ画面下部に常時表示する電話固定バー */
.lp-fixed-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    background: var(--lp-orange);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
color: #fff;
}
.lp-fixed-bar__tel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
text-align: center;
line-height: 1em;
}
.lp-fixed-bar__tel span {
    font-size: 10px;
    font-weight: 400;
}
.lp-fixed-bar__form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-green);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}


/* ==========================================================
   16. レスポンシブ調整（768px以上＝PC・タブレット）
   ========================================================== */
@media (min-width: 768px) {

    .lp-block__inner {
        padding: 0 15px;
    }

.lp-footer .lp-block__inner ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
    font-size: 14px;
align-items: center;
}

.lp-footer .lp-block__inner ul p{
margin: 0;
}


    .lp-heading {
        font-size:51px;
     line-height: 1em;
    }
 .lp-reason .lp-heading span{font-size: 1.5em;}
 .lp-movie .lp-heading span{font-size: 0.7em;}
 .lp-movie .lp-heading img{display: inline-block;}
 .lp-step .lp-heading span{font-size: 1.5em;}
 .lp-step .lp-heading img{display: inline-block;}

    /* ヘッダー */
.lp-header__inner {
    padding: 0 15px 0 0;
    margin: 0 auto;
    max-width: 1200px;
}

.lp-header__logo {
    background-color: #e50012;
    margin: 0;
    padding: 20px;
}

 .lp-header__logo + p {

}

.lp-header__cta p{display: none;}

    .lp-header__tel {
        font-size: 20px;
        padding: 10px 20px;
     border-radius: 10px;
    }

 .lp-header-line-btn img{height: 30px;}
 .lp-header-form-btn img{height: 15px;}

.lp-header-line-btn{
    background-color: #44af35;
    padding: 0 20px;
    border-radius: 20px;
}

.lp-header-form-btn {
    background-color: #83939c;
    padding: 7px 40px 7px  25px;
    border-radius: 20px;
}







    /* KV：コピーとバッジを横並びに */
    .lp-kv__copy-main {
        font-size: 40px;
    }
    .lp-kv__badges {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* お悩み・理由・実績・ジャンルはPCで列数を増やす */
    .lp-worry__list {
        max-width: 1000px;
        margin: 0 auto;
    }
    .lp-reason__list {
        grid-template-columns: repeat(2, 1fr);
        max-width: 980px;
        margin: 0 auto;
    }
    .lp-results__grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .lp-genre__list {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 解決セクションは写真とテキストを横並びに */
.lp-solution__inner-flex {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    justify-content: space-between;
}
    .lp-solution__photo{
      /*  flex: 1; */
    }

    /* 声・ステップは横並びに */
    .lp-voice__list {
        flex-direction: row;
    }
    .lp-voice__item {
        flex: 1;
    }
    .lp-step__list {
        flex-direction: row;
        align-items: stretch;
    }
    .lp-step__item {
        flex: 1;
position: relative;
    }
.lp-step__item:nth-of-type(1)::after,
.lp-step__item:nth-of-type(2)::after {
    content: url("../images/step_pc.png");
    position: absolute;
    top: 40%;
    right: -15px;
    left: auto;
    bottom: auto;
}


    .lp-step__arrow {
        display: flex;
        align-items: center;
    }

    /* 店舗一覧：2列グリッドに */
    .lp-shop__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .lp-shop__item {
        flex-direction: column;
    }
    .lp-shop__photo {
        width: 100%;
    }

    /* PCでは下部固定バーは不要（ヘッダーの電話番号で足りるため） */
    .lp-fixed-bar {
        display: none;
    }
    .lp-footer {
        padding-bottom: var(--lp-gap-lg);
    }
}











@media (max-width: 767px) {
.lp-kv__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
    list-style: none;
    max-width: 550px;
    margin: 0 auto;
}

.lp-kv__badges img{
display: table;
margin: 0 auto;
}


.lp-worry__list {
    grid-template-columns: repeat(1, 1fr);
}

.lp-worry__item {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.lp_solution_gotai {
    display: block;
}
.lp_solution_gotai li {
    height: auto;
    margin-bottom: 10px;
    padding: 5px 10px;
}
.lp_solution_gotai li img {
    max-width: 140px;
    width: 100%;
}

.lp-solution__inner-flex .lp-heading span{
display: none;
}

.lp-solution__text,
.lp-solution__photo{
display: table;
margin-left: auto;
margin-right: auto;
}

.lp-reason .lp-heading span,
.lp-step .lp-heading span {
    font-size: 1.5em;
}


.lp-reason__list {
    display: block;
}

.lp-reason__item {
margin-bottom: 15px;
border-radius: 15px 15px 15px 15px !important;
max-width: 480px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
}

.lp-genre__item {
    flex: 49%;
}

.lp-results .lp-heading,
.lp-genre .lp-heading {
    font-size: clamp(25px, 5.3vw, 40px);
}

.lp-reason__title {
    font-size: 27px;
}


.lp-movie .lp-heading img,
.lp-step  .lp-heading img {
    display: table;
    margin: 0 auto;
}

.lp-movie .lp-heading br{
display: none;
}


.hed_tel,
.lp-header__cta .lp-header-form-btn{display: none;}

.lp-header__logo + p {
    display: none;
}

.lp-header__inner {
    justify-content: space-between;
}

 .lp-header__cta p{
margin: 0;
}
.lp-header-line-btn img {
    height: 24px;
}


.lp-header-line-btn {
    padding: 0 10px;
    margin-top: 5px;
}















}












@media (max-width: 480px) {

.lp-results__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}


.lp-cta-banner .cta-flb {
    display: block;
}

.lp-cta-banner .cta-flb img {
    width: auto !important;
    margin-bottom: 15px;
    display: table;
    margin-left: auto;
    margin-right: auto;
}


.lp-cta-banner__sub {
    display: block;
}

 .lp-sub-btn{
width: 100%;
}

 .lp-cta-banner__sub .lp-sub-btn:nth-of-type(1){
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
















}