@charset "UTF-8";

/* =========================================================
   GUIDE CTA
   写真は右側に薄く見せる完成版
========================================================= */

.guide-cta {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(100deg,
            #0f6269 0%,
            #138b8a 48%,
            #2fc9c1 100%) !important;
}

/* 写真は背景ではなく右側のアクセントとして使う */
.guide-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    top: 0 !important;
    right: -2% !important;
    bottom: 0 !important;
    left: auto !important;

    width: 48% !important;
    height: 100% !important;

    background:
        linear-gradient(90deg,
            rgba(19, 139, 138, 1) 0%,
            rgba(19, 139, 138, 0.76) 28%,
            rgba(19, 139, 138, 0.45) 100%),
        url("../img/NS_01163.jpg") center center / cover no-repeat !important;

    opacity: 0.48 !important;

    filter:
        saturate(0.75) contrast(0.9) !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

/* 円形装飾は完全に削除 */
.guide-cta::after {
    content: none !important;
    display: none !important;
}

/* 中身を前へ */
.guide-cta .container {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   GUIDE CTA
   円をやめてシャープに見せる
========================================================= */

.guide-cta {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(105deg,
            #0f666d 0%,
            #138b8a 52%,
            #2fc9c1 100%) !important;
}


/* 右側の写真 */
.guide-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    top: 0 !important;
    right: -2% !important;
    bottom: 0 !important;
    left: auto !important;

    width: 47% !important;
    height: 100% !important;

    background:
        linear-gradient(90deg,
            rgba(19, 139, 138, 1) 0%,
            rgba(19, 139, 138, .80) 24%,
            rgba(19, 139, 138, .42) 100%),
        url("../img/NS_01163.jpg") center center / cover no-repeat !important;

    /* 丸を完全に消す */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* 斜めカット */
    clip-path: polygon(18% 0,
            100% 0,
            100% 100%,
            0 100%) !important;

    opacity: .48 !important;

    filter:
        saturate(.72) contrast(.92) !important;

    transform: none !important;

    pointer-events: none !important;
    z-index: 0 !important;
}


/* 右側に細いアクセントライン */
.guide-cta::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    top: -10% !important;
    right: 45% !important;

    width: 1px !important;
    height: 125% !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        rgba(255, 255, 255, .24) !important;

    transform:
        rotate(8deg) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}


/* 中身を前面へ */
.guide-cta .container {
    position: relative !important;
    z-index: 2 !important;
}


/* スマホ */
@media screen and (max-width: 768px) {

    .guide-cta::before {
        width: 70% !important;
        right: -30% !important;

        opacity: .28 !important;

        clip-path: polygon(25% 0,
                100% 0,
                100% 100%,
                0 100%) !important;
    }

    .guide-cta::after {
        right: 35% !important;
        opacity: .55 !important;
    }
}

/* 斜めアクセントラインを完全に削除 */
.guide-cta::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   GUIDE CTA スマホ最終調整
========================================================= */

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

    .guide-cta {
        position: relative !important;
        overflow: hidden !important;

        background:
            linear-gradient(145deg,
                #0f666d 0%,
                #138b8a 58%,
                #2fc9c1 100%) !important;
    }

    /* 背景写真 */
    .guide-cta::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        right: -38% !important;
        bottom: 0 !important;
        left: auto !important;

        width: 95% !important;
        height: 100% !important;

        background:
            linear-gradient(90deg,
                rgba(19, 139, 138, 1) 0%,
                rgba(19, 139, 138, .84) 35%,
                rgba(19, 139, 138, .48) 100%),
            url("../img/NS_01163.jpg") center center / cover no-repeat !important;

        opacity: .28 !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        clip-path: none !important;

        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* 斜め線なし */
    .guide-cta::after {
        content: none !important;
        display: none !important;
    }

    .guide-cta .container {
        position: relative !important;
        z-index: 2 !important;
    }
}

/* =========================================================
   QUICK CONTACT FINAL
========================================================= */

/* ---------- PC ---------- */
@media screen and (min-width: 769px) {

    .quick-contact {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 9999;

        display: flex;
        flex-direction: column;

        width: 50px;

        transform: translateY(-50%);
        overflow: visible;
    }

    .quick-contact__item {
        position: relative;

        display: block;

        width: 50px;
        height: 58px;

        margin: 0;
        padding: 0;

        overflow: visible;

        color: #fff;
        text-decoration: none;

        border: 0;
        border-radius: 0;
    }

    /* 背景 */
    .quick-contact__item::before {
        content: "";

        position: absolute;
        top: 0;
        right: 0;

        width: 50px;
        height: 58px;

        z-index: -1;

        transition: width .25s ease;
    }

    .quick-contact__tel::before {
        background: #075865;
    }

    .quick-contact__access::before {
        background: #15958f;
    }

    .quick-contact__mail::before {
        background: #2fc4be;
    }

    /* hoverで左へ展開 */
    .quick-contact__item:hover::before {
        width: 185px;
    }

    /* アイコン */
    .quick-contact__icon {
        position: absolute;
        top: 0;
        right: 0;

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

        width: 50px;
        height: 58px;

        margin: 0;
        padding: 0;

        background: transparent;

        color: #fff;
    }

    .quick-contact__icon i {
        color: #fff;
        font-size: 17px;
    }

    /* 電話だけ少し小さく */
    .quick-contact__tel .quick-contact__icon i {
        font-size: 15px;
    }

    /* 文字 */
    .quick-contact__text {
        position: absolute;
        top: 0;
        right: 50px;

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

        width: 135px;
        height: 58px;

        gap: 7px;

        padding: 0 10px;

        opacity: 0;
        visibility: hidden;

        transform: translateX(10px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .quick-contact__item:hover .quick-contact__text {
        opacity: 1;
        visibility: visible;

        transform: translateX(0);
    }

    .quick-contact__text strong {
        color: #fff;

        font-size: 13px;
        font-weight: 700;

        white-space: nowrap;
    }

    .quick-contact__text small {
        color: rgba(255, 255, 255, .7);

        font-size: 8px;
        font-weight: 700;

        white-space: nowrap;
    }
}


/* ---------- SP ---------- */
@media screen and (max-width: 768px) {

    .quick-contact {
        position: fixed;

        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        z-index: 9999;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        width: 100%;
        height: 64px;

        transform: none;
    }

    .quick-contact__item {
        display: flex;

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

        width: 100%;
        height: 64px;

        color: #fff;
        text-decoration: none;
    }

    .quick-contact__tel {
        background: #075865;
    }

    .quick-contact__access {
        background: #15958f;
    }

    .quick-contact__mail {
        background: #2fc4be;
    }

    .quick-contact__icon {
        position: static;

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

        width: 30px;
        height: 30px;

        margin-right: 7px;

        border-radius: 50%;

        background: #fff;

        color: #063e47;
    }

    .quick-contact__icon i {
        color: #063e47;
        font-size: 13px;
    }

    .quick-contact__text {
        position: static;

        display: flex;
        flex-direction: column;

        width: auto;
        height: auto;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .quick-contact__text strong {
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }

    .quick-contact__text small {
        display: none;
    }

    body {
        padding-bottom: 64px;
    }
}

/* =========================================================
   GUIDE MESSAGE
   PC / SP 見出し2行固定
========================================================= */

.guide-message__main span {
    display: block;
}


/* PC */
@media screen and (min-width: 769px) {

    .guide-message__main span {
        white-space: nowrap;
    }

}


/* SP */
@media screen and (max-width: 768px) {

    .guide-message {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .guide-message__main {
        width: 100% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: clamp(16px, 4.5vw, 18px) !important;
        line-height: 1.65 !important;
        letter-spacing: -0.035em !important;

        text-align: center !important;
    }

    .guide-message__main span {
        display: block !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   GUIDE CTA 見出し
   PC / SP 2行固定
========================================================= */

.guide-cta__title span {
    display: block;
}


/* PC */
@media screen and (min-width: 769px) {

    .guide-cta__title span {
        white-space: nowrap;
    }

}


/* SP */
@media screen and (max-width: 768px) {

    .guide-cta__title {
        width: 100% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: clamp(22px, 5.7vw, 26px) !important;
        line-height: 1.55 !important;
        letter-spacing: -0.045em !important;

        text-align: left !important;
    }

    .guide-cta__title span {
        display: block !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   GUIDE CTA 説明文
   PC / SP 2行固定
========================================================= */

.guide-cta__lead span {
    display: block;
}


/* PC */
@media screen and (min-width: 769px) {

    .guide-cta__lead span {
        white-space: nowrap;
    }

}


/* SP */
@media screen and (max-width: 768px) {

    .guide-cta__lead {
        width: 100% !important;
        max-width: none !important;

        margin: 24px 0 0 !important;

        font-size: clamp(11px, 3.15vw, 13px) !important;
        line-height: 1.9 !important;
        letter-spacing: -0.04em !important;

        text-align: left !important;
    }

    .guide-cta__lead span {
        display: block !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   無料体験の流れ 説明文
   SPでも1行表示
========================================================= */

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

    .trial-flow__lead {
        width: 100% !important;
        max-width: none !important;

        font-size: clamp(11px, 3.05vw, 13px) !important;
        line-height: 1.8 !important;
        letter-spacing: -0.045em !important;

        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;

        text-align: center !important;
    }

}