/* =============================================
   LP共通アニメーション  /lp/lp-animation.css
   更新時はこのファイルのみ編集してください
   ============================================= */

/* ------------------------------------------
   btn-shine : 中ページCTAボタン（斜めシャイン）
   対象: btn_counseling02.svg の親 <a>
------------------------------------------ */
.btn-shine {
    display: block;
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -90%;
    width: 70%;
    height: 200%;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: none;
}

/* 視界に入ったらアニメーション開始（JS: Intersection Observer で .lp-inview を付与） */
.btn-shine.lp-inview::after {
    animation: lpBtnShine 2.8s ease-in-out infinite;
}

@keyframes lpBtnShine {
    0% {
        left: -90%;
    }

    50% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

#choose {
    padding-bottom: 4rem;
    margin-bottom: -4rem;
}

/* conversionWrap（ページ下部CTAブロック）ボタン余白 */
.conversionWrap .telLink {
    margin-bottom: 1rem;
}

/* SP実機ではtelLinkを非表示（AdSiPのfooter固定ボタンで計測するため） */
@media screen and (max-width: 450px) {
    .telLink {
        display: none;
    }
}

.conversionWrap .conversionBtnList li {
    margin: 1rem;
}

/* sectionConversionWrap内のconversionBtnList専用 */
.sectionConversionWrap .conversionBtnList {
    margin-top: 2rem;
    padding: 0 10px;
}

.sectionConversionWrap .conversionBtnList li a {
    /* liにシャドーを置くことでbtn-shineのoverflow:hiddenの影響を回避 */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.sectionConversionWrap .conversionBtnList li {
    margin-bottom: 4rem;
    padding: 0 10px;
}

.sectionConversionWrap .conversionBtnListText {
    font-size: 1.6rem;
}

/* LINEボタンをblock化（sectionConversionWrapのみ） */
.sectionConversionWrap .conversionBtnList li.line a {
    display: block;
}

/* ==============================
   LP フッター固定ボタン置き換え
   既存 #footerFixBtn を非表示にして
   公式サイトと同仕様の #spFixBtn / #spFixLine を表示
   対象画像: /lp/img/spFixBtn_web.svg, spFixBtn_tel.svg, spFixBtn_line.svg, spFixline.webp
   元に戻す場合はこのブロック〜「/ LP フッター固定ボタン置き換え」まで削除
============================== */
#footerFixBtn {
    display: none !important;
}

#spFixLine {
    width: 100%;
    position: fixed;
    top: -200px;
    left: 0;
    z-index: 98;
    transition: top 0.4s ease;
}

#spFixLine a {
    position: relative;
    display: block;
}

#spFixLine img {
    width: 100%;
    height: auto;
    display: block;
}

#spFixLine .supportHours {
    position: absolute;
    top: 60%;
    left: 4.5rem;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: bold;
    color: #0068b7;
    line-height: 1.2;
}

#spFixBtn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
}

#spFixBtn .spFixList {
    width: 95%;
    margin: 0 auto 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#spFixBtn .spFixList li {
    width: calc(50% - 0.5rem);
}

#spFixBtn .spFixList li a {
    display: block;
    border-radius: 0.6rem;
    background-color: #fff;
    box-shadow: 0.5rem 0.5rem 1.2rem rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}

#spFixBtn .spFixList li a:hover {
    opacity: 1 !important;
}

#spFixBtn .spFixList li img {
    width: 100%;
    height: auto;
    display: block;
}

#spFixBtn .spFixList li.web a {
    border: 0.3rem solid #007BFF;
    animation: lpBtnWobble 3.8s linear infinite;
    transform-origin: center center;
}

#spFixBtn .spFixList li.tel a {
    border: 0.3rem solid #ff6700;
}

#spFixBtn .spFixList li.line a {
    border: 0.3rem solid #06c755;
}

/* PC（451px以上）はLP幅（450px）に制限して中央寄せ */
@media screen and (min-width: 451px) {
    #spFixBtn,
    #spFixLine {
        width: 450px !important;
        left: calc(50% - 225px) !important;
        transform: none !important;
    }
}
/* PC（451px以上）はLP幅（450px）に制限して中央寄せ */
@media screen and (min-width: 451px) {
    #spFixBtn,
    #spFixLine {
        width: 450px !important;
        left: calc(50% - 225px) !important;
        transform: none !important;
    }
}
/* / LP フッター固定ボタン置き換え */

/* ------------------------------------------
   btn-pulse : フッター WEB予約ボタン
              （LINE吹き出し風プルプル揺れ）
   対象: #footerFixBtn 内の WEB予約 <a>
------------------------------------------ */
.btn-pulse {
    display: block;
    transform-origin: center center;
    animation: lpBtnWobble 3.8s linear infinite;
}

@keyframes lpBtnWobble {

    0%,
    79%,
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }

    81% {
        transform: translateX(0) rotate(0deg) scale(1.10);
    }

    83% {
        transform: translateX(0) rotate(0deg) scale(1.10);
    }

    84.5% {
        transform: translateX(-4px) rotate(-1.3deg) scale(1.08);
    }

    86.5% {
        transform: translateX(4px) rotate(1.3deg) scale(1.07);
    }

    88.5% {
        transform: translateX(-4px) rotate(-1.3deg) scale(1.06);
    }

    90.5% {
        transform: translateX(4px) rotate(1.3deg) scale(1.05);
    }

    92.5% {
        transform: translateX(-3px) rotate(-1deg) scale(1.03);
    }

    94.5% {
        transform: translateX(3px) rotate(1deg) scale(1.02);
    }

    96.5% {
        transform: translateX(-1px) rotate(0deg) scale(1);
    }

    98% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
}