@import url('//fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');
@charset "UTF-8";
/* CSS Document */

#area01 h2 {
    margin-bottom: 20px;
}

.area01Txt {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}

.pointList {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

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

.pointList ul li {
    width: 49%;
    position: relative;
    margin-bottom: 20px;

}

.pointList li div.point {
    border-radius: 5px;
    border: 5px solid #db5461;
    padding: 40px 0;
}

.pointList li div.point.orange {
    border: 5px solid #f39800;
}

.pointList li div.point.green {
    border: 5px solid #13b5b1;
}

.pointList li div.point.blue {
    border: 5px solid #1376b5;
}


.pointList ul li .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 87%;
    margin: 0 auto;
}

.pointList ul li .title:before {
    content: "";
    width: 100%;
    background: #f9e2e4;
    height: 96px;
    position: absolute;
    z-index: -1;
    left: 0;
}


.pointList li div.point.orange .title:before {
    background: #fdeed4;
    height: 110px;
}

.pointList li div.point.green .title:before {
    background: #d7f3f2;
}

.pointList li div.point.blue .title:before {
    background: #d7e8f3;
}



.pointList ul li .title h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    padding-left: 20px;
}

.pointList ul li .title h3 strong {
    font-size: 34px;
}



.pointList li div.point.blue .title h3 {
    font-size: 22px;
}

.pointList li div.point.blue .title h3 strong {
    font-size: 28px;
}

.pointList ul li .info {
    font-size: 16px;
    text-align: center;
}



.ribbon {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 30px;
    margin: 0;
    padding: 20px 0 15px;
    z-index: 2;
    width: 96px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    background: #db5461;
    border-radius: 2px 0 0 0;
}



.ribbon:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-top: 10px solid #db5461;
}




.pointList li div.point.orange .ribbon {
    background: #f39800;
}

.pointList li div.point.green .ribbon {
    background: #13b5b1;
}

.pointList li div.point.blue .ribbon {
    background: #1376b5;
}



.pointList li div.point.orange .ribbon:after {
    border-top: 10px solid #f39800;
}

.pointList li div.point.green .ribbon:after {
    border-top: 10px solid #13b5b1;
}

.pointList li div.point.blue .ribbon:after {
    border-top: 10px solid #1376b5;
}


.secTitle {
    background: #fbeff1;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 60px;
}

.secTitle.orange {
    background: #fdeed4;
}

.secTitle.green {
    background: #d7f3f2;
}

.secTitle.blue {
    background: #d7e8f3;
}



.stInr {
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stInr p.medal {
    width: 19%;
    text-align: center;
}

.stTxt {
    width: 79%;
}

.stTxt h2 {
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 15px;
}

.stTxt p {
    font-size: 18px;
    line-height: 1.5;
}

#area02 h3 {
    text-align: center;
    margin-bottom: 40px;
}

#area02 h3 span {
    position: relative;
    padding: 5px 32px 5px 42px;
    background: #db5461;
    font-size: 30px;
    color: white;
    margin-left: -33px;
    line-height: 1.3;
    z-index: -1;
    display: inline-block;

}

#area02 h3 span:before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    border: none;
    border-left: solid 40px white;
    border-bottom: solid 79px transparent;
    z-index: -2
}

#area02 h3 span:after {
    position: absolute;
    content: '';
    right: -2px;
    top: -2px;
    border: none;
    border-right: solid 40px white;
    border-top: solid 79px transparent;
    z-index: -2
}

.grafList {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto 30px;
}

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

.area02Img {
    width: 75%;
    max-width: 760px;
    margin: 0 auto;
}

.redBBox {
    width: 90%;
    max-width: 1200px;
    border: 4px solid #db5461;
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto;
}

.rbTop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rbTop dl {
    padding-left: 20px;
}

.rbTop dl dt {
    font-size: 28px;
    margin-bottom: 15px;
    color: #db5461;
    font-weight: bold;
}

.rbTop dl dd {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}


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

.rbBttom ul li {
    width: 49%;
    border: 4px solid #eaeaea;
    border-radius: 10px;
    padding-top: 35px;
    padding-bottom: 20px;
}

.rbBttom ul li dl dt {
    background: #f5f5f5;
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}


.rbBttom ul li dl dt strong {
    color: #db5461;
    font-size: 28px;
}

.rbBttom ul li dl dd {
    text-align: center;
    padding-top: 20px;
}

.rbBttom ul li dl dd .label {
    background: #db5461;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    padding: 3px 20px;
    display: inline-block;
    font-weight: bold;
}

.rbBttom ul li dl dd .txt01 {
    font-size: 28px;
    font-weight: bold;
}

.rbBttom ul li dl dd .txt02 {
    font-size: 14px;
    font-weight: 500;
}

.planList {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.planList ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.planList ul li {
    width: 49%;
}

#area03 .txt {
    text-align: center;
    font-size: 18px;
    padding: 40px;
}

#area03 .bscTbl01 table td dl {
    text-align: center;
}

#area03 .bscTbl01 table td dl dt {
    display: inline-block;
    background: #eee;
    padding: 3px 10px;
    line-height: 1.5;
    margin-bottom: 10px;
}

#area03 .bscTbl01 table td dl dd {
    line-height: 1.7;
    margin-bottom: 15px;
}

.head01 {
    background: #eeeeee;
    padding: 10px 0 12px;
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 500;
}

.indList.list01 {
    width: 90%;
    margin: 0 auto;
}

.indList.list01 li {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.indList.list01 li small {
    font-size: 16px;
}


.greenBBox {
    width: 90%;
    max-width: 1200px;
    border: 4px solid #13b5b1;
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto;
}

.gbInr {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gbInr .txt {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
}

.gbInr .txt strong {
    font-size: 58px;
    color: #13b5b1;
    padding: 0 8px;
}

.gbInr .txt span {
    font-size: 28px;
    position: relative;
}

.gbInr .txt span:after {
    content: "";
    width: 100%;
    display: block;
    height: 4px;
    background: #13b5b1;
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: -1;
}

#area04 .titleImg {
    text-align: center;
    padding: 60px 0 30px;
}

.area05List {
    width: 90%;
    max-width: 970px;
    margin: 0 auto 60px;
}





.area05List ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.area05List ul li {
    width: 49%;
    margin-bottom: 30px;
    max-width: 470px;
}






.bscTbl01.blue {
    border: 1px solid #1376b5;
}

.bscTbl01.blue table {
    border-left: 1px solid #1376b5;
    border-top: 1px solid #1376b5;
}

.bscTbl01.blue table th,
.bscTbl01.blue table td {
    border-right: 1px solid #1376b5;
    border-bottom: 1px solid #1376b5;
    text-align: center;
}

.bscTbl01.blue table th {
    color: #1376b5;
}


.bscTbl01.blue table .head th {
    background: #1376b5;
    color: #fff;
}



.bscTbl01.green {
    border: 1px solid #13b5b1;
}

.bscTbl01.green table {
    border-left: 1px solid #13b5b1;
    border-top: 1px solid #13b5b1;
}

.bscTbl01.green table th,
.bscTbl01.green table td {
    border-right: 1px solid #13b5b1;
    border-bottom: 1px solid #13b5b1;
    text-align: center;
}

.bscTbl01.green table th {
    color: #13b5b1;
}


.bscTbl01.green table .head th {
    background: #13b5b1;
    color: #fff;
}



#area06 {
    background: #fffff8;
    padding: 80px 0;
}



.area06Inr {
    width: 80%;
    max-width: 945px;
    margin: 0 auto;
}

.area06Title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}


.area06Title .txtArea {
    padding-left: 20px;
}

.area06Title h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
}

.area06Title h2 small {
    font-size: 22px;

}

.area06Title h2 strong {
    font-size: 60px;
    color: #13b5b1;
}

#area06 .txt {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.7;
}

.area06List {
    padding: 40px 0;
}

.area06List ul {
    display: flex;
    justify-content: center;
}

.area06List ul li {
    margin: 0 15px;
}

.tokuyakuList {
    margin-bottom: 60px;
}

.tokuyakuInr {
    border: 4px solid #13b5b1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    padding: 40px 60px;
}

.tokuyakuHead {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}

.tokuyakuHead span {
    color: #13b5b1;
    font-size: 28px;
    margin-left: 10px;
}

.tokuyakuIcon {
    width: 13%;
}


.tokuyakuTxt {
    width: 80%;
}

.tokuyakuTxt .info {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.tokuyakuList li {
    margin-bottom: 30px;
}

.head02 {
    text-align: center;
    color: #13b5b1;
    margin-bottom: 40px;
}

.head02 span {
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.head02 span::before,
.head02 span::after {
    content: "";
    width: 2px;
    height: 40px;
    background-color: #13b5b1;
    position: absolute;
    bottom: 0;
}

.head02 span::before {
    left: 0;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.head02 span::after {
    right: 0;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}

.head03 {
    text-align: center;
    margin-bottom: 60px;
}

.head03 span {
    font-size: 28px;
    border-bottom: 1px solid #000;
    position: relative;
}

.head03 span p.penImg {
    position: absolute;
    right: -78px;
    bottom: -3px;
}

.head04 {
    background: #eeeeee;
    padding: 20px 15px;
    font-size: 22px;
    border-left: 3px solid #13b5b1;
    margin-bottom: 30px;
}

.area07Inr {
    width: 80%;
    max-width: 945px;
    margin: 0 auto;
}

.flowList {
    width: 100%;
    margin-bottom: 30px;
}

.flowList ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.flowList li {
    border: 4px solid #13b5b1;
    padding: 30px 0;
    width: 32%;
    margin-right: 2%;
    border-radius: 5px;
    margin-bottom: 20px;
}

.flowList li:nth-child(3n) {
    margin-right: 0;
}

.flowList li .flowIcon {
    width: 35%;
    margin: 0 auto 20px;
}

.flowList li dl dt {
    color: #13b5b1;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0em;
    line-height: 0.65;
    padding-left: 20px;
    margin-bottom: 12px;
}

.flowList li dl dt strong {
    font-size: 28px;
}

.flowList li dl dd {
    background: #13b5b1;
    padding: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
}

#area08 {
    background: #f5f5f5;
    padding: 60px 0;
}


.accordion_menu dd {
    display: none;
}

#accordion dt {
    background: #f39800;
    color: #fff;
    padding: 24px 30px;
    position: relative;
    font-size: 22px;
    margin-top: 20px;
    font-weight: 500;
}

#accordion dt span {
    padding-left: 40px;
    display: inline-block;
}


#accordion dt:first-child {
    margin-top: 0;
}

#accordion dt:hover {
    cursor: pointer;
}

#accordion dt:before {
    content: "Q";
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    position: absolute;
    top: 12px;
    left: 25px;
}

#accordion dt:after {
    content: "＋";
    display: block;
    position: absolute;
    right: 20px;
    color: #fff;
    font-weight: bold;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    font-family: 'Lato', sans-serif;
    font-size: 40px;
}

#accordion dt.active:after {
    content: "−";

}

#accordion dd {
    padding: 24px 30px;
    position: relative;
    background: #fff;
}

#accordion dd:before {
    content: "A";
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    position: absolute;
    top: 20px;
    left: 25px;
    color: #f39800;

}

#accordion dd span {
    padding-left: 40px;
    display: inline-block;
    font-size: 18px;
    line-height: 1.5;
}

#accordion dd .acflex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#accordion dd .sbInr {
    margin-right: 40px;
}

#accordion dd .sbInr .title {
    display: inline-block;
    color: #2aa53b;
    margin-right: 15px;
}

#accordion dd .sbInr label {
    margin-right: 10px;
}

select.slctArea {
    background: #fff;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 5px 8px;
}

#accordion {
    margin-bottom: 30px;
}

.faqBox {
    width: 80%;
    max-width: 945px;
    margin: 0 auto;
}

.head05 {
    text-align: center;
    margin-bottom: 30px;
}

.companyBox {
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.companyBox .campanyTxt {
    width: 40%;
}

.companyBox .campanyTxt table th,
.companyBox .campanyTxt table td {
    text-align: left;
    padding: 20px 0;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.5;
    vertical-align: top;
}

.companyBox .mapBox {
    width: 58%;
}

.campanyName {
    width: 70%;
}

.pcS {
    display: none;
}

#area01 {
    padding-top: 20px;
}

#area07 {
    padding-top: 20px;
}

#area09 {
    padding-top: 20px;
}

.comment {
    margin-top: 16px;
    font-size: 12px;
}



@media only screen and (max-width: 1270px) {
    #gNav ul li a {
        padding: 0 13px;
    }

    .pointList ul li .title h3 {
        font-size: 20px;
    }

    .pointList ul li .title h3 strong {
        font-size: 28px;
    }

    .pointList ul li .info {
        font-size: 14px;
    }

    .pointList li div.point.blue .title h3 {
        font-size: 18px;
    }

    .pointList li div.point.blue .title h3 strong {
        font-size: 25px;
    }

    .stTxt h2 {
        font-size: 33px;
    }

    .area06Title h2 {
        font-size: 34px;
    }

}

@media only screen and (max-width: 1150px) {
    #gNav ul li a {
        padding: 0 13px;
    }

    #mv .mvTxt .txt01 {
        font-size: 22px;
    }

    #mv .mvTxt .txt01 span {
        font-size: 30px;
    }

    #mv .mvTxt .txt01 span::after {
        bottom: 3px;
    }

    #gNav ul li {
        font-size: 16px;
    }


}

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

    .pointList ul li .title {
        width: 93%;
    }

    .pcS {
        display: block;
    }

}

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

    #header .hdInr .actionList .tel {
        max-width: 320px;
    }

    #header .hdInr .actionList .mail a {
        font-size: 25px;
    }

    .ribbon {
        padding: 18px 0 15px;
        font-size: 20px;
    }

    .pointList h3 strong {
        font-size: 24px;
    }

    .pointList ul li .title h3 {
        font-size: 18px;
    }

    .pointList li div.point.blue .title h3 strong {
        font-size: 22px;
    }

    .pointList li div.point.blue .title h3 {
        font-size: 16px;
    }

    .pointList ul li .title h3 {
        padding-left: 13px;
    }

    .area06Title h2 {
        font-size: 28px;
    }

    .area06Title h2 strong {
        font-size: 52px;
    }

    #footer .actionList li img {
        width: 80%;
    }

}

.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1000ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/* メインビジュアルのフェードイン */
.mvfadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1000ms;
}


.mvfadein.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* ヘッダーのフェードイン */
.hdfadein {
    opacity: 0;
    transition: all 1000ms;
}


.hdfadein.active {
    opacity: 1;
}

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

.priceBtn ul li {
    width: 48%;
}

.priceBtn ul li a {
    display: block;
    text-align: center;
    padding: 30px 0;
    border-radius: 20px;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}

.priceBtn ul li:first-child a {
    background: #ffbf43;
}

.priceBtn ul li:last-child a {
    background: #80c269;
}

.priceBtn ul li a:hover {
    text-decoration: none;
    cursor: pointer;
}

.priceBtn ul li:first-child a:hover {
    background: #eaa92a;
}

.priceBtn ul li:last-child a:hover {
    background: #66a94e;
}