/* ==========================================
   Dr.水素浴®+ LP
   dr-suisobath.css
========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f3f4f6;
}


/* ==========================================
   LP BASE
========================================== */

.dr-suisobath-page {
    width: 100%;
    padding: 40px 20px;
}

.dr-lp {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}

.dr-lp section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.dr-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* WordPressテーマ側の幅を調整 */

.page-dr-suisobath .product_inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.dr-suisobath-lp {
    position: relative;
    width: 100%;
    padding-bottom: 120px;
}


/* ==========================================
   FV
========================================== */

.dr-fv {
    position: relative;
}

.dr-fv .dr-image {
    display: block;
    width: 100%;
}


/* FV CTA */

.dr-fv-btn {
    position: absolute;

    left: 4.5%;
    bottom: 4.5%;

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

    width: 38%;
    min-height: 72px;

    padding: 12px 70px;

    border: 1px solid rgba(153, 214, 230, 0.55);
    border-radius: 999px;

    background:
        linear-gradient(100deg,
            #082f52 0%,
            #0b4772 50%,
            #087f9b 100%);

    box-shadow:
        0 10px 25px rgba(0, 25, 48, 0.32);

    color: #fff;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;

    font-size: clamp(16px, 1.7vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;

    text-align: center;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}


/* カートアイコン */

.dr-fv-btn::before {
    content: "";

    position: absolute;
    left: 8%;

    width: 25px;
    height: 25px;

    background-color: #fff;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.5h8.8a2 2 0 0 0 2-1.6L21.5 8H7'/%3E%3C/svg%3E") center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.5h8.8a2 2 0 0 0 2-1.6L21.5 8H7'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* 矢印 */

.dr-fv-btn::after {
    content: "›";

    position: absolute;
    right: 8%;

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

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    color: #fff;

    font-family: serif;
    font-size: 25px;
    line-height: 1;
}


.dr-fv-btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.07);

    box-shadow:
        0 14px 30px rgba(0, 25, 48, 0.4);
}


/* ==========================================
   OFFER
========================================== */

.dr-offer {
    position: relative;
}


/* オファー内CTA */

.dr-offer-cta {
    position: absolute;

    left: 50%;
    bottom: 3%;

    z-index: 2;

    width: 72%;

    transform: translateX(-50%);
}


.dr-offer-btn {
    position: relative;

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

    width: 100%;
    min-height: 110px;

    padding: 15px 75px 15px 125px;

    border: 1px solid rgba(130, 208, 222, 0.5);
    border-radius: 16px;

    background:
        linear-gradient(100deg,
            #062942 0%,
            #073b5c 48%,
            #086780 100%);

    box-shadow:
        0 10px 24px rgba(0, 30, 50, 0.25);

    color: #fff;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}


.dr-offer-btn:hover {
    transform: translateY(-3px);

    filter: brightness(1.06);

    box-shadow:
        0 15px 30px rgba(0, 30, 50, 0.32);
}


/* 送料無料 */

.dr-offer-badge {
    position: absolute;

    top: 50%;
    left: 20px;

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

    width: 84px;
    height: 84px;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #f4dfb4 0%,
            #d5aa68 100%);

    color: #073658;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.08em;

    text-align: center;

    transform: translateY(-50%);
}


.dr-offer-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    text-align: center;
}


.dr-offer-main {
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(19px, 2.2vw, 29px);
    line-height: 1.4;
    letter-spacing: 0.04em;

    white-space: nowrap;
}


.dr-offer-main strong {
    margin-left: 6px;

    color: #e9c17f;

    font-weight: 500;
}


.dr-offer-sub {
    margin-top: 5px;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(12px, 1.3vw, 16px);
    line-height: 1.4;
    letter-spacing: 0.06em;
}


.dr-offer-arrow {
    position: absolute;

    top: 50%;
    right: 28px;

    width: 18px;
    height: 18px;

    border-top: 3px solid #e7bf7e;
    border-right: 3px solid #e7bf7e;

    transform:
        translateY(-50%) rotate(45deg);
}


/* ==========================================
   FAQ
========================================== */

.dr-lp .dr-faq {
    position: relative;

    margin: 0;

    padding: 90px 40px 110px;

    background:
        url("../img/item01/dr-suisobath/15_faq_bg.webp") top center / 100% 100% no-repeat;
}

.dr-faq-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}


.dr-faq-header {
    margin-bottom: 30px;

    text-align: center;
}


/* FAQ 英字 */

.dr-faq-en {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    margin: 0 0 8px;

    color: #ba8846;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        serif;

    font-size: 27px;
    letter-spacing: 0.14em;
}


.dr-faq-en::before,
.dr-faq-en::after {
    content: "";

    width: 95px;
    height: 1px;

    background: rgba(22, 53, 104, 0.35);
}


.dr-faq-title {
    margin: 0;

    color: #0a2c70;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.08em;
}


.dr-faq-lead {
    margin: 10px 0 0;

    color: #173b76;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.05em;
}


/* FAQリスト */

.dr-faq-list {
    display: grid;

    gap: 10px;
}


.dr-faq-item {
    overflow: hidden;

    border: 1px solid rgba(54, 97, 177, 0.28);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 2px 6px rgba(31, 70, 130, 0.04);
}


/* 質問 */

.dr-faq-question {
    position: relative;

    display: grid;

    grid-template-columns:
        60px minmax(0, 1fr) 25px;

    align-items: center;

    gap: 10px;

    min-height: 72px;

    padding:
        18px 25px 18px 28px;

    color: #082c75;

    cursor: pointer;

    list-style: none;
}


.dr-faq-question::-webkit-details-marker {
    display: none;
}


.dr-faq-question::marker {
    content: "";
}


.dr-faq-mark,
.dr-faq-answer-mark {
    font-family:
        "Times New Roman",
        "Yu Mincho",
        serif;

    font-size: 30px;

    line-height: 1;
}


.dr-faq-mark {
    color: #092d79;
}


.dr-faq-question-text {
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 20px;
    font-weight: 600;

    line-height: 1.55;

    letter-spacing: 0.04em;
}


/* ＋ － */

.dr-faq-toggle {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    justify-self: end;
}


.dr-faq-toggle::before,
.dr-faq-toggle::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 18px;
    height: 2px;

    background: #092d79;

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.25s ease;
}


.dr-faq-toggle::after {
    transform:
        translate(-50%, -50%) rotate(90deg);
}


.dr-faq-item[open] .dr-faq-toggle::after {
    transform:
        translate(-50%, -50%) rotate(0deg);
}


/* 回答 */

.dr-faq-answer {
    display: grid;

    grid-template-columns:
        60px minmax(0, 1fr);

    gap: 10px;

    padding:
        0 70px 22px 28px;

    color: #3e4c64;
}


.dr-faq-answer-mark {
    color: #ba8846;
}


.dr-faq-answer-text {
    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 16px;
    line-height: 1.9;

    letter-spacing: 0.025em;
}


.dr-faq-answer-text p {
    margin: 0;
}


.dr-faq-question:hover {
    background: rgba(235, 247, 250, 0.45);
}


.dr-faq-question:focus-visible {
    outline: 3px solid rgba(16, 113, 159, 0.28);
    outline-offset: -3px;
}


/* ==========================================
   FLOATING CTA
========================================== */

.dr-floating-cta {
    position: fixed;

    left: 50%;
    bottom: 22px;

    z-index: 9999;

    width:
        min(500px,
            calc(100% - 40px));

    transform: translateX(-50%);

    pointer-events: none;
}


.dr-floating-cta__button {
    position: relative;

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

    width: 100%;
    min-height: 70px;

    padding:
        17px 60px;

    border:
        1px solid rgba(132, 211, 228, 0.6);

    border-radius: 999px;

    background:
        linear-gradient(135deg,
            #063354 0%,
            #064a6c 52%,
            #05758c 100%);

    box-shadow:
        0 13px 34px rgba(0, 36, 60, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    color: #fff;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 23px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.13em;

    text-align: center;

    text-decoration: none;

    pointer-events: auto;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}


/* カート */

.dr-floating-cta__button::before {
    content: "";

    position: absolute;

    left: 36px;

    width: 24px;
    height: 24px;

    background: #fff;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.5h8.8a2 2 0 0 0 2-1.6L21.5 8H7'/%3E%3C/svg%3E") center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.5h8.8a2 2 0 0 0 2-1.6L21.5 8H7'/%3E%3C/svg%3E") center / contain no-repeat;
}


.dr-floating-cta__button::after {
    content: "›";

    position: absolute;

    right: 32px;

    color: #fff;

    font-family: serif;
    font-size: 28px;
}


.dr-floating-cta__button:hover {
    transform: translateY(-3px);

    filter: brightness(1.08);

    box-shadow:
        0 17px 42px rgba(0, 36, 60, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.23);
}


/* ==========================================
   SMARTPHONE
========================================== */

@media screen and (max-width: 767px) {

    body {
        background: #fff;
    }


    .page-dr-suisobath .product_inner {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .dr-suisobath-page {
        padding: 0 !important;
    }


    .dr-lp {
        max-width: 100%;
    }


    .dr-suisobath-lp {
        padding-bottom: 82px;
    }


    /* ========================
       FV CTA
    ======================== */

    .dr-fv-btn {
        left: 4%;
        bottom: 4%;

        width: 42%;
        min-height: 0;
        height: 9%;

        padding:
            0 9%;

        font-size: 2.1vw;

        letter-spacing: 0.08em;

        box-shadow:
            0 5px 12px rgba(0, 25, 48, 0.28);
    }


    .dr-fv-btn::before {
        left: 7%;

        width: 8%;
        height: auto;

        aspect-ratio: 1 / 1;
    }


    .dr-fv-btn::after {
        right: 6%;

        width: 9%;
        height: auto;

        aspect-ratio: 1 / 1;

        font-size: 3vw;
    }


    /* ========================
       OFFER CTA
    ======================== */

    .dr-offer-cta {
        bottom: 2.3%;

        width: 90%;
    }


    .dr-offer-btn {
        min-height: 38px;

        padding:
            4px 30px 4px 48px;

        border-radius: 8px;
    }


    .dr-offer-badge {
        left: 16px;

        width: 31px;
        height: 31px;

        font-size: 7px;

        line-height: 1.1;

        letter-spacing: 0.02em;
    }


    .dr-offer-main {
        font-size: 9px;

        letter-spacing: 0.01em;

        white-space: nowrap;
    }


    .dr-offer-main strong {
        margin-left: 2px;

        font-size: 1em;
    }


    .dr-offer-sub {
        margin-top: 0;

        font-size: 6px;

        line-height: 1.2;
    }


    .dr-offer-arrow {
        right: 18px;

        width: 8px;
        height: 8px;

        border-top-width: 1.5px;
        border-right-width: 1.5px;
    }


    /* ========================
       FAQ
    ======================== */

    .dr-faq {
        padding:
            27px 18px 42px;

        background-size: cover;
    }


    .dr-faq-header {
        margin-bottom: 18px;
    }


    .dr-faq-en {
        gap: 12px;

        margin-bottom: 5px;

        font-size: 14px;
    }


    .dr-faq-en::before,
    .dr-faq-en::after {
        width: 45px;
    }


    .dr-faq-title {
        font-size: 28px;

        letter-spacing: 0.07em;
    }


    .dr-faq-lead {
        margin-top: 5px;

        font-size: 10px;

        line-height: 1.6;
    }


    .dr-faq-list {
        gap: 6px;
    }


    .dr-faq-question {
        grid-template-columns:
            31px minmax(0, 1fr) 15px;

        gap: 5px;

        min-height: 50px;

        padding:
            11px 12px;
    }


    .dr-faq-mark,
    .dr-faq-answer-mark {
        font-size: 18px;
    }


    .dr-faq-question-text {
        font-size: 10px;

        line-height: 1.55;

        letter-spacing: 0.02em;
    }


    .dr-faq-toggle {
        width: 11px;
        height: 11px;
    }


    .dr-faq-toggle::before,
    .dr-faq-toggle::after {
        width: 11px;

        height: 1px;
    }


    .dr-faq-answer {
        grid-template-columns:
            31px minmax(0, 1fr);

        gap: 5px;

        padding:
            0 28px 13px 12px;
    }


    .dr-faq-answer-text {
        font-size: 8px;

        line-height: 1.8;
    }




    /* ========================
       FLOATING CTA
    ======================== */

    .dr-floating-cta {
        bottom: 12px;

        width:
            calc(100% - 28px);
    }


    .dr-floating-cta__button {
        min-height: 56px;

        padding:
            13px 50px;

        font-size: 17px;

        letter-spacing: 0.1em;
    }


    .dr-floating-cta__button::before {
        left: 24px;

        width: 19px;
        height: 19px;
    }


    .dr-floating-cta__button::after {
        right: 24px;

        font-size: 23px;
    }


}