html {
    scroll-behavior: smooth;
    --12px: .75rem;
    --14px: 0.875rem;
    --16px: 1rem;
    --18px: 1.125rem;
    --20px: 1.25rem;
    --22px: 1.375rem;
    --24px: 1.5rem;
    --25px: 1.5625em;
    --26px: 1.625rem;
    --28px: 1.75rem;
    --30px: 1.875rem;
    --32px: 2rem;
    --34px: 2.125rem;
    --38px: 2.375rem;
    --42px: 2.625rem;
    --68px: 4.25rem;
    --115px: 7.1875rem;

    --blue: #1C4E9C;
    --navy: #123768;
    --yellow: #F4C944;
}

@media (max-width: 1260px) {
    html {
        --12px: clamp(0.63rem, calc(0.56rem + 0.24vw), 0.75rem); /* 10px */
        --14px: clamp(0.75rem, calc(0.69rem + 0.24vw), 0.88rem); /* 12px */
        --16px: clamp(0.88rem, calc(0.81rem + 0.24vw), 1.00rem); /* 14px */
        --18px: clamp(1.00rem, calc(0.94rem + 0.24vw), 1.13rem); /* 16px */
        --20px: clamp(1.13rem, calc(1.06rem + 0.24vw), 1.25rem); /* 18px */
        --22px: clamp(1.13rem, calc(1.00rem + 0.47vw), 1.38rem); /* 18px */
        --24px: clamp(1.13rem, calc(0.94rem + 0.71vw), 1.50rem); /* 18px */
        --25px: clamp(1.13rem, calc(0.91rem + 0.83vw), 1.56rem); /* 18px */
        --26px: clamp(1.13rem, calc(0.88rem + 0.95vw), 1.63rem); /* 18px */
        --28px: clamp(1.13rem, calc(0.82rem + 1.18vw), 1.75rem); /* 18px */
        --30px: clamp(1.25rem, calc(0.94rem + 1.18vw), 1.88rem); /* 20px */
        --32px: clamp(1.38rem, calc(1.07rem + 1.18vw), 2.00rem); /* 22px */
        --34px: clamp(1.06rem, calc(0.70rem + 1.81vw), 2.13rem); /* 17px */
        --38px: clamp(1.38rem, calc(0.89rem + 1.89vw), 2.38rem); /* 22px */
        --42px: clamp(1.25rem, calc(0.78rem + 2.34vw), 2.63rem); /* 20px */
        --68px: clamp(2.63rem, calc(2.07rem + 2.77vw), 4.25rem); /* 42px */
        --115px: clamp(3.56rem, calc(2.33rem + 6.17vw), 7.19rem); /* 57px */
    }
}

body {
    font-size: var(--16px);
    font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
    font-weight: 600;
    line-height: 1.75;
    color: var(--blue);
}
.avenir {
    font-family: 'Avenir', sans-serif;
    font-weight: 900;
}
.flex {
    display: flex;
}
.inline_block {
    display: inline-block;
}
a {
    transition: .3s;
}
a:not(.logo a, .tel a):hover {
    opacity: .5;
}
._mobile {
    display: none;
} 

@media (max-width: 920px) {
    ._pc {
        display: none;
    }
    ._mobile {
        display: block;
    }
}

@media (min-width: 1081px) {
    .br_1080 {
        display: none;
    }
}
@media (min-width: 901px) {
    .br_901 {
        display: none;
    }
}
@media (min-width: 780px) {
    .br_780 {
        display: none;
    }
}
@media (min-width: 768px) {
    .br_768 {
        display: none;
    }
}

@media (min-width: 621px) {
    .br_620 {
        display: none;
    }
}
@media (min-width: 600px) {
    .br_600 {
        display: none;
    }
}

/* 共通
---------------------------------- */
.sec_inner {
    max-width: 1000px;
    padding: 0 6vw;
    margin: 0 auto;
    box-sizing: content-box;
}
#top .sec_inner,
#example .sec_inner,
footer .sec_inner {
    max-width: 1200px;
}

.sec_title_bg {
    width: 100%;
    background-image: url(../img/title.png);
    background-size: cover;
    background-position: center;
    font-size: var(--32px);
    line-height: 1;
    letter-spacing: .1em;
    color: #fff;
    text-align: center;
    padding: .9375em;
}
.sec_title_bg ._ja {
    font-size: var(--24px);
    letter-spacing: .2em;
    margin-left: .1em;
}
.sec_title {
    font-size: var(--32px);
    letter-spacing: 0.2em;
    text-align: center;
}


/* header
---------------------------------- */
header {
    width: 100%;
    background-color: #FAFCFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.header_inner {
    padding: 12px 5.2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_inner .flex {
    align-items: center;
}
.header_inner .logo {
    font-size: var(--32px);
    letter-spacing: .1em;
    z-index: 1;
}
.header_inner .tel_pc {
    font-size: clamp(1.31rem, calc(-0.89rem + 2.31vw), 1.88rem); /* 30px → 21px */
    margin-left: 3.3em;
}
.nav_menu {
    align-items: center;
    gap: 3.125em;
}
.nav_menu a {
    display: block;
    height: 2.25em;
    font-size: 1rem;
    line-height: 2.25em;
    letter-spacing: .2em;
}
.nav_contact {
    margin-left: .625rem;
    border: 2px solid var(--blue);
    border-radius: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav_contact a {
    padding: 0 2.16em;
    border-radius: 50vw;
}
.nav_contact a:hover {
    color: #fff;
    background-color: var(--blue);
    opacity: 1 !important;
}
.nav_button {
    display: none;
}

@media (max-width: 1600px) {
    .header_inner .tel_pc {
        margin-left: 2em;
    }
}
@media (max-width: 1530px) {
    .nav_menu {
        gap: 1.8em;
    }
}
@media (max-width: 1530px) and (min-width: 1301px) {
    .nav_menu a {
        font-size: clamp(0.88rem, calc(0.16rem + 0.87vw), 1.00rem); /* 16px → 14px */
    }
}
@media (min-width: 1301px) {
    .header_inner .tel_mob,
    .header_inner .flex_mob {
        display: none;
    }
}
@media (max-width: 1300px) {
    .header_inner {
        padding-left: 6vw;
        padding-right: 6vw;
    }
    nav {
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, .8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }
    nav.active {
        opacity: 1;
        visibility: visible;
    }
    .nav_menu {
        flex-direction: column;
    }
    .nav_menu a {
        font-size: clamp(1.00rem, calc(0.82rem + 0.71vw), 1.38rem);
        position: relative;
    }
    .nav_menu a.select:not(.nav_contact a)::after {
        content: "";
        width: 1.5em;
        height: 2px;
        background-color: var(--blue);
        position: absolute;
        left: 0;
        right: 0;
        bottom: -.2em;
        margin: auto;
    }
    .nav_contact {
        margin-left: 0;
    }
    .nav_contact a.select {
        color: #fff;
        background-color: var(--blue);
    }

    .header_inner .tel_pc {
        display: none;
    }
    .header_inner .tel_mob {
        font-size: var(--22px);
        margin-right: 5vw;
    }

    .nav_button {
        display: block;
        width: 35px;
        height: 30px;
        position: relative;
    }
    .nav_button::before,
    .nav_button::after {
        content: "";
        width: 100%;
        height: 3px;
        background-color: var(--blue);
        position: absolute;
        transition: all .5s;
    }
    .nav_button::before {
        top: 7px;
    }
    .nav_button::after {
        bottom: 7px;
    }
    .nav_button.active::before {
        transform: rotate(30deg);
        top: 13px;
    }
    .nav_button.active::after {
        transform: rotate(-30deg);
        bottom: 14px;
    }
}

@media (max-width: 420px) {
    .header_inner .tel_mob {
        font-size: 0;
        width: 38px;
        height: 38px;
        background: url(../img/tel.svg) no-repeat center / cover;
        margin-right: 4.5vw;
        position: relative;
        z-index: 1;
    }
}

/* #top
---------------------------------- */
#top {
    min-height: 100vh;
    padding-top: 9.75em;
    padding-bottom: 5.375em;
    line-height: 1;
    display: flex;
    align-items: center;
}
#top .sec_inner {
    position: relative;
}
.top_img._pc {
    width: 44.25em;
    position: absolute;
    top: 0;
    right: 6vw;
    bottom: 0;
    padding-bottom: 5vh;
    margin: auto;
    z-index: -1;
}
.top_text {
    font-size: var(--42px);
    letter-spacing: .16em;
    line-height: 1.6;
    margin-bottom: 1.35em;
}
#top .sec_inner .flex {
    flex-wrap: wrap;
    justify-content: space-between;
}
.top_title {
    font-size: var(--115px);
    letter-spacing: .1em;
    margin-bottom: .5em;
}
.top_title .head_text {
    font-size: var(--34px);
    font-weight: 800;
    letter-spacing: .06em;
    display: block;
    margin-bottom: .6em;
    white-space: nowrap;
}
.top_title .small_text {
    font-size: var(--24px);
    letter-spacing: .06em;
}
.top_point {
    font-size: var(--34px);
    margin-bottom: 1.23em;
}
.top_point p {
    letter-spacing: .06em;
    padding-left: 1.32em;
    margin-bottom: .3em;
    position: relative;
}
.top_point p::before {
    content: "";
    width: 1.03em;
    height: 1.03em;
    border-radius: 50%;
    border: .177em solid #EECA5D;
    position: absolute;
    top: 0;
    left: 0;
}
.top_point img {
    width: 11.56em;
}
.top_left .notes {
    font-size: var(--14px);
    letter-spacing: .06em;
    line-height: 1.875;
}

.top_right {
    align-self: flex-end;
    margin: 0 auto;
}
.top_right .link_wrap {
    display: flex;
    gap: 2.5em;
    margin-top: 3em;
}
.top_right .a_link {
    display: block;
    font-size: var(--24px);
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
    padding: .75em 2.54em;
    white-space: nowrap;
}
.top_right .a_link._price {
    color: #fff;
    background-color: var(--blue);
}
.top_right .a_link._contact {
    background-color: var(--yellow);
}

@media (min-height: 900px) and (min-width: 921px) {
    #top {
        height: 100vh;
    }
    .top_text {
        margin-bottom: 5.25vh;
    }
    .top_title {
        margin-bottom: 5.32vh;
    }
    .top_title .head_text {
        margin-bottom: 1.9vh;
    }
    .top_point {
        margin-bottom: 3.87vh;
    }
    .top_point img {
        width: auto;
        height: 10.27vh;
    }
}
@media (max-width: 1260px) {
    .top_img._pc {
        width: 56vw;
        right: 7%;
    }
}
@media (max-width: 920px) {
    #top {
        /* display: block;*/
        height: auto;
        max-height: 100%;
    }
    .top_title {
        margin-bottom: 0;
    }
    .top_img._mobile {
        max-width: 660px;
        margin: -4em auto 4em;
        position: relative;
        z-index: -1;
    }
    .top_point_wrap {
        display: flex;
        justify-content: center;
        gap: 2.7em;
    }
    .top_point img {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #top {
        padding-bottom: 5em;
    }
    .top_title .small_text {
        font-size: var(--16px);
    }
}

@media (max-width: 600px) {
    .top_img._mobile {
        margin: -2em auto 3em;
    }
    .top_point_wrap {
        gap: 5%;
    }
    .top_right .link_wrap {
        justify-content: center;
        gap: 5%;
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 10;
        padding: 1em 6vw;
        margin: auto;
        background-color: rgba(255, 255, 255, .9);
    }
    .top_right .a_link {
        width: 100%;
        padding: 0.75em 1.4em;
        font-size:  clamp(0.81rem, calc(0.38rem + 2.14vw), 1.19rem);
        text-align: center;
    }
} 
@media (max-width: 414px) {
    #top {
        padding-top: 5em;
    }
}
@media (max-width: 375px) {
    #top {
        padding-top: 7em;
    }
}


/* #concept
---------------------------------- */
#concept .bg {
    background: linear-gradient(#E9F2F9, #FAFBFD);
    padding: 5.625em 0;
}
#concept h3 {
    font-size: var(--38px);
    letter-spacing: .06em;
    text-align: center;
    margin: .9em auto;
}
#concept .line_text {
    border-bottom: .5em solid var(--yellow);
    display: block;
    line-height: .7;
}
.concept_text {
    font-size: var(--25px);
    letter-spacing: .08em;
    text-align: center;
}

.concept_wrap {
    margin: 5em 0 3.75em;
}
.concept_contents_wrap {
    align-items: flex-end;
    width: 100%;
    margin-top: .4em;
    overflow: hidden;
    background-color: #fff;
    border: .25em solid var(--blue);
    border-radius: 50px;
    font-size: var(--24px);
}
.concept_contents_wrap img {
    width: 20%;
}
.concept_contents {
    font-size: var(--24px);
    width: 100%;
    padding: .9em 1.6em 0 22%;
    margin-top: 0.8em;
    overflow: hidden;
    background-color: #fff;
    border: 0.25em solid var(--blue);
    border-radius: 50px;
    position: relative;
}
.concept_contents::before {
    content: "";
    width: 25%;
    height: 240px;
    background: url(../../img/concept_img.svg) no-repeat left bottom / contain;
    position: absolute;
    left: 0;
    bottom: 0;
}
.concept_contents li {
    letter-spacing: .06em;
    padding-left: 1em;
    margin: 0.1em 0 0.25em;
    position: relative;
}
.concept_contents li::before {
    content: "";
    width: .2em;
    height: .2em;
    background-color: var(--blue);
    border-radius: 50%;
    position: absolute;
    top: .8em;
    left: .4em;
}
.concept_contents li span {
    font-weight: 300;
}
.concept_contents .bg_text {
    font-size: var(--26px);
    letter-spacing: .1em;
    line-height: 1.45;
    text-align: center;
    color: #fff;
    background-color: var(--blue);
    padding: .4em 1em;
    margin-top: .6em;
    margin-bottom: 1em;
}

#concept .big_text {
    font-size: var(--28px);
    letter-spacing: .1em;
    text-align: center;
    width: 650px;
    max-width: 100%;
    border-radius: 50vw;
    background-color: var(--yellow);
    padding: 0.55em 1.3em;
    margin: 2.14em auto 1.67em;
}

.concept_point_wrap {
    justify-content: space-between;
}
.concept_point {
    width: 21.8%;
    padding: 0.6em 0.27em 0.5em;
    border: .1875em solid var(--blue);
    border-radius: .9em;
    background-color: #fff;
    font-size: var(--32px);
}
.concept_point img {
    display: block;
    width: auto;
    height: 2.19em;
    margin: 0 auto .25em;
}
.concept_point p {
    text-align: center;
    letter-spacing: .06em;
    line-height: 3rem;
}
.concept_point .speed_text {
    font-size: var(--30px);
}
.concept_point .maint_text {
    font-size: var(--24px);
    letter-spacing: -.07em;
}

@media (max-width: 1080px) {
    .concept_wrap {
        margin-top: 3em;
    }
    .concept_contents ul {
        width: 100%;
    }
    .concept_contents {
        max-width: 650px;
        padding-left: 1.6em;
        margin-left: auto;
        margin-right: auto;
        font-size: var(--22px);
    }
    .concept_contents .bg_text {
        width: 95%;
        padding: .7em 1em;
        margin: 1em 0 3em auto;
        font-size: var(--24px);
    }
    .concept_point_wrap {
        max-width: 650px;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 20px;
    }
    .concept_point {
        width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 900px) {
    #concept .line_text {
        border-bottom: 0;
        line-height: unset;
        text-decoration: underline;
        text-decoration-color: var(--yellow);
        text-decoration-thickness: .5em;
        text-underline-offset: -.1em;
    }
    .concept_contents .bg_text {
        margin: 1.8em 0 3em auto;
    }
    #concept .concept_point p {
        line-height: 2rem;
        margin-top: .5em;
    }
}
@media (max-width: 767px) {
    #concept .bg {
        padding: 4.5em 0;
    }
    .concept_wrap {
        margin-bottom: 0;
    }
    .concept_contents .bg_text {
        margin: 1.8em 0 3em auto;
    }
}
@media (max-width: 620px) {
    #concept h3 {
        margin-top: 1.4em;
    }
    .concept_wrap {
        margin-top: 2em;
    }
    .concept_contents::before {
        width: 40%;
    }
    .concept_contents .bg_text {
        margin: 1em 0 6em auto;
    }
}
@media (max-width: 520px) {
    p.concept_text,
    .concept_contents {
        font-size: var(--18px);
    }
    .concept_contents .bg_text {
        margin-bottom: 5em;
    }
}
@media (max-width: 413px) {
    #concept h3 {
        font-size: 1.25rem;
    }
    .concept_contents {
        background-size: 40%;
    }
    .concept_contents .bg_text {
        margin: 1em 0 4em auto;
    }
}
@media (max-width: 374px) {
    .concept_point {
        font-size: 18px;
        font-size: 1.125rem;
    }
    .concept_point p {
        line-height: 1.5rem;
    }
    .concept_point .speed_text {
        font-size: 16px;
        font-size: 1rem;
    }
    .concept_point .maint_text {
        font-size: 14px;
        font-size: .875em;
    }
}


/* #feature
---------------------------------- */
#feature .bg {
    background: linear-gradient(#E9F2F9, #FAFBFD);
}
#feature .head_text {
    font-size: var(--24px);
    letter-spacing: .2em;
    margin-bottom: 1.92em;
}
.frame {
    border: 5px solid var(--blue);
    background-color: #fff;
    padding: 0.35em 0.5em 0.35em 0.7em;
    margin: 0 .6em;
}
@media (min-width: 1081px) {
    .feature_wrap {
        margin-left: 48px;
    }
}
#feature .big_text {
    font-size: var(--28px);
    letter-spacing: .2em;
    text-align: center;
    width: 100%;
    border-radius: 50vw;
    background-color: var(--yellow);
    padding: 0.55em;
    margin-top: 4.5em;
    margin-bottom: 1.43em;
}
.border_text {
    display: inline-block;
    color: #333;
    letter-spacing: .12em;
    border-bottom: 5px solid #939393;
    padding: 0 .5em .25em;
    margin-bottom: 1.875em;
    position: relative;
}
.border_text::after {
    content: "";
    width: 5px;
    height: 19px;
    background-color: #939393;
    transform: rotate(-30deg);
    position: absolute;
    bottom: -19px;
    left: 1.2em;
}

/* 1. 安心価格の防滑加工 */
.bg._price {
    padding-bottom: 5.625em;
}
.bg._price .sec_inner {
    padding-top: 5.375em;
}
.bg._price .head_text {
    margin-top: 3.58em;
}
.feature_flow {
    justify-content: space-between;
    position: relative;
}
.feature_flow::after {
    content: "";
    width: 100%;
    height: 41px;
    background-image: url(../img/w_arrow_bl.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4.125rem;
    margin: auto;
}
.feature_flow li {
    width: 6.5em;
    height: 6.5em;
    background-color: #fff;
    border: 5px solid var(--blue);
    border-radius: 50%;
    font-size: var(--20px);
    letter-spacing: .2em;
    padding-left: .2em;
    line-height: 1.5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.feature_flow li:not(:last-of-type)::after {
    content: "";
    width: 2.22em;
    height: 1.8em;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: -83%;
    bottom: 0;
    margin: auto;
}
.feature_price_caption {
    color: #fff;
    letter-spacing: .2em;
    text-align: center;
    background-color: #939393;
    padding: .75em;
    margin-bottom: 15px;
}
.feature_price {
    gap: 15px;
}
/*.other_company,
.our_company {
    width: 100%;
    letter-spacing: .2em;
    line-height: 1;
    text-align: center;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}*/
.other_company {
    font-size: var(--20px);
    color: #333;
/*    background-color: #E5E5E5;*/
}
.other_company span {
    font-size: var(--16px);
    display: block;
    margin-bottom: .9em;
}
.our_company {
    font-size: var(--28px);
    font-weight: 700;
    background-color: var(--yellow);
}
.our_company span {
    font-size: var(--22px);
    display: block;
    margin-bottom: .66em;
}


/* 2. スピード施工の防滑加工 */
.bg._speed {
    padding-top: 5.625em;
    padding-bottom: 5.625em;
}
.other_speed, 
.our_speed {
    letter-spacing: .2em;
}
.other_speed {
    color: #333;
    margin-bottom: 1.875rem;
}

.other_speed p, 
.our_speed p {
    padding-right: 1.5em;
    text-align: center;
    align-self: center;
}
.other_speed .border {
    border-left: 5px solid #333;
    border-right: 5px solid #333;
    padding-top: .38em;
    padding-bottom: .38em;
}
.our_speed .border {
    border-left: 5px solid var(--blue);
    border-right: 5px solid var(--blue);
    padding-top: .38em;
    padding-bottom: .38em;
}

.other_speed p:first-of-type {
    font-size: var(--20px);
    width: 8.6rem;
}
.our_speed p:first-of-type {
    font-size: var(--24px);
    width: 8.6rem;
}
.other_speed p:nth-of-type(2),
.our_speed p:nth-of-type(2) {
    padding-left: 1.5em;
    justify-content: center;
}
.other_speed p:nth-of-type(2) {
    width: calc(100% - 8.6rem);
}
.our_speed p:nth-of-type(2) {
    width: calc(100% - 8.6rem - 1.5em - 53.6%);
    margin-right: 1.5em;
}
.arrow_img {
    width: 53.6%;
    background: url(../img/w_arrow_ye.png) no-repeat right / contain;
}

.bg._speed .big_text {
    margin-top: 2.5em !important;
}
.comp_text {
    font-size: var(--24px);
    letter-spacing: .2em;
    text-align: center;
    margin-top: 2.29em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .6em 1.875em;
}
.comp_text .bg_text {
    width: 17.36em;
    font-size: var(--28px);
    text-align: center;
    background-color: var(--yellow);
    padding: .36em 1em;
    display: inline-block;
}


/* 3. バリアフリー法にも対応 */
.bg._barrier_free {
    padding-top: 5.625em;
    padding-bottom: 6.25em;
}
@media (min-width: 768px) {
    .bg._barrier_free .head_text {
        margin-bottom: 3.75rem !important;
    }
}
.bg._barrier_free p {
    letter-spacing: .2em;
}
.barrier_free_text {
    font-size: var(--20px);
    margin: 1.75em 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em .8em;
}
.barrier_free_text .flex {
    flex-wrap: wrap;
    align-items: center;
    gap: .8em;
}
.barrier_free_text .avenir {
    font-size: var(--30px);
    letter-spacing: .1em;
}
.barrier_free_text .small_text {
    font-size: var(--20px);
}
.barrier_free_text .mark_text {
    display: inline-block;
    width: 705px;
    font-size: var(--24px);
    text-align: center;
    background-color: var(--yellow);
    border-radius: 50vw;
    padding: .88rem;
    gap: .5em 1em;
}
.bg._barrier_free li {
    font-size: var(--14px);
    letter-spacing: .12em;
    padding-left: 1.8em;
    margin-bottom: .75em;
    position: relative;
}
.bg._barrier_free li:before {
    content: "";
    width: .2em;
    height: .2em;
    border-radius: 50%;
    background-color: var(--blue);
    position: absolute;
    left: 0;
    top: .8em;
}


@media (max-width: 1060px) {
    .feature_flow li:not(:last-of-type)::after {
        right: -82%;
    }
}
@media (max-width: 960px) {
    .feature_flow li:not(:last-of-type)::after {
        right: -72%;
    }
}
@media (max-width: 880px) {
    .feature_flow li:not(:last-of-type)::after {
        width: 4.1vw;
        height: 3.3vw;
        right: -61%;
    }
}
@media (max-width: 820px) {
    .feature_flow li:not(:last-of-type)::after {
        right: -53%;
    }
}
@media (max-width: 780px) {
    .feature_flow li:not(:last-of-type)::after {
        right: -47%;
    }
}

@media (max-width: 767px) {
    .frame {
        border-width: 3px;
    }
    #feature .big_text {
        margin-top: 2.1em !important;
    }
    .border_text {
        border-bottom-width: 3px;
    }
    .border_text::after {
        width: 3px;
        height: 15px;
        bottom: -16px;
    }

    /* 1. 安心価格の防滑加工 */
    .bg._price {
        padding-bottom: 4.5em;
    }
    .bg._price .sec_inner {
        padding-top: 4.5em;
    }
    .feature_flow li {
        border-width: 3px;
    }
    .feature_flow {
        flex-direction: column;
        align-items: center;
        gap: 3.5em;
        overflow: hidden;
    }
    .feature_flow::after {
        height: 100%;
        background-image: url(../img/w_arrow_bl_sp.png);
        background-position: top center;
        top: 0;
        right: -8em;
        bottom: 0;
        left: auto;
    }
    .feature_flow li:not(:last-of-type)::after {
        width: 1.5em;
        height: 1.2em;
        right: 0;
        left: 0;
        bottom: -9.2em;
        transform: rotate(90deg);
    }
    .feature_price {
        flex-direction: column;
    }
    .our_company {
        font-size: clamp(1.56rem, calc(1.34rem + 0.85vw), 1.75rem);;
    }
    .our_company span {
        font-size: clamp(1.19rem, calc(0.97rem + 0.85vw), 1.38rem);;
    }

    /* 2. スピード施工の防滑加工 */
    .bg._speed {
        padding-top: 4.5em;
        padding-bottom: 4.5em;
    }
    .feature_wrap .flex {
        flex-wrap: wrap;
    }
    .other_speed p:first-of-type,
    .our_speed p:first-of-type {
        width: 100%;
        text-align: left;
        margin-bottom: .2em;
    }
    .other_speed p:nth-of-type(2) {
        width: 100%;
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
    .our_speed p:nth-of-type(2) {
        width: calc(46.4% - 1.5em);
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
    .comp_text {
        margin-top: 1.8em;
    }
    .comp_text .bg_text {
        width: 14.36em;
    }

    /* 3. バリアフリー法にも対応 */
    .bg._barrier_free {
        padding-top: 4.5em;
        padding-bottom: 4em;
    }
}
@media (max-width: 374px) {
    .other_speed p:nth-of-type(2),
    .our_speed p:nth-of-type(2) {
        font-size: clamp(0.75rem, calc(0.01rem + 3.70vw), 0.88rem);
    }
}


/* #feature（コンテンツ改善版）
---------------------------------- */
.bg._feature {
    padding-top: 5.375em;
    padding-bottom: 5.625em;
}
.feature_contents_wrap {
    margin-top: 2.8em;
}
.feature_contents {
    width: calc(100% / 3);
}
.feature_contents .number {
    font-size: var(--32px);
    color: #E9F2F9;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50vw;
    background-color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .05em;
    margin: 0 auto .7em;
}
.feature_contents .concept_point {
    width: 66%;
    aspect-ratio: 7 / 6;
    padding-bottom: .2em;
    margin: 0 auto;
}
.feature_contents .concept_point .concept_point_text {
    height: 5rem;
    align-items: center;
    justify-content: center;
}
.feature_contents .concept_point p {
    line-height: 1.3;
}
.feature_contents._speed .concept_point_text p {
    font-size: var(--30px);
}
.feature_contents._barrier_free .concept_point_text p {
    font-size: var(--26px);
    letter-spacing: 0;
}
.feature_contents .text_wrap {
    border-left: 3px solid var(--blue);
    padding: .5em 9.6%;
    margin: 2.6em auto 1.25em;
}
.feature_contents:last-of-type .text_wrap {
    border-right: 3px solid var(--blue);
}
.feature_contents h3 {
    font-size: var(--28px);
    letter-spacing: .2em;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1.2em;
}
.feature_contents .line_text {
    font-size: var(--20px);
    text-align: center;
    color: #333;
    border-bottom: .25em solid #8C8D8F;
    width: fit-content;
    margin: 0 auto 0.9em;
}
.feature_contents .contents_wrap {
    font-size: var(--20px);
    color: #333;
    height: 7em;
    margin-bottom: .5em;
    justify-content: center;
    align-items: center;
}
.feature_contents .other_company {
    font-size: var(--22px);
    text-align: center;
}
.feature_contents .large_text {
    font-size: var(--30px);
    letter-spacing: .06em;
    text-align: center;
}
@media (min-width: 1081px) {
    .feature_contents._barrier_free .large_text {
        font-size: var(--25px);
        letter-spacing: 0;
        line-height: 2.1;
    }
}
#feature .notes {
    font-size: var(--16px);
    letter-spacing: .06em;
    color: #333;
}

@media (max-width: 1080px) {
    .feature_contents_wrap {
        flex-direction: column;
    }
    .feature_contents {
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 3px solid var(--blue);
        padding-bottom: 2em;
        margin-bottom: 2.5em;
    }
    .feature_contents .figure_wrap {
        width: 40%;
    }
    .feature_contents .concept_point {
        aspect-ratio: auto;
        width: 75%;
        max-width: 250px;
        min-width: 190px;
    }
    .feature_contents .concept_point .concept_point_text {
        height: auto;
        align-items: flex-start;
        margin: .5em auto .3em;
    }
    .feature_contents .text_wrap {
        width: 60%;
        border-left: 0;
        padding: 0 3%;
        margin: 0;
    }
    .feature_contents:last-of-type .text_wrap {
        border-right: 0;
    }
    .feature_contents h3 {
        margin-bottom: .8em;
    }
    .feature_contents h3 br {
        display: none;
    }
    .feature_contents .contents_wrap {
        height: auto;
    }
    .feature_contents._speed .contents_wrap {
        max-width: 300px;
        padding: .5em 0;
    }
}
@media (max-width: 1080px) and (min-width: 621px) {
    .feature_contents h3,
    .feature_contents .large_text {
        text-align: left;
    }
    .feature_contents .line_text {
        margin-left: 0;
    }
    .feature_contents .contents_wrap {
        justify-content: flex-start;
    }
}
@media (max-width: 767px) {
    .bg._feature {
        padding-top: 4.5em;
        padding-bottom: 4.5em;
    }
    .feature_contents .concept_point {
        max-width: 200px;
    }
}
@media (max-width: 620px) {
    .feature_contents {
        flex-direction: column;
        padding-bottom: 1.5em;
        margin-bottom: 2em;
    }
    .feature_contents .figure_wrap {
        width: 94%;
    }
    .feature_contents._barrier_free .concept_point_text p {
        font-size: var(--30px);
    }
    .feature_contents .text_wrap {
        width: 94%;
        padding: 0;
    }
    .feature_contents h3 {
        font-size: var(--30px);
        margin: 1em 0 0.6em;
    }
    .feature_contents h3 br {
        display: none;
    }
    .feature_contents .contents_wrap {
        font-size: var(--18px);
        margin: 1.2em 0 0.7em;
    }
    .feature_contents._speed .contents_wrap {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 620px) {
    .feature_contents .other_company {
        font-size: var(--18px);
    }
    .feature_contents._speed .contents_wrap {
        max-width: 250px;
    }
}
@media (max-width: 413px) {
    .feature_contents h3 br {
        display: block;
    }
}


/* #eco
---------------------------------- */
#eco {
    padding-top: 7.5em;
    padding-bottom: 5.9em;
}
.eco_contents_wrap {
    gap: 1em;
    justify-content: center;
}
.eco_contents {
    letter-spacing: .2em;
    text-align: center;
    width: 100%;
    margin-top: 3.75em;
}
.eco_contents .contents_title {
    display: inline-block;
    font-size: var(--20px);
    line-height: 1;
    padding-left: 1.5em;
    margin-bottom: .7em;
    position: relative;
}
.eco_contents .contents_title::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: #DCBC00;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
.eco_contents img {
    width: 100%;
    display: block;
}
.eco_contents p {
    margin-top: .4em;
}

@media (max-width: 767px) {
    #eco {
        padding-top: 4.5em;
        padding-bottom: 4.5em;
    }
}

@media (max-width: 650px) {
    .eco_contents_wrap {
        flex-direction: column;
    }
    .eco_contents {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* #example
---------------------------------- */
#example {
    background-color: #AFCEE8;
    padding-top: 6.875em;
    padding-bottom: 6.25em;
}
.example_title {
    font-size: var(--24px);
    letter-spacing: .2em;
    text-align: center;
}
.example_wrap {
    margin-top: 4.6875em;
    gap: 1.875em;
}
.example_wrap figure {
    width: 100%;
}
.example_wrap figure img {
    width: 100%;
}
.example_wrap figcaption {
    letter-spacing: .2em;
    line-height: 1;
    text-align: center;
    margin-top: .75em;
}

@media (max-width: 820px) {
    .example_wrap {
        flex-wrap: wrap;
        gap: 1.875em 5vw;
    }
    .example_wrap figure {
        width: calc(50% - (5vw / 2));
    }
}

@media (max-width: 767px) {
    #example {
        padding-top: 4.5em;
        padding-bottom: 4.5em;
    }
    .example_wrap {
        margin-top: 3em;
    }
}


/* #step
---------------------------------- */
#step {
    padding-top: 6.875em;
}
.four_steps {
    width: 100%;
    background-color: #DEDAC3;
    border-radius: 11px;
    padding: 55px 55px 20px;
    margin-top: 3.5em;
}
.four_steps .contents_wrap {
    gap: 2em;
}
.step_contents {
    width: 100%;
}
.step_contents p {
    font-size: var(--14px);
    letter-spacing: .05em;
    line-height: 1.785;
    margin-top: 1em;
}
.high_quality_wrap {
    margin-top: 20px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.high_quality_text {
    margin-left: -50px;
}
.high_quality_text h3 {
    font-size: var(--30px);
    letter-spacing: .06em;
    text-align: right;
    margin: 8.5% .8em 7.5% 0;

}
.high_quality_text p {
    font-size: var(--18px);
    letter-spacing: .02em;
    color: #333;
}
.high_quality_text .line_text {
    border-bottom: .3em solid var(--blue);
    padding-bottom: .3em;
}
.high_quality_img {
    position: relative;
    width: 30%;
    min-width: 190px;
}
.high_quality_img img {
    width: 100%;
}
.high_quality_img img.step_person {
    width: 80%;
}
.high_quality_img img.step_word {
    position: absolute;
    top: 17%;
    right: -60%;
}

@media (max-width: 1080px) {
    .high_quality_text {
        margin-left: -16px;
    }
    .high_quality_text h3 {
        margin-bottom: 4%;
    }
}
@media (max-width: 900px) {
    .high_quality_text h3 {
        margin-right: 0;
        margin-top: 7%;
    }
    .high_quality_img {
        width: 35%;
        min-width: 170px;
    }
}
@media (max-width: 820px) {
    .four_steps {
        padding: 6vw;
    }
    .four_steps .contents_wrap {
        flex-wrap: wrap;
        gap: 5vw;
    }
    .step_contents {
        width: calc(50% - (5vw / 2));
    }

    .high_quality_wrap {
        flex-direction: column;
        gap: .5em;
        margin-top: 5vw;
    }
    .high_quality_text {
        margin-left: 0;
    }
    .high_quality_text h3 {
        text-align: left;
        margin-top: 0;
        margin-bottom: 0;
    }
    .high_quality_img {
        width: 45%;
    }
}
@media (max-width: 767px) {
    #step {
        padding-top: 4.5em;
    }
    .four_steps {
        margin-top: 2.5em;
    }
    .high_quality_text .line_text {
        padding-bottom: .1em;
    }
}
@media (max-width: 520px) {
    .high_quality_text p {
        font-size: var(--16px);
    }
    .high_quality_img {
        width: 60%;
        min-width: auto;
    }
}
@media (max-width: 360px) {
    .high_quality_text h3 {
        font-size: clamp(1.13rem, calc(0.13rem + 5.00vw), 1.25rem);
    }
}


/* #price
---------------------------------- */
#price {
    padding-top: 6.875em;
}
.price_text {
    font-size: var(--18px);
    letter-spacing: .2em;
    text-align: center;
    margin: 0.71em 0 2.22em;
}

.table_wrap {
    padding-bottom: 2.8125rem;
    position: relative;
}
.table_wrap::before,
.table_wrap::after {
    content: "";
    background-color: var(--blue);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.table_wrap::before {
    width: .25em;
    height: 1.875em;
}
.table_wrap::after {
    width: 1.875em;
    height: .25em;
}

.table_caption {
    font-size: var(--24px);
    letter-spacing: .2em;
    line-height: 1.5;
    margin-bottom: .5em;
}
.table_caption span {
    font-size: .75em;
}
#price table {
    width: 100%;
    border-collapse: separate;
    border-radius: 13px;
    border-spacing: 0;
    border: 7px solid var(--blue);
    table-layout: fixed;
}
#price tr:first-of-type > * {
    border-bottom: 3px solid var(--blue);
}
#price th:not(:last-of-type),
#price td:not(:last-of-type) {
    border-right: 3px solid var(--blue);
}

#price tr:first-of-type {
    height: 4.25em;
}
#price tr:last-of-type {
    height: 4.6em;
}
#price th,
#price td {
    width: calc(100% / 4);
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    padding: .6em;
}
#price th {
    font-size: var(--18px);
    letter-spacing: .2em;
}
#price td {
    font-size: var(--20px);
    letter-spacing: .2em;
}
#price th:first-of-type,
#price th:last-of-type {
    position: relative;
    z-index: -1;
}
.table_price {
    /* margin-bottom: 6.25em;*/
    margin-bottom: 4em;
}
.table_price th {
    background-color: #7BC2B4;
}
.table_option th {
    background-color: #DEDAC3;
}
.sp_price {
    font-size: calc(var(--20px) * 1.15) !important;
    font-size: 144% !important;
}
.sp_price .flex {
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
}
.sp_price span {
    display: inline-block;
    width: fit-content;
    font-size: .7em;
    background-color: var(--yellow);
    padding: .25em .0 .25em .65em;
    margin-bottom: .4em;
    text-align: left !important;
}
#price th span {
    display: block;
    font-size: .67em;
    letter-spacing: .2em;
    margin-top: .6em;
}
.free {
    background-color: var(--yellow);
    padding: .25em .3em .25em .5em;
}

.pick_up {
    width: 870px;
    margin: 0 auto 1.6rem;
    display: block;
}
#price .notes {
    font-size: var(--16px);
    letter-spacing: .2em;
    line-height: 1.875;
    display: block;
}
@media (max-width: 940px) {
    #price table {
        border-width: 5px;
    }
    #price table tr {
        display: block;
        width: 50%;
        height: auto !important;
        float: left;
    }
    #price table th,
    #price table td {
        width: 100%;
        height: 4.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #price table th {
        flex-direction: column;
    }
    #price th:last-of-type {
        border-right: 3px solid var(--blue);
        border-bottom: none;
    }
    #price td:not(:last-of-type) {
        border-right: none;
        border-bottom: 3px solid var(--blue);
    }
}
@media (max-width: 767px) {
    #price {
        padding-top: 4.5em;
    }
    .price_text {
        font-size: clamp(0.94rem, calc(0.79rem + 0.57vw), 1.06rem);
    }
    .table_caption span {
        font-size: clamp(0.69rem, calc(0.51rem + 0.89vw), 0.94rem); /* 11px */
    }
    #price table th {
        flex-direction: column;
        font-size: clamp(0.94rem, calc(0.79rem + 0.57vw), 1.06rem); /* 15px */
    }
    #price table td {
        font-size: clamp(1.06rem, calc(0.84rem + 0.85vw), 1.25rem); /* 17px */
    }
    .sp_price {
        font-size: clamp(1.19rem, calc(1.04rem + 0.57vw), 1.31rem) !important; /* 19px */
    }
    .table_price {
        margin-bottom: 5.5em;
    }
}
@media (max-width: 413px) {
    #price table th {
        font-size: clamp(0.75rem, calc(0.10rem + 3.23vw), 0.94rem); /* 12px */
    }
    #price table td {
        font-size: clamp(0.81rem, calc(-0.05rem + 4.30vw), 1.06rem); /* 13px */
    }
    .sp_price {
        font-size: clamp(0.94rem, calc(0.08rem + 4.30vw), 1.19rem) !important; /* 15px */
    }
}



/* #qa
---------------------------------- */
#qa {
    padding-top: 6.875em;
    color: var(--navy);
}
#qa .sec_title span {
    display: block;
    font-size: var(--18px);
    letter-spacing: .2em;
    margin-top: 0.6em;
}
.qa_container {
    margin-top: 3em;
}
.qa_contents {
    color: var(--navy);
    margin-top: 2.5em;
}
.question {
    font-size: var(--20px);
    letter-spacing: .2em;
    padding: .88em 5.3em .88em 2.2em;
    background-color: #89B0D6;
    position: relative;
    cursor: pointer;
}
.question::before,
.question::after {
    content: "";
    background-color: var(--navy);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.question::before {
    width: .2em;
    height: 1.5em;
    right: calc(39px + .65em);
    transition: .3s;
}
.question::after {
    width: 1.5em;
    height: .2em;
    right: 39px;
}
.question p {
    padding-left: 2em;
    position: relative;
}
.question p::before {
    content: "Q.";
    position: absolute;
    top: 0;
    left: 0;
}
.answer {
    letter-spacing: .2em;
    line-height: 1.93;
    padding: 0 4.8em 0 5em;
    background-color: #AFCEE8;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.qa_contents.active .answer,
.question.active + .answer {
    opacity: 1;
}
.qa_contents.active .question::before,
.question.active::before {
    opacity: 0;
}
.answer p {
    padding-left: 2.5em;
    margin: 1.5em 0;
    position: relative;
}
.answer p::before {
    content: "A.";
    position: absolute;
    top: .2em;
    left: 0;
}
@media (max-width: 820px) {
    .answer {
        padding: 0 3.8em 0 2.9em;
    }
}
@media (max-width: 767px) {
    #qa {
        padding-top: 4.5em;
    }
    #qa .sec_title span {
        font-size: clamp(0.94rem, calc(0.79rem + 0.57vw), 1.06rem);
    }
    .qa_container {
        margin-top: 2em;
    }
    .question {
        font-size: var(--18px);
        padding: .6em 3.6em .6em 1.2em;
    }
    .question::before {
        width: .16em;
        height: 1.2em;
        right: calc(20px + .52em);
    }
    .question::after {
        width: 1.2em;
        height: .16em;
        right: 20px;
    }
    .answer {
        padding: 0 2em 0 1.4em;
    }
    .answer p {
        padding-left: 2.25em;
        margin: .8em 0;
    }
}
@media (max-width: 414px) {
    .qa_contents {
        margin-top: 6vw;
    }
}


/* #contact
---------------------------------- */
#contact {
    padding-top: 6.875em;
    padding-bottom: 13.125em;
    color: var(--navy);
}
.contact_text {
    font-size: var(--18px);
    letter-spacing: .2em;
    text-align: center;
    margin-top: .6em;
    margin-bottom: 1.9em;
}

.form.flex {
    gap: 5%;
}
.company_wrap {
    gap: 4.2%;
}
.textarea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.input, 
.textarea,
.contact-form-parts {
    width: 100%;
}
.company_form {
    width: 29%;
}
.corporate_name {
    width: 71%;
}
.formbtnbox {
    width: 30%;
    margin: 3.7em auto 0;
}
.input .form-input,
.const_site .content-inner,
.form-textarea {
    width: 100%;
    border: 3px solid var(--navy);
    padding: .5em .8em;
}
select {
    cursor: pointer;
}
.bg_color .form-input {
    background-color: #AFCEE8;
}
.form-textarea {
    resize: none;
    height: 10em;
}
.const_site .content-inner {
    /* height: 15.75em;*/
}
.const_site ul {
    flex-wrap: wrap;
    gap: .9em 1em;
}
.const_site li {
    letter-spacing: .2em;
    display: inline-block;
}
.const_site label {
    display: flex;
    align-items: center;
}
.size, .other_text {
    padding: 0 .5em;
}
.size {
    width: 3.9em;
    outline: none;
}
.other_text {
    width: 10em;
}

/* チェックボックス */
input[type="checkbox"] {
    margin-right: .3em;
}
input[type="checkbox"]:checked {
    accent-color: var(--navy);
}

.text_submit_wrap .form-textarea {
    height: 10.5em;
}
.reserve-kakunin-button {
    font-size: var(--16px);
    letter-spacing: .2em;
    text-align: center;
    color: #fff;
    width: 100%;
    background-color: var(--navy);
    padding: .68em;
}
.form-label {
    font-weight: 600;
    letter-spacing: .2em;
    margin-bottom: .5em;
}
.contact-form-parts {
    margin-top: 1.6em;
}

.select-wrap {
    position: relative;
}
.select-wrap::before {
    content: "";
    width: .8125em;
    height: .6875em;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--navy);
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 1.2em;
    margin: auto;
    z-index: -1;
}
.select-wrap .form-input {
    letter-spacing: .2em;
    direction: rtl;
}
::placeholder {
    font-size: 80%;
    font-weight: normal;
    letter-spacing: .2em;
    text-align: right;
    color: #666;
}

@media (max-width: 900px) {
    .form.flex {
        flex-direction: column;
    }
}
@media (max-width: 767px) {
    #contact {
        padding-top: 4.5em;
        padding-bottom: 6em;
    }
    .contact_text {
        font-size: clamp(0.94rem, calc(0.79rem + 0.57vw), 1.06rem);
        margin-bottom: 1em;
    }
    .formbtnbox {
        width: 50%;
        margin: 2.2em auto 0;
    }
}
@media (max-width: 374px) {
    .company_wrap {
        flex-direction: column;
    }
    .company_form {
        width: 7em;
    }
    .corporate_name {
        width: 100%;
    }
}

/*contact 確認画面
----------------------------------*/
.checktrue h4 {
    font-size: var(--16px);
    letter-spacing: .1rem;
    margin-bottom: 30px;
}
.checktrue .form-label {
    display: flex;
    margin-bottom: 1em;
}
.checktrue dt {
    min-width: 250px;
}
.checktrue dd {
    opacity: .7;
}
.checktrue .formbtns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}
.checktrue .formbtns a {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
}
.checktrue .formbtns .reserve-kakunin-button {
    width: 30%;
    min-width: 200px;
}
@media screen and (max-width: 767px) {

    .checktrue .reserve-form-parts {
        margin-bottom: 1.5em;
    }
    .checktrue .form-label {
        display: block;
        margin-bottom: .5em;
    }
    .checktrue .formbtns a {
        width: 100px;
    }
    .checktrue .formbtns .reserve-kakunin-button {
        width: 30%;
        min-width: 170px;
    }
}

/*contact 完了画面
----------------------------------*/
.formCompText.succeed {
    width: 30%;
    min-width: 250px;
    margin: 0 auto;
}
.formCompText.succeed img {
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .formCompText.succeed {
        min-width: 200px;
    }
}

/* footer
---------------------------------- */
footer {
    color: #fff;
    background: linear-gradient(#143769,#0d265e);
    padding-top: 6.5em;
    padding-bottom: 4.68em;
}
footer .logo {
    font-size: var(--68px);
    letter-spacing: .1em;
    line-height: 1;
    margin-bottom: 0.5em;
}
footer .management,
footer .tel {
    font-size: var(--14px);
    letter-spacing: .2em;
    line-height: 2.14;
    flex-wrap: wrap;
}
footer .management {
    margin-bottom: 2.3em;
}
.footer_subject {
    width: 8em;
    min-width: 11em;
    min-width: 143px;
}
.footer_subject_contact {
    /*width: 8em;
    min-width: 11em;*/
}
footer .tel .footer_letter .colon {
    padding-left: 1px;
}
@media (max-width: 1014px) {
    footer .tel .footer_letter .colon.telephone {
        padding-left: 8px;
    }
}

@media (max-width: 1330px) {
    .footer_subject {
        width: auto;
        min-width: 70px;
    }
    .footer_letter {
        width: 100%;
        padding-left: 1.2em;
    }
    footer .management .footer_letter span {
        font-size: 80%;
    }
}
@media (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}
@media (max-width: 767px) {
    footer {
        padding-top: 4em;
    }
}
@media (max-width: 600px) {
    footer {
        padding-bottom: 9em;
    }
}


/* .top_arrow
---------------------------------- */
.top_arrow {
    opacity: 0;
    transition: .6s;
}
.top_arrow a {
    width: 5.57em;
    height: 5.57em;
    padding-top: 2.7em;
    border: 3px solid var(--navy);
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: var(--14px);
    font-weight: bold;
    letter-spacing: .1em;
    color: var(--navy);
    position: fixed;
    right: 5.2vw;
    bottom: 7.1vh;
}
.top_arrow a::before {
    content: "";
    width: 1.36em;
    height: 1.57em;
    background-image: url(../img/arrow_top.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 21%;
    left: 0;
    right: 0;
    margin: auto;
}

@media (max-width: 767px) {
    .top_arrow a {
        bottom: 5.2vw;
    }
}
@media (max-width: 600px) {
    .top_arrow a {
        bottom: 80px;
    }
}