@charset "UTF-8";
/* CSS Document */

/*---------------------------

共通設定

---------------------------*/

html {
    font-size: 10px;
}

@media (min-width: 768px) and (max-width: 1180px) {
    html {
        font-size: .84745763vw;
    }
}

@media (max-width: 390px) {
    html {
        font-size: 2.564102564vw;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    color: #343434;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    padding-top: 8.4rem;
    position: relative;
}

.page_front .container {
    padding: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: calc(100% - 80px);
    position: relative;
    width: 128rem;
}

.inner {
    margin: 0 auto;
    max-width: calc(100% - 6rem);
    position: relative;
    width: 110rem;
}

section {
    position: relative;
    z-index: 100;
}

@media (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

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

a {
    display: block;
    opacity: 1;
    text-decoration: none;
    transition: .3s;
}

p>a {
    color: #039fc6;
    display: inline;
    text-decoration: underline;
}

ul {
    list-style-type: none;
}

@media (max-width:767px) {
    body {
        font-size: 1.6rem;
    }

    .container {
        padding-bottom: 8rem;
        padding-top: 6rem !important;
    }

    .wrapper {
        max-width: calc(100% - 4rem);
    }

    .inner {
        max-width: 100%;
        width: 100%;
    }
}

/*---------------------------

コンテンツ

---------------------------*/

/*
	テンプレート
*/

.tmp_hl {
    color: #00729f;
    font-size: 7.4rem;
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 1.3rem;
    text-align: center;
}

@media (max-width:767px) {
    .tmp_hl {
        font-size: 3.4rem !important;
        margin-bottom: 3rem !important;
    }
}

/*
	header
*/

#header {
    background-color: #ffffff;
    border-bottom: 1px solid #dcdcdc;
    height: 8.4rem;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

.page_front #header {
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}

.page_front #header.active {
    opacity: 1;
    visibility: visible;
}

#header .wrapper {
    align-items: center;
    display: flex;
    height: 100%;
}

#header .h_logo {
    align-items: center;
    display: flex;
    font-weight: 700;
    color: #343434;
}

#header .h_logo_img {
    margin-right: 1.4rem;
    width: 5.5rem;
}

#header .h_logo_text1 {
    font-size: 3rem;
    margin-right: 2.6rem;
}

#header .h_logo_text2 {
    font-size: 2.4rem;
}

.h_btn_wrap {
    column-gap: 1.4rem;
    display: flex;
    margin-left: auto;
}

.h_btn_mail,
.h_btn_esimate {
    align-items: center;
    border-radius: 999px;
    color: #ffffff;
    display: flex;
    font-weight: 900;
    height: 6rem;
    justify-content: center;
    padding: 0 1rem 0 4rem;
    position: relative;
    width: 29.3rem;
}

.h_btn_mail:hover,
.h_btn_esimate:hover {
    opacity: .8;
}

.h_btn_mail {
    background: linear-gradient(45deg, rgba(243, 0, 0, 1) 0%, rgba(255, 153, 0, 1) 100%);
}

.h_btn_esimate {
    background: linear-gradient(45deg, rgba(2, 114, 159, 1) 0%, rgba(81, 225, 255, 1) 100%);
}

.h_btn_mail:before {
    background-image: url(../img/mail_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 2rem;
    position: absolute;
    width: 2.6rem;
}

.h_btn_esimate:before {
    background-image: url(../img/esimate_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 2.4rem;
    position: absolute;
    width: 2.1rem;
}

@media (max-width:767px) {
    #header {
        height: 6rem;
    }

    #header .wrapper {
        justify-content: center;
    }

    #header .h_logo_img {
        width: 4rem;
    }

    #header .h_logo_text1 {
        font-size: 2rem;
    }

    #header .h_logo_text2 {
        font-size: 1.6rem;
    }

    .h_btn_wrap {
        background-color: #ffffff;
        bottom: 0;
        font-size: 1.4rem;
        justify-content: center;
        left: 0;
        width: 100%;
        height: 9rem;
        line-height: 1.3;
        padding: 1rem 1rem 2rem;
        position: fixed;
        right: 0;
        z-index: 9999;
    }
}

/*
	footer
*/

#footer {
    border-top: 1px solid #707070;
    margin-top: 9rem;
    padding: 2.6rem 0 0;
}

#footer .f_wrap {
    align-items: center;
    column-gap: 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1rem;
}

#footer .f_logo {
    align-items: center;
    column-gap: 1.4rem;
    display: flex;
    font-weight: 700;
    line-height: 1.5;
}

#footer .f_logo img {
    width: 5.5rem;
}

#footer .f_terms {
    background-image: url(../img/arrow_2.svg);
    background-position: left .5em;
    background-repeat: no-repeat;
    background-size: .83em;
    color: #00729f;
    padding-left: 1.17em;
}

#footer .f_terms:hover {
    text-decoration: underline;
}

#footer .copyright {
    color: #a1a1a1;
    font-size: 1.4rem;
    padding: 1.8rem 0 3rem;
    text-align: center;
}

/*
	MV
*/

.mv {
    overflow: hidden;
    padding: 14rem 0 3rem;
    position: relative;
    min-height: 100rem;
}

.mv:before {
    background-image: url(../img/mv_bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 7rem;
    content: "";
    left: 48%;
    position: absolute;
    top: 4rem;
    width: 104rem;
}

.mv_con {
    align-items: start;
    display: flex;
    flex-direction: column;
}

.mv .mv_logo {
    width: 45rem;
    margin-bottom: 3rem;
    max-width: 100%;
}

.mv_speech {
    background-color: #e5f1f9;
    border-radius: 20px;
    color: #00729f;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.6rem;
    padding: 1.7rem 2.3rem 2rem;
    position: relative;
}

.mv_speech:before {
    background-image: url(../img/speech_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 2.2rem;
    left: 4.7rem;
    position: absolute;
    top: calc(100% - .6rem);
    width: 2.15rem;
}

.mv_catchcopy {
    color: #00729f;
    font-size: 8rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 4rem;
}

.mv_catchcopy .large {
    font-size: 10rem;
}

.mv_catchcopy .small {
    font-size: 6rem;
}

.mv_btn_wrap {
    column-gap: 2rem;
    display: flex;
    margin-bottom: 6rem;
}

.mv_btn_mail,
.mv_btn_esimate {
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #ffffff;
    display: flex;
    font-size: 2.4rem;
    font-weight: 700;
    height: 7.7rem;
    justify-content: center;
    padding: 0 1rem 0 6rem;
    position: relative;
    width: 35rem;
}

.mv_btn_mail:hover,
.mv_btn_esimate:hover {
    opacity: .8;
}

.mv_btn_mail {
    background: linear-gradient(45deg, rgba(243, 0, 0, 1) 0%, rgba(255, 153, 0, 1) 100%);
}

.mv_btn_esimate {
    background: linear-gradient(45deg, rgba(2, 114, 159, 1) 0%, rgba(81, 225, 255, 1) 100%);
}

.mv_btn_mail:before {
    background-image: url(../img/mail_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 2rem;
    position: absolute;
    width: 3.3rem;
}

.mv_btn_esimate:before {
    background-image: url(../img/esimate_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 2.4rem;
    position: absolute;
    width: 2.6rem;
}

.mv_whats {
    background-color: #ffffff;
    border: 4px solid #e5f1f9;
    border-radius: 10px;
    line-height: 1.5;
    margin-bottom: 1rem;
    max-width: 100%;
    padding: 1.8rem 2.8rem 2.5rem;
    width: 60rem;
}

.mv_whats .headline {
    align-items: center;
    column-gap: .6rem;
    display: flex;
    font-size: 2.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.mv_whats .headline:before {
    background-image: url(../img/pointing_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 1.8em;
    width: 1.8em;
}

.mv_note {
    column-gap: .5em;
    display: flex;
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 100%;
    width: 60rem;
}

.mv_note:before {
    content: "※";
}

.helpdesk {
    padding-top: 7rem;
}

.helpdesk .help_hl {
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    color: #00729f;
    margin-bottom: 1rem;
    padding-top: 1em;
    background-image: url(../img/help_icon.svg);
    background-repeat: no-repeat;
    background-size: auto 1em;
    background-position: center top;
}

.helpdesk .help_text {
    text-align: center;
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 4.5rem;
}

.helpdesk .help_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.helpdesk .help_flex .item {
    font-size: clamp(1.5rem,1.4vw,1.8rem);
    font-weight: 700;
    width: calc((100% - 8rem) / 5);
    min-height: 14rem;
    padding: 1rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #373737;
    border-radius: 10px;
    background-color: #e5f1f9;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.helpdesk .help_flex .item:hover {
    opacity: .7;
}

.helpdesk .help_flex .item .em {
    font-size: 1.3em;
}

.helpdesk .help_flex .item .mn {
    font-size: .83em;
    display: inline-block;
    line-height: 1.4;
}

.helpdesk .help_flex .con_item,
.helpdesk .help_flex .est_item {
    font-size: clamp(1.6rem,1.8vw,2rem);
    font-weight: 700;
    width: calc((100% - 8rem) / 5);
    min-height: 14rem;
    padding: 1rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.helpdesk .help_flex .con_item {
    color: #373737;
    background-color: #e5f1f9;
}

.helpdesk .help_flex .est_item {
    background: linear-gradient(45deg, rgba(2, 114, 159, 1) 0%, rgba(81, 225, 255, 1) 100%);
}

.helpdesk .help_flex .con_item .em,
.helpdesk .help_flex .est_item .em {
    font-size: 1.2em;
}

.helpdesk .help_flex .con_item:hover,
.helpdesk .help_flex .est_item:hover {
    opacity: .8;
}

.helpdesk .help_flex .item_2 {
    font-size: clamp(1.5rem,1.3vw,1.8rem);
    font-weight: 700;
    width: calc((100% - 8rem) / 5);
    min-height: 14rem;
    padding: 1rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #373737;
    border-radius: 10px;
    background-color: #e2f5ed;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.helpdesk .help_flex .item_2:hover {
    opacity: .7;
}

.helpdesk .help_flex .item_3 {
    font-size: clamp(1.5rem,1.3vw,1.8rem);
    font-weight: 700;
    width: calc((100% - 8rem) / 5);
    min-height: 14rem;
    padding: 1rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #373737;
    border-radius: 10px;
    background-color: #f5e2e8;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.helpdesk .help_flex .item_3:hover {
    opacity: .7;
}

@media (max-width:767px) {
    .mv {
        padding: 5rem 0 3rem;
        min-height: 0;
    }

    .mv:before {
        bottom: 25rem;
        left: 5rem;
        right: 5rem;
        top: 40rem;
        width: auto;
    }

    .mv_speech {
        font-size: 1.8rem;
    }

    .mv_catchcopy {
        font-size: 3rem;
    }

    .mv_catchcopy .small {
        font-size: 2.4rem;
    }

    .mv_catchcopy .large {
        font-size: 5rem;
    }

    .mv_btn_wrap {
        margin-bottom: 28rem;
        width: 100%;
    }

    .mv_btn_mail,
    .mv_btn_esimate {
        font-size: 1.4rem;
        padding: 0 1rem 0 4rem;
        width: calc(50% - 1rem);
    }

    .mv_btn_mail:before {
        left: 1.4rem;
        width: 2.6rem;
    }

    .mv_btn_esimate:before {
        left: 1.4rem;
        width: 2.1rem;
    }

    .helpdesk .help_flex .con_item,
    .helpdesk .help_flex .est_item,
    .helpdesk .help_flex .item,
    .helpdesk .help_flex .item_2,
    .helpdesk .help_flex .item_3 {
        width: calc(50% - 10px);
        min-height: 12rem;
    }

    .helpdesk .help_flex .item .em {
        font-size: 1.2em;
    }

    .helpdesk .help_hl {
        font-size: 2.4rem;
    }

    .helpdesk .help_text {
        font-size: 1.6rem;
    }
}

/*
	お知らせ
*/

.news {
    border: 1px solid #dcdcdc;
    line-height: 2.6rem;
    padding: 3.6rem 0;
}

.news .inner {
    align-items: start;
    column-gap: 2rem;
    display: flex;
    margin-bottom: 1.8rem;
}

.news .headline {
    color: #00729f;
    font-size: 2rem;
    font-weight: 700;
    min-width: 4em;
}

.news_list {
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
    height: 5.2rem;
    overflow-x: hidden;
    overflow-y: hidden;
    row-gap: 2em;
    transition: .6s;
    width: 100%;
}

.news_list .item {
    column-gap: 2.5rem;
    display: flex;
}

.news_list .date {
    color: #acacac;
    font-weight: 700;
    min-width: 6em;
}

.news_list .con {
    width: 100%;
}

#news-open {
    display: none;
}

#news-open:checked+.news_list {
    height: calc(13rem + 8em);
    overflow-y: auto;
}

.news_open_label {
    align-items: center;
    column-gap: .8rem;
    display: flex;
    justify-content: center;
}

.news_open_label:before {
    background-image: url(../img/arrow_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 1em;
    width: .55em;
}

@media (max-width:767px) {
    .news .inner {
        flex-wrap: wrap;
        row-gap: 3rem;
    }

    .news_list {
        height: 7.8rem;
    }

    .news_list .item {
        flex-wrap: wrap;
    }

    .news_list .con {
        white-space: initial;
    }
}



/*
	こんなお悩みありませんか？
*/

#content-1 {
    background-color: #e5f1f9;
}

#content-1 .inner {
    padding: 5rem 0 32rem;
}

.worries_hl {
    font-size: 6.5rem;
    line-height: 1.3;
    margin-bottom: 2.4rem;
    text-align: center;
}

.worries_hl span {
    color: #00729f;
    display: inline-block;
    font-size: 10.5rem;
    font-weight: 900;
    padding: 0 1.8rem;
    position: relative;
}

.worries_hl span:before {
    background-image: url(../img/water.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: .67em;
    left: 90%;
    position: absolute;
    top: -2.5rem;
    width: .58em;
}

.check_list {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.check_list .item {
    background-color: #ffffff;
    background-image: url(../img/check.svg);
    background-position: 2.6rem center;
    background-repeat: no-repeat;
    background-size: 1.15em auto;
    border-radius: 10px;
    font-size: 4rem;
    padding: 1.8rem 2rem 1.8rem 10rem;
    width: 100%;
}

.check_list .item .emp {
    color: #00729f;
    font-weight: 700;
}

@media (max-width:767px) {
    .worries_hl {
        font-size: 3rem;
    }

    .worries_hl span {
        font-size: 5rem;
        padding-right: 0;
    }

    .check_list .item {
        background-position: 1.3rem center;
        font-size: 2rem;
        padding: 1.8rem 2rem 1.8rem 5rem;
    }
}

/*
	CityGML 作成支援サービスなら
*/

#content-2 {
    background-color: #ffe600;
}

#content-2 .wrapper {
    background-image: url(../img/illust_2.webp);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: 32% auto;
    padding: 18rem 0 4rem;
}

.solution_box {
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .16);
    left: 0;
    padding: 2.4rem 2rem;
    position: absolute;
    right: 0;
    text-align: center;
    top: -10rem;
}

.solution_box .sub {
    font-size: 4rem;
    font-weight: 700;
}

.solution_box .main {
    color: #d00000;
    font-size: 7rem;
    font-weight: 800;
}

.solution_box:before {
    background-image: url(../img/illust_1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 100%;
    content: "";
    display: block;
    height: 19.2rem;
    left: 0;
    position: absolute;
    right: 0;
}

.summary {
    padding-left: 36%;
}

.summary .medium {
    font-size: 4.3rem;
    font-weight: 700;
}

.summary .large {
    background-color: #00729f;
    color: #ffffff;
    display: inline-block;
    font-size: 5.9rem;
    font-weight: 800;
    margin: .5rem 0;
    padding: 0 3.2rem .8rem .8rem;
}

.summary .small {
    font-size: 3rem;
    font-weight: 700;
}

@media (max-width:767px) {
    .solution_box .sub {
        font-size: 2rem;
    }

    .solution_box .main {
        font-size: 5rem;
    }

    #content-2 .wrapper {
        background-position: center bottom;
        background-size: 33rem auto;
        padding: 12rem 0 20rem;
    }

    .summary {
        margin-top: 4rem;
        padding: 0;
        text-align: center;
    }

    .summary .medium {
        font-size: 2.3rem;
    }

    .summary .large {
        font-size: 4.6rem;
        padding: 0 3rem .8rem;
    }

    .summary .small {
        font-size: 2.8rem;
    }
}

/*
	共通バナー
*/

.contact_banner {
    overflow: hidden;
    padding-bottom: 3.3rem;
}

.contact_banner .wrapper {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    max-width: calc(100% - 16rem);
    text-align: center;
}

.contact_banner .contact_side,
.contact_banner .esimate_side {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 3.8rem 1rem 5.2rem;
    width: 50%;
}

.contact_banner .contact_side {
    color: #ffffff;
}

.contact_banner .contact_side:before {
    background-color: #00729f;
    bottom: 0;
    content: "";
    right: calc(50% - 50vw);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
}

.contact_banner .esimate_side:before {
    background-color: #e5f1f9;
    bottom: 0;
    content: "";
    right: 50%;
    position: absolute;
    left: calc(50% - 50vw);
    top: 0;
    z-index: -1;
}

.contact_banner .headline {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 1.4rem;
}

.contact_banner .esimate_side .headline {
    color: #00729f;
}

.contact_banner .text {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(1.4rem, 1.3vw, 1.8rem);
    font-weight: 500;
    margin-bottom: 2.7rem;
    min-height: 3em;
}

.contact_banner .btn {
    align-items: center;
    border-radius: 999px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .26);
    color: #ffffff;
    display: flex;
    font-size: clamp(1.6rem, 1.8vw, 3rem);
    font-weight: 900;
    height: 11rem;
    justify-content: center;
    margin-top: auto;
    max-width: 35vw;
    padding: 0 1rem 0 4.7rem;
    position: relative;
    width: 49rem;
}

.contact_banner .btn:hover {
    opacity: .8;
}

.contact_banner .contact_side .btn {
    background: linear-gradient(45deg, rgba(243, 0, 0, 1) 0%, rgba(255, 153, 0, 1) 100%);
}

.contact_banner .esimate_side .btn {
    background: linear-gradient(45deg, rgba(2, 114, 159, 1) 0%, rgba(81, 225, 255, 1) 100%);
}

.contact_banner .contact_side .btn:before {
    background-image: url(../img/mail_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 4.3rem;
    position: absolute;
    width: 4.5rem;
}

.contact_banner .esimate_side .btn:before {
    background-image: url(../img/esimate_1.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 7rem;
    position: absolute;
    width: 3.1rem;
}

.contact_banner .contact_side:after {
    background-image: url(../img/illust_4.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -3.3rem;
    content: "";
    max-width: 16%;
    position: absolute;
    right: -11%;
    top: 0;
    width: 24rem;
    z-index: -1;
}

.contact_banner .esimate_side:after {
    background-image: url(../img/illust_3.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -3.3rem;
    content: "";
    left: -11%;
    max-width: 16%;
    position: absolute;
    top: 0;
    width: 24rem;
    z-index: -1;
}

@media (max-width:767px) {
    .contact_banner {
        padding: 0;
    }

    .contact_banner .wrapper {
        max-width: calc(100% - 4rem);
    }

    .contact_banner .contact_side,
    .contact_banner .esimate_side {
        position: relative;
        width: 100%;
    }

    .contact_banner .contact_side:before,
    .contact_banner .esimate_side:before {
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
    }

    .contact_banner .btn {
        height: 7rem;
        max-width: calc(100% - 7rem);
    }

    .contact_banner .contact_side .btn {
        margin-right: auto;
    }

    .contact_banner .esimate_side .btn {
        margin-left: auto;
    }

    .contact_banner .contact_side .btn:before {
        left: 2.4rem;
        width: 2.8rem;
    }

    .contact_banner .esimate_side .btn:before {
        left: 2.4rem;
        width: 2.2rem;
    }

    .contact_banner .contact_side:after {
        bottom: 0;
        max-width: 30%;
        right: -2rem;
        width: 12.4rem;
    }

    .contact_banner .esimate_side:after {
        bottom: 0;
        left: -2rem;
        max-width: 30%;
        width: 12.4rem;
    }

    .contact_banner .headline {
        font-size: 3rem;
    }
}

/*
	講習会動画配信
*/

#content-3 {
    padding: 7rem 0 6rem;
}

.stream_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.stream_hl {
    margin-bottom: 6.4rem;
}

.stream_video {
    margin-bottom: 3rem;
    max-width: 100%;
    width: 70rem;
    border: 1px solid #ccc;
}

.stream_text {
    font-size: 2.5rem;
    text-align: center;
}

@media (max-width:767px) {
    .stream_text {
        font-size: 1.6rem;
    }
}

/*
	ご利用の流れ
*/

#content-4 {
    padding: 7rem 0 8rem;
}

.flow_hl {
    margin-bottom: 6.4rem;
}

.flow_con {
    border-top: 1px solid #b2b2b2;
}

.flow_con .item {
    align-items: center;
    border-bottom: 1px solid #b2b2b2;
    column-gap: 4.6rem;
    display: flex;
    padding: 3rem;
}

.flow_con .icon {
    min-width: 22rem;
    width: 22rem;
}

.flow_flex {
    column-gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    line-height: 3.3rem;
    margin-bottom: .8rem;
    row-gap: .5rem;
}

.flow_flex .step {
    font-size: 2rem;
    font-weight: 700;
}

.flow_flex .red {
    background-color: #e5f1f9;
    border-radius: 999px;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    width: 12.5rem;
}

.flow_flex .blue {
    background-color: #ffe2e2;
    border-radius: 999px;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    width: 12.5rem;
}

.flow_flex .free {
    background-color: #d00000;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    width: 9.4rem;
}

.flow_con .lead {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.5;
}

.flow_con .text {
    margin: .5rem 0 1.4rem;
}

.flow_esimate {
    align-items: center;
    background-color: #ffffff;
    background-image: url(../img/esimate_2.svg);
    background-position: 1.4em center;
    background-repeat: no-repeat;
    background-size: 1.1em auto;
    border: 1px solid #00729f;
    border-radius: 999px;
    color: #00729f;
    display: flex;
    font-size: 1.6rem;
    font-weight: 700;
    height: 5rem;
    justify-content: center;
    max-width: 100%;
    padding: 0 1rem 0 1.5rem;
    position: relative;
    width: 25rem;
}

.flow_esimate:hover {
    background-color: #00729f;
    background-image: url(../img/esimate_1.svg);
    color: #ffffff;
}

@media (max-width:767px) {
    .flow_con .icon {
        margin: 0 auto;
    }

    .flow_con .item {
        align-items: start;
        flex-direction: column;
        row-gap: 3rem;
    }

    .flow_flex {
        margin-bottom: 2rem;
    }

    .flow_flex .step {
        width: 100%;
    }

    .flow_con .lead {
        font-size: 1.8rem;
    }

    .flow_esimate {
        width: 100%;
    }
}

/*
	よくある質問
*/

#content-5 {
    background-color: #e5f1f9;
    margin-bottom: 7rem;
    padding: 6rem 0 9rem;
}

.faq_hl {
    margin-bottom: 6.4rem;
}

.faq_con {
    display: flex;
    flex-direction: column;
    row-gap: 2.3rem;
}

.faq_con .item {
    background-color: #ffffff;
    padding: 3rem 8rem 3rem 3rem;
}

.faq_q {
    align-items: center;
    column-gap: 3.6rem;
    display: flex;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.faq_q:before {
    color: #00729f;
    content: "Q";
    font-size: 4rem;
    font-weight: 700;
    line-height: .5;
    min-width: 1em;
    padding-bottom: .3em;
}

.faq_text {
    padding-left: 7.6rem;
}

.faq_link {
    column-gap: 3rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-left: 7.6rem;
    row-gap: 1rem;
}

.faq_link .link {
    background-image: url(../img/arrow_2.svg);
    background-position: left 60%;
    background-repeat: no-repeat;
    background-size: .8em;
    color: #00729f;
    display: inline-block;
    padding-left: 1.39em;
}

.faq_text > a {
    word-wrap: break-word;
}

.faq_link .link:hover {
    text-decoration: underline;
}

@media (max-width:767px) {
    #content-5 {
        margin-bottom: 3rem;
    }

    .faq_con .item {
        padding: 3rem 2rem 4rem;
    }

    .faq_q {
        column-gap: 1rem;
        font-size: 2rem;
    }

    .faq_q:before {
        font-size: 3rem;
    }

    .faq_text {
        padding: 0;
    }

    .faq_link {
        padding: 0;
    }
}

/*
	ご利用を検討されている方へ
*/

#content-6 {
    padding: 9rem 0 10rem;
}

.consider_hl {
    margin-bottom: 3.6rem;
}

.consider_lead {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.34;
    margin-bottom: 4rem;
    padding-bottom: 3.6rem;
    position: relative;
    text-align: center;
    width: 100%;
}

.consider_lead:after {
    background: linear-gradient(45deg, rgba(2, 114, 159, 1) 0%, rgba(81, 225, 255, 1) 100%);
    border-radius: 100px;
    bottom: 0;
    content: "";
    height: .7rem;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 5rem;
}

.consider_text {
    font-size: 2.4rem;
    margin-bottom: 3.6rem;
    text-align: center;
}

.download_col {
    column-gap: 2.6%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 7.6rem;
    row-gap: 20px;
}

.download_col .item {
    align-items: center;
    border: 2px solid #d2d2d2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 4.6rem 3.6rem 4rem;
    width: 31.6%;
}

.download_col .lead {
    color: #00729f;
    font-size: 2.4rem;
    margin-bottom: 2.6rem;
    text-align: center;
}

.download_col .text {
    margin-bottom: 2.4rem;
}

.download_col .btn {
    align-items: center;
    background-color: #00729f;
    background-image: url(../img/download_1.svg);
    background-position: 1.2em center;
    background-repeat: no-repeat;
    background-size: 1.2em auto;
    border-radius: 999px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #ffffff;
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    height: 5.5rem;
    justify-content: center;
    margin-top: auto;
    width: 100%;
}

.download_col .btn:hover {
    opacity: .8;
}

.format_table table {
    border: 1px solid #cccccc;
    border-collapse: collapse;
    width: 100%;
}

.format_table thead tr:nth-of-type(1) th {
    background-color: #00729f;
    color: #ffffff;
    text-align: center;
}

.format_table thead tr:nth-of-type(2) th {
    background-color: #e5f1f9;
    color: #00729f;
    text-align: center;
}

.format_table .first {
    width: 41.818182%;
}

.format_table .second {
    width: 8.6363636%;
}

.format_table .third {
    width: 13.181818%;
}

.format_table .fourth {
    width: 18.181818%;
}

.format_table th,
.format_table td {
    border: 1px solid #cccccc;
    line-height: 1.2;
    padding: 1rem 2rem 1rem;
    position: relative;
    z-index: -1;
}

.format_table tbody th {
    text-align: left;
}

.scroll-hint-icon {
    top: 30rem;
}

.format_table .note1,
.format_table .note2,
.format_table .note3,
.format_table .note4,
.format_table .note5,
.format_table .note1-2 {
    padding: 2rem;
}

.format_table .note1:after {
    content: "\203B 1";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.format_table .note2:after {
    content: "\203B 2";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.format_table .note3:after {
    content: "\203B 3";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.format_table .note4:after {
    content: "\203B 4";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.format_table .note5:after {
    content: "\203B 5";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.format_table .note1-2:after {
    content: "\203B 1 \203B 2";
    font-size: .8em;
    font-weight: 400;
    position: absolute;
    right: .5rem;
    top: .5rem;
    line-height: 1;
}

.table_note {
    margin-top: 2rem;
}

@media (max-width:767px) {
    .consider_lead {
        font-size: 2.6rem;
    }

    .consider_text {
        font-size: 1.8rem;
    }

    .download_col .item {
        padding: 4rem 3rem;
        width: 100%;
    }

    .format_table {
        height: 70svh;
        overflow: auto;
        width: 100%;
    }

    .format_table table {
        min-width: 98rem;
    }

    .format_table thead {
        left: 0;
        position: sticky;
        top: 0;
    }

    .format_table thead th {
        position: relative;
    }

    .format_table thead th:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #ccc;
    }
}

/*
	お問い合わせ
*/
#contact .tmp_hl {
    margin-top: 6rem;
}

#contact p {
    text-align: center;
    padding-bottom: 1rem;
}

#contact form input,
#contact form textarea,
#contact form select {
    border: 1px solid #C9C9C9;
    padding: 1rem;
    margin: 5px;
    width: 100%;
    width: -webkit-fill-available;
    -webkit-appearance: auto;
    background-color: #fff;
}

#contact form#mailformpro #zip,
#contact form#mailformpro #pref {
    max-width: 160px;
}

.table_contact table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 50px;
}

.table_contact tr:nth-child(odd) {
    background: #F5F5F5;

}

.table_contact th,
.table_contact td {
    padding: 1.5rem 2.5rem;
    text-align: left;
    vertical-align: middle;
}

.table_contact th {
    width: 35%;
    white-space: nowrap;
}

.table_contact td {
    width: 65%;
}

.red_m {
    margin-left: 10px;
    font-weight: 500;
    color: #FE5F55;
    border: 2px solid;
    padding: 1px 8px;
}

form#mailformpro input[type="checkbox"],
#contact form#mailformpro input[type="tel"],
#contact form#mailformpro input[type="radio"],
#contact form#mailformpro select {
    width: auto;
    max-width: 130px;
}

.repletion {
    padding: 2rem;
    background: #FFF2F2;
    border-radius: 10px;
    margin: 2rem 0;
}

#contact .btn {
    display: flex;
    justify-content: center;
    gap: 2rem;
    max-width: 650px;
    margin: auto;
    margin-top: 60px;
}

#submit-btn {
    background: #CF001C;
    border: none;
    color: #fff;
    font-family: inherit;
    width: 300px;
    display: block;
    border-radius: 60px;
    padding: 20px;
    cursor: pointer;
    margin: auto;
}

#back-btn {
    background: #717171;
    border: none;
    color: #fff;
    font-family: inherit;
    width: 300px;
    display: block;
    border-radius: 60px;
    padding: 20px;
    cursor: pointer;
    margin: auto;
}

.error {
    color: #FE5F55;
    text-align: center;
}

.mfp_err {
    color: #FE5F55;
}

#contact form label {
    display: inline-block;
    margin-right: 10px;
}



@media (max-width: 767px) {

    .table_contact th,
    .table_contact td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem 1rem;
    }

    .table_contact th {
        padding-bottom: 0;
    }

    #contact form input,
    #contact form textarea,
    #contact form select {
        width: 100%;
        box-sizing: border-box;
        margin: 5px auto;
    }

    #contact .btn {
        flex-direction: column;
    }

}

/*
	かんたんお見積
*/
#contact .table_contact table p {
    padding-bottom: 0;
    margin: 0;
    text-align: left;
}

#contact .repletion p {
    padding-bottom: 1rem;
    margin: 0;

}

/*
	利用規約
*/
#policy section {
    margin-top: 6rem;
}

#policy section a {
    color: #00729f;
    display: inline;
    word-break: break-all;
    text-decoration: underline;
    font-weight: 700;
}

#policy .tmp_hl {
    margin-bottom: 3rem;
}

#policy section p:not(:last-child) {
    margin-bottom: 1.5em;
}

#policy section h2 {
    font-size: 2.8rem;
    font-weight: 900;
    position: relative;
    padding-bottom: 7px;
    margin: 5rem 0 3rem;
}

#policy section h2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 5px;
    background-color: #00729f;
}

#policy section ol {
    counter-reset: number_1 0;
    list-style: none;
    margin-bottom: 3rem;
}

#policy section ol ol {
    counter-reset: number_2 0;
    width: 100%;
    margin: 2em 0 2em 0;
}

#policy section ol li {
    margin-bottom: 1em;
    text-indent: -1.5em;
    padding-left: 1.5em;
}

#policy section ol ol li {
    text-indent: -2em;
    padding-left: 2em;
}

#policy section ol li:before {
    counter-increment: number_1 1;
    content: counter(number_1)".";
    font-weight: 700;
    padding-right: .5em;
}

#policy section ol ol li:before {
    counter-increment: number_2 1;
    content: "(" counter(number_2)")";
    font-weight: 700;
}

@media (max-width: 767px) {
    #policy section h2 {
        font-size: 2.4rem;
    }
}

@keyframes scroll-hint-appear {
    0% {
      transform: translateX(40px);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50%,
    100% {
      transform: translateX(-40px);
      opacity: 0;
    }
  }
  
  .scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: auto;
    border-radius: 5px;
    transition: opacity .3s;
    opacity: 0;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    padding: 20px 10px 10px 10px;
  }
  
  .scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
  }
  
  .scroll-hint-text {
    font-size: 10px;
    color: #FFF;
    margin-top: 5px;
  }
  
  .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .8;
  }
  
  .scroll-hint-icon:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #FFF;
    vertical-align: middle;
    text-align: center;
    content: "";
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
  }
  
  .scroll-hint-icon:after {
    content: "";
    width: 34px;
    height: 14px;
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
    opacity: 0;
    transition-delay: 2.4s;
  }
  
  .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
    opacity: 1;
  }
  
  .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation: scroll-hint-appear 1.2s linear;
    animation-iteration-count: 2;
  }
  
  .scroll-hint-icon-white {
    background-color: #FFF;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
  }
  
  .scroll-hint-icon-white:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
  }
  
  .scroll-hint-icon-white:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
  }
  
  .scroll-hint-icon-white .scroll-hint-text {
    color: #000;
  }
  
  
  
  .scroll-hint-shadow-wrap {
    position: relative;
  }
  
  .scroll-hint-shadow-wrap::after {
    content: "";
    width: 20px;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
  }
  
  .scroll-hint-shadow-wrap::before {
    content: "";
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
  }
  
  .scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
  .scroll-hint-shadow-wrap.is-right-scrollable::after
   {
    opacity: 1;
    visibility: visible;
  }
  
  .scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
  .scroll-hint-shadow-wrap.is-left-scrollable::before
   {
    opacity: 1;
    visibility: visible;
  }

/* 25/08/22改修 */
#contact form#mailformpro #c-select {
    width: 340px;
    max-width: 100%;
}

@media (max-width: 767px) {
    #contact form#mailformpro #c-select {
        width: 270px;
    }
}