@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* reset
-------------------------------- */
html {
    margin-top: 0 !important;
}

/* settings
---------------------------------------------------*/
:root {
    --font-family-jp: "Noto Sans JP", sans-serif;
    --font-family-en: "Jost", sans-serif;

    /* 最大幅 */
    --max-width1: 1200px;

    /* 背景色 */
    --bg-color1: #eff3f9;
    --bg-color2: #b8c7d8;

    /* 背景グラデーション */
    --bg-grad1: linear-gradient(
                to right,
                #004e9b,
                #111860
                );
    --bg-grad2: linear-gradient(
                to right,
                #f7931e,
                #f15a24
                );

    /* 標準文字色 */
    --font-color-bass: #333;
    --font-color-gray: #666;

    /* アクセントカラー */
    --accent-color1: #111860;
    --accent-color2: #0c64ad;
    --accent-color3: #ffff00;
    --accent-color4: #d33c96;

    /* その他 */
    --shadow1: 2px 2px 3px rgba(0,0,0,.2);
}

/* 共通設定
---------------------------------------------------*/
/* 表示・非表示 */
.pc {
    display: block;
}
.pc-in {
    display: inline-block;
}
.sp, .sp-in {
    display: none;
}
@media screen and (max-width: 1000px) {
    .sp {
        display: block;
    }
    .sp-in {
        display: inline-block;
    }
    .pc, .pc-in {
        display: none;
    }
}

/* コンテンツ幅など */
section.contents {
    padding: 120px 0 160px;
}
.contents-inner {
    width: 95%;
    max-width: var(--max-width1);
    margin: 0 auto;
}
@media screen and (max-width: 1000px) {
    section.contents {
        padding: 80px 0;
    }
    .contents-inner {
        padding: 0 15px;
    }
}

/*フォント設定*/
.font-en {
     font-family: var(--font-family-en);
}
.font-jp {
     font-family: var(--font-family-jp);
}

h2, h3, h4, h5, h6, p, a {
    font-family: var(--font-family-jp);
    color: var(--font-color-bass);
}
a {
    text-decoration: none;
}

/* 背景色 */
.-bg-color1 {
    background: var(--bg-color1);
}
.-bg-color2 {
    background: var(--bg-color2);
}


.accl {
    color: var(--font-color-accent1);
}

/* header
-------------------------------- */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    & .header-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        & .header-logo {
            display: block;
            width: 9rem;
            padding: .5rem 1rem;
        }
        & .header-menu {
            display: flex;
            width: fit-content;
        }
    }
}

:root {
    --head-btn-h: min(5vw, 70px);
    --head-btn-w: min(3.4vw, 45px);
    --head-icon-w: calc(var(--head-btn-w) * .6);
    --head-icon-shift: min(1.2vw, 16px);
    --head-rd: 10px;
}
a.head-btn {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--head-btn-h);
    text-align: center;
    padding: min(1vw, 14px) min(2vw, 28px);
    padding-left: calc(var(--head-btn-w) + min(2vw, 28px));
    border-radius: 0 0 var(--head-rd) var(--head-rd);
}
a.head-btn::before, a.head-btn::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    margin: auto 0;
}
a.head-btn::before {
    width: var(--head-btn-w);
    height: var(--head-btn-w);
    border-radius: 9999px;
    left: var(--head-icon-shift);
}
 a.head-btn::after {
    width: var(--head-icon-w);
    height: var(--head-icon-w);
    left: calc(((var(--head-btn-w) - var(--head-icon-w)) / 2) + var(--head-icon-shift));
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
 }
a.head-btn.-tel {
    font-size: min(2vw, 28px);
    font-weight: 900;
    margin-right: 1rem;
    color: white;
    &::before {
        background: var(--bg-grad1);
    }
    &::after {
        background: white;
        mask-image: url(../icons/tel.svg);
        -webkit-mask-image: url(../icons/tel.svg);
    }
}
a.head-btn.-form {
    font-size: min(1.6vw, 21px);
    background: var(--bg-grad2);
    color: white;
    margin-right: 2rem;
    font-weight: 600;
    &::before {
        background: white;
    }
    &::after {
        background: var(--bg-grad2);
        mask-image: url(../icons/mail.svg);
        -webkit-mask-image: url(../icons/mail.svg);
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --head-btn-h: 10vw;
        --head-btn-w: 6vw;
        --head-icon-shift: 2vw;
        --head-rd: 5px;
    }
    header {
        & .header-inner {
            align-items: center;
            & .header-logo {
                width: 5.5rem;
                padding: .35rem .4rem;
                padding-right: .7rem;
                background: rgba(255,255,255,.8);
                margin-left: 0;
                border-radius: 0 var(--head-rd) var(--head-rd) 0;
            }
            & .header-menu {
                width: 10rem;
                flex-wrap: wrap;
                flex-direction: column-reverse;
            }
        }
    }
    a.head-btn {
        width: 100%;
        justify-content: center;
        border-radius: var(--head-rd) 0 0 var(--head-rd);
        margin-top: .3rem;
    }
    a.head-btn.-tel {
        font-size: 3.3vw;
        margin-right: 0;
    }
    a.head-btn.-form {
        font-size: 3vw;
        margin-right: 0;
    }
}


/* headerボタンの色変え */
.head-btn.-tel {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.head-btn.-tel.scrolled {
    background: var(--bg-grad1);
}

/* ドロワーメニュー */


/* ボタン
-------------------------------- */
:root {
    --lp-btn-icon-w: min(3.5vw, 50px);
    --lp-btn-icon-pd: calc(var(--lp-btn-icon-w) * 1.5);
    --lp-btn-icon-shift: calc(var(--lp-btn-icon-w) * .6);
}
.btn-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    & a.lp-btn {
        position: relative;
        width: min(28vw, 370px);
        border-radius: 10px;
        font-size: min(2vw, 28px);
        color: white;
        font-weight: 900;
        padding: 1.4% 1%;
        padding-left: var(--lp-btn-icon-pd);
        text-align: center;
        margin: 0 1% 2%;
    }
    & a.lp-btn::before, a.lp-btn::after {
        position: absolute;
        content: "";
        width: var(--lp-btn-icon-w);
        height: var(--lp-btn-icon-w);
        top: 0;
        bottom: 0;
        left: var(--lp-btn-icon-shift);
        margin: auto 0;
        border-radius: 9999px;
    }
    & a.lp-btn::before {
        background: white;
    }
    a.lp-btn::after {
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 70%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 70%;
    }
    & a.lp-btn.-tel {
        background: var(--bg-grad1);
        font-size: min(2.3vw, 32px);
        &::after {
            background: var(--bg-grad1);
            mask-image: url(../icons/tel.svg);
            -webkit-mask-image: url(../icons/tel.svg);
        }
    }
    & a.lp-btn.-form {
        background: var(--bg-grad2);
        &::after {
            background: var(--bg-grad2);
            mask-image: url(../icons/mail.svg);
            -webkit-mask-image: url(../icons/mail.svg);
        }
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --lp-btn-icon-w: 4.5vw;
    }
    .btn-box {
        & a.lp-btn {
            width: 44vw;
            font-size: 3.6vw;
            border-radius: 5px;
        }
        & a.lp-btn.-tel {
            font-size: 4vw;
        }
    }
}

/* mv
-------------------------------- */
:root {
    --mv-h: min(58vw, 90vh);
    --mv-inner-w: 65%;
}
.mv {
    position: relative;
    height: var(--mv-h);
}
.mv-bk {
    position: absolute;
    width: calc((100% - var(--mv-inner-w)) / 2);
    height: 100%;
    top: 0;
    &.-left {
        left: 0;
        background: url(../images/mv-bk-l-01-1.jpg) no-repeat right center / cover;
    }
    &.-right {
        right: 0;
        background: url(../images/mv-bk-r-01-1.jpg) no-repeat left center / cover;
    }
}
.mv-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--mv-inner-w);
    height: 100%;
    margin: 0 auto;
    background: url(../images/mv-bk-c-01-1.jpg) no-repeat center center / cover;
    & img {
        width: auto;
        height: 85%;
        object-fit: cover;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --mv-h: 65vh;
        --mv-inner-w: 100%;
    }
    .mv-inner {
        & img {
            height: 75%;
        }
    }
}


/* コンテンツ部分 共通スタイル
-------------------------------- */
.lp-contents {
    padding: min(6vw, 80px) 0;
    overflow: hidden;
    & .-inner {
        width: 100%;
        max-width: var(--max-width1);
        margin: 0 auto;
    }
}
@media screen and (max-width: 1000px) {
    .lp-contents {
        padding: 9vw 0;
    }
}

.contents-head {
    position: relative;
    margin-bottom: min(6.7vw, 85px);
    & h2 {
        position: relative;
        width: fit-content;
        margin: 0 auto;
        color: var(--accent-color1);
        text-align: center;
        font-size: min(3.8vw, 50px);
        font-weight: 900;
        text-align: center;
        padding: .2em 0;
        z-index: 2;
        & span {
            display: block;
            color: var(--accent-color1);
            font-size: 80%;
        }
    }
    &.-line {
        & h2::before, h2::after {
            position: absolute;
            content: "";
            width: 100%;
            left: 0;
            background: var(--accent-color1);
        }
        & h2::before {
            height: 4px;
            bottom: 0;
        }
        & h2::after {
            height: 2px;
            bottom: 7px;
        }
    }
}
.contents-head::before, .contents-head::after {
    position: absolute;
    content: "";
    width: 43%;
    height: 100%;
    max-height: 6rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: var(--accent-color1);
    opacity: .1;
}
.contents-head::before {
    left: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.contents-head::after {
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.-bg-color2 {
    & .contents-head::before, .contents-head::after {
        background: white;
        opacity: .3;
    }
}

@media screen and (max-width: 1000px) {
    .contents-head {
        margin-bottom: 9vw;
        & h2 {
            font-size: 5.5vw;
        }
        &.-line {
            & h2::before {
                height: 3px;
            }
            & h2::after {
                height: 2px;
                bottom: 4px;
            }
        }
    }
}

/* offer ------------ */
:root {
    --offer-icon-w: min(4vw, 60px);
}
.offer-list {
    position: relative;
    width: fit-content;
    background: white;
    border: min(.5vw, 6px) solid var(--accent-color2);
    padding: min(4.2vw, 56px) min(5.4vw, 72px);
    border-radius: 15px;
    margin: 0 auto min(4vw, 55px);
    & h3 {
        position: absolute;
        top: -1em;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: fit-content;
        height: fit-content;
        background: var(--accent-color2);
        font-size: min(2.3vw, 31px);
        padding: .2em 2em;
        color: white;
        font-weight: 900;
        border-radius: 9999px;
    }
    & .offer-list-box {
        margin-bottom: 1.5rem;
        & h4 {
            position: relative;
            font-size: min(2.4vw, 32px);
            color: var(--accent-color2);
            font-weight: 900;
            margin-bottom: .2em;
            padding-left: calc(var(--offer-icon-w) * 1.4);
            z-index: 2;
            & span {
                position: relative;
                display: inline-block;
                font-size: 125%;
                color: var(--accent-color2);
                margin: 0 .1em;
                &::before {
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 40%;
                    left: 0;
                    bottom: .15em;
                    background: var(--accent-color3);
                    z-index: -1;
                }
            }
            &::before {
                position: absolute;
                content: "";
                width: var(--offer-icon-w);
                height: var(--offer-icon-w);
                top: .25em;
                left: 0;
                background: url(../icons/check1.svg) no-repeat center center / contain;
            }
        }
        & p {
            font-size: min(1.6vw, 20px);
            color: var(--font-color-gray);
            padding-left: calc(var(--offer-icon-w) * 1.5);
        }
    }
    & .offer-list-box:last-child {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --offer-icon-w: 6.5vw;
    }
    .offer-list {
        border: 3px solid var(--accent-color2);
        padding: 7vw 5vw;
        border-radius: 8px;
        margin: 0 auto 6vw;
        & h3 {
            font-size: 4vw;
        }
        & .offer-list-box {
            margin-bottom: .8rem;
            & h4 {
                font-size: 4vw;
            }
            & p {
                font-size: 2.5vw;
            }
        }
    }
}

/* nayami ------------ */
.lp-contents.-nayami {
    padding-bottom: 0;
    & .contents-head {
        margin-bottom: 1rem;
    }
}

.onayami-box {
    position: relative;
    width: 100%;
    padding-top: 23%;
    & .onayami-fukidashi {
        position: absolute;
        width: min(22vw, 315px);
        aspect-ratio: 19 / 18;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding: 1rem;
        &.-case1 {
            top: 0;
            left: 29%;
            padding-top: 3.5%;
            background-image: url(../images/nayami-bk1-1.png);
        }
        &.-case2 {
            top: 2%;
            right: 16%;
            padding-top: 4%;
            background-image: url(../images/nayami-bk2-1.png);
        }
        &.-case3 {
            top: 22%;
            left: 5%;
            padding-top: 4.5%;
            background-image: url(../images/nayami-bk3-1.png);
        }
        &.-case4 {
            top: 33%;
            right: 4%;
            padding-top: 4.2%;
            background-image: url(../images/nayami-bk4-1.png);
        }
        & p {
            text-align: center;
            font-size: min(1.95vw, 28px);
            font-weight: 900;
            line-height: 1.4;
            &.-color1 {
                color: var(--accent-color2);
            }
            &.-color2 {
                color: var(--accent-color4);
            }
        }
    }
    & img {
        position: relative;
        display: block;
        width: 53%;
        max-width: 680px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1000px) {
    .onayami-box {
        padding-top: 40%;
        & .onayami-fukidashi {
            width: 38vw;
            & p {
                font-size: 3.5vw;
            }
            &.-case1 {
                top: 0;
                left: 15%;
                padding-top: 5%;
            }
            &.-case2 {
                top: 3%;
                right: 10%;
                padding-top: 5.5%;
            }
            &.-case3 {
                top: 29%;
                left: 0;
                padding-top: 6.5%;
            }
            &.-case4 {
                top: 34%;
                right: -4%;
                padding-top: 5.7%;
            }
        }
    }
}


/* menu ------------ */
.lp-contents.-menu {
    padding-top: 0;
    & .contents-head {
        margin-bottom: min(3.4vw, 40px);
    }
}
.menu-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 95%;
    margin: 0 auto;
    & .menu-box {
        width: 21%;
        margin-bottom: min(2.3vw, 32px);
        & img {
            display: block;
            margin-bottom: min(1vw, 16px);
        }
        & p {
            text-align: center;
            color: var(--font-color-bass);
            font-weight: 900;
            font-size: min(1.4vw, 20px);
            height: 3em;
        }
    }
}
@media screen and (max-width: 1000px) {
    .menu-wrap {
        justify-content: center;
        & .menu-box {
            width: 29%;
            margin: 2%;
            margin-bottom: 2vw;
            & p {
                font-size: 2.8vw;
            }
        }
    }
}


/* menu-comment */
.menu-comment {
    position: relative;
    background: url(../images/menu-comment01-1.png) no-repeat left bottom / auto 100%;
    padding: 2.4% 0 0 4%;
    & h3 {
        color: var(--accent-color1);
        font-size: min(3vw, 41px);
        font-weight: 900;
        margin-bottom: min(2.2vw, 28px);
        margin-left: 17%;
    }
    & p {
        position: relative;
        background: var(--bg-color1);
        padding: 3% 7%;
        padding-left: 19%;
        font-size: min(2vw, 28px);
        font-weight: 600;
        line-height: 1.8;
        z-index: -1;
    }
}
@media screen and (max-width: 1000px) {
    .menu-comment {
        background: url(../images/menu-comment01-1.png) no-repeat 11% bottom / auto 100%;
        & h3 {
            font-size: 4.6vw;
            margin-left: 19%;
        }
        & p {
            font-size: 3vw;
            padding: 4% 12%;
            padding-left: 21%;
        }
    }
}


/* point ------------ */
:root {
    --point-image-w: min(15vw, 200px);
    --point-icon-w: min(4vw, 56px);
}
.lp-contents.-point {
    & .contents-head {
        margin-bottom: min(4vw, 56px);
    }
}
.point-wrap {
    width: 95%;
    margin: 0 auto;
}
.point-box {
    display: flex;
    flex-wrap: wrap;
    & .point-user {
        width: var(--point-image-w);
    }
    & .point-hukidashi {
        position: relative;
        width: fit-content;
        max-width: 55%;
        height: fit-content;
        margin: 2.5% 3%;
        padding: 2% 3.5%;
        border-radius: min(1vw, 14px);
        & p {
            height: fit-content;
        }
        & .point-num {
            position: absolute;
            left: min(2.5vw, 30px);
            top: max(-4vw, -52px);
            font-size: min(3vw, 42px);
            color: var(--accent-color1);
            font-weight: 900;
            & span {
                display: inline-block;
                font-size: 150%;
                margin-left: min(1vw, 14px);
            }
        }
        &::before {
            position: absolute;
            content: "";
            width: var(--point-icon-w);
            height: var(--point-icon-w);
            top: 10%;
            mask: url(../icons/hukidashi1.svg) no-repeat center center / contain;
            -webkit-mask: url(../icons/hukidashi1.svg) no-repeat center center / contain;
        }
    }
    &.-customer {
        justify-content: flex-start;
        & .point-hukidashi {
            margin-right: auto;
            background: var(--accent-color2);
            & p {
                color: white;
                font-size: min(1.7vw, 24px);
            }
            &::before {
                left: -6%;
                background: var(--accent-color2);
            }
        }
    }
    &.-us {
        justify-content: flex-end;
        flex-direction: row-reverse;
        margin-bottom: 3%;
        & .point-hukidashi {
            margin-left: auto;
            padding-top: 3%;
            background: white;
            & p {
                color: var(--accent-color2);
                font-size: min(2vw, 28px);
                font-weight: 900;
                & span {
                    background: linear-gradient(transparent 60%, var(--accent-color3) 60%);
                    font-size: 125%;
                    margin: 0 min(.5vw, 7px);
                }
            }
            &::before {
                right: -5%;
                background: white;
                transform: scaleX(-1);
            }
        }
    }
}
@media screen and (max-width: 1000px) {
    .point-box {
        & .point-hukidashi {
            max-width: 75%;
            margin: 2.5% 4%;
            padding: 3% 4.5%;
            & .point-num {
                top: -6vw;
                font-size: 5vw;
            }
        }
        &.-customer {
            & .point-hukidashi {
                margin-bottom: 6vw;
                & p {
                    font-size: 3vw;
                }
            }
        }
        &.-us {
            margin-bottom: 8%;
            & .point-hukidashi {
                padding-top: 5%;
                & p {
                    font-size: 3.2vw;
                }
            }
        }
    }
}

/* price ------------ */
.price-wrap {
    width: 90%;
    margin: 0 auto;
    overflow-x: auto;
    & img {
        min-width: 500px;
    }
}

/* achievement ------------ */
:root {
    --slide-arrow-w: 2.5rem;
}
.achievement-wrap {
    width: 90%;
    max-width: 760px;
    margin: 0 auto;
    /* スライダー（slick）スタイル上書き */
    & .slick-list {
        box-shadow: var(--shadow1);
        background: white;
    }
    & .slick-prev, .slick-next {
        width: var(--slide-arrow-w);
        height: calc(var(--slide-arrow-w) * 2);
        background: var(--accent-color2);
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
        z-index: 5;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    & .slick-prev {
        left: calc(var(--slide-arrow-w) * -2);
    }
    & .slick-next {
        transform: scaleX(-1);
        right: calc(var(--slide-arrow-w) * -2);
    }
    & .slick-prev:before, .slick-next:before {
        display: none;
    }
    & .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
        background: var(--bg-grad1);
    }
    & .slick-dots li button:before {
        top: 1.5em;
        font-size: 16px;
        color: var(--accent-color2);
        opacity: .4;
    }
    & .slick-dots li.slick-active button:before {
        color: var(--accent-color2);
        opacity: 1;
    }
}
:root {
    --achiev-stamp-w: min(9vw, 100px);
}
.achievement-box {
    position: relative;
    background: white;
    padding: min(4vw, 52px);
    & h3 {
        position: relative;
        width: 100%;
        text-align: right;
        color: var(--accent-color2);
        font-weight: 900;
        font-size: 1.4rem;
        padding: 0 .2em;
        border-bottom: 3px solid var(--accent-color2);
        margin-bottom: .8em;
        & span {
            position: absolute;
            display: flex;
            align-items: center;
            left: 0;
            bottom: 0;
            width: fit-content;
            height: 95%;
            background: var(--accent-color2);
            color: white;
            font-weight: 400;
            padding: 0 1em;
            font-size: 90%;
            line-height: 1;
        }
    }
    & .achievement-box-inner {
        display: flex;
        flex-wrap: wrap;
        width: 95%;
        margin: 0 auto;
        & .-head {
            position: relative;
            width: 100%;
            font-size: 1.2rem;
            font-weight: 900;
            padding: .2em;
            padding-left: 1.7em;
            margin-bottom: .5em;
            &::before {
                position: absolute;
                content: "";
                width: 1em;
                height: 1em;
                top: 0;
                bottom: 0;
                left: .2em;
                margin: auto 0;
                background: var(--accent-color1);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
            }
        }
        & .-image {
            width: 32%;
            margin-right: 3%;
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        & .achievement-tx {
            & h4 {
                font-size: 1.1rem;
                padding: .3em;
                color: var(--accent-color2);
                border-top: 1px solid var(--accent-color2);
                border-bottom: 1px solid var(--accent-color2);
                font-weight: 600;
                margin-bottom: .3em;
            }
            & p {
                font-size: .95rem;
                padding: .3em;
            }
            &.-tx1 {
                width: 65%;
            }
            &.-tx2 {
                width: 100%;
                margin-top: 1rem;
                & p {
                    width: calc(100% - var(--achiev-stamp-w));
                }
            }
        }
    }
    &::before {
        position: absolute;
        content: "";
        width: var(--achiev-stamp-w);
        height: var(--achiev-stamp-w);
        right: 5%;
        bottom: 5%;
        background: url(../images/achievement-stamp01-1.png) no-repeat center center / contain;
        opacity: .7;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --slide-arrow-w: 1.5rem;
    }
    .achievement-wrap {
        & .slick-prev {
            left: calc(var(--slide-arrow-w) * -.5);
        }
        & .slick-next {
            right: calc(var(--slide-arrow-w) * -.5);
        }
        & .slick-dots li button:before {
            top: 1em;
            font-size: 12px;
        }
    }
    .achievement-box {
        & h3 {
            font-size: 1rem;
        }
        & .achievement-box-inner {
            & .-head {
                font-size: .9rem;
                &::before {
                    top: .5em;
                    bottom: auto;
                }
            }
            & .-image {
                width: 100%;
                height: 20vh;
                margin: .2rem 0 1rem;
            }
            & .achievement-tx {
                & h4 {
                    font-size: .9rem;
                }
                & p {
                    font-size: .6rem;
                }
                &.-tx1 {
                    width: 100%;
                }
            }
        }

    }
}

/* contact ------------ */
:root {
    --contact-icon-w: min(5vw, 70px);
    --contact-icon-inner-w: calc(var(--contact-icon-w) * .7);
}
.lp-contents.-contact {
    padding-top: min(9vw, 126px);
    & .contents-head {
        margin-bottom: min(2vw, 28px);
    }
    & .contents-head::before, .contents-head::after {
        background: #f7931e;
        opacity: .25;
    }
    & h2 span, h2::after {
        position: absolute;
        display: block;
        width: var(--contact-icon-w);
        height: var(--contact-icon-w);
        top: -1.5em;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-radius: 9999px;
    }
    & h2 span {
        background: var(--bg-grad2);
    }
    &  h2::after {
        content: "";
        top: -1.2em;
        background: white;
        mask: url(../icons/mail.svg) no-repeat center center / 70%;
        -webkit-mask: url(../icons/mail.svg) no-repeat center center / 70%;
    }
}
.contact-message {
    & p {
        color: var(--font-color-gray);
        text-align: center;
    }
}
.form-wrap {
    width: 90%;
    max-width: 800px;
    margin: 3rem auto;
    & form {
        display: block !important;
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --contact-icon-w: 9vw;
    }
    .lp-contents.-contact {
        padding-top: 14vw;
        & h2 span {
            top: -2em;
        }
        h2::after {
            top: -1.6em;
        }
    }
    .contact-message {
        & p {
            font-size: 3vw;
        }
    }
}


/* form ※プラグイン上書き
-------------------------------- */
:root {
    --form-label-w: min(18vw, 240px);
    --form-form-w: calc(100% - var(--form-label-w));
    --form-label-font: min(1.2vw, 16px);
    --form-checkbox-w: 40px;
    --form-mg: min(2vw, 28px);
    --field-color: #fffbf3;
    --field-border: 1px solid #bfbfbf !important;
}
.forminator-row-inside {
   display: block !important;
}
.forminator-col {
    width: 100%;
    margin-bottom: var(--form-mg) !important;
}
.forminator-row {
    margin-bottom: 0 !important;
}
.forminator-field {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    & label:not(.forminator-radio), span.forminator-label, input, textarea {
        font-size: var(--form-label-font) !important;
        font-family: var(--font-family-jp);
        font-weight: 700;
        color: var(--font-color-bass);
    }
    & label:not(.forminator-radio), span.forminator-label {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: var(--form-label-w);
        height: fit-content;
        top: .4rem;
    }
    & input, textarea {
        width: var(--form-form-w) !important;
        padding: .4em 1em !important;
        border: var(--field-border);
        border-radius: 4px !important;
        background: var(--field-color);
    }
    & input {
        max-width: calc(var(--form-form-w) * .85) !important;
    }
    & input::placeholder, textarea::placeholder {
        color: #bfbfbf;
        font-weight: 400;
    }
}
:root {
    --radio-btn-w: 20px;
    --radio-bf: 20px;
    --radio-af: 10px;
}
.forminator-field-radio {
    & .forminator-radio {
        display: flex;
        align-items: center;
        width: fit-content;
        padding: 0;
        padding-right: 2rem;
        margin: 5px 0;
        & input {
            position: relative;
            width: var(--radio-btn-w) !important;
            height: var(--radio-btn-w) !important;
            max-width: var(--radio-btn-w) !important;
            margin-right: calc(var(--radio-btn-w) * .6);
        }
        & input::before, input::after {
            position: absolute;
            content: "";
            width: var(--radio-bf);
            height: var(--radio-bf);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 9999px;
            background: var(--field-color);
        }
        & input::before {
            border: var(--field-border);
        }
        & input::after {
            display: none;
            width: var(--radio-af);
            height: var(--radio-af);
            background: var(--accent-color1);
        }
        & input[type="radio"]:checked::before {
            border: 2px solid var(--accent-color1);
        }
        & input[type="radio"]:checked::after {
            display: block;
        }
    }
}

.forminator-input-with-icon {
    width: var(--form-form-w);
    display: flex;
    align-items: center;
}
.forminator-field-date, .forminator-field-time {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    & > label {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: var(--form-label-w);
        height: fit-content;
        font-size: 18px !important;
        font-family: var(--font-family0);
        font-weight: 700;
        color: var(--font-color-bass);
    }
    & .forminator-row {
        display: flex;
        flex-wrap: wrap;
        & .forminator-col {
            width: fit-content;
            margin-bottom: 0 !important;
        }
    }
    & .forminator-field {
        flex-direction: row-reverse;
        align-items: center;
        & label {
            width: 3rem;
            justify-content: center;
        }
        & select {
            width: 6em;
            padding: .6em 1em !important;
            border: var(--field-border);
            border-radius: 4px !important;
            background: var(--field-color);
        }
    }
}
.forminator-field-textarea .forminator-field {
    padding-bottom: 3em !important;
    & .forminator-description {
        position: absolute;
        right: 0;
        bottom: 0;
        & span {
            position: relative;
            display: block;
            padding: 0 3.5em 0 1.2em;
            color: #f46161;
            &::before {
                position: absolute;
                content: "（";
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto 0;
            }
            &::after {
                position: absolute;
                content: "文字）";
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto 0;
            }
        }
    }
}
span.forminator-required {
    display: block;
    position: relative;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto 0;
    width: 3em;
    height: fit-content;
    line-height: 1;
    color: rgb(0,0,0,0) !important;
    &::after {
        position: absolute;
        width: fit-content;
        height: fit-content;
        content: "必須";
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        font-size: min(.85vw, 12px);
        font-weight: 600;
        background: #c62242;
        color: white;
        padding: .4em .6em;
        line-height: 1;
    }
}
.forminator-field-consent .forminator-field {
    justify-content: center;
    align-items: center;
    & .forminator-checkbox-box {
        border: 3px solid #137f3f !important;
        width: var(--form-checkbox-w) !important;
        height: var(--form-checkbox-w) !important;
        flex: 0 0 var(--form-checkbox-w) !important;
        &::before {
            font-size: calc(var(--form-checkbox-w) * .5) !important;
        }
    }
    & .forminator-checkbox__wrapper {
        & label {
            width: calc(var(--form-checkbox-w) * 1.4) !important;
        }
        & .forminator-checkbox__label {
            width: calc(100% - (var(--form-checkbox-w) * 1.4)) !important;
            margin-left: 0 !important;
            & p, p a {
                font-size: 22px;
                font-weight: 200;
                line-height: var(--form-checkbox-w);
                letter-spacing: 1px;
            }
            & p {
                color: #444;
            }
        }
    }
}
.forminator-button {
    position: relative;
    display: block !important;
    width: fit-content !important;
    height: fit-content !important;
    text-align: center !important;
    margin: 0 auto 0 !important;
    color: white;
    font-size: min(1.6vw, 23px);
    font-family: var(--font-family-jp);
    font-weight: 900;
    border: 0;
    border-radius: 5px !important;
    background: var(--bg-grad2);
    letter-spacing: 5px;
    transition: .5s;
    padding: .5em 3em;
    padding-right: 3.5em;
    box-shadow: var(--shadow1);
    &::after {
        position: absolute;
        content: "";
        width: .55em;
        height: .55em;
        top: 0;
        bottom: 0;
        right: 1.3em;
        margin: auto 0;
        border-top: 3px solid white;
        border-right: 3px solid white;
        transform: rotate(45deg);
    }
}
.forminator-button:hover {
    opacity: .7;
}
.forminator-error-message {
    width: 100%;
    font-size: 20px;
    color: #f46161;
    text-align: right;
    order: 3;
}
@media screen and (max-width: 1000px) {
    :root {
        --form-label-w: 100%;
        --form-form-w: 100%;
        --form-checkbox-w: 20px;
        --form-label-font: 4vw;
        --radio-btn-w: 20px;
    }
    .form-wrap {
        margin: 0rem auto;
    }
    .forminator-field {
        & label:not(.forminator-radio), span.forminator-label {
            justify-content: flex-start;
            margin-bottom: .8rem;
        }
        & input, textarea {
            max-width: 100% !important;
        }
    }
    .forminator-field-radio {
        & .forminator-radio {
            & input {
                margin-right: 3vw !important;
                padding: 0 !important;
            }
            & input::before, input::after {
                display: none;
            }
            & input[type="radio"]:checked::after {
                display: none;
            }
        }
    }
    .forminator-field-date, .forminator-field-time {
        & > label {
            font-size: 4vw !important;
            margin: .8rem 0;
        }
        & .forminator-field {
            & label {
                width: 2.5rem;
                padding-left: .5em;
            }
            & select {
                width: 4.7em;
                padding: .6em .5em !important;
            }
        }
    }
    .forminator-field-time {
        margin-bottom: 1rem !important;
    }
    span.forminator-required {
        right: -1rem;
        &::after {
            font-size: 2.6vw;
        }
    }
    .forminator-field-textarea .forminator-field {
        padding-bottom: 2em !important;
    }
    .forminator-button {
        font-size: 4vw;
    }
}


/* footer
-------------------------------- */
footer {
    background: var(--bg-grad1);
    & p, a {
        color: white;
    }
    & .footer-wrap {
        padding: 4rem 0 2rem;
        & .footer-info {
            display: flex;
            align-items: center;
            width: fit-content;
            margin: 0 auto 3rem;
            & img {
                width: 120px;
            }
            & p {
                font-size: .9rem;
                margin: 0 2rem;
                & span {
                    display: inline-block;
                    font-size: 90%;
                    margin-top: .5em;
                }
            }
        }
        & .footer-menu {
            text-align: center;
            & a {
                display: inline-block;
                padding: 0 1em;
                margin-bottom: 1em;
                font-size: .8rem;
            }
            & a:not(:last-child) {
                border-right: 1px solid white;
            }
        }
    }
    & .footer-copy {
        padding: 1rem;
        border-top: 1px solid rgba(255,255,255,.5);
        & p {
            text-align: center;
            font-size: .65rem;
        }
    }
}
@media screen and (max-width: 1000px) {
    footer {
        & .footer-wrap {
            & .footer-info {
                flex-wrap: wrap;
                justify-content: center;
                & img {
                    margin-bottom: 1rem;
                }
                & p {
                    text-align: center;
                }
            }
        }
    }
}