@charset "utf-8";
/*mv
========================================================================*/
.mv_area {
    background: url("../images/mv_bg.webp") no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 2em 0 10em 0;
    position: relative;
    z-index: 0;
}
.mv_area_w {
    max-width: 1400px;
    margin: auto;
    position: relative;
}
@media screen and (max-width: 1450px) {
    .mv_area {
        padding: 2em 0 7em 0;
    }
    .mv_area_w {
        max-width: 95%;
    }
}
@media screen and (max-width: 680px) {
    .mv_area {
        background: url("../images/mv_bg_sp.webp") no-repeat;
        padding: 1em 0 3em 0;
        background-size: cover;
        background-position: top;
    }
    /*  .mv_area_w {
        max-width: 90%;
    }*/
}
/*main_text_img
----------------------------------------------------------*/
.main_text_img {
    width: 100%;
    position: relative;
    transform: translateX(-1.5em);
}
.main_text_img img {
    width: 100%;
}
@media screen and (max-width: 680px) {
    .main_text_img {
        transform: translateX(0em);
        padding-top: 46vw;
        max-width: 90%;
        margin: auto;
    }
}
/*mv_text_box
--------------------------------------------------------------------*/
.mv_text_box {
    max-width: 802px;
    animation: auto;
    padding-top: 7em;
}
@media screen and (max-width: 1450px) {
    .mv_text_box {
        max-width: 60%;
        padding-top: 5vw;
    }
}
@media screen and (max-width: 680px) {
    .mv_text_box {
        max-width: none;
        padding-top: 0;
    }
}
/*mv_lead_flex
--------------------------------------------------------------------*/
.mv_lead_flex {
    max-width: 93%;
    margin: auto auto auto 0;
    padding: 3em 0 4em 0;
    display: flex;
    justify-content: space-between;
    gap: 3%;
    align-items: center;
    flex-direction: row-reverse;
}
.mv_lead_flex .mv_lead {
    width: 65%;
    font-size: 2.0rem;
    letter-spacing: 0.5px;
    color: #424242;
}
.mv_lead_flex .mv_award {
    width: 35%;
}
.mv_lead_flex .mv_award img {
    width: 100%;
}
.mv_under_mv_img {
    display: none;
}
@media screen and (max-width: 1450px) {
    .mv_lead_flex .mv_lead {
        font-size: 1.75rem;
    }
}
@media screen and (max-width: 960px) {
    .mv_lead_flex .mv_lead {
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 680px) {
    .mv_lead_flex {
        max-width: 100%;
        margin: auto auto auto auto;
        padding: 1.5em 0 1.5em 0;
        display: block;
    }
    .mv_lead_flex .mv_lead {
        width: 84%;
        margin: auto;
        font-size: 1.6rem;
    }
    .mv_lead_flex .mv_award {
        width: 100%;
        margin: 2em auto auto auto;
    }
    .mv_under_mv_img {
        margin: 1em auto auto auto !important;
        display: block;
    }
    .mv_under_mv_img img {
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    .mv_under_mv_img {
        max-width: 300px;
    }
}
/*air_cv_areaのみ*/
.mv_area .air_cv_area {
    max-width: 675px;
    margin: auto auto auto 0;
}
.mv_area .air_cv_area a {
    font-size: 1.9rem;
    padding: 1.3em 0;
    border-radius: 0.2em;
    border: solid 1px var(--col_btn);
}
@media screen and (min-width: 961px), print {
    .mv_area .air_cv_area > *.air_btn_ff a:hover {
        background: var(--bg_yellow);
    }
}
@media screen and (max-width: 960px) {
    .mv_area .air_cv_area a {
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 680px) {
    .mv_area .air_cv_area {
        max-width: 80%;
        margin: auto auto auto auto;
    }
    .mv_area .air_cv_area a {
        font-size: 1.8rem;
    }
}
/*mv_img
--------------------------------------------------------------------*/
.mv_img {
    position: absolute;
    right: 0em;
    z-index: -1;
    top: 0em;
}
.mv_img {
    width: 619px;
}
.mv_img img {
    width: 100%;
}
@media screen and (max-width: 1450px) {
    .mv_img {
        width: 41%;
    }
}
@media screen and (max-width: 680px) {
    .mv_img {
        width: 100%;
        right: auto;
        left: 50%;
        transform: translate(-50%, -0%);
    }
}
/*taio_area
========================================================================*/
.taio_area {
    padding: 5em 0 10em 0;
}
/*taio_list*/
.taio_list {
    max-width: 990px;
    margin: auto !important;
    display: flex;
    justify-content: center;
    gap: 9%;
}
.taio_list > li {
    border-radius: 0.8em;
    border: solid 2px var(--col_blue);
    width: 50%;
    background: var(--bg_blue);
}
.taio_list_inner {
    padding: 1.5em 1.8em;
}
.taio_list_inner .img {
    margin: auto;
    height: 156px;
}
.taio_list_inner .img img {
    width: 100%;
    height: 156px;
    object-fit: contain;
    object-position: center;
    font-family: 'object-fit: contain; object-position: center;'
}
.gyomu .img img {
    height: 121px;
}
.taio_list_tite {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.taio_list_tite span {
    background: linear-gradient(transparent 62%, var(--col_blue_l) 50%);
}
.taio_list_txt {
    line-height: 1.7 !important;
}
@media screen and (max-width: 1000px) {
    .taio_list {
        max-width: 90%;
    }
}
@media screen and (max-width: 960px) {
    .taio_area {
        padding: 3em 0;
    }
    .taio_list {
        gap: 3%;
    }
}
@media screen and (max-width: 680px) {
    .taio_area {
        padding: 3em 0 4em 0;
    }
    .taio_list {
        display: block;
    }
    .taio_list > li {
        width: 100%;
    }
    .taio_list > li + li {
        margin-top: 1em;
    }
    .taio_list_inner .img {
        width: 60%;
        height: auto;
    }
    .taio_list_inner .img img {
        height: auto;
    }
    .gyomu .img {
        width: 60%;
    }
    .taio_list_tite {
        margin-bottom: 0.5em !important;
        font-size: 2.0rem;
    }
    .taio_list_inner {
        padding: 1.5em 1.0em;
    }
    .taio_list_txt {
        font-size: 1.6rem;
    }
}
/*needs_area
========================================================================*/
.needs_area {
    padding: 6em 0 0 0;
}
.bg_over {
    padding-bottom: 16em !important;
    position: relative;
    z-index: 0;
}
.bg_over.cv_area {
    padding-bottom: 10em !important;
}
.bg_over:before, .bg_over.cv_area:before {
    content: "";
    background: var(--col_yellow);
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: -100px;
    left: 0;
    z-index: -1;
}
/*色違い*/
.bg_over.bg_green_l:before {
    background: var(--bg_green_l);
}
.bg_over.bg_blue:before {
    background: var(--bg_blue);
}
.bg_over.bg_ff:before {
    background: var(--bg_ff);
}
@media screen and (max-width: 680px) {
    .needs_area {
        padding: 4em 0 0 0;
    }
    .bg_over {
        padding-bottom: 5em !important;
    }
    .bg_over:before, .bg_over.cv_area:before {
        content: none;
    }
    .bg_over.cv_area {
        padding-bottom: 5.5em !important;
    }
}
/*bg_over_top
----------------------------------------------------------------------------*/
.bg_over_top {
    position: relative;
    padding-top: 6em !important;
    z-index: 0;
}
.bg_over_top:after {
    content: "";
    background: url("../images/bg_green.svg") no-repeat;
    background-size: cover;
    position: absolute;
    top: -6em;
    left: 0;
    width: 100%;
    height: 6em;
    z-index: 1;
}
/*色違い*/
.bg_over_top.bg_green_l:after {
    background: url("../images/bg_green.svg") no-repeat;
    background-size: cover;
}
.bg_over_top.bg_blue:after {
    background: url("../images/bg_green.svg") no-repeat;
    background-size: cover;
}
.bg_over_top.bg_ff {
    padding-top: 0em !important;
}
.bg_over_top.bg_ff:after {
    background: url("../images/bg_ff.svg") no-repeat;
    background-size: cover;
    background-position: center;
    top: -8em;
    height: 8em;
}
@media screen and (max-width: 680px) {
    .bg_over_top {
        padding-top: 5em !important;
    }
    .bg_over_top:after {
        content: none;
    }
    .bg_over_top.bg_ff:after {
        content: "" !important;
        top: -2.8em;
        height: 3em;
    }
}
/*needs_area_w*/
.needs_area_w {
    max-width: 1200px;
    margin: auto;
}
@media screen and (max-width: 1250px) {
    .needs_area_w {
        max-width: 90%;
    }
}
/*midashi_bg_green*/
.needs_area .midashi_bg_green {
    margin-bottom: 0.3em;
}
.needs_title .midashi_02:before, .needs_title .midashi_02:after {
    top: 70%;
}
@media screen and (max-width: 680px) {
    .needs_title .midashi_02:before, .needs_title .midashi_02:after {
        top: auto;
        transform: translate(-0%, -00%);
        bottom: 0 !important;
    }
    .needs_title .midashi_02:after {
        transform: translate(-0%, -0%) scale(-1, 1);
    }
}
/*needs_list*/
.needs_list {
    padding-top: 6em !important;
    display: flex;
    justify-content: center;
    gap: 3%;
}
.needs_list > li {
    border: solid 2px var(--col_main);
    background: #fff;
}
.needs_list_inner {
    position: relative;
    padding: 4em 1.7em 1em 1.7em;
}
.needs_list_inner:before {
    content: "";
    background: url("../images/need_title_bg.svg") no-repeat;
    aspect-ratio: 88/30;
    height: 2em;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: -1.95em;
    transform: translate(-50%, -0%);
}
@media screen and (max-width: 1250px) {
    .needs_list {
        gap: 2%;
    }
}
@media screen and (max-width: 960px) {
    .needs_list {
        flex-wrap: wrap;
        gap: 3em 2%;
    }
    .needs_list > li {
        width: 48%;
    }
}
@media screen and (max-width: 680px) {
    .needs_list {
        width: 75%;
        margin: auto !important;
        gap: 4em 0;
    }
    .needs_list > li {
        width: 100%;
    }
    .needs_list_inner {
        padding: 4em 1.5em 2em 1.5em;
    }
}
/*アイコンサイズ*/
.needs_list_inner .need_ico {
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translate(-50%, -0%);
}
.needs_list_inner .need_ico img {
    width: 100%;
    height: 5.6rem;
    aspect-ratio: 42/56;
    object-fit: contain;
    object-position: center;
    font-family: 'object-fit: contain; object-position: center;'
}
.nees_02 .needs_list_inner .nees_02 {
    height: 5.1rem;
    aspect-ratio: 51/56;
}
.nees_03 .needs_list_inner .nees_03 {
    height: 4.8rem;
    aspect-ratio: 63/48;
}
.nees_04 .needs_list_inner .nees_04 {
    height: 3.0rem;
    aspect-ratio: 70/30;
}
/*needs_list_title*/
.needs_list_title {
    font-weight: bold;
    color: var(--col_blue);
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 0.5em !important;
    letter-spacing: 1px;
}
.needs_list_inner .text_box {
    line-height: 1.8;
}
/*air_support_area
========================================================================*/
.air_support_area {
    padding: 6em 0 16em 0;
}
@media screen and (max-width: 680px) {
    .air_support_area {
        padding: 6em 0 8em 0;
    }
}
/*air_support_w*/
.air_support_w {
    max-width: 1000px;
    margin: auto;
}
/*air_support_ff*/
.air_support_ff {
    box-sizing: border-box;
    margin-top: 6em;
    background: #fff;
    position: relative;
    padding-bottom: 0em;
    border: none !important;
}
.air_support_ff .air_support_title {
    padding: 3em 0 1em 0;
}
/*人*/
.air_support_ff:before {
    content: "";
    background: url("../images/cara_01.svg") no-repeat;
    background-size: contain;
    aspect-ratio: 207/385;
    width: 20.5rem;
    position: absolute;
    bottom: -2px;
    right: 15px;
}
@media screen and (max-width: 680px) {
    .air_support_ff {
        margin-top: 2em;
        padding-bottom: 1.5em;
    }
    .air_support_ff:before {
        content: none;
    }
    .air_support_ff .air_support_title {
        padding: 2em 0 1em 0;
    }
}
/*ico_hokkaido*/
.ico_hokkaido {
    position: relative;
    z-index: 0;
}
.ico_hokkaido:before {
    content: "";
    background: url("../images/hokkaido.svg") no-repeat;
    background-size: contain;
    aspect-ratio: 298/266;
    width: 30rem;
    position: absolute;
    top: 8em;
    left: -8em;
    z-index: 1;
}
@media screen and (max-width: 960px) {
    .ico_hokkaido:before {
        width: 20rem;
        top: 8em;
        left: -2em;
    }
}
@media screen and (max-width: 680px) {
    .ico_hokkaido:before {
        width: 15rem;
        top: -9.5em;
        left: -1em;
    }
}
/*air_check_list*/
.air_check_list {
    width: 79%;
    margin: auto auto auto 0;
    padding: 2em 4em 4em 4em !important;
}
.air_check_list > li {
    position: relative;
    padding-left: 2em;
}
.air_check_list > li + li {
    margin-top: 3em;
}
.air_check_list > li:before {
    content: "";
    background: url("../images/ico_check.svg") no-repeat;
    background-size: contain;
    aspect-ratio: 19/15;
    height: 1em;
    position: absolute;
    left: 0em;
    top: 0.8em;
}
.air_check_list_title {
    color: #006EB9;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 2.2rem;
    margin-bottom: 0.5em !important;
}
@media screen and (max-width: 680px) {
    .air_check_list {
        width: auto;
        margin: auto auto auto auto;
        padding: 1.5em 1.5em 0 1.5em !important;
    }
    .air_check_list > li {
        padding-left: 1.5em;
    }
    .air_check_list > li:before {
        height: 0.9em;
        top: 0.5em;
    }
    .air_check_list_title {
        font-size: 1.6rem;
    }
}
/*maker_area
==================================================================================================================================*/
.maker_area {
    padding: 5em 0 7em 0;
}
.maker_w {
    max-width: 1300px;
    margin: auto;
}
.maker_logo_list {
    margin-top: 3em !important;
    display: flex;
    gap: 1.3%;
    padding: 3em 3em !important;
    background: var(--bg_green_l);
}
.maker_logo_list > li img {
    width: 100%;
}
.maker_text {
    margin: auto auto 5em auto !important;
}
@media screen and (max-width: 1350px) {
    .maker_w {
        max-width: 90%;
    }
}
@media screen and (max-width: 680px) {
    .maker_area {
        padding: 5em 0 4.5em 0;
    }
    .maker_w {
        padding-top: 1em;
    }
    .maker_logo_list {
        flex-wrap: wrap;
        gap: 1em 2%;
        padding: 1.5em 0.5em !important;
    }
    .maker_logo_list > li {
        width: 32%;
    }
    .maker_text {
        width: 80%;
        margin: auto auto 2em auto !important;
    }
}
@media screen and (max-width: 480px) {
    .maker_logo_list > li {
        width: 49%;
    }
}
/*fee_area
==================================================================================================================================*/
.fee_area {
    padding: 5em 0 7em 0;
}
.fee_area_w {
    max-width: 1300px;
    margin: auto;
}
.fee_list {
    margin-top: 3em !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4em 4%;
    padding: 3em 0 !important;
}
.fee_list > li {
    position: relative;
    width: 30%;
    background: var(--bg_blue);
    border: solid 1px var(--col_blue);
    border-radius: 0.5em;
    padding-top: 1em;
}
.fee_list > li:before, .fee_list > li:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);
}
.fee_list > li:before {
    background: var(--col_blue);
    width: 2.5em;
    aspect-ratio: 1;
    border-radius: 3em;
    top: -1.25em;
}
.fee_list > li:after {
    background: url("../images/ico_exe.svg") no-repeat;
    aspect-ratio: 7.5/27.5;
    height: 1.7em;
    top: -0.8em;
}
.fee_list_inner {
    padding: 1em;
}
.fee_list_title {
    margin-bottom: 0.5em !important;
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
}
.fee_list_title .tf_big {
    font-size: 1.2em;
}
.fee_list_inner > li img {
    width: 100%;
}
.fee_cap {
    font-size: 1.7rem !important;
}
@media screen and (max-width: 1350px) {
    .fee_w {
        max-width: 90%;
    }
}
@media screen and (max-width: 960px) {
    .fee_area_w {
        padding-top: 1em;
    }
    .fee_list {
        gap: 4em 2%;
    }
    .fee_list > li {
        width: 32%;
    }
    .fee_list_title {
        font-size: 1.6rem;
    }
}
@media screen and (max-width:680px) {
    .fee_area {
        padding: 5em 0 4em 0;
    }
    .fee_list {
        margin-top: 0em !important;
        padding: 4em 0 2em 0 !important;
        width: 95%;
        margin: auto !important;
        display: block;
    }
    .fee_list > li {
        width: 100%;
    }
    .fee_list > li + li {
        margin-top: 3em;
    }
    .fee_list_title {
        font-size: 1.7rem;
    }
    .fee_list_inner .text_box {
        font-size: 1.6rem;
    }
    .fee_cap {
        line-height: 1.8 !important;
        font-size: 1.7rem !important;
    }
}
/*qa_area
==================================================================================================================================*/
.qa_area {
    padding: 2em 0 4em 0;
}
.qa_area_w {
    max-width: 1040px;
    margin: auto;
}
@media screen and (max-width:1050px) {
    .qa_area_w {
        max-width: 90%;
    }
}
@media screen and (max-width:960px) {
    .qa_area_w {
        max-width: 95%;
    }
}
@media screen and (max-width:680px) {
    .qa_area {
        padding: 2em 0 3em 0;
    }
    .qa_area_w {
        max-width: 90%;
    }
}
/*qa_list
-----------------------------------------------------------*/
.qa_list, .qa_list > li {
    font-size: 1.7rem;
}
.qa_list > li + li {
    margin-top: 1.5em;
}
@media screen and (max-width:680px) {
    .qa_list, .qa_list > li {
        font-size: 1.5rem;
    }
}
/*qa_list dl
-----------------------------------------------------------*/
.qa_list > li dl dt, .qa_list > li dl dd {
    position: relative;
    padding: 0.7em 0.7em 0.7em 3.5em;
    border-radius: 0.3em;
    font-size: 1.2em;
}
.qa_list > li dl dt {
    background: var(--bg_yellow);
    color: var(--col_main);
}
.qa_list > li dl dt:before, .qa_list > li dl dd:before {
    font-weight: 700;
    font-family: "Roboto", serif;
    position: absolute;
    left: 0.7em;
    top: 0em;
    font-size: 1.8em;
}
.qa_list > li dl dt:before {
    content: "Q";
    color: var(--col_blue);
}
.qa_list > li dl dd {
    color: var(--col_black);
}
.qa_list > li dl dd .text_box {
    font-size: 0.8em;
}
.qa_list > li dl dd:before {
    content: "A";
    color: var(--col_main);
}
/*air_voivce_area
==================================================================================================================================*/
.air_voice_area {
    padding: 6em 0 5em 0;
}
@media screen and (max-width: 680px) {
    .air_voice_area {
        padding: 4em 0 1em 0 !important;
    }
}
/*air_support_w*/
.air_voice_w {
    max-width: 1000px;
    margin: auto;
}