@charset "utf-8";



/* 色の変数　　color: var(--green); */
:root {
    --white: #fff;
    --black: #000;
    --green: #00a100;
    --lightgreen: #b9ee4a;
    --blue: #038ce1;
    --lightblue: #97eeff;
    --pink: #ff00af;
    --yellow: #fff232;
}



/* フォントの変数　 */
:root {
    /* 書式 */
    --notoSans: "Noto Sans JP", sans-serif;

    /* サイズ */
    --size17: 1.7rem;
    --size18: 1.8rem;
    --size19: 1.9rem;
    --size21: 2.1rem;
    --size24: 2.4rem;
    --size26: 2.6rem;
    --size28: 2.8rem;
    --size38: 3.8rem;
    --size40: 4rem;

    /* ウェイト */
    --weight700: 700;
    --weight500: 500;


    /* 行間 */
    --lineHight14: 1.4;
    --lineHight15: 1.5;
    --lineHight175: 1.75;
    --lineHight184: 1.84;
    --lineHight194: 1.94;

    /* 文字間 */
    --fontSpace005: 0.05em;
    --fontSpace008: 0.08em;
}

/* トランジションの変数　 */
:root {
    --transitionBase: .4s;
}

/* 角丸の変数　 */
:root {
    --borderRadius50: 50px;
    --borderRadius25: 25px;
    --borderRadius10: 10px;
}

@media screen and (max-width:1024px) {
    :root {
        --size40: 3.2rem;
        --size19: 1.8rem;
    }
}


@media screen and (max-width:768px) {
    :root {
        --size17: 1.5rem;
        --size18: 1.6rem;
        --size19: 1.7rem;
        --size21: 1.9rem;
        --size24: 2.2rem;
        --size26: 2.3rem;
        --size28: 2.5rem;
    }
}

@media screen and (max-width:615px) {
    :root {
        --size40: 2.8rem;
        --size28: 2.3rem;
    }
}

@media screen and (max-width:480px) {
    :root {
        --size18: 1.5rem;
        --size19: 1.6rem;
        --size21: 1.75rem;
        --size24: 1.8rem;
        --size26: 1.9rem;
        --size28: 2rem;
        --size40: 2.4rem;
    }

}






/* ーーーーーーーーーーーーーーー
common
ーーーーーーーーーーーーーーー */
body {
    color: var(--black);
    font-family: var(--notoSans);
    font-weight: var(--weight700);
    font-size: var(--size18);
}

.body__inner {
    overflow: hidden;
}


p {
    text-align: justify;
}

.section__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.section__ttl {
    position: relative;
    font-size: var(--size40);
    letter-spacing: var(--fontSpace008);
    line-height: var(--lineHight175);
    text-align: center;
}

.section__ttl::before {
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;

}

.marker {
    display: inline;
    background: linear-gradient(transparent 70%, #f0db00 70%, #f0db00 90%, transparent 90%);
    padding-bottom: 3px;
}


.pink {
    color: var(--pink);
}

.line-pink {
    border-bottom: 3px solid var(--pink);
}

.green {
    color: var(--green);
}

.line-green {
    border-bottom: 3px solid var(--green);
}

.line-black {
    border-bottom: 1px solid var(--black);
}

.br1200 {
    display: none;
}



@media screen and (max-width:1200px) {
    .br1200 {
        display: block;
    }
}

@media screen and (max-width:1024px) {
    .push01 {
        display: inline-block;
    }

    .none01 {
        display: none;
    }

    .section__inner {
        padding: 0 30px;
    }
}

@media screen and (max-width:768px) {
    .push02 {
        display: inline-block;
    }

    .none02 {
        display: none;
    }

    .section__ttl {
        line-height: var(--lineHight15);
    }

}

@media screen and (max-width:480px) {
    .push03 {
        display: inline-block;
    }

    .none03 {
        display: none;
    }

    .section__inner {
        padding: 0 20px;
    }

}

/* ーーーーーーーーーーーーーーー
btn
ーーーーーーーーーーーーーーー */

.btn {
    display: inline-block;
    position: relative;
    text-align: center;
    border: 3px solid var(--black);
    font-size: var(--size17);
    color: var(--white);
    border-radius: var(--borderRadius50);
    background-color: var(--black);
    transition: var(--transitionBase);
}

.btn-arrow:hover {
    background: var(--white);
    color: var(--black);
}

.btn-arrow::after {
    position: absolute;
    content: "";
    width: 10px;
    height: calc(20px / 2 * tan(60deg));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    background-color: var(--white);
    transition: var(--transitionBase);
}

.btn-arrow:hover::after {
    background-color: var(--black);
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .btn-arrow::after {
            height: calc(20px / 2 * 1.732);
            /* Safari用のスタイル */
        }
    }
}


/* ーーーーーーーーーーーーーーー
header
ーーーーーーーーーーーーーーー */
.logoBox {
    display: flex;
    align-items: center;
}

.header__logo {
    width: clamp(100px, 15.63vw, 350px);
}

.logo__text {
    font-size: clamp(12px, 1.06vw, 20px);
}


.headerNav-sp,
.hamburger {
    display: none;
}


.header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 5px 18px 25px;
    z-index: 90;
    transition: var(--transitionBase);
}

.header.js-active {
    background-color: var(--white);
}


.headerNav__list--pc {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.headerNav__item--pc {
    font-size: clamp(14px, 1.13vw, 20px);
    margin-left: clamp(20px, 2.2vw, 45px);
    position: relative;
}

.headerNav__item--pc:first-child {
    margin-left: 0;
}

.headerNav__item--pc:not(:last-child):before,
.headerNav__item--sp:not(:last-child):before {
    position: absolute;
    content: "";
    height: 3px;
    width: 0%;
    background-color: #63e000;
    transition: var(--transitionBase);
    left: 0;
    top: 115%;
}

.headerNav__item--pc:not(:last-child):hover::before,
.headerNav__item--sp:not(:last-child):hover::before {
    width: 100%;
}

.headerNav__item--pc .btn {
    padding: 20px 0;
    width: clamp(300px, 21.9vw, 400px);
}


@media screen and (max-width:1024px) {
    .headerNav-pc {
        display: none;
    }

    .header {
        position: relative;
        padding: 0;
    }

    .logoBox {
        position: absolute;
        top: 18px;
        left: 25px;
    }

    .headerNav-sp {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        transition: var(--transitionBase);
        background-color: rgba(0, 0, 0, 0.3);
    }

    .active .headerNav-sp {
        right: 0;
    }

    .headerNav__list--sp {
        width: 45%;
        height: 100vh;
        margin: 0 0 0 auto;
        padding: clamp(80px, 9.77%, 100px) clamp(10px, 1.96%, 20px) 0 clamp(25px, 3%, 50px);
        background-color: var(--white);
    }

    .headerNav__item--sp {
        margin-top: max(10%, 20px);
        position: relative;
        font-size: max(3vw, 18px);
    }

    .headerNav__item--sp:first-child {
        margin-top: 0;
    }

    .headerNav__item--sp:last-child {
        margin-top: max(25.59%, 45px);
    }

    .headerNav__item--sp:not(:last-child) {
        width: fit-content;
    }

    .headerNav__item--sp .btn {
        width: 100%;
        padding: 20px;
    }

    .hamburger {
        display: block;
        position: fixed;
        top: 9px;
        right: 1%;
        width: 55px;
        height: 55px;
        cursor: pointer;
        z-index: 100;
        transition: var(--transitionBase);
        background-color: var(--black);
    }

    .line {
        position: absolute;
        width: 70%;
        height: 2px;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .4s;
        background-color: var(--white);
    }

    .line:nth-of-type(1) {
        top: 25%;
    }

    .active .line:nth-of-type(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .line:nth-of-type(2) {
        top: 50%;
    }

    .active .line:nth-of-type(2) {
        opacity: 0;
    }

    .line:nth-of-type(3) {
        top: 75%;
    }

    .active .line:nth-of-type(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

@media screen and (max-width:768px) {
    .headerNav__item--sp .btn {
        font-size: 1.5rem;
        padding: 15px 0;
    }

    .headerNav__item--sp .btn-arrow::after {
        width: 7px;
        height: calc(16px / 2 * tan(60deg));
    }

    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            .headerNav__item--sp .btn-arrow::after {
                height: calc(16px / 2 * 1.732);
                /* Safari用のスタイル */
            }
        }
    }
}

@media screen and (max-width:600px) {
    .headerNav__list--sp {
        width: 65%;
    }
}


@media screen and (max-width:480px) {
    .headerNav__list--sp {
        width: 70%;
    }

    .hamburger {
        width: 45px;
        height: 45px;
    }

    .header {
        padding: 0;
    }
}

@media screen and (max-width:390px) {
    .headerNav__list--sp {
        width: 80%;

    }
}

@media screen and (max-width:330px) {
    .headerNav__item--sp .btn {
        font-size: 1.4rem;
    }
}



/* ーーーーーーーーーーーーーーー
mv
ーーーーーーーーーーーーーーー */



/* ーーーーーーーーーーーーーーー
service
ーーーーーーーーーーーーーーー */
.service {
    position: relative;
    padding: clamp(40px, 4.1%, 60px) 0 0 0;
    background: linear-gradient(transparent 0%,
            transparent 15.5%,
            var(--lightblue) 15.5%,
            var(--lightblue) 100%);
}

.service::before {
    position: absolute;
    content: "";
    background-image: url(../img/main/bg-lightblue01.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: calc(100% - 84.5%);
    left: 50%;
    transform: translate(-50%, -100%);

    width: 100%;
    height: 28.326vw;
    z-index: -1;
}

.service__ttl {
    margin-bottom: 3.5%;
}

.service__ttl::before {
    background-image: url(../img/main/ttl-back01.png);
    width: 906px;
    height: 139px;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.service__topTxt {
    text-align: center;
    font-size: var(--size24);
    line-height: var(--lineHight175);
}

.service__topTxt02 {
    margin: max(2px, 10px) 0 max(30px, 25px);
    font-size: var(--size21);

}


@media screen and (max-width:1024px) {
    .service__ttl::before {
        width: 600px;
        height: 93px;
        top: 32%;
    }

}

@media screen and (max-width:615px) {

    .service__ttl::before {
        width: max(100%, 320px);
        height: 100%;
    }


}

@media screen and (max-width:480px) {}


/* ーーーーーーーーーーーーーーー
service(merit01)
ーーーーーーーーーーーーーーー */


.meritBox__item {
    border: 3px solid var(--black);
    margin-bottom: 25px;
    padding: max(4.5%, 20px) 9% max(5%, 30px);
    background-color: var(--white);
    border-radius: var(--borderRadius25);
}


.meritBox__item:last-child {
    margin-bottom: 0;
}

.meritBox__number {
    width: min(100%, 169px);
    padding: 4px 0;
    display: block;
    text-align: center;
    margin: 0 auto max(3.7%, 15px);
    border-radius: var(--borderRadius50);
    font-size: var(--size26);
    font-weight: var(--weight500);
    background-color: var(--black);
    color: var(--white);
}

.meritBox__ttl {
    font-size: 4.8rem;
    text-align: center;
}

.meritBox__ttl .small {
    font-size: 2.5rem;
}

.meritBox__repletion {
    text-align: center;
    margin: max(2.5%, 10px) 0 max(4%, 15px);
    font-size: var(--size24);
    line-height: var(--lineHight175);
}


.meritBox__txt {
    font-size: var(--size21);
    line-height: var(--lineHight175);
}

.meritBox__txt--center {
    text-align: center;
}


.meritBox__comment--sub {
    font-size: var(--size28);
    margin-top: 20px;
}


.meritBox__comment {
    font-size: var(--size28);
    max-width: 371px;
    text-align: center;
    padding: 5.5px 0px;
    margin: 10px 0 20px;
    background-color: var(--lightgreen);
    border-radius: var(--borderRadius50);
}

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

.meritFlex__right {
    width: max(60%, 200px);
    margin-left: 15px;
}


.meritExample {
    display: flex;
    border: 3px solid var(--black);
    border-radius: var(--borderRadius25);
    overflow: hidden;
    margin: 15px 0;
}

.meritExample__left {
    position: relative;
    width: min(100%, 180px);
    border-right: 3px solid var(--black);
    background-color: var(--lightgreen);
}

.meritExample__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53px;
    height: 53px;
    font-size: 2.9rem;
    border: 2.7px solid var(--black);
    border-radius: var(--borderRadius50);
    background-color: var(--yellow);
}

.meritExample__right {
    width: min(100%, 670px);
    padding: max(3.7%, 15px) max(3.1%, 10px) max(1.9%, 8px) max(8%, 30px);
}

.meritExample__center {
    text-align: center;
}

.checkTxt {
    position: relative;
}

.checkTxt::before {
    position: absolute;
    content: "";
    background-image: url(../img/main/example-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0%;
    right: 101%;
    /* transform: translateY(-50%); */
    width: 26px;
    height: 22px;
}

.meritExample__item:not(:last-child) {
    margin-bottom: 10px;
}

.meritExample__item {
    font-size: var(--size21);
    line-height: var(--lineHight15);
}

.meritExample__small {
    font-size: var(--size17);
    text-align: right;
}

.meritBox__subTtl {
    margin: 45px 0 20px;
    padding: 5px;
    text-align: center;
    border-radius: var(--borderRadius50);
    font-size: var(--size28);
    font-weight: var(--weight500);
    background-color: var(--black);
    color: var(--white);
}

.meritBox__subTtl:nth-of-type(2) {
    margin-bottom: 40px;
}


.meritIconFlex {
    display: flex;
}

.meritIconFlex.--02 {
    margin-bottom: 35px;
}

.meritIconFlex__icon {
    min-width: 120px;
    width: 120px;
    margin-right: 7.98%;
}

.meritIconFlex__icon.--02 {
    margin-right: 5.53%;
}

.meritIconFlex__item {
    position: relative;
}

.meritIconFlex__item:not(:last-child) {
    margin-bottom: 15px;
}

.meritIconFlex__item::before {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    right: 100%;
}

.meritIconFlex__item:nth-of-type(1)::before,
.meritIconFlex__item:nth-of-type(2)::before {
    content: "〇";
}

.meritIconFlex__item:nth-of-type(3)::before,
.meritIconFlex__item:nth-of-type(4)::before {
    content: "・";
}



.housing:first-of-type {
    margin-bottom: 45px;
}

.greenIcon__ttl {
    position: relative;
    font-size: var(--size24);
    margin: 0 0 15px 75px;
    padding-bottom: 10px;
}

.greenIcon__ttl::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    right: calc(100% + 75px);
    top: 50%;
    transform: translate(100%, -55%);

    background-image: url(../img/main/icon-green01.svg);
}

.greenIcon__ttl.second::before {
    background-image: url(../img/main/icon-green02.svg);
}



.advice__list {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.advice__item {
    width: calc((100% - 90px)/3);
    display: flex;
    flex-direction: column;
}

.advice__icon {
    width: min(100%, 70px);
    margin: 0 auto 10px;
}


.advice__txt {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: var(--lineHight15);
    font-size: var(--size17);
}





/* ーーーーーーーーーーーーーーー
service(merit02)
ーーーーーーーーーーーーーーー */

.meritIconFlex__txt {
    max-width: 630px;
}

.merit02__list {
    margin: 20px 0 60px;
}

.merit02__item {
    font-size: var(--size21);
    line-height: var(--lineHight14);
}

.merit02__item:not(:last-child) {
    margin-bottom: 20px;
}

.merit02__item::before {
    transform: translateY(10%);
}

.merit02__item:nth-of-type(2) {
    margin-bottom: 15px;
}

.merit02__item:nth-of-type(3) {
    margin-top: 20px;
}

.merit02__item--sub {
    position: relative;
    margin: 0 0 0 22px;
    line-height: var(--lineHight15);
}

.merit02__item--sub::before,
.merit02__item--sub::after {
    position: absolute;
    content: "";
    top: 0;
}

.merit02__item--sub::before {
    width: 20px;
    height: 20px;
    right: 100.5%;
    transform: translateY(15%);
    background-color: var(--lightgreen);
    border-radius: var(--borderRadius50);
}

.merit02__item--sub::after {
    width: 5px;
    /* beforeの/3 */
    height: calc(9px / 2 * tan(60deg));
    /* pxはbeforeの/2 */
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: calc(100.5% + 7px);
    /* pxはbeforeの/2 - 1 */

    transform: translateY(120%);
    background-color: var(--black);
}



.advisorBox {
    position: relative;
    width: min(100%, 270px);
    margin: 0 auto;
    background-color: var(--lightgreen);
    border-radius: var(--borderRadius25);
    padding: 30px 5px;
}

.advisorBox::before,
.advisorBox::after {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
}

.advisorBox::before {
    background-image: url(../img/main/advisor-01.png);
    width: 160px;
    height: 224px;
    left: 0;
    bottom: 0;
    transform: translate(-82%, 3%);
}

.advisorBox::after {
    background-image: url(../img/main/advisor-02.png);
    width: 178px;
    height: 214px;
    right: 0;

    transform: translate(77%, 3.5%);
}


.advisorBox__txt {
    text-align: center;
    font-size: 2.5rem;
}

.advisorBox__icon {
    width: min(100%, 40px);
    margin: 15px auto;
}

.reform__txt {
    margin-bottom: 7.4%;
}

.reformBanner {
    width: min(100%, 600px);
    margin: 0 auto 25px;
}

.reform__list {
    /* display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto); */

    margin-left: 20px;
    column-count: 2;
}

.reform__item {
    position: relative;
    font-size: var(--size21);
    line-height: 1.71;
    margin-bottom: 10px;
    text-align: justify;
}

.reform__item::before {
    position: absolute;
    content: "・";
    right: 100%;
}


.reform__txt--right {
    position: relative;
    width: fit-content;
    margin: 0 0 6.76% auto;
}

.reform__txt--right::before {
    position: absolute;
    content: "";
    background-image: url(../img/main/icon-green04.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 21px;
    top: 50%;
    left: -7%;
    transform: translateY(-60%);
}

.reform__list02 .reform__item {
    margin-left: 20px;
}






@media screen and (max-width:1024px) {
    .meritBox__ttl {
        font-size: 3.8rem;
    }
}



@media screen and (max-width:768px) {


    .meritFlex {
        flex-direction: column;
    }

    .meritFlex__right {
        margin: max(9%, 30px) auto 0;
        margin-top: 2vw;
        width: 85%;
        max-width: 350px;
    }


    .meritBox__item {
        padding: 8vw 5vw 8vw;
    }

    .meritBox__repletion {
        font-size: var(--size21);
    }

    .meritExample__small {
        margin: 10px 0 0 0;
    }

    .reform__item,
    .reform__txt--right {
        margin-bottom: 5px;
        font-size: 1.7rem;
    }

    .reform__txt--right {
        margin: 10px 0 20px auto;
    }

    .reform__txt--right::before {
        width: 20px;
        height: 16.8px;
        transform: translateY(-52%);
    }

    .searchBanner__btnInner:after {
        display: none;
    }

}

@media screen and (max-width:700px) {

    .advisorBox::before {
        width: 22vw;
        height: 31vw;
        transform: translate(-60%, 4%);
    }

    .advisorBox::after {
        width: 24vw;
        height: 29vw;
        transform: translate(64%, 5%);
    }
}

@media screen and (max-width:600px) {
    .meritBox__ttl {
        font-size: 3.1rem;
    }

    .meritBox__subTtl {
        margin: 30px 0 20px;
    }

    .meritIconFlex {
        flex-direction: column;
    }

    .meritIconFlex__icon,
    .meritIconFlex__icon.--02 {
        margin: 0 auto 20px;
    }

    .meritExample {
        flex-direction: column;
        align-items: center;
    }

    .meritExample__left {
        padding: 30px 0;
        width: 100%;
        border-right: none;
        border-bottom: 3px solid var(--black);
    }

    .meritExample__circle {
        width: 35px;
        height: 35px;
        font-size: 2rem;
    }


    .meritExample__right {
        padding: 8% max(3.1%, 10px) max(1.9%, 8px) max(8%, 30px);
    }

    .merit02__list {
        margin: 10px 0 40px;
    }

    .checkTxt::before {
        width: 18px;
        height: 16px;
        transform: translateY(28%);
    }

    .merit02__list {
        padding: 0 25px;
    }

    .merit02__item {
        font-size: 1.7rem;
    }

    .merit02__item--sub {
        margin: 0 0 0 20px;
        font-size: 14px;
    }

    .merit02__item--sub::before {
        width: 15px;
        height: 15px;
        transform: translate(-25%, 35%);
    }

    .merit02__item--sub::after {
        right: calc(100.5% + 8px);
    }

    .merit02__item:nth-of-type(2) {
        margin-bottom: 5px;
    }

    .advisorBox__txt {
        font-size: 2rem;
    }

    .advisorBox__icon {
        width: min(100%, 25px);
        margin: 10px auto;
    }

    .reform__item,
    .reform__txt--right {
        font-size: 1.5rem;
    }

    .reform__list02 {
        margin-bottom: 20px;
    }

    .greenIcon__ttl {
        margin: 0 0 15px 55px;
    }

    .greenIcon__ttl::before {
        width: 40px;
        height: 40px;
        right: calc(100% + 55px);
    }

}

@media screen and (max-width:555px) {
    .merit02__item--sub {
        margin: 0;
    }
}

@media screen and (max-width:490px) {

    .advisorBox::before {
        transform: translate(-44%, 4%);
    }

    .advisorBox::after {
        transform: translate(40%, 5%);
    }
}


@media screen and (max-width:480px) {


    .meritBox__ttl {
        font-size: 2.6rem;
    }


    .meritBox__number {
        font-size: 1.7rem;
    }

    .advisorBox__txt {
        font-size: 1.8rem;
    }

    .meritExample__left {
        padding: 25px 0;
    }

    .meritExample__item,
    .merit02__item {
        font-size: 1.6rem;
    }

    .meritExample__small,
    .meritExample__center {
        font-size: 1.4rem;
    }


    .meritIconFlex__list {
        padding-left: 5%;
    }

    .meritBox__subTtl:nth-of-type(2) {
        margin-bottom: 30px;
    }

    .reform__list {
        margin-left: 15px;
        column-count: 1;
    }

    .reform__txt--right {
        font-size: 1.3rem;
    }

    .reform__txt--right::before {
        width: 17px;
        height: 14px;
        top: 0;
        transform: translateY(30%);
    }

    .merit02__list {
        padding: 0 20px;
    }

}

@media screen and (max-width:400px) {
    .advisorBox::before {
        transform: translate(-15%, 4%);
    }

    .advisorBox::after {
        transform: translate(21%, 5%);
    }

    .advisorBox {
        padding: 20px 5px;
    }
}

@media screen and (max-width:390px) {
    .advice__list {
        flex-wrap: wrap;
    }

    .advice__item {
        width: calc(100% / 2);
        margin-bottom: 20px;
    }

    .advice__item:nth-of-type(3),
    .advice__item:nth-of-type(4) {
        margin-bottom: 0;
    }
}

@media screen and (max-width:375px) {

    .reform__txt--right {
        margin: 10px auto 20px 18px;
    }

    .reform__txt--right::before {
        transform: translate(-5px, 30%);
    }

}





/* ーーーーーーーーーーーーーーー
service(map)
ーーーーーーーーーーーーーーー */
.map__ttl {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    font-size: 3.2rem;
}

.map__ttl::before {
    position: absolute;
    content: "";
    background-image: url(../img/main/icon-map.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 33px;
    right: 103%;
    top: 50%;
    transform: translateY(-50%)
}

.mapFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(100%, 723px);
    margin: 10px auto 35px;

}

.map__img {
    width: min(100%, 421px);
}

.map__item {
    position: relative;
    margin-bottom: 15px;
    font-size: var(--size28);

    &:last-child {
        margin-bottom: 0;
    }
}

.map__item::before {
    position: absolute;
    content: "○";
    right: 105%;
}

.map__txt--small {
    font-size: 1.2rem;
    font-weight: var(--weight500);
    text-align: center;
    margin-top: 1px;
    line-height: var(--lineHight14);
}

@media screen and (max-width:840px) {
    .map__list {
        width: min(100%,200px);
        margin-left: 50px;
    }
}


@media screen and (max-width:768px) {
    .map__ttl {
        font-size: 2.8rem;
    }
}


@media screen and (max-width:650px) {
    .mapFlex {
        flex-direction: column;
        align-items: center;
        margin: 20px auto 25px;
    }

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

/* ーーーーーーーーーーーーーーー
search
ーーーーーーーーーーーーーーー */

.search {
    position: relative;
    padding: clamp(40px, 4.5%, 65px) 0 clamp(50px, 9.3%, 135px);
    background-color: var(--lightblue);
}

.search::before {
    position: absolute;
    content: "";
    background-image: url(../img/main/bg-lightblue02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 28.74vw;
    top: 100%;
    left: 0;
    z-index: -1;
}


.search__ttl {
    text-align: center;
    width: clamp(300px, 87%, 863px);
    padding: 20px;
    margin: 0 auto;
    font-size: 3.2rem;
    background-color: var(--yellow);
    border: 3px solid var(--black);
    border-radius: var(--borderRadius50);
}


.search__list {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 120px;
}

.search__item {
    width: calc((100% - 135px)/4);
}

.flow {
    position: relative;
    padding: 35px 0 0;
    height: 100%;
    max-height: 218px;
    background-color: var(--white);
    border: 3px solid var(--black);
    border-radius: var(--borderRadius25);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.search__item:not(:last-child) .flow:after {
    position: absolute;
    content: "";
    width: 21px;
    height: calc(35px / 2 * tan(60deg));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 50%;
    right: -45px;
    transform: translate(-50%, -50%);
    background-color: var(--blue);
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .search__item:not(:last-child) .flow:after {
            height: calc(35px / 2 * 1.732);
            /* Safari用のスタイル */
        }
    }
}



.flow__number {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flow__img {
    width: 39%;
    margin: 0 auto 15px;
}

.flow__txt {
    text-align: center;
    line-height: 1.384;
    font-size: var(--size24);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.flow__txt--small {
    font-size: var(--size19);
}

.search__txt {
    text-align: left;
    font-size: var(--size17);
    line-height: var(--lineHight175);
}

.search__item .small {
    font-size: 1.2rem;
    font-weight: var(--weight500);
}



.searchBanner__link {
    transition: var(--transitionBase);
}

.searchBanner__link:hover .searchBanner__btn .btn {
    background: var(--white);
    color: var(--black);
}

.searchBanner__link:hover .btn-arrow::after {
    background-color: var(--black);
}

.searchBanner {
    position: relative;
    border: 3px solid var(--black);
    width: min(100%, 900px);
    height: 250px;
    margin: 0 auto;
    background: linear-gradient(108deg, #fff 50%, var(--yellow) 50%);
    background-color: var(--white);
    border-radius: var(--borderRadius25);
}

.searchBanner__txt {
    position: absolute;
    font-size: 3rem;
    left: 35px;
    top: 5%;
    line-height: var(--lineHight175);
}

.searchBanner__img {
    position: absolute;
    width: 437px;
    right: 0;
    bottom: 0;
    transform: translateX(3%);
}

.searchBanner__btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 23px;
}

.searchBanner__btn .btn {
    width: 320px;
    padding: 22px 0;
}

.searchBanner__btnInner {
    position: relative;
}

.searchBanner__btnInner:before,
.searchBanner__btnInner:after {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/main/banner-star.svg);
    width: 70px;
    height: 57px;
    transform: translateY(-50%);
}

.searchBanner__btnInner:before {
    right: 108%;
    top: 33%;
}

.searchBanner__btnInner:after {
    left: 103%;
    top: 39%;
}







@media screen and (max-width:1024px) {
    .searchBanner {
        width: 100%;
    }

    .search__item {
        width: calc((100% - 90px)/4);
    }


    .search__item:not(:last-child) .flow:after {
        width: 16px;
        height: calc(30px / 2 * tan(60deg));
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        right: -35px;
    }

    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            .search__item:not(:last-child) .flow:after {
                height: calc(30px / 2 * 1.732);
                /* Safari用のスタイル */
            }
        }
    }

    .flow__txt:not(.flow__txt--small) {
        font-size: 2rem;
    }

}


@media screen and (max-width:900px) {
    .search__ttl {
        font-size: 2.6rem;
    }

    .searchBanner__img {
        width: 50vw;
    }

    .searchBanner__txt {
        font-size: 3vw;
    }

    .search__ttl--img {
        width: 138.125px;
    }
}




@media screen and (max-width:768px) {
    .search__ttl {
        font-size: 2.3rem;
    }

    .search__list {
        flex-direction: column;
    }

    .search__item {
        width: 100%;
        margin-bottom: 100px;
        position: relative;
    }

    .search__item:last-child {
        margin-bottom: 0;
    }

    .search__item:not(:last-child) .flow:after {
        display: none;
    }

    .search__item:not(:last-child):after {
        position: absolute;
        content: "";
        width: calc(35px / 2 * tan(60deg));
        height: 21px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        top: 120%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--green);
    }

    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            .search__item:not(:last-child):after {
                width: calc(35px / 2 * 1.732);
                /* Safari用のスタイル */
            }
        }
    }



    .search__item:nth-of-type(3):after {
        top: 130%;
    }



    .flow {
        padding: 30px 8.34% 20px;
    }

    .flow__img {
        display: none;
    }

    .flow .flow__txt {
        position: relative;
        width: fit-content;
        margin: 0 auto;
        font-size: 2.2rem;
    }

    .flow__txt::before {
        position: absolute;
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../img/main/icon-flow01.svg);
        top: 50%;
        transform: translateY(-60%);
        right: 100%;
        width: 54px;
        height: 36px;
    }

    .search__item:nth-of-type(2) .flow__txt::before {
        background-image: url(../img/main/icon-flow02.svg);
    }

    .search__item:nth-of-type(3) .flow__txt::before {
        background-image: url(../img/main/icon-flow03.svg);
    }

    .search__item:nth-of-type(4) .flow__txt::before {
        background-image: url(../img/main/icon-flow04.svg);
    }

    .search__txt {
        margin-top: 15px;
        text-align: center;
        font-size: 1.7rem
    }

    .searchBanner__img {
        display: none;
    }

    .searchBanner {
        height: max(33.5vw, 175px);
    }

    .searchBanner__txt {
        font-size: max(4vw, 22px);
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    .searchBanner__btnInner:before,
    .searchBanner__btnInner:after {
        width: max(13vw, 32px);
        height: max(10.5vw, 27px);
    }

    .searchBanner__btn .btn {
        width: max(51vw, 240px);
        padding: 6% 0;
    }

    .search__item .small {
        width: 100%;
        text-align: center;
        display: inline-block;
    }

    .search__list {

        margin-bottom: max(10%,40px);
    }

    .searchBanner {
        background: linear-gradient(141deg, #fff 60%, var(--yellow) 40%);
    }
    
}

@media screen and (max-width:670px) {
    .search__item:nth-of-type(3):after {
        top: 125%;
    }

}


@media screen and (max-width:600px) {
    .search__ttl {
        width: 100%;
    }

    .flow__txt {
        display: block;
    }
}

@media screen and (max-width:568px) {
    .search__item:nth-of-type(3) .flow__txt {
        max-width: 308px;
    }

    /* .search__item:nth-of-type(3) .flow__txt::before {
        transform: translateY(-90%);
    } */
}



@media screen and (max-width:530px) {
    .searchBanner__btn .btn {
        font-size: 1.5rem;
    }

    .searchBanner__btn .btn-arrow::after {
        width: 7px;
        height: calc(15px / 2 * tan(60deg));
    }

    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            .searchBanner__btn .btn-arrow::after {
                height: calc(15px / 2 * 1.732);
                /* Safari用のスタイル */
            }
        }
    }
}

@media screen and (max-width:480px) {
    .search__ttl {
        font-size: 2rem;
    }


    .searchBtn__item {
        width: min(100%, 300px);
        font-size: 1.7rem;
    }

    .searchBtn__item .btn {
        padding: 15px 0;
        font-size: 1.6rem;

    }

    .searchBtn__item::before {
        width: 29px;
        height: 27px;
    }

    .flow .flow__txt {
        font-size: 1.9rem;
    }

    .flow__txt::before {
        width: 44px;
        height: 35px;
        transform: translateY(-52%);
    }

    .searchBanner__txt {
        font-size: max(4vw, 19px);
    }

    .search__item:nth-of-type(3) .flow__txt {
        max-width: 267px;
    }
}

@media screen and (max-width:440px)  {
    .searchBanner__btnInner:before {
        right: 100%;
    }
}

@media screen and (max-width:390px) {
    .searchBanner__btnInner:before  {
        width: max(10vw, 10px);
        top: 7%;
    }


}

/* @media screen and (max-width:385px) {
    .search__item:nth-of-type(3) .flow__txt::before {
        transform: translate(20%,-90%);
    }
} */

@media screen and (max-width:361px) {
    .search__item:nth-of-type(3):after {
        top: 118%;
    }

    .searchBanner__btnInner:before  {
        right: 94%;
    }
}

/* @media screen and (max-width:320px) {
    .search__item:nth-of-type(3) .flow__txt::before {
        transform: translate(35%,-90%);
    }
} */




/* ーーーーーーーーーーーーーーー
about
ーーーーーーーーーーーーーーー */
.about {
    padding: min(5.9%, 85px) 0 clamp(220px, 18vw, 350px);
    position: relative;
}


.about__ttl::before {
    background-image: url(../img/main/ttl-back02.png);
    width: 974px;
    height: 139px;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.about__suTtl {
    text-align: center;
    line-height: 1.3333333;
    width: 64.1%;
    margin: 15px auto 0;
    padding: 15px 0;
    padding: 6.5px 0;
    background-color: var(--black);
    color: var(--white);
    border-radius: var(--borderRadius50);
    font-size: var(--size21);
}

.about__txt {
    text-align: center;
    font-size: var(--size19);
    line-height: var(--lineHight184);
    margin: 20px 0 45px;
}

.aboutBox__ttl {
    text-align: center;
    padding: 20px 0;
    background-color: var(--black);
    color: var(--white);
    border-radius: var(--borderRadius25) var(--borderRadius25) 0 0;
    font-size: var(--size26);
}

.aboutBox__body {
    background-color: #ecf1f4;
    padding: max(9.5%, 15px) max(10.6%, 20px);
    border-radius: 0 0 var(--borderRadius25) var(--borderRadius25);
}

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

.aboutFlex__item {
    width: calc((100% - 50px)/2);
    display: flex;
    flex-direction: column;
}

.aboutFlex__body {
    flex-grow: 1;
    line-height: var(--lineHight184);
    font-size: var(--size19);
}

.job__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}

.job__item:last-child {
    margin-bottom: 0;
}

.job__ttl {
    position: relative;
    padding-left: 40px;
}

.job__ttl::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/main/icon-green02.svg);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    height: 30px;
}

.job__item:nth-of-type(2) .job__ttl::before {
    background-image: url(../img/main/icon-green01.svg);
}

.job__item:nth-of-type(3) .job__ttl::before {
    background-image: url(../img/main/icon-green06.svg);
}

.job__item:nth-of-type(4) .job__ttl::before {
    background-image: url(../img/main/icon-green02.svg);
}

.aboutPolicy {
    margin-top: 55px;
}

.aboutPolicy__body {
    padding: max(3%, 20px) max(4.5%, 20px) max(4.5%, 20px);
}

.aboutPolicy__head {
    text-align: center;
    width: 100%;
    margin: 0 auto 20px;
    padding: 12.5px 5px;
    letter-spacing: 0.25em;
    background-color: var(--white);
    border-radius: var(--borderRadius50);
    font-size: 2.5rem;
}

.aboutPolicy__logo {
    width: max(48.3%, 150px);
    margin: 0 auto;
}

.aboutPolicy__img {
    width: max(73.6%, 200px);
    margin: 0 auto;
}

.aboutPolicy__txt {
    font-size: var(--size19);
    line-height: var(--lineHight184);
    margin: max(4.5%, 10px) 0 0;

}

@media screen and (max-width:1024px) {
    .about__ttl::before {
        width: 758px;
        height: 108px;
    }

    .aboutPolicy__head {
        font-size: 2.3rem;
    }
}

@media screen and (max-width:768px) {

    .about {
        padding: min(5.9%, 85px) 0 clamp(60px, 18vw, 350px);
    }

    .about__ttl::before {
        width: 530px;
        height: 76px;
    }

    .about__suTtl {
        width: 85%;
    }

    .aboutBox__body {
        padding: max(5%, 10px) max(6%, 15px);
    }
}

@media screen and (max-width:730px) {
    .aboutPolicy__head {
        font-size: 2.1rem;
        letter-spacing: 0.1em;
    }
}

@media screen and (max-width:701px) {
    .aboutFlex {
        flex-direction: column;
    }

    .aboutFlex__item {
        width: 100%;
        margin-bottom: 40px;
    }

    .aboutFlex__item:last-child {
        margin-bottom: 0;
    }

    .aboutPolicy {
        margin-top: 40px;
    }
}

@media screen and (max-width:615px) {
    .about__suTtl {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .about {
        padding-top: 0;
    }

    .about__ttl::before {
        width: 377px;
        height: 51px;
        top: 50%;
    }

    .about__suTtl {
        padding: 6.5px 5px;
    }

    .about__txt {
        text-align: justify;
    }

    .aboutPolicy__head {
        font-size: 1.7rem;
    }

    .about__ttl {
        z-index: 1;
    }

    .about__suTtl {
        position: relative;
        z-index: 1;
    }
}




/* ーーーーーーーーーーーーーーー
info
ーーーーーーーーーーーーーーー */
.info {
    position: relative;
    background-color: var(--lightblue);
}

.info__bg--top {
    position: absolute;
    width: 100%;
    bottom: 95%;
    z-index: -1;
}

.infoBox {
    position: relative;
}

.info__left {
    transform: translateY(-60px);
}

.info__logo {
    width: max(49%, 150px);
    padding: max(2.5%, 15px) max(5.5%, 30px);
    border-radius: var(--borderRadius25);
    background-color: var(--white);
}

.info__txt {
    font-size: 2.9rem;
    margin: 35px 0 40px;
    letter-spacing: var(--fontSpace008);
    line-height: var(--lineHight15);
    font-weight: var(--weight500);
}

.info__btn {
    max-width: 457px;
}

.info__btn .btn {
    width: 100%;
    padding: 30px 0;
    font-size: var(--size24);
}

.info__right {
    position: absolute;
    left: 59%;
    bottom: 0;
    width: clamp(250px, 41.53vw, 604px);
}


@media screen and (max-width:930px) {
    .info__txt {
        font-size: 2.5rem;
    }

    .info__right {
        width: 54%;
    }
}

@media screen and (max-width:800px) {
    .info__btn {
        max-width: 400px;
    }
}

@media screen and (max-width:768px) {
    .info {
        padding-top: max(13%, 50px);
    }

    .infoBox {
        padding-bottom: max(42%, 100px);
    }

    .info__txt {
        margin: max(3%, 20px) 0 max(4%, 25px);
    }

    .info__btn {
        max-width: 400px;
        margin: 0 auto 5px;
    }

    .info__btn .btn {
        padding: 20px 0;
    }

    .info__right {
        left: 50%;
        transform: translateX(-50%);
        min-width: 182px;
        width: 48%;
    }

    .info__logo {
        border-radius: var(--borderRadius10);
    }
}

@media screen and (max-width:480px) {
    .info__txt {
        font-size: 2rem;
    }
}

@media screen and (max-width:350px) {
    .info__btn .btn {
        font-size: 1.6rem;
        padding: 20px 0;
    }
}

/* ーーーーーーーーーーーーーーー
footer
ーーーーーーーーーーーーーーー */

.footer {
    color: var(--white);
    background-color: var(--black);
    padding: max(2.5%, 20px) 0;
    position: relative;
}

.footer__txt {
    font-size: 1.4rem;
    text-align: center;
}

@media screen and (max-width:1024px) {
    .footer {
        padding: max(2.5%, 20px) 0 max(10%, 100px);
    }
}

@media screen and (max-width:480px) {
    .footer__txt {
        font-size: 1.2rem;
    }
}

.sp-btn {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 20px;
    z-index: 10;

}

.sp-btn .btn {
    width: max(70%, 300px);
    padding: 20px;
    border: 2px solid var(--white);
}