html {
    background-color: #eeedf1;
    max-width: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    overflow-x: hidden;
}
header {
    display: none;
}
h1 {
    font-size: 3.3vw;
}
h2 {
    font-size: 2.5vw;
    color: #646464;
}
p , a {
    font-size: 1.65vw;
    color: #646464;
    line-height: 2rem;
    margin-bottom: 1.65vw;
}
.min {
    font-size: 1.1vw;
}
.CTA {
    background-color: #2AAD8E;
    color: #ffffff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
    font-size: 1.65vw;
    height: 75px;
    border: none;
    letter-spacing: 1.5rem;
    text-align: center;

    cursor : pointer;
    z-index: 10;
}
.CTA:hover {
    background-color: #25997e;
}
.CTA:active {
    background-color: #1f8069;
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 25%);
}
.triangle {
    height: 150px;
    width: 100%;
    clip-path: polygon(50% 0,100% 100%,0 100%);
}
img {
    object-fit: contain;
}

/* --------------------------------------- */
/* main visual */
.main_visual {
    display: none;
}
.main_background {
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    height: 80vh;

    z-index: 1;
    position: relative;
}
.main_parts {
    position: absolute;
    display: flex;
    margin: 3vh 5vw 0;
    width: 90vw;
    height: 55vh;
    top: 0;

    z-index: 2;
}
.main_parts img {
    width: 40vw;
}
.main_text {
    margin: 8vh 2vw;
    line-height: 3rem;
}
.main_text h1 {
    margin-bottom: 6vh;
}
.main_under .triangle {
    position: absolute;
    bottom: 20vh;
    background-color: #eeedf1;

    z-index: 2;
}
.key_visual_sp {
    display: none;
}
.key_visual_pc {
    position: relative;
}
.key_visual_pc img {
    max-width: 100%;
}
.key_visual_pc button {
    position: absolute;
    bottom: 15px;
    left: 15vw;
    width: 70vw;

    z-index: 3;
}

/* --------------------------------------- */
/* introduction */
.introduction {
    margin-top: 150px;
    text-align: center;
}
.introduction h2{
    margin-bottom: 32px;
}
.introduction img {
    display: block;
    margin: 0 auto 75px;
    max-width: 70%;
}
.exsp {
    width: 0;
}
/* --------------------------------------- */
/* ベネフィット */
.benefit {
    margin: 150px 15vw 0;
    flex-direction: column;
}
.benefit div {
    margin: 0 auto 75px;
    width: 70vw;
    height: 500px;
    background-color: #ffffff;
}
.benefit .title {
    flex-direction: row;
}
.benefit .title .circle {
    width: 6vw;
    height: 6vw;
    top: 5%;
    left: 6vw;
    border-radius: 50%;
    text-align: center;
    line-height: 6vw;
    font-size: 2.7vw;
    background-color: #8BADA5;
    color: #ffffff;
}
.benefit h3 {
    font-size: 1.65vw;
    margin-left: 16vw;
    margin-top: 5%;
    line-height: 6vw;
    letter-spacing: 1rem;
    color: #8BADA5;
}
.benefit .CTA {
    width: 70vw;
}
.benefit  .mini {
    position: absolute;
    bottom: 0;
    width: 50%;
}
.customers {
    position: relative;
}
.customers div {
    position: absolute;
    top: 0;
}
.customers .custom_text {
    position: absolute;
    text-align: center;
    top: 32.5%;
    left: 6.5%;
}
.custom_mid_text {
    font-size: 2.5vw;
    position: absolute;
    text-align: center;
    line-height: 4rem;
    top: 47.5%;
    left: 0;
    right: 0;

    margin: auto;
}
.custom_mid_text span {
    color: #2AAD8E;
}
.confidence {
    position: relative;
}
.confidence div {
    position: absolute;
    top: 0;
}
.confidence img {
    position: absolute;
    top: 275px;
    left: 5%;
    max-width: 50%;
    z-index: 5;
}
.confidence button {
    right: 0;
}
.confidence .confi_text_pc {
    position: absolute;
    padding-left: 40%;
    top: 32.5%;
    left: 0;
    width: 100%;
    height: 67.5%;
}
.confi_text_sp {
    display: none;
}
.challenge {
    position: relative;
}
.challenge div {
    position: absolute;
}
.challenge img {
    position: absolute;
    top: 50px;
    left: 57.5%;
    max-width: 40%;
    z-index: 5;
}
.challenge .chall_text_pc {
    position: absolute;
    top: 32.5%;
    padding-left: 6.5%;
    width: 100%;
    height: 50%;
}
.chall_text_sp {
    display: none;
}

/* --------------------------------------- */
/* 実例紹介 */
.example {
    margin-top: 150px;
    margin-bottom: 100px;
    background-image: url(../images/sec3.png);
    width: 100%;
    height: 1745px;
    position: relative;
}
.example img {
    box-sizing: border-box;
    max-width: 35vw;
}
.exa_content {
    position: absolute;
    margin: 0 15%;
    top: 0;
    width: 70%;
}
.exa_content h2 {
    position: absolute;

    color: #ffffff;
    letter-spacing: 1.3rem;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}/* タイトル */
.exa_content p ,.exa_content a {
    color: #ffffff;
}
.laiton {
    position: absolute;
    top: 270px;
    display: flex;
    justify-content: space-between;
}
.laiton p {
    width: 30%;
    white-space: nowrap;
}
.laiton a {
    padding-left: 5vw;
    white-space: nowrap;
}
.laiton_text {
    padding-left: 5vw;
    margin-top: 230px;
    white-space: nowrap;
    box-sizing: border-box;
}
.chiyoda {
    position: absolute;
    top: 930px;
    display: flex;
    justify-content: space-between;
}
.chiyoda p {
    white-space: nowrap;
}
.chiyoda_text {
    margin-top: 230px;
    width: 30%;
    padding-right: 5vw;
    white-space: nowrap;
    box-sizing: border-box;
}
.exa_content button {
    position: absolute;
    width: 70vw;
    top: 1570px;
    background-color: #EEEDF1;
    color: #2AAD8E;
}
.exa_content button:hover {
    background-color: #e2e1e6;
}
.exa_content button:active {
    background-color: #c9c8cc;
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 25%);
}

/* --------------------------------------- */
/* 助成金の説明 */
.subsidy {
    width: 70vw;
    margin: 0 15vw;
    position: relative;
}
.subsidy .fir {
    display: inline-block;
    margin: 0 12.5vw 2%;
    background: linear-gradient(transparent 80%, #8BADA5 80%);
    white-space: nowrap;
}
.subsidy span {
    font-weight: bold;
}
.sub_con_mid span {
    font-size: 3.3vw;
    color: #2AAD8E;
}
.sub_content {
    width: 70vw;
    height: 530px;
    box-sizing: border-box;
    padding: 40px 5vw 0;
    margin-top: 75px;
    background-color: #ffffff;
}
.sub_con_mid {
    position: absolute;
    top: max(25vw,300px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.sub_con_mid p,
.sub_con_mid h2 {
    white-space: nowrap;
    z-index: 10;
}
.sub_con_mid p {
    margin: auto 0;
}
.sub_con_mid img {
    margin: 0 3vw;
}
.sub_content .min {
    position: absolute;
    top: 420px;
    right: 5vw;
}
.sub_content .bubble {
    position: absolute;
    top: 125px;
    left: 15vw;
    width: 47vw;
    height: 182px;
    background-color: #8BADA5;
    border-radius: 5px;

    position: relative;
}
.sub_content .bubble::after {
    content: "";
    position: absolute;
    top: 52%;
    left: -75px;
    margin-top: -15px;
    border: 18px solid transparent;
    border-right: 70px solid #8BADA5;
    transform: rotate(25deg);

    z-index: -0;
}
.sub_content .bubble p {
    margin-left: 2vw;
    padding-top: 20px;
    color: #ffffff;
    line-height: 1.8rem;
}
.sub_content .woman {
    position: absolute;
    top: 435px;
    left: 3vw;
    width: 15vw;
}
.sub_end {
    margin: 75px auto 150px;
    text-align: center;
}

/* --------------------------------------- */
/* フォーム */
#form {
    width: 100%;
    height: 1170px;
    background-color: #ffffff;
    margin-bottom: 0;
}
#form .triangle {
    background-color: #2AAD8E;
    transform: rotate(180deg);
    position: relative;
}
#form .triangle p {
    position: absolute;
    color: #ffffff;
    transform: rotate(180deg) translateX(55%) translateY(80%);
    top: 60%;
    left: 50%;
    letter-spacing: 1.5rem;
}
#form .inq_banner {
    display: flex;
    width: 60%;
    height: 100px;
    box-sizing: border-box;
    margin: 75px auto 0;
    padding: 0 2%;
    text-align: center;
    justify-content: space-around;
    background-color: #8BADA5; 
}
#form .inq_banner p {
    padding-top: 20px;
}
#form .inq_banner h2 {
    line-height: 100px;
}
#form .inq_banner .border {
    width: 2px;
    height: 50px;
    margin: auto 0;
    background-color: #646464;
}
#form a[href^="tel:"] {
    pointer-events: none;
}
.inq_text {
    margin-top: 32px;
    text-align: center;
}
form{
    width: 60vw;
    margin: 75px auto 0;
}
input {
    width: 60vw;
    height: 50px;
    padding: 0 1vw;
    box-sizing: border-box;
    font-size: 1.65vw;
    border: #646464 solid 1px;
}
.form_item p {
    margin: 32px 0 5px 2vw;
}
.thr_form {
    display: flex;
    justify-content: space-between;
}
.form_item_input_harf {
    width: 27.5vw;
}
#form button {
    margin-top: 75px;
    width: 60vw;
}
.message {
    color: red;
    font-size: 1.1vw;
    margin-top: 5px;
}

/* --------------------------------------- */
/* フッター */
footer {
    width: 100%;
    height: 50px;
    margin-top: -15px;
    background-color: #C9C8CC;
    color: #000000;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
}

/* --------------------------------------- */
/* --------------------------------------- */
/* レスポンシブ */
@media screen and (max-width:480px) {
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
    header {
        display: flex;
        position: fixed;

        z-index:50;
    }
    h1 {
        font-size: 7vw;
    }
    h2 {
        font-size: 5vw;
    }
    p  , a {
        font-size: 4vw;
    }
    header img {
        width: 35%;
        margin-left: 60%;
    }
    .min {
        font-size: 3vw;
    }    
    .triangle {
        height: 20vw;
    }
    .key_visual_pc {
        display: none;
    }
    .key_visual_sp {
        display: block;
        position: relative;
    }
    .key_visual_sp img {
        max-width: 100%;
    }
    .key_visual_sp button {
        position: absolute;
        bottom: 15px;
        left: 15vw;
        width: 70vw;
    
        z-index: 3;    
    }
    .main_parts {
        display: block;
        margin: 3vh 10% 0;
        width: 90%;
        top: 0;
    }
    .CTA {
        height: 40px;
        font-size: 4vw;
        letter-spacing: 0.8rem;
        text-align: center;
        padding-left: 3vw;
    }
    .main_background {
        height: 65vh;
    }
    .main_parts {
        top: 5vh;
    }
    .main_parts img {
        width: 70vw;
        object-fit: contain;
    }
    .main_text {
        margin: 20px 3vw;
    }
    .main_text h1 {
        margin-bottom: 2vh;
    }
    .main_text p {
        margin-left: 3vw;
    }
    .main_under .triangle {
        position: absolute;
        bottom: 35vh;
        background-color: #eeedf1;
    
        z-index: 2;
    }
    .main_visual button {
        position: absolute;
        bottom: 37vh;
        left: 15vw;
        width: 70vw;
    
        z-index: 3;
    }
    .introduction {
        margin-top: 100px;
        text-align: center;
    }
    .introduction img {
        margin-bottom: 32.5px;
        max-width: 70%;
    }
    .expc {
        width: 0;
    }
    .exsp {
        width: 90%;
    }
    .benefit {
        margin-left: 7.5vw;
        width: 85vw;
        max-width: 100%;
        margin-top: 75px;
        flex-direction: column;
    }
    .benefit div {
        margin: 0 auto 32.5px;
        height: 370px;
        width: 100%;
        max-width: 100%;
        background-color: #ffffff;
    }
    .benefit .CTA {
        width: 85vw;
    }
    .benefit  .mini {
        width: 50%;
    }
    .under_arrow {
        width: 30%;
    }
    .benefit .title .circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
    .benefit h3 {
        font-size: 4vw;
        margin-left: 16vw;
        margin-top: 7%;
        letter-spacing: 0.6rem;
        color: #8BADA5;
    }
    .customers .custom_text {
        top: 25%;
        left: 5%;
        width: 95%;
        text-align: start;
    }
    .custom_mid_text {
        font-size: 4.5vw;
        line-height: 2.5rem;
        top: 50%;
    }
    .confidence img {
        top: 70%;
        max-width: 50%;
    }
    .confidence button {
        right: -8%;
    }
    .confi_text_pc {
        display: none;
    }
    .confidence .confi_text_sp {
        display: block;
        padding-left: 5%;
        top: 25%;
        width: 92%;
        height: 75%;
    }
    .confidence .confi_text_sp p {
        line-height: 1.5rem;
        width: 100%;
        margin-bottom: 20px;
    }
    .confidence img {
        width: 40%;
    }
    .challenge img {
        top: 11%;
        left: 60%;
        z-index: 5;
    }
    .challenge .chall_text_pc {
        display: none;
    }
    .challenge .chall_text_sp {
        position: absolute;
        display: block;
        top: 25%;
        padding-left: 5%;
        width: 92%;
        height: 50%;
    }
    .challenge .chall_text_sp p {
        line-height: 1.3rem;    
        margin-bottom: 20px;
    }
    .example {
        margin-top: 75px;
        margin-bottom: 50px;
        height: 1350px;
    }
    .example img {
        box-sizing: border-box;
        max-width: 50vw;
        margin-left: 15%;
    }
    /* .exa_content {
        position: absolute;
        margin: 0 15%;
        top: 0;
        width: 70%;
    } */
    .exa_content h2 {
        letter-spacing: 1rem;
        top: 75px;
    }
    .laiton {
        top: 135px;
        left: 0;
        display: block;
    }
    .laiton p {
        width: 70%;
        white-space: nowrap;
    }
    .laiton a , .chiyoda a {
        padding-left: 5vw;
        white-space: nowrap;
    }
    .laiton img {
        margin-left: 7vw;
    }
    .laiton_text {
        padding-left: 0;
        margin-top: 10px;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .chiyoda {
        position: absolute;
        top: 650px;
        display: flex;
        justify-content: space-between;
        
        position: relative;
    }
    .chiyoda p {
        white-space: nowrap;
    }
    .chiyoda_text {
        position: absolute;
        margin-top: 300px;
        width: 50%;
        padding-right: 0vw;
        left: 0;
    }
    .chiyoda_right {
        position: absolute;
        left: 0;
    }
    .exa_content button {
        position: absolute;
        width: 70vw;
        top: 1200px;
        background-color: #EEEDF1;
        color: #2AAD8E;
    }
    .exa_content button:hover {
        background-color: #e2e1e6;
    }
    .exa_content button:active {
        background-color: #c9c8cc;
        box-shadow: inset 0 4px 4px rgba(0, 0, 0, 25%);
    }
    .subsidy {
        width: 85vw;
        margin-left: 7.5vw;
    }
    .subsidy .fir {
        margin: 0 0 2%;
    }
    .sub_con_mid span {
        font-size: 5vw;
    }
    .sub_content {
        width: 100%;
        height: 600px;
        padding: 20px 5vw 0;
        margin-top: 32.5px;
    }
    .sub_content p {
        margin-bottom: 10px;
    }
    .sub_con_mid {
        top: 230px;
        display: block;
    }
    .sub_con_mid p {
        margin: 0;
    }
    .sub_con_mid img {
        margin: 10px 3vw 20px;
        rotate: 90deg;
        max-width: 15vw;
    }
    .sub_content .min {
        top: 365px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1rem;
    }
    .sub_content .bubble {
        top: 200px;
        left: -2.5vw;
        width: 80vw;
        height: 200px;
    }
    .sub_content .bubble::after {
        top: 110%;
        left: 25vw;
        transform: rotate(-50deg);
    }
    .sub_content .bubble p {
        margin-left: 2vw;
        padding-top: 10px;
    }
    .sub_content .woman {
        top: 560px;
        left: 5vw;
        width: 30%;
        max-width: 60%;
    }
    .sub_end {
        margin-top: 32.5px;
        margin-left: -5%;
        margin-bottom: 75px;
        text-align: center;
        width: 110%;
    }
    #form {
        height: 750px;
        margin-bottom: 0;
    }
    #form .triangle p {
        transform: rotate(180deg) translateX(55%) translateY(80%);
        top: 70%;
        left: 50%;
        letter-spacing: 0.8rem;
    }
    #form .inq_banner {
        display: block;
        width: 60%;
        height: 100px;
        box-sizing: border-box;
        margin: 32.5px auto 0;
        padding: 0;
        text-align: center;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
    }
    #form .inq_banner p {
        padding: 10px 0;
        line-height: 1.2rem;
    }
    #form .inq_banner h2 {
        line-height: 2rem;
    }
    #form .inq_banner .border {
        width: 50vw;
        height: 2px;
        margin: 0 auto;
    }
    #form .inq_banner:hover {
        background-color: #819BA1;
    }
    #form .inq_banner:active {
        background-color: #6DA1A1;
        box-shadow: inset 0 4px 4px rgba(0, 0, 0, 25%);
    }
    #form a[href^="tel:"] {
        pointer-events: auto;
    }    
    .inq_text {
        margin-top: 16px;
        margin-left: 5%;
        width: 90%;
    }
    form{
        width: 70vw;
        margin: 35px auto 0;
    }
    input {
        width: 100%;
        height: 25px;
        padding: 0 1vw;
        box-sizing: border-box;
        font-size: 3vw;
        border: #646464 solid 1px;
    }
    .thr_form {
        width: 75vw;
    }    
    .form_item_input_harf {
        width: 32.5vw;
    }    
    .form_item p {
        margin: 0 0 0 2vw;
    }
    #form button {
        margin-top: 32.5px;
        width: 70vw;
    }
    .message {
        color: red;
        font-size: 3vw;
        margin-top: 5px;
    }
    
    /* --------------------------------------- */
    /* フッター */
    footer {
        height: 25px;
        margin-top: 0;
        
    }
}