@charset "utf-8";

.fix_banner {
    display:none;
}
@media screen and (max-width: 768px) {

body {
    padding-bottom: 8.5em;
}

.fix_banner {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(200px);
    transition: .5s;
    z-index:1000000000000;
}
.fix_banner.scroll {
    transform: translateY(0);
}

.fix_banner_bloc {
    position: relative;
    padding: 0.5em 0.5em 1em;
    box-sizing: border-box;
}

.fix_banner_bloc:after {
    content: "";
    background: rgb(255 255 255 / 80%);
    width: 100%;
    height: calc(100% - 0.5em);
    position: absolute;
    bottom: 0;
    left: 0;
}
.fix_banner_bloc a {
    position: relative;
    z-index: 100000;
}

html {
    height: auto;
}

.btn_bloc p {
    font-size: 5vw;
}


.band {
    padding: 1em;
}
.band .inner {
    padding-bottom: 0;
}
.band .inner:after {
    display: none!important;
}

.band figure {
    width: 20%;
}
.band h2 {
    font-size: 5vw;
    line-height: 1.2em;
    position: relative;
    padding-bottom: 1em;
}

.comparison .band figure {
    margin-top: 0;
    margin-bottom: 0;
}
.flow .band figure {
    margin-top: 0;
    margin-bottom: 0;
}
.advisor .band figure {
    margin-top: 0;
    margin-bottom: 0;
}
.voice .band figure {
    margin-top: 0;
    margin-bottom: 0;
}
.faq .band figure {
    margin-top: 0;
    margin-bottom: 0;
}


.band .inner h2:after {
    content: "";
    color: rgb(246 248 251 / 18%);
    font-size: 4vw;
    line-height: 1em;
    font-weight: 900;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
}
.comparison .band .inner h2:after {
    content: "Comparison";
}
.flow .band .inner h2:after {
    content: "Flow";
}
.advisor .band .inner h2:after {
    content: "Career Advisor";
}
.voice .band .inner h2:after {
    content: "Voice";
}
.faq .band .inner h2:after {
    content: "FAQ";
}

.content {
    padding: 2em 1em;
}





header {
    padding: 0.5em;
}
header .logo {
    width: 30%;
}
header .logo img {
    display: block;
}


.mv {
    padding: 1em;
}

.mv_uppre h1 {
    width: 100%;
    position: relative;
    z-index: 2;
}
.mv_uppre .box {
    width: 100%;
    padding: 0;
    flex: none;
    margin-top: -2em;
}
.mv_bottom {
    gap: 1em;
}
.mv_bottom figure {
    width: 100%;
}

.mv_bottom .btn_bloc {
    width: 100%;
    flex: none;
}

.about {
    padding: 2em 1em;
}
.about h2 {
    gap: 1em;
    margin-bottom: 1em;
}
.about h2 em {
    flex: 1 0 0%;
}
.about h2 figure {
    flex: none;
    width: 28%;
}


.about_item {
    gap: 1em;
}
.about_item + .about_item {
    margin-top: 2em;
}
.about_item figure {
    flex: none;
    width: 100%;
    margin: 0 auto;
}

.about_item:nth-child(2) figure,
.about_item:nth-child(3) figure {
    width: 74%;
}

.about_box {
    width: 100%;
}
.about_box h3 {
    margin-bottom: 1em;
}
.about_box h3 i {
    width: 16%;
}
.about_box h3 em span {
    font-size: 6vw;
}
.about_box h4 {
    font-size: 5vw;
}
.about_box p {
    font-size: 3.5vw;
    text-align: left;
    line-height: 1.6em;
}



.trouble {
    padding: 2em 1em 0;
}
.trouble:after {
    border-width: 20px 30px 0 30px;
    bottom: -20px;
}
.trouble h2 {
    font-size: 6vw;
}
.trouble_bloc {
    padding-top: 5em;
}
.trouble_bloc figure {
    width: 47.372881355%;
    margin: 0 auto;
}

.trouble_bloc ul li:nth-child(1) {
    width: 24.915254237%;
    bottom: 2em;
}
.trouble_bloc ul li:nth-child(2) {
    width: 25.084745762%;
    left: 2em;
    top: auto;
    bottom: 6em;
}
.trouble_bloc ul li:nth-child(3) {
    width: 23.898305084%;
    margin: 0 auto;
    top: auto;
    bottom: 6em;
}
.trouble_bloc ul li:nth-child(4) {
    width: 25.169491525%;
    top: auto;
    bottom: 6em;
    right: 2em;
}
.trouble_bloc ul li:nth-child(5) {
    width: 27.711864406%;
    bottom: 2em;
}

.cv {
    padding: 3em 1em 2em;
}

.flow_bloc h3 {
    width: 74%;
    margin: 0 auto 2em;
}
.flow_bloc ol li .box {
    width: 100%;
}
.flow_bloc ol li .box p {
    font-size: 3.5vw;
}

.flow_bloc ol li .meta {
    align-items: flex-start;
    justify-content: flex-start;
}
.flow_bloc ol li .meta i {
    width: 16%;
}
.flow_bloc ol li .meta h4 span {
    font-size: 5vw;
}

.flow_bloc ol li + li:before {
    width: 24px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    top: -1.25em;
}

.flow_bloc ol li + li {
    margin-top: 1.5em;
}


.advisor .content {
    padding:2em 0;
}
.advisor_bloc {
    padding: 0;
}



.voice_box {
    flex: none;
    width: 100%;
}
.voice_item figure {
    width: 50%;
    margin: -3em auto 0;
}

.voice_box h3 {
    text-align: center;
}
.voice_box h3 span {
    font-size: 4vw;
    line-height: 1.4em;
    text-align: center;
}
.voice_box p {
    font-size: 3.5vw;
}

.faq .band {
    padding: 1em 1em 0;
}
.faq .content {
    padding: 2em 1em;
}

.faq_bloc dl + dl {
    margin-top: 1em;
}
.faq_bloc dl dt {
    font-size: 4vw;
}
.faq_bloc dl dd {
    padding: 1em 0.8em 1em 3em;
    font-size: 4vw;
    line-height: 1.2em;
}

.faq_bloc dl dt:before {
    width: 1.2em;
    top: 1em;
}
.faq_bloc dl dd:before {
    width: 1.2em;
    top: 1em;
}




footer .logo {
    width: 30%;
    margin: 0 auto;
}
footer .copy {font-size: 10px;}
















}