@charset "utf-8";

span.underline {
    background: linear-gradient(to top,#fcee21 0%,#fcee21 0.35em,transparent 0.35em);
}

.head {
    background: url("../images/head_ph.jpg") no-repeat center bottom/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    font-size: 16px;
    padding: 12em 0 4em 0;
}

.head.check {
    padding: 8em 0 6em 0;
    font-size: 13px;
}

.head:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 45px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
    bottom: 0;
}

.head a {
    position: relative;
    display: block;
    background-color: #fcee21;
    background-image: url("../images/head_btn_icon.png");
    background-size: auto 70%;
    background-repeat: no-repeat;
    background-position: 12% center;
    font-weight: bolder;
    text-align: center;
    font-size: 143.75%;
    width: 96%;
    max-width: 550px;
    border: 6px solid #fff;
    border-radius: 2em;
    box-sizing: border-box;
    letter-spacing: 0.2em;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
    transition: background-color .3s;
    margin-top: 3em;
    padding: 1em 0 1em 1.5em;
}

.head a:hover {
    background-color: #fff343;
}

.head a:after {
    font-weight: normal;
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.head a:hover:after {
    transform: translateX(0.2em);
}

.headTtl {
    background: rgb(255 255 255 / 80%);
    position: relative;
    width: 100%;
}

.headTtl h1 {
    font-size: 370%;
    text-align: center;
    color: #2f95b0;
    padding: 0.5em 0;
}

.headTtl ul {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: auto;
    margin-top: -6em;
}

.headTtl li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12em;
    height: 12em;
    background: #fff;
    text-align: center;
    margin: 0 2%;
    border-radius: 50%;
    box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
    .head {
        font-size: 1.4vw;
        padding: 9em 0 4em 0;
    }

    .head.check {
        font-size: 1.5vw;
        padding: 11em 0 6em 0;
    }
}

@media screen and (max-width: 767px) {
    .head {
        font-size: 1.5vw;
        padding: 20em 0 7em;
    }
    
    .head h1 {
        padding: 0.9em 0 0.5em;
        font-size: 360%;
    }

.head h1 span {
    font-size: 180%;
}

    .headTtl ul {
        font-size: 200%;
        margin-top: -4.5em;
    }
    
    .headTtl li {
        width: 9em;
        height: 9em;
        margin: 0 1.5%;
    }

    .headTtl li:last-of-type {
        margin-bottom: 0;
    }
    
    .head a {
        font-size: 350%;
        background-position: 7% center;
        max-width: none;
        margin-top: 2em;
        width: 90%;
        padding: 0.9em 0;
    }
}

.about {
    font-size: 18px;
}

.about h2 {
    margin: 60px 0;
    text-align: center;
    font-size: 133.33%;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.about .point {
    background: #fff7bb;
    text-align: center;
    position: relative;
    padding: 1.8em 1em;
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto -30px auto;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.8;
    z-index: 1;
}

.about .point:before {
    content: "";
    width: 48px;
    height: 25px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    background: linear-gradient(to top left,  #fff7bb 50%, transparent 53%) no-repeat top left / 50% 100%,
                linear-gradient(to top right, #fff7bb 50%, transparent 53%) no-repeat top right/50% 100%;
}

@media screen and (max-width: 1280px) {
    .about {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .about h2 {
        margin: 30px 0;
        font-size: 130%;
    }
    .about .point {
        text-align: left;
        padding: 1em;
        margin: 0 auto -3em auto;
    }
}

.step {
    background: #2f95b0;
    padding: 70px 0 60px;
    position: relative;
}

.step:before,
.step:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 45px;
    opacity: 0.05;
    pointer-events: none;
}

.step:before {
    background: linear-gradient(to top, transparent,#000);
    top: 0;
}

.step:after {
    background: linear-gradient(to bottom, transparent,#000);
    bottom: 0;
}

.step h3 {
    text-align: center;
    font-size: 285%;
    letter-spacing: 0.2em;
    color: #fcee21;
}

.step h3 span {
    font-size: 50%;
    display: flex;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0.2em;
    position: relative;
}

.step h3 span:before,
.step h3 span:after {
    content: "";
    width: 0;
    height: 1.1em;
    border-left: 3px solid #fff;
}

.step h3 span:before {
    transform: rotate(-35deg) translate(-1.1em,-0.5em);
}

.step h3 span:after {
    transform: rotate(35deg) translate(1em,-0.4em);
}

.step ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    margin: 40px 0 0 0;
}

.step li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
    color: #fff;
    font-size: 15px;
}

.step .iconWrap {
    background: #fff;
    position: relative;
    width: 12em;
    height: 12em;
    display: flex;
    border-radius: 50%;
    margin-bottom: 20px;
    color: #2f95b0;
    font-size: 16px;
    user-select: none;
}

.step .iconWrap:after {
    content: "";
    width: 10%;
    height: 10%;
    position: absolute;
    top: 0;
    right: -26%;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transform: rotate(45deg);
    border-right: 4px solid #fff;
    border-top: 4px solid #fff;
}

.step3 .iconWrap:after {
    content: none;
}

.step .num {
    position: absolute;
    font-size: 75%;
    font-weight: bolder;
    line-height: 1;
    top: 1.2em;

    left: 0;
    right: 0;
    margin: auto;
}

.step .num span {
    font-size: 250%;
    display: block;
    line-height: 1;
}

.step1 .fa-mobile {
    position: absolute;
    bottom: 13%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 600%;
}

.step1 .fa-check {
    position: absolute;
    bottom: 29%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 250%;
    color: #fff;
}

.step2 .fa-mobile {
    position: absolute;
    bottom: 18%;
    left: 20%;
    font-size: 500%;
}

.step2 .fa-wifi {
    position: absolute;
    bottom: 45%;
    right: 29%;
    font-size: 200%;
    transform: rotate(45deg);
}

.step2 .fa-envelope {
    position: absolute;
    bottom: 15%;
    right: 18%;
    font-size: 330%;
}

.step2 .fa-envelope {
    position: absolute;
    bottom: 15%;
    right: 18%;
    font-size: 330%;
}

.step3 .fa-handshake-simple {
    position: absolute;
    bottom: 17%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 480%;
}

.step .ttl {
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 0.5em;
    letter-spacing: 0.05em;
    color: #fcee21;
}

@media screen and (max-width: 767px) {
    .step h3 {
        font-size: 220%;
    }
    
    .step ul {
        flex-direction: column;
        text-align: left;
        margin-top: 30px;
    }

    .step li {
        flex-direction: row;
        align-items: flex-start;
        margin: 0;
    }

    .step .iconWrap {
        margin-bottom: 0;
        margin-right: 1.5em;
        text-align: center;
        font-size: 2.5vw;
        margin-bottom: 6em;
    }

    .step3 .iconWrap {
        margin-bottom: 0;
    }

    .step .iconWrap:after {
        left: 0;
        right: 0;
        bottom: -3.4em;
        top: auto;
        transform: rotate(135deg);
    }
    
    .step .ttl {
        margin-top: 0.3em;
    }
}

#contact {
    padding: 70px 0;
}

#contact .inner {
    max-width: 960px;
}

#contact h2 {
    text-align: center;
    font-weight: bolder;
    font-size: 321%;
    letter-spacing: 0.15em;
    margin-bottom: 1em;
}

#contact h3 {
    text-align: center;
    font-size: 190%;
    font-weight: bold;
    margin-bottom: 1em;
}

#contact h4 {
    text-align: center;
    margin-bottom: 2em;
    font-size: 120%;
}

#contact h4 + p {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
}

#contact h4 + p + a {
    position: relative;
    display: block;
    background-color: #fcee21;
    font-weight: bolder;
    text-align: center;
    font-size: 120%;
    width: 96%;
    max-width: 550px;
    border-radius: 2em;
    box-sizing: border-box;
    letter-spacing: 0.2em;
    transition: background-color .3s;
    padding: 1em;
    margin: 0 auto 2em auto;
}

#contact h4 + p + a:hover {
    background-color: #fff343;
}

#contact h4 + p + a:after {
    font-weight: normal;
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

#contact h4 + p + a:hover:after {
    transform: translateX(0.2em);
}

#contact .telbox {
    text-align: center;
}

#contact .telbox .tel a {
    display: block;
    font-size: 357%;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.2em;
    color: #2f95b0;
    letter-spacing: 0.05em;
}

#contact .telbox .tel i {
    font-size: 80%;
    vertical-align: baseline;
    margin-right: -0.2em;
}

#contact .or {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3em 0px;
    font-size: 150%;
}

#contact .or span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    background: #adadad;
    min-width: 2em;
    height: 2em;
    border-radius: 50%;
    margin: 0 2em;
}

#contact .or:before,#contact .or:after {
    content: "";
    height: 0;
    width: 100%;
    border-bottom: 2px solid #adadad;
}
@media screen and (max-width: 767px) {
    #contact {
        padding: 50px 0;
    }
    
    #contact h2 {
        font-size: 240%;
    }
    
    #contact h3 {
        font-size: 150%;
    }

    #contact .telbox .tel a {
        font-size: 280%;
    }

    #contact .or {
        margin: 1.5em 0;
    }
}