@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*Baloo Thambi 2*/
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;600;700;800&display=swap');


html {
    scroll-behavior: smooth;
}


.kantan30 {
    width: 71vw;
    margin: 12px auto 0px auto;
}

@media (min-width: 768px) {
    .kantan30 {
        width: 344px;
        margin: 30px auto 3px auto
    }
}


.kantan30_cta {
    width: 55vw;
    margin: 9px auto -14px auto;
}

@media (min-width: 768px) {
    .kantan30_cta {
        width: 282px;
        margin: 13px auto -13px auto;
    }
}

.kantan30_footer {
    width: 52vw;
    margin: 12px auto 0px auto;
}

@media (min-width: 768px) {
    .kantan30_footer {
        width: 209px;
        margin: 5px auto 0 auto;
    }
}





.btn_cta {
    width: 94%;
    margin: 13px auto 0 auto;
}

.btn_footer {
    width: 100%;
    margin: 10px 0 0 0;
}

@media (min-width: 768px) {
    .btn_cta {
        width: 80%;
        margin: 13px auto 0 auto;
    }

    .btn_footer {
        width: 360px;
        margin: 0px 0 0 0;
    }
}



/***********https://dezanari.com/css-shiny-button/#toc2 採用**************/
.shiny-btn3 {
    display: block;
    position: relative;

    overflow: hidden;
}

.shiny-btn3:hover {
    text-decoration: none;
    color: #fff;
}

.shiny-btn3::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny3 3s ease-in-out infinite;
}

@-webkit-keyframes shiny3 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}



/***************ループスライド　https://design-levelup.com/webdesign/html-css/making-13/*******************/
.loopSlide {
    display: flex;
    width: 100%;
    height: 55px;
    overflow: hidden;
    margin: 26px 0 0 0;
}

@media (min-width: 768px) {
    .loopSlide {
        width: 600px;
        height: 55px;
        margin: 26px 0 0 0;
    }
}


.loopSlide img {
    width: auto;
    height: 100%;
}

.loopSlide img:first-child {
    animation: slide1 60s -30s linear infinite;
}

.loopSlide img:last-child {
    animation: slide2 60s linear infinite;
}

@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

/***************メインカラー設定　変数*******************/



.red {
    color: #e40000;
    font-weight: 600
}



/***********メインビジュアル*************/
#logo {
    width: 120px;
    padding: 6px 0 0 6px
}

@media (min-width: 768px) {
    #logo {
        width: 155px;
        padding: 3px 0 0 13px;
    }
}




#main_vi {
    /*background: url(../img/main.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 60vh;
    /* width: 100%; */
    position: relative;
}

@media (min-width: 768px) {
    #main_vi {
        background-size: 100%;
        height: 497px;
    }
}


#erabu {
    width: 58vw;
    margin: 5px auto 0 auto;
}

#job {
    text-align: center;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF, 0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
    margin: -12px auto 0 auto;
    font-weight: 600;
    font-size: 4vw;
}

@media (min-width: 768px) {
    #erabu {
        width: 334px;
        margin: 10px auto 0 auto;
    }

    #job {
        font-weight: 500;
        font-size: 20px;
        line-height: 1.4em;
    }
}




#main_catch {
    font-size: 16vw;
    text-align: center;
    padding: 5px;
    line-height: 0.6em;
    font-style: italic;
    background: #FCAA20;
    position: relative;
    font-weight: 600
}

#main_ritsu {
    width: 34vw;
    position: absolute;
    top: -83px;
    left: 3px;
}



.keiken {
    font-size: 50%;
    font-weight: 600;
    line-height: 1em;
}


.demo {
    font-size: 60%;
    font-weight: 800
}

.jinzai {
    font-weight: 600;
    line-height: 0.7em;
    margin: 7px auto 9px auto;
}

.he {
    font-size: 70%
}


.ken_margin {
    margin: 15px auto 10px auto !important
}


@media (min-width: 768px) {
    .ken_margin {
        margin: 10px auto 10px auto !important
    }

    #main_catch {
        font-size: 92px;
        text-align: center;
        padding: 10px;
        line-height: 0.6em;
    }

    #main_ritsu {
        position: absolute;
        width: 192px;
        top: -120px;
        left: 6px;
    }

    .fw600 {
        font-weight: 600;
    }

    .keiken {
        font-size: 50%;
        font-weight: 600;
        line-height: 1em;
    }



    .demo {
        font-size: 60%;
        font-weight: 800
    }

    .jinzai {
        font-weight: 600;
        line-height: 0.7em;
        margin: 7px auto 9px auto;
    }

    .he {
        font-size: 70%
    }
}

.yellow {
    color: #FFFF01
}

.white {
    color: #fff
}



/******************************不安******************************/
#fuan {
    width: 100%;
    margin: 20px auto 10px auto;
}

@media (min-width: 768px) {
    #fuan {
        width: 600px;
    }
}


#sankaku {
    width: 66vw;
    text-align: center;
    margin: 0px auto 50px auto
}

@media (min-width: 768px) {
    #sankaku {
        width: 350px;
        margin: 0px auto 50px auto
    }

}

/******************************不安******************************/
#reason_bg {
    background: #FFF7D4;
    position: relative;
    width: 100%;
    display: block;
    padding: 41% 0 20px 0;
    margin: 0 auto 50px auto
}

@media (min-width: 768px) {
    #reason_bg {
        padding: 200px 0 20px 0;
        margin: 0 auto 50px auto
    }

}


.reasonbox {
    border: 2px #000000 solid;
    background: #fff;
    position: relative;
    width: 92%;
    margin: 0 auto 24px auto;
    min-height: 231px;
    padding: 15px 20px;
}

@media (min-width: 768px) {
    .reasonbox {
        width: 92%;
        margin: 0 auto 24px auto;
        min-height: 431px;
        padding: 15px 20px;
    }
}



#reason_title {
    margin: 0px auto 0 auto;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    width: 91vw
}

@media (min-width: 768px) {
    #reason_title {
        width: 482px;


    }
}

.reason_no_title {
    position: absolute;
    top: -17px;
    left: 5px;
    width: 100%;
    display: flex
}

.reason_no {
    width: 110px
}

@media (min-width: 768px) {
    .reason_no {
        width: 120px
    }
}


.reason_lead1 {
    width: 432px;
    margin: 35px 0 0 6px;
}

@media (min-width: 768px) {
    .reason_lead1 {
        width: 432px;
        margin: 35px 0 0 6px;
    }
}


.reason_img1 {
    margin: 58% auto 0 auto;
    width: 98%;
}

@media (min-width: 768px) {
    .reason_img1 {
        margin: 270px auto 0 auto;
        width: 98%;
    }
}


.reason_lead2 {
    width: 96vw;
    margin: 35px 16px 0 6px;
}

@media (min-width: 768px) {
    .reason_lead2 {
        width: 402px;
        margin: 35px 0 0 6px;
    }

}


.reason_img2 {
    margin: 50% auto 15px auto;
    width: 98%;
}

@media (min-width: 768px) {
    .reason_img2 {
        margin: 230px auto 15px auto;
        width: 98%;
    }
}



.reason_lead3 {
    width: 408px;
    margin: 35px 0 0 6px;
}

@media (min-width: 768px) {
    .reason_lead3 {
        width: 408px;
        margin: 35px 0 0 6px;
    }
}


.reason_img3 {
    margin: 68% auto 0 auto;
    width: 92%;
}

@media (min-width: 768px) {
    .reason_img3 {
        margin: 295px auto 0 auto;
        width: 92%;
    }

}


/******************************ご利用料金について******************************/
#futan_box {
    width: 95%;
    margin: 0 auto;
    position: relative
}

#futan_cyu {
    font-size: 12px;
    width: 84%;
    position: absolute;
    text-align: left;
    left: 50%;
    line-height: 1.4em;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom: 57px;
}




.nayami_title {
    font-size: 1.9em;
    line-height: 1.4em;
    font-weight: 600;
    margin: 40px auto 30px auto;
    width: 100%;
}

@media (min-width: 768px) {
    .nayami_title {
        font-size: 34px;
        margin: 40px auto 25px auto;
        height: 110px;
        line-height: 1.3em;
    }
}



/******************************あなたのお悩みを専門スタッフに相談してみませんか？*****************************/
#osusume {
    font-size: 8vw;
    line-height: 1.2em;
    font-weight: 600;
}

@media (min-width: 768px) {
    #osusume {
        font-size: 38px;
        line-height: 1.2em;

    }
}


.sensei_img {
    width: 76%;
    margin: 27px auto -57px auto;
}

.sensei_mg {
    margin: 0 auto 15px auto !important
}

@media (min-width: 768px) {
    .sensei_mg {
        margin: 0 auto 5px auto !important
    }
}

.line_chance {
    background: linear-gradient(transparent 74%, #ffd08a 74%);
}

.soudan_li li {
    font-size: 5vw;
    font-weight: 600;
    text-align: left;
    margin: 0 0 16px 0;
    position: relative
}

@media (min-width: 768px) {
    .soudan_li li {
        font-size: 20px;

    }
}

#soudan_box {
    background: #f6f8f8;
    width: 90%;
    margin: 0 auto 50px auto;
    border-radius: 10px;
    padding: 70px 20px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    #soudan_box {
        width: 80%;
    }
}

.soudan_li li::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 19px;
    background: url(../img/check.svg) no-repeat;
    background-size: contain;
    position: absolute;
    /* margin-left: -23px; */
    top: 5px;
    left: -24px;
}

@media (min-width: 768px) {
    .soudan_li li::before {

        width: 24px;
        height: 23px;
        top: 4px;
        left: -29px;
    }
}

.nayami_bg {
    background: #f9f3dd;
    padding: 1px 0 0px 0;
    margin: 0px 0 0 0
}

#nayami {
    width: 90%;
    margin: 0 auto
}

.nayami_img {
    width: 90%
}

@media (min-width: 768px) {
    .nayami_bg {
        background: #f9f3dd;
        padding: 1px 0 0px 0;
        margin: 0px 0 0 0
    }

    #nayami {
        width: 100%;
        margin: 0 auto
    }

    .nayami_img {
        width: 80%
    }
}

#nayami li {
    background: url(../img/fukidashi.svg) no-repeat;
    /* width: 100%; */
    height: 63px;
    font-size: 5.5vw;
    font-weight: 600;
    line-height: 2.3em;
    text-align: center;
    margin: 0 auto 4px auto;
    background-position: center;
}

@media (min-width: 768px) {
    #nayami li {
        width: 453px;
        height: 83px;
        font-size: 28px;
        font-weight: 600;
        line-height: 2em;
        text-align: center;
        margin: 0 auto 4px auto;

    }
}


/*****フォーム修正20220511******/


fieldset {
    border-radius: 6px;
    border: none;
    background: #eef0f0;
    padding: 6px 0 6px 10px;
    margin: 15px 0 0 0;
    position: relative
}

fieldset::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 20px;
    background: url(../img/point_icon.svg) no-repeat;
    background-size: contain;
    position: absolute;
    /* margin-left: -23px; */
    top: -22px;
    left: 13px;
}

fieldset .wpcf7-list-item input[type=radio]:checked {
    color: #da3c41;
    border: 1px solid #da3c41;
}

fieldset legend {
    font-weight: 600;
    padding-left: 23px;
}

fieldset .wpcf7-list-item {
    width: 48%;
    font-size: 14px;
    border: 1px solid #ddd;
    /* line-height: 1; */
    position: relative;
    padding: 0.3em 0.5em 0.3em 0.5em;
    display: inline-block;
    /* margin-bottom: 0; */
    /* margin-left: 5px; */
    /* overflow: hidden; */
    cursor: pointer;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #FFFFFF;
    border-radius: 4px;
    margin: 0 5px 5px 0;
}

@media (min-width: 768px) {
    fieldset {
        border-radius: 6px;
        border: none;
        background: #eef0f0;
        padding: 6px 0 6px 10px;
        margin: 15px 0 0 0;
        position: relative
    }

    fieldset::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 20px;
        background: url(../img/point_icon.svg) no-repeat;
        background-size: contain;
        position: absolute;
        /* margin-left: -23px; */
        top: -22px;
        left: 13px;
    }

    fieldset .wpcf7-list-item input[type=radio]:checked+label {
        color: #da3c41;
        border: 1px solid #da3c41;
    }

    fieldset legend {
        font-weight: 600;
        padding-left: 23px;
    }

    fieldset .wpcf7-list-item {
        width: 32%;
        font-size: 16px;
        border: 1px solid #ddd;
        /* line-height: 1; */
        position: relative;
        padding: 0.3em 0.5em 0.3em 0.5em;
        display: inline-block;
        /* margin-bottom: 0; */
        /* margin-left: 5px; */
        /* overflow: hidden; */
        cursor: pointer;
        -webkit-transition: all 0.15s ease;
        transition: all 0.15s ease;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: #FFFFFF;
        border-radius: 4px;
        margin: 0 5px 5px 0;
    }
}

/*****フォーム修正20220511END******/



.nayami_bg {
    background: #f9f3dd;
    padding: 1px 0 0px 0;
    margin: 28px 0 0 0
}


.mini_mv {
    font-size: 10px;
    width: 96%;
    margin: 4px auto;
    text-align: center;
    line-height: 1.5em
}

@media (min-width: 768px) {
    .mini_mv {
        font-size: 11px;
        width: 90%;

    }
}



body {
    margin: 0 auto;
    padding: 0 0 120px 0;
    text-align: center;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #000;
    font-size: 14px;
    line-height: 1.6em;
}

@media (min-width: 768px) {
    body {
        font-size: 16px;
        padding: 0 0 120px 0;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
li,
ul,
dt,
dd,
dl {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

li,
ul {
    list-style: none;
}



.pc {
    display: none;
}

.sp {
    display: inline;
}

@media (min-width: 768px) {
    .pc {
        display: inline;
    }

    .sp {
        display: none;
    }


}


/*************20220404_追加****************************/


.company_logo {
    width: 96%;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .company_logo {
        width: 90%;
    }

}

/*****************************************/


.sub_text {
    width: 85% !important;
    margin-bottom: 30px !important;
}





img {
    vertical-align: bottom;
    width: 100%;
}

@media (min-width: 768px) {
    img {
        vertical-align: bottom;
        width: inherit;
    }
}


#wrap {
    width: 100%;
    position: relative
}

@media (min-width: 768px) {
    #wrap {
        width: 600px;
        margin: 0 auto;
    }
}





#ritsu {
    position: absolute;
    top: 130%;
    left: 10px;
}

@media (min-width: 768px) {
    #ritsu {
        top: 77px;
    }
}



.house_icon {
    width: 18%;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .house_icon {
        width: 86px;
        margin-bottom: 5px;
        margin-right: 5px;
    }
}







#sub_catch {
    font-size: 40%;
    font-weight: 600;
    text-align: left;
    color: #000000;
    font-size: 6vw;
    line-height: 1.2em;
    margin: 24% 0 2px 9px;
    text-shadow: 0 0 10px #fff;
}

@media (min-width: 768px) {
    #sub_catch {
        font-size: 34px;
        margin: 149px 0 0 17px;
    }
}

@media (max-width: 320px) {
    #sub_catch {
        margin: 3% 9px 20px 11px;
    }
}





.fv_btn img {
    width: 100%;
    transition: ease-in-out 0.3s;
    margin: 0px 0 0 0
}

.fv_btn img:hover {
    opacity: .7;
}


@media (min-width: 768px) {
    .fv_btn img {}
}


.mini {
    font-size: 11px;
    text-align: left;
    line-height: 1.4em;
    margin: 10px auto 0 auto;
    width: 100%
}

@media (min-width: 768px) {
    .mini {
        font-size: 12px;
    }
}




.w90 {
    width: 90%
}

@media (min-width: 768px) {
    .w90 {
        width: 90%;
        margin-left: 135px
    }
}

@media (max-width: 320px) {
    .w90 {
        width: 95%
    }
}

/***********メインビジュアル*************/


#menu img {
    width: 100%;
}

#menu {
    position: fixed;
    height: auto;
    bottom: 0;
    width: 100%;
    left: 0;
    transition: 0.5s;
    z-index: 2;
    display: block
}

@media screen and (min-width:768px) {
    #menu {
        width: 600px;
        height: auto;
        position: fixed;
        bottom: 0;
        transition: 0.5s;
        z-index: 2;
        display: block
    }


}


/*************************こんなことありませんか？*******************************/

.title_box {
    font-size: 7.5vw;
    border: 1px solid black;
    box-shadow: 10px 10px 0 -3px #f4d19c, 10px 10px 0 -2px black;
    position: relative;
    background: white;
    transform-style: preserve-3d;
    height: 65px;
    padding: 5% 0 0 0;
    margin: 60px auto 20px auto;
    width: 90%;
    font-feature-settings: "palt";
}

@media (min-width: 768px) {
    .title_box {
        font-size: 39px;
        box-shadow: 10px 10px 0 -3px #f4d19c, 10px 10px 0 -2px black;
        width: 100%;
        height: 100px;
        font-size: 38px;
        padding: 0;
        line-height: 2.3em;
        margin: 60px auto 20px auto;
        width: 584px;
    }
}


.yellow_dot {
    border-bottom: 2px dotted #f08300;
    line-height: 1.5em;
    font-weight: 600
}


.big_arrow {
    width: 100px;
    margin: 40px auto;
}




/*****https://gurio.work/marker-animation01/********/
.marker-animation.active {
    background-position: -100% 1em;
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .6em;
    background-position: 0 1em;
    transition: all 2s ease;
}


.shien_graph {
    margin: 15px auto;
}

/*************************ご利用料金について*******************************/
#price {
    background: url("../img/futangaku.png") no-repeat;
    width: 92%;
    margin: 80px auto 50px auto;
    padding: 37px 0 39px 0;
    color: #000
}


#price_title {
    margin: -62px auto 22px auto;
    width: 90%;
}

@media (min-width: 768px) {
    #price_title {
        margin: -62px auto 22px auto;
        width: 400px;
    }
}

#price_lead {
    color: #000
}

.price_text {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.4em;
}

.price_text span {
    font-size: 140%;
    font-weight: 600;
}


#zeroyen {
    width: 200px;
    margin: 8px auto;
}



.mt_price {
    margin-top: 17px !important;
    width: 90%;
}




@media (min-width: 768px) {

    #price_title {}

}


/*************************支援実績*******************************/

.shine1 img {
    width: 82%;
    margin: 5px auto
}

@media (min-width: 768px) {
    .shine1 img {
        width: 446px;
        margin: 5px auto
    }
}

.shien2 {
    margin: 20px auto 0 auto;
}




.shien2 img {
    width: 94%;
}

@media (min-width: 768px) {
    .shien2 img {
        width: 507px;
    }
}


.tokucho {
    background: url(../img/tokucho_bg.svg) no-repeat;
    width: 95%;
    height: 146px;
    margin: 30px auto;
    position: relative;
    background-size: contain;
}

@media (min-width: 768px) {
    .tokucho {
        width: 79%;
        height: 205px;
    }
}

.tokucho p {
    position: absolute;
    top: 12%;
    right: 6%;
    line-height: 1.45em;
    text-align: left;
    font-size: 4.3vw;
    font-weight: 500;
}

@media (min-width: 768px) {
    .tokucho p {
        top: 21px;
        right: 33px;
        line-height: 1.45em;
        font-size: 21px;
    }
}

.tokucho span {
    font-size: 120%;
    font-weight: 600;
    background: linear-gradient(transparent 74%, #ffd08a 74%);
}




#jisseki {
    border: 1px #000 solid;
    border-radius: 6px;
    font-weight: 600;
    width: 165px;
    margin: 35px auto 10px auto;
    font-size: 1.3em;
    padding: 0px 0 1px 0;
    line-height: 1.5em;
}

@media (min-width: 768px) {
    #jisseki {
        /* width:
            font-size:24px; */
        margin: 45px auto 15px auto;
    }
}


#jisseki_list li {
    position: relative;
}

@media (min-width: 768px) {
    #jisseki_list li {
        font-size: 16px;
        line-height: 1.6em
    }
}

#jisseki_list li::before {
    content: "〇";
    color: #ffd08a;
}

#jisseki_list {
    text-align: left;
    width: 90%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #jisseki_list {
        width: 60%;
    }
}




/**********************************CTA コンタクトバナー*************************************************/

.cta_banner {
    background-color: rgba(255, 250, 241, 1);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 240, 207, 1) 4px, rgba(255, 240, 207, 1) 10px);
    height: auto;
    min-height: 203px;
    padding: 20px 20px;
    margin: 50px auto;
    text-align: center;
    position: relative
}

@media (min-width: 768px) {
    .cta_banner {
        height: 245px;
        padding: 20px 20px;
        margin: 50px auto;
    }
}



#cta_text_box {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

#girl {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 41vw;
    z-index: 0;
}

@media (min-width: 768px) {
    #girl {
        width: 200px;

    }
}

.cta_sub {
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
    color: #fdac3b
}


.cta_lead {
    font-size: 20px;
    margin: 6px 0 0 0;
    font-weight: 600;
}

@media (min-width: 768px) {
    .cta_lead {
        font-size: 30px;
    }
}

.cta_btn {
    width: 96%;
    display: flex;
    margin: 12px auto 0 auto;
}

.cta_btn li {
    height: 36px;
    width: 50%;
    text-align: center;
    position: relative
}


.cta_btn li a {
    transition: ease-in-out .3s;
    text-decoration: none
}

.cta_btn li a:hover {
    opacity: .7
}

.cta_btn li a {
    display: block;
    width: 100%;
    height: 100%;
}





.tokumei {
    margin: -11px 0 0 0%;
    font-weight: 400;
    font-size: 12px;
}



.tokumei_mt {
    margin-top: 1px !important
}

@media only screen and (min-width: 768px) {
    .tokumei {
        margin: 14px 0 0 10px;
        font-weight: 400;
        font-size: 16px;
    }

    .tokumei_mt {
        margin-top: 3px !important
    }
}





.cta_btn li {
    height: 62px;
    width: 50%;
    text-align: center
}







/**********************************利用者データ***************************************/

.data_no {
    width: 110px;
    margin: 30px auto 0 auto
}

@media (min-width: 768px) {
    .data_no {
        width: 120px;
        margin: 30px auto 0 auto
    }
}


.data_nb {
    border-bottom: 1px #fdbd81 solid;
    padding: 0 0 3px 0;
    margin: 9px auto 15px auto;
    width: 92%;
}

@media (min-width: 768px) {
    .data_nb {
        border-bottom: 1px #fdbd81 solid;
        padding: 0 0 3px 0;
        margin: 9px auto 15px auto;
    }
}

.data_title {
    font-size: 6.5vw;
    font-weight: 600;
    margin-bottom: 25px
}

@media (min-width: 768px) {
    .data_title {
        font-size: 30px;
    }
}


.data_box {
    width: 92%;
    margin: 0 auto;
}

.data_img {
    width: 100%;
    margin: 15px auto 5px auto
}

@media (min-width: 768px) {
    .data_img {
        width: 100%;
        margin: 25px auto 5px auto
    }
}

.hanrei_lead {
    font-size: 16px;
    text-align: left;
    margin: 0 auto 0px auto;
    width: 90%
}

@media (min-width: 768px) {
    .hanrei_lead {
        font-size: 16px;
        text-align: left;
        margin: 0 auto 0px auto;
    }
}


.data_img_en {
    width: 60%;
    margin: 10px auto
}

@media (min-width: 768px) {
    .data_img_en {
        width: 50%;
        margin: 10px auto 20px auto
    }

}

.hanrei {
    display: flex;
    /* margin-bottom: 6px; */
    width: 92%;
    margin: 0 auto 6px auto;
}

.hanrei_box {
    width: 25%;
    background: #ffd08a;
    font-weight: 600;
    margin: 0 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .hanrei_box {
        height: 52px;
    }
}


.light_blue {
    background: #ffddaa !important
}

.hanrei_text {
    width: 75%;
    text-align: left;
    display: flex;
    align-items: center;
}





.tasuu {
    width: 90%;
    text-align: right;
}


.waku {
    background: url(../img/waku_sp.svg) no-repeat;
    background-size: contain;
    text-align: center;
    margin: 0 auto;
    background-position: center;
    font-size: 3.7vw;
    font-weight: 600
}

@media (min-width: 768px) {
    .waku {
        background: url(../img/waku.svg) no-repeat;
        text-align: center;
        margin: 0 auto;
        font-size: 18px;
        background-size: 212px;
        padding: 9px 0;
        height: 78px;
        background-position: center;
    }
}


.sien_point {
    font-family: 'Baloo Thambi 2', cursive;
    font-weight: 600;
    color: #f08300;
    font-size: 11vw;
    margin: 7px 0 0 0;
}

.notosans {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
}


@media (min-width: 768px) {
    .sien_point {
        font-size: 50px;
        margin: 7px 0 0 0;
    }
}


.shien_chu {
    margin: 0px auto 0 auto;
    text-align: center !important;
    font-size: 10px
}

@media (min-width: 768px) {
    .shien_chu {
        margin: 0px auto 0 auto;
        font-size: 11px
    }
}



/*************************利用者の声*******************************/
#voice_bg {
    background: url("../img/stripe_bg.jpg");
    background-size: cover;
    width: 100%;
    display: inline-block;
    padding: 20px 20px 20px 20px;
    margin-top: 60px;
}

#voice_title {
    width: 96%;
    margin: 24px auto 33px auto;
}

.voice_box {
    width: 96%;
    margin: 0 auto;
    background: #fff;
    padding: 18px 9px;
    margin: 0 auto 20px auto
}

@media (min-width: 768px) {
    .voice_box {
        width: 96%;
        padding: 24px 15px;
        margin: 0 auto 20px auto
    }
}


.voice_photo_title {
    display: flex;
    align-items: center;
    width: 94%;
    margin: 0 0 10px 16px;
}


.voice_title_box {
    text-align: left;
    font-size: 13px;
    line-height: 1.3em;
}

@media (min-width: 768px) {
    .voice_title_box {
        font-size: 16px;
    }
}

.voice_img img {
    width: 110px;
    margin: 0 10px 0 0
}

.voice_lead {
    /*color: #F08300;*/
    font-weight: 600;
    font-size: 5vw;
    line-height: 1.3em;
    margin-bottom: 2px;
}

@media (min-width: 768px) {
    .voice_lead {
        font-size: 24px;
    }
}


.title_mb {
    margin-bottom: 15px;
}

.voice_text {
    text-align: left;
    line-height: 1.7em;
    width: 94%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .voice_text {
        width: 94%;
    }
}

.fw {
    font-weight: 600;
}

.dot {
    border-bottom: 2px dotted #a4aeae;
    width: 87%;
    margin: 10px auto
}



/*************************就労移行支援の流れ******************************/
.flow_lead {
    width: 90%;
    margin: 0 auto
}

#flow img {
    width: 95%;
    margin: 0 auto;
    position: relative
}

#flow2,
#flow4,
#flow6,
#flow8 {
    position: relative
}

.support_box {
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 1.4em;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    font-size: 6vw;
    font-weight: 600;
    width: 95%;
}

.support_box p {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.6em;
}

@media (min-width: 768px) {
    .support_box {
        top: 0;
        left: 50%;
        line-height: 1.4em;
        font-size: 34px;
        width: 90%;
    }

    .support_box p {
        font-size: 16px;
        font-weight: normal;
        line-height: 1.6em;
    }

}




/*************************manabyスタッフの声*******************************/



.staff_box {
    width: 96%;
    padding: 15px 15px 0 15px;
    margin: 0 auto 17px auto;
}

@media (min-width: 768px) {
    .staff_box {
        width: 89%;
        padding: 15px 15px 0 15px;
        margin: 0 auto 17px auto;
    }

}


.staff_img {
    width: 95%;
    margin: 0 auto 19px auto
}

@media (min-width: 768px) {
    .staff_img {
        width: 90%;
        margin: 0 auto 19px auto
    }
}


.voice_img {
    width: 110px;
    margin: 0 10px 0 0
}

.staff_border {
    background: linear-gradient(transparent 74%, #fff49a 74%);
}

/*************************FAQ*******************************/


.dl_mt {
    margin-top: 34px !important;
}

dl.faq {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-top: 2px dotted #a4aeae;
    padding: 7px 0 0 0;
    line-height: 1.4em
}

@media (min-width: 768px) {
    dl.faq {
        width: 85%;
        padding: 7px 0 0 0;
        line-height: 1.5em
    }
}


.last_dl {
    border-bottom: 2px dotted #a4aeae;
    padding-bottom: 5px !important
}


dl.faq dt {
    width: 10%;
    margin: 10px 0 0 0
}

dl.faq dd {
    width: 90%;
    text-align: left;
    margin: 7px 0 0 0
}

.shitsumon {
    font-weight: 600;
}

dl.faq .q {
    width: 5vw;
    margin: 7px 10px 0 0
}

dl.faq .a {
    width: 5vw;
    margin: 7px 10px 0 0
}

@media (min-width: 768px) {
    dl.faq .q {
        width: 21px;
        margin: 8px 10px 0 0
    }

    dl.faq .a {
        width: 21px;
        margin: 8px 10px 0 0
    }
}


dl.faq .dl_mb {
    margin-bottom: 12px;
}


/*****************************************事業所紹介***********************************************/
#office_bg {
    background: url(../img/japan_map.png) no-repeat;
    background-size: 100%;
    background-color: #f6f2ef;
    background-position: top center;
    min-height: 58vh;
    margin: 50px 0;
    padding: 10px 0 35px 0;
}

.bg_padding {
    padding: 10px 0 1px 0 !important;
}

@media (min-width: 768px) {
    #office_bg {
        min-height: 500px;
        background-size: 100%;
        margin: 70px 0;
        padding: 10px 0 25px 0;
    }
}

/*********************************************/







.office_lead {
    text-align: center;
}

#office_wrap {
    width: 90%;
    margin: 0 auto;
}

.office_title {
    font-weight: 500;
    font-size: 7vw;
    padding: 30px 0 20px 0;
    position: relative;
}

@media (min-width: 768px) {
    .office_title {
        font-size: 26px;
        padding: 40px 0 20px 0;
    }
}




.area_name {
    font-size: 5.2vw;
    color: #5b5b5b;
    font-weight: 600;
    border-bottom: 2px dotted #a4aeae;
    text-align: center;
    padding: 10px 0 5px 0;
    margin: 7px 0 8px 0
}

@media (min-width: 768px) {
    .area_name {
        font-size: 22px;
        padding: 10px 0 5px 0;
        margin: 10px 0 8px 0
    }
}

.kansai {
    margin-top: 7px;
}

@media (min-width: 768px) {
    .kansai {
        margin-top: -10px;
    }
}

.area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.area:after {
    content: "";
    display: block;
    width: 32%;
    /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.area li {
    background: #fff;
    border: 1px #000 solid;
    color: #000;
    font-size: 4vw;
    font-weight: 600;
    width: 49%;
    padding: 2px 10px 4px 10px;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    margin: 0 0 6px 0;
    position: relative;
    transition: ease-in-out 0.3s;
    box-shadow: 0 3px 7px 0 rgb(0 0 0 / 30%);
}

@media (min-width: 768px) {
    .area li {
        font-size: 4vw;
        width: 32%;
        padding: 4px 10px;

    }
}


.area li:hover {
    opacity: .7;
}

@media (min-width: 768px) {
    .area li {
        font-size: 18px;
    }
}

@media (max-width: 320px) {
    .area li {
        padding: 2px 10px 4px 10px;
    }
}

.area li::after {
    content: "";
    display: inline-block;
    width: 10px;
    /* スマホで見た時の幅 */
    height: 10px;
    /* スマホで見た時の高さ */
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
    position: absolute;
    right: 5px;
    top: 34%
}




/*************************お問い合わせ*******************************/
.contact_title {
    font-weight: 600;
    font-size: 6.5vw;
    padding: 0px 0 20px 0;
    position: relative;
    padding-left: 31px;
}

@media (min-width: 768px) {
    .contact_title {
        font-size: 30px;
        padding-left: 34px;
        margin-top: 9px;
    }
}

.contact_title::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 24px;
    background: url(../img/main_title_icon.svg) no-repeat;
    background-size: contain;
    position: absolute;
    margin-left: -34px;
    top: 3px
}

@media (min-width: 768px) {
    .contact_title::before {
        width: 30px;
        height: 27px;
    }
}

.line_text {
    font-size: 4vw;
    font-weight: 500;
    margin: 10px 0 4px 0
}

@media (min-width: 768px) {
    .line_text {
        font-size: 20px;
        margin: 10px 0 7px 0
    }
}

.green {
    color: #06c655;
    font-weight: 600;
    font-family: 'Baloo Thambi 2', cursive;
    font-size: 130%
}


.line_btn img {
    width: 100%;
    margin: 0 auto 30px auto;
    transition: ease-in-out 0.3s
}

.line_btn img:hover {
    opacity: .7;
}

@media (min-width: 768px) {
    .line_btn img {
        width: 90%;
        margin: 0 auto 50px auto;
    }
}


#contact_wrap {
    width: 90%;
    margin: 0 auto;
}


/*************************会社概要*******************************/

.office_table dt,
.office_table dd {
    text-align: left;

}

.office_table {
    width: 90%;
    margin: 0 auto;
}

dl.office_table {
    border-top: 2px dotted #a4aeae;
    line-height: 1.4em;
    font-size: 13px
}

.office_table dt {
    font-weight: 600;
    padding: 10px 8px 2px 8px
}

@media (min-width: 768px) {
    dl.office_table {
        font-size: 14px
    }

    .office_table dt {
        font-weight: 600;
        padding: 10px 16px 2px 16px;
    }
}



.office_table dd {
    border-bottom: 2px dotted #a4aeae;
    padding: 0 8px 10px 8px
}

@media (min-width: 768px) {
    .office_table dd {
        border-bottom: 2px dotted #a4aeae;
        padding: 0 16px 10px 16px;
    }
}

copy {
    font-size: 12px;
    padding: 20px 0 0 0;
    display: block;
}


/*************************フォーム *******************************/

.required {
    background: #d30000;
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
    height: 18px;
    line-height: 17px;
    padding: 0 4px;
    margin: 0px 0 0 5px;
}

.new_form {
    text-align: left;
    border-top: 2px dotted #a4aeae;
    margin-top: 20px
}

.new_form dt {
    padding: 12px 8px 2px 11px;
    display: flex;
    align-items: center;
}

.new_form dt p {
    font-weight: 600;
}

.new_form dd {
    padding: 0 8px 14px 8px;
    border-bottom: 2px dotted #a4aeae;
}

select {
    outline: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

select option {
    background-color: #fff;
    color: #333;
}

select {
    -webkit-appearance: none;
    appearance: none;
    /* デフォルトのスタイルを無効 */
}

select::-ms-expand {
    display: none;
    /* デフォルトのスタイルを無効(IE用) */
}

/* セレクトボックスの矢印デザイン変更 */
.selectbox {
    position: relative;
}

.selectbox::before {
    border-bottom: 4.5px solid black;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    position: absolute;
    right: 9px;
    top: 10px;
    width: 0;
}

.selectbox::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid black;
    content: "";
    position: absolute;
    right: 9px;
    top: 21px;
    width: 0;
}


input,
select,
textarea {
    border: none;
    background: #eef0f0;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 4px 2px 2px 2px;
    vertical-align: middle;
    width: 100%;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
}

input[type=radio] {
    display: inline;
    width: auto;
    margin: -2px 0 0 0;
}

input[type=checkbox] {
    display: inline;
    width: auto;
    margin: -3px 0 0 0;
}

label {
    display: inline;
}


.agreement {
    margin: 15px 0;
}

.agreement p a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
    border-bottom: 2px #f08300 dotted;
    transition: ease-in-out 0.3s
}

.agreement p a:hover {
    opacity: .7;
}

.policy {
    position: relative;
    transition: ease-in-out .3s;
    cursor: pointer;
    padding-left: 23px;
    margin: 3px 0;
}

.policy:hover {
    opacity: .7;
}

.policy::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 18px;
    background: url(../img/link_icon.svg) no-repeat;
    background-size: contain;
    position: absolute;
    margin-left: -23px;
    top: 6px;
}

#submit {
    margin: 0 auto;
    width: 100%;
    height: 66px;
}

@media (min-width: 768px) {
    #submit {
        margin: 0 auto;
        width: 419px;
        height: auto;
    }

}

.wpcf7 .wpcf7-submit {
    background: url('https://manaby.co.jp/cms/wp-content/uploads/2024/10/送信ボタン.png') no-repeat center center;
    background-size: contain;
    /* 画像をボタンサイズに合わせる */
    width: 100%;
    height: 77px;
    margin: 20px auto 0 auto;
    display: block;
    opacity: 1;
    cursor: pointer;
    transition: ease-in-out .3s;
    text-indent: -9999px;
    /* テキストを非表示 */
    border: none;
    /* ボタンの枠線を消す */
}

.wpcf7 .wpcf7-submit:hover {
    opacity: .7;
}

@media (min-width: 768px) {
    .wpcf7 .wpcf7-submit:disabled {
        width: 85%;

    }

    .wpcf7 .wpcf7-submit {
        width: 85%;
    }
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0px 12px 0 0.3em;
}


.wpcf7-spinne {
    display: none;
}

.wpcf7-spinner::before {
    display: none;
}

/*************************下から出てくるフッターボタン *******************************/
.footer_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0px 18px 0px;
}



.footer_menu li {
    margin: 0 3px;
    position: relative
}

.footer_menu li a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff
}

.girl {
    width: 18%;
}

.girl img {
    margin-bottom: -51%;
}


.tel_sp {
    width: 73%;
    height: 10vh;
    margin-top: 5px !important;
    display: flex;
    /*display: contents*/
    /*box-shadow: 0 3px 7px 0 rgb(0 0 0 / 30%);*/
}

.sp_time {
    font-size: 10px;
    margin: 26px 0 0 32px;
    line-height: 1.1em;
    text-align: left;
}

.sp_time2 {
    /******営業時間が二つあるとき*********/
    margin-top: 21px;
}


.contact_sp {
    width: 38%;
    height: 5vh;
    margin-top: 11px !important;
    box-shadow: 0 3px 7px 0 rgb(0 0 0 / 30%);
}


@media (min-width: 768px) {

    .footer_menu_pc {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 4px 0px 4px;
    }

    .footer_menu_pc li {
        margin: 0 3px;
        position: relative;

    }


    .girl {
        width: 90px;
    }

    .girl img {
        margin-bottom: 0;
    }


    .tel_pc {
        width: 360px;
        height: 100px;
        /*box-shadow: 0 3px 7px 0 rgb(0 0 0 / 30%);*/
    }


    .contact_pc {
        width: 225px;

        height: 60px;

        transition: ease-in-out 0.3s;
        box-shadow: 0 3px 7px 0 rgb(0 0 0 / 30%);
    }

    .contact_pc:hover {
        opacity: .7
    }

    .contact_pc a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

/*=========https://yasuko213.jp/blog/?p=284===============*/


footer {
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    z-index: 0;
    /*background:rgba(255,255,255,.9);*/
    background: url("../img/footer_bg.png") no-repeat;
    z-index: 100;
    padding: 28px 0 0px 0
}

@media (min-width: 768px) {
    footer {
        width: 600px;
        margin: 0 auto;
        left: 0;
        right: 0;
        padding: 28px 0 0px 0
    }

    .pc_footer {
        width: 100%;
        padding: 25px 10px 0 10px;
    }

}



a[href*="tel:"] {
    pointer-events: initial;

}

@media only screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
    }
}

.transparent-black-background {
    background-color: rgba(0, 0, 0, 0.5);
    /* 背景が透過した黒 */
}

.image-hover-effect img {
    transition: 0.3s ease;
    /* ホバー時のエフェクトがスムーズに */
}

.image-hover-effect img:hover {
    filter: brightness(120%);
    /* 画像を明るくして白っぽくする */
}