@charset "utf-8";
/* CSS Document */

body{
    background: #EAEAEA;
    padding-top: 100vh;
    padding-top: 100dvh;
}
.inner{
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 768px) {    
    header{
        background: rgba(234,234,234,0);
    }
    header.scroll{
        background: #FFFFFF;
    }
    body{        
        padding-top: calc(130vw + 8.0rem);
    }
}

/*--------------------------------------
    visualArea
--------------------------------------*/

.visualArea{
    width:100%;
    height: calc(100vh - 124px);
    height: calc(100dvh - 124px);
    position: fixed;
    top:12.4rem;
    left:0;
    right:0;
    bottom:auto;
    z-index: 0;
}
.visualArea:before{
    content: "";
    width:37.875vw;
    max-width: 60.6rem;
    height:16.25vw;
    max-height: 26.0rem;
    background: url("../img/top/bg_visual_001-pc.png") no-repeat center center / cover;
    position: absolute;
    top:55%;
    left:0;
    z-index: 10;
}
.visualArea:after{
    content: "";
    width:37.875vw;
    max-width: 60.6rem;
    height:16.25vw;
    max-height: 26.0rem;
    background: url("../img/top/bg_visual_002-pc.png") no-repeat center center / cover;
    position: absolute;
    top:2%;
    right:0;
    z-index: 10;
}
.visualArea picture,
.visualArea picture img{
    width:100%;
    height:100%;
    object-fit: contain;
    position: relative;
    z-index: 20;
}
@media (max-width: 768px) {
    .visualArea{
        height: calc(130vw + 120px);
        top:5.0rem;
    }
    .visualArea:before{
        display: none;
    }
    .visualArea:after{
        display: none;
    }
    .visualArea picture,
    .visualArea picture img{
        object-position: center bottom;
    }
}

/*--------------------------------------
    introArea
--------------------------------------*/

.introArea{
    width:100%;
    padding: 16.0rem 0 17.6rem 0;
    background: rgba(241,197,36,0.855);
    backdrop-filter: blur(1.5rem);
    border-radius: 6.0rem 6.0rem 0 0;
    position: relative;
}
.introArea .fv_comment{
    font-size:12px;
    position: absolute;
    bottom:calc(100% + 10px);
    left:20px;
    color:#000000;
}
.introArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
}
.introArea .inner .img{
    position: absolute;
    right:0;
    bottom:17.0rem;
    z-index: 10;
}
.introArea .inner .textArea{
    position: relative;
    z-index: 20;
}
.introArea .inner .textArea h2{
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    align-items: flex-start;
    margin-bottom: 9.0rem;
}
.introArea .inner .textArea h2 strong{
    font-size:6.2rem;
    font-weight: 900;
    background: linear-gradient(transparent 70% , #FFFFFF 50%);
    position: relative;
}
.introArea .inner .textArea h2 strong:last-child::after{
    content: "※";
    position: absolute;
    bottom:0;
    left:100%;
    font-size:14px;
}
.introArea .inner .textArea .text{
    font-size:2.8rem;
    line-height: 2;
    font-weight: 900;
}
.introArea .inner .textArea .comment{
    font-size:1.2rem;
    font-weight: 300;
    margin-top: 2.2rem;
    text-align: left;
}
@media (max-width: 768px) {
    .introArea{
        box-sizing: border-box;
        padding: 3.0rem 3.0rem 6.0rem 3.0rem;
        border-radius: 3.0rem 3.0rem 0 0;
    } 
    .introArea .fv_comment{
        max-width: calc(100% - 20px);
        font-size:12px;
        bottom:calc(100% + 5px);
        left:10px;
        text-shadow: 0 0 3px white;
    }
    .introArea .inner{
        width:100%;
    }
    .introArea .inner .img{
        width:76vw;
        height:94vw;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        opacity: 0.2;
    }
    .introArea .inner .textArea h2{
        line-height: 1.5;
        margin-bottom: 4.0rem;
    }
    .introArea .inner .textArea h2 strong{
        font-size:3.7rem;
    }
    .introArea .inner .textArea .text{
        font-size:1.6rem;
    }
    .introArea .inner .textArea .comment{
        margin-top: 1.5rem;
    }
}

/*--------------------------------------
    aboutArea
--------------------------------------*/

.aboutArea{
    width:100%;
    padding: 8.0rem 0 11.4rem 0;
    background: #FFFFFF;
    position: relative;
    z-index: 40;
}
.aboutArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
    display:flex;
    justify-content: space-between;
    align-items:center;
}
.aboutArea .movie{
    width:64.0rem;
    height:auto;
    position: relative;
}
.aboutArea .movie::after{
    content: "";
    padding-top: 50%;
    display: inline-block;
}
.aboutArea .movie iframe{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
}
.aboutArea .inner .textArea{
    width:37.0rem;
}
.aboutArea .inner .textArea h2{
    font-size:3.7rem;
    font-weight: 900;
    margin-bottom: 4.0rem;
}
.aboutArea .inner .textArea .text{
    line-height: 2;
}
@media (max-width: 768px) {
    .aboutArea{
        padding: 4.5rem 0 5.0rem 0;
    }
    .aboutArea .inner{
        width:68vw;
        display:block;
    }
    .aboutArea .movie{
        width:100%;
    }
    .aboutArea .inner .textArea{
        width:100%;
        margin-top: 2.3rem;
    }
    .aboutArea .inner .textArea h2{
        font-size:2.0rem;
        margin-bottom: 1.5rem;
    }
    .aboutArea .inner .textArea .text{
        font-size:1.3rem;
        line-height: 1.8;
    }
}

/*--------------------------------------
    whyArea
--------------------------------------*/

.whyArea{
    width:100%;
    padding: 4.0rem 0 13.4rem 0;
    background: #F7F7F7;
    position: relative;
    z-index: 40;
}
.whyArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.whyArea .inner h2{
    font-size:2.2rem;
    font-weight: 900;
    margin-bottom: 2.5rem;
}
.whyArea .inner h2 strong{
    font-family: "figtree", sans-serif;
    font-size:8.0rem;
    font-weight: 800;
    color:#F1C524;
    display: block;
}
.whyArea .inner .desc{
    font-size:1.8rem;
    line-height: 1.7;
    margin-bottom: 6.0rem;
}
.whyArea .inner .flexBox{
    display: flex;
    justify-content: space-between;
    margin-bottom: 6.0rem;
}
.whyArea .inner .flexBox .box{
    width:34.4rem;
    padding: 6.5rem 3.5rem 5.5rem 6.0rem;
    box-sizing: border-box;
    border-radius: 1.0rem;
    background: #F1C524;
}
.whyArea .inner .flexBox .box h3{
    font-size:2.2rem;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 2.0rem;
}
.whyArea .inner .flexBox .box .img{
    width:100%;
    height:16.3rem;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.whyArea .inner .flexBox .box .text{
    font-weight: 700;
    line-height: 2;
    text-align: left;
}
.whyArea .inner .textArea h4{
    font-size:3.4rem;
    font-weight: 900;
    line-height: 1.65; 
    margin-top: 2.0rem;   
}
.whyArea .inner .textArea h4 strong{
    font-size:4.5rem;
    font-weight: 900;
    background: #F1C524;
}
@media (max-width: 768px) {
    .whyArea{
        padding: 3.6rem 0 5.0rem 0;
    }
    .whyArea .inner{
        width:calc(100vw - 6.0rem);
    }
    .whyArea .inner h2{
        font-size:1.5rem;
    }
    .whyArea .inner h2 strong{
        font-size:5.0rem;
        margin-bottom: 0.5rem;
    }
    .whyArea .inner .desc{
        font-size:1.3rem;
        margin-bottom: 2.5rem;
        text-align: left;
    }
    .whyArea .inner .flexBox{
        display: grid;
        gap:1.5rem;
        margin-bottom: 4.5rem;
    }
    .whyArea .inner .flexBox .box{
        width:100%;
        padding: 3.0rem;
    }
    .whyArea .inner .flexBox .box h3{
        font-size:1.9rem;
        margin-bottom: 3.0rem;
        text-align: left;
    }
    .whyArea .inner .flexBox .box .img{
        width:100%;
        height:10.9rem;
        margin-bottom: 2.1rem;
    }
    .whyArea .inner .flexBox .box .img img{
        width:auto;
        max-height:100%;
    }
    .whyArea .inner .flexBox .box .text{
        line-height: 1.8;
    }
    .whyArea .inner .textArea h4{
        font-size:1.8rem;
        margin-top: 3.5rem; 
    }
    .whyArea .inner .textArea h4 strong{
        font-size:2.2rem;
    }
}

/*--------------------------------------
    workArea
--------------------------------------*/

.workArea{
    width:100%;
    padding: 8.0rem 0 8.0rem 0;
    background: #FFFFFF;
    position: relative;
    z-index: 40;
}
.workArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
}
.workArea .inner h2{
    font-size:2.0rem;
    font-weight: 900;
    margin-bottom: 6.0rem;
}
.workArea .inner h2 strong{
    font-family: "figtree", sans-serif;
    font-size:8.0rem;
    font-weight: 800;
    color:#F1C524;
    display: block;
}
.workArea .inner .boxArea{
    width:50%;
    position: absolute;
    right:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    gap:2.0rem;
}
.workArea .inner .boxArea .box{
    width:100%;
    height:16.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.0rem;
    background: #FFF1BF;
    position: relative;
}
.workArea .inner .boxArea .box:after{
    content: "";
    width:8.4rem;
    height:3.1rem;
    background: url("../img/top/icon_work.png") no-repeat center center / cover;
    position: absolute;
    top:-1.0rem;
    right:4.8rem;
}
.workArea .inner .boxArea .arrow{
    width:100%;
    height:20px;
    position: relative;
}
.workArea .inner .boxArea .arrow:after{
    content: "";
    position: absolute;
    top:0;
    left:calc(50% - 2.9rem);
    border-top:2.0rem solid #F1C524;
    border-left:2.9rem solid transparent;
    border-right:2.9rem solid transparent;
}
.workArea .inner .boxArea .box:last-child{
    font-size:2.8rem;
    font-weight: 800;
    height:7.7rem;
}
.workArea .inner .boxArea .box:last-child:after{
    display: none;
}
.workArea .inner .textArea{
    width:48.0rem;
}
.workArea .inner .textArea .text{
    line-height: 2;
    margin-bottom: 7.0rem;
    font-weight: 700;
}
.workArea .inner .textArea .comment{
    margin-bottom: 2.0rem
}
.workArea .inner .textArea .comment li{
    font-size:1.0rem;
    line-height: 2;
    font-weight: 300;
}
.workArea .inner .textArea .comment li:before{
    content: "※";
    margin-right: 5px;
}
@media (max-width: 768px) {
    .workArea{
        padding: 3.6rem 0 5.0rem 0;
    }
    .workArea .inner{
        width:calc(100vw - 6.0rem);
    }
    .workArea .inner h2{
        font-size:1.5rem;
        margin-bottom: 3.0rem;
        text-align: center;
        line-height: 1.2;
    }
    .workArea .inner h2 strong{
        font-size:5.0rem;
        margin-bottom: 2.0rem;
        line-height: 1.2;
    }
    .workArea .inner .boxArea{
        width:100%;
        position: static;
        gap:1.5rem;
        margin-bottom: 3.0rem;
    }
    .workArea .inner .boxArea .box{
        width:100%;
        height:12.0rem;
        box-sizing: border-box;
        padding: 0 1.5rem;
    }
    .workArea .inner .boxArea .box:after{
        width:13.8666vw;
        height:4.8vw;
        top:-0.5rem;
        right:0.8rem;
    }
    .workArea .inner .boxArea .arrow{
        height:15px;
    }
    .workArea .inner .boxArea .arrow:after{
        left:calc(50% - 1.8rem);
        border-top:1.5rem solid #F1C524;
        border-left:1.8rem solid transparent;
        border-right:1.8rem solid transparent;
    }
    .workArea .inner .boxArea .box:last-child{
        height:6.0rem;
        font-size:2.0rem;
    }
    .workArea .inner .textArea{
        width:100%;
    }
    .workArea .inner .textArea .text{
        line-height: 1.8;
        margin-bottom: 3.0rem;
    }
    .workArea .inner .textArea .comment{
        margin-bottom: 0;
    }
}

/*--------------------------------------
    systemArea
--------------------------------------*/

.systemArea{
    width:100%;
    padding: 6.6rem 0 4.4rem 0;
    background: #F1C524;
    position: relative;
    z-index: 40;
}
.systemArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.systemArea .inner h2{
    font-size:2.0rem;
    font-weight: 900;
    margin-bottom: 3.5rem;
}
.systemArea .inner h2 strong{
    font-family: "figtree", sans-serif;
    font-size:8.0rem;
    font-weight: 800;
    color:#FFFFFF;
    display: block;
}
.systemArea .inner .desc{
    font-size:2.0rem;
    line-height: 1.7;
    margin-bottom: 5.0rem;
}
.systemArea .inner .gridArea{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:4.0rem 3.0rem;
}
.systemArea .inner .gridArea .box{
    background: #FFFFFF;
    border-radius: 1.0rem;
    position: relative;
}
.systemArea .inner .gridArea .box:nth-of-type(1){
    padding: 5.5rem 4.5rem 5.0rem 5.0rem;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.systemArea .inner .gridArea .box:nth-of-type(2){
    padding: 5.5rem 4.5rem 5.0rem 5.0rem;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
.systemArea .inner .gridArea .box:nth-of-type(3){
    padding: 4.5rem 5.0rem 4.5rem 5.0rem;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    text-align: left;
}
.systemArea .inner .gridArea .box:nth-of-type(4){
    padding: 4.5rem 5.0rem 4.5rem 5.0rem;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    text-align: left;
}
.systemArea .inner .gridArea .box .leftBox{
    width:38.5rem;
}
.systemArea .inner .gridArea .box .rightBox{
    width:59.4rem;
}
.systemArea .inner .gridArea .box:nth-of-type(3) .leftBox,
.systemArea .inner .gridArea .box:nth-of-type(4) .leftBox{
    width:22.5rem;
}
.systemArea .inner .gridArea .box:nth-of-type(3) .rightBox,
.systemArea .inner .gridArea .box:nth-of-type(4) .rightBox{
    display: flex;
    justify-content: center;
    align-items: center;
    width:18.8rem;
    height:100%;
    background: #FFF1BF;
    border-radius: 8px;
}
.systemArea .inner .gridArea .box span{
    width:9.6rem;
    height:9.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#FFFFFF;
    font-size:2.0rem;
    font-weight: 900;
    position: absolute;
    top:-1.7rem;
    left:-4.8rem;
    background: #FF5555;
    border-radius: 50%;
}
.systemArea .inner .gridArea .box h3{
    margin-bottom: 2.5rem;
    text-align: center;
}
.systemArea .inner .gridArea .box h3 strong{
    width:38.5rem;
    height:4.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size:1.8rem;
    font-weight: 900;
    background: #FFF1BF;
    margin-bottom: 2.5rem;
}
.systemArea .inner .gridArea .box h4{
    font-size:2.6rem;
    font-weight: 900;
    line-height: 1.4;
    padding-left: 1.7rem;
    border-left:7px solid #F1C524;
    margin-bottom: 3.0rem;
}
.systemArea .inner .gridArea .box .text{
    line-height: 1.8;
    font-weight: bold;
}
.systemArea .inner .gridArea .box .linkBtn{
    width:20.0rem;
    height:5.0rem;
    margin: 3.0rem auto 0 auto;
}
.systemArea .inner .gridArea .box .linkBtn a{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    border-radius: 2.8rem;
    background: #F1C524;
    font-weight: 700;
}
.systemArea .inner .comment{
    font-size:1.0rem;
    font-weight: 300;
    margin-top: 2.2rem;
    text-align: left;
}
@media (max-width: 768px) {
    .systemArea{
        padding: 3.0rem 0 4.5rem 0;
    }
    .systemArea .inner{
        width:calc(100vw - 6.0rem);
    }
    .systemArea .inner h2{
        font-size:1.5rem;
        margin-bottom: 2.5rem;
        line-height: 1.2;
    }
    .systemArea .inner h2 strong{
        font-size:5.0rem;
        margin-bottom: 2.0rem;
        line-height: 1.2;
    }
    .systemArea .inner .desc{
        font-size:1.3rem;
        margin-bottom: 2.5rem;
    }
    .systemArea .inner .gridArea{
        grid-template-columns: 1fr;
        gap:3.0rem;
    }
    .systemArea .inner .gridArea .box:nth-of-type(1){
        padding: 3.0rem;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        text-align: left;
    }
    .systemArea .inner .gridArea .box:nth-of-type(2){
        padding: 3.0rem;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left;
    }
    .systemArea .inner .gridArea .box:nth-of-type(3){
        padding: 3.0rem;
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        text-align: left;
    }
    .systemArea .inner .gridArea .box:nth-of-type(4){
        padding: 3.0rem;
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        text-align: left;
    }
    .systemArea .inner .gridArea .box .leftBox{
        width:100%;
    }
    .systemArea .inner .gridArea .box .rightBox{
        width:100%;
        text-align: center;
    }
    .systemArea .inner .gridArea .box:nth-of-type(3) .leftBox,
    .systemArea .inner .gridArea .box:nth-of-type(4) .leftBox{
        width:100%;
    }
    .systemArea .inner .gridArea .box:nth-of-type(3) .rightBox,
    .systemArea .inner .gridArea .box:nth-of-type(4) .rightBox{
        width:100%;
        height:16.5rem;
    }
    .systemArea .inner .gridArea .box span{
        width:6.0rem;
        height:6.0rem;
        font-size:1.2rem;
        top:2.0rem;
        left:-1.0rem;
        z-index: 10;
    }
    .systemArea .inner .gridArea .box h3{
        position: relative;
        padding-top: 5.8rem;
        margin-bottom: 2.0rem;
        z-index: 0;
    }
    .systemArea .inner .gridArea .box h3 strong{
        margin-right: -3.0rem;
        width: calc(100% + 3.0rem);
        height: 4.0rem;
        border-radius: 0px;
        font-size: 1.5rem;
        margin: 0;
        position: absolute;
        top: 0;
        z-index: 0;
        right: -3.0rem;
    }
    .systemArea .inner .gridArea .box h4{
        font-size:2.4rem;
        padding-left: 1.8rem;
        margin-bottom: 2.5rem;
    }
    .systemArea .inner .gridArea .box .text{
        margin-bottom: 3.0rem;
    }
    .systemArea .inner .gridArea .box .linkBtn{
        width:17.4rem;
        height:4.5rem;
    }
    .systemArea .inner .comment{
        margin-top: 1.5rem;
    }
}

/*--------------------------------------
    reasonArea
--------------------------------------*/

.reasonArea{
    width:100%;
    padding: 8.0rem 0 8.0rem 0;
    background: #FFFFFF;
    position: relative;
    z-index: 40;
    overflow-x: hidden;
}
.reasonArea h2{
    font-size:3.8rem;
    font-weight: 900;
    margin-bottom: 2.5rem;
    text-align: center;
}
.reasonArea .desc{
    font-size:2.0rem;
    line-height: 1.5;
    margin-bottom: 5.0rem;
    text-align: center;
}
.reasonArea .reasonBox{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}
.reasonArea .reasonBox .slick-list{
    overflow:visible;
}
.reasonArea .reasonBox .box{
    display: block;
    width:320px;
    height:400px;
    position: relative;
    margin: 0 20px;
    box-sizing: border-box;
    background: #FFF1BF;
    border-radius: 10px;
    padding: 30px 25px;
}
.reasonArea .reasonBox .box h3{
    display: flex;
    gap:1.2rem;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #F1C524;
}
.reasonArea .reasonBox .box h3 span{
    width:7.0rem;
}
.reasonArea .reasonBox .box .text{
    line-height: 2;
}
.reasonArea .reasonBox .slick-arrow{
    width:53px;
    height:53px;
    position:absolute;
    top:0;
    bottom:0;
    border-radius: 50%;
    margin: auto;
    z-index: 999;
    text-indent: -9999px;
    overflow: hidden;
}
.reasonArea .reasonBox .slick-arrow.prev-arrow{
    background: url("../img/top/btn_prev.png") no-repeat center center / contain;
    left:auto;
    right:calc(100% - 27px);
}
.reasonArea .reasonBox .slick-arrow.next-arrow{
    background: url("../img/top/btn_next.png") no-repeat center center / contain;
    left:calc(100% - 27px);
    right:auto;
}
.reasonArea .comment{
    width:112.0rem;
    margin: 0 auto;
    font-size:1.0rem;
    font-weight: 300;
    margin-top: 2.2rem;
    text-align: left;
}
@media (max-width: 768px) {
    .reasonArea{
        padding: 4.5rem 0 4.5rem 0;
    }
    .reasonArea h2{
        font-size:2.1rem;
        margin-bottom: 1.5rem;
    }
    .reasonArea .desc{
        font-size:1.3rem;
        margin-bottom: 2.6rem;
    }
    .reasonArea .reasonBox{
        width:84vw;
    }
    .reasonArea .reasonBox .box{
        width:76vw;
        height:auto;
        margin: 0 4vw;
        padding: 3.0rem;
    }
    .slick-track {
        display: flex;
    }
    .slick-slide {
        height: auto !important;
    }
    .reasonArea .reasonBox .box h3{
        gap:1.5rem;
        padding-bottom: 3.0rem;
        margin-bottom: 1.5rem;
    }
    .reasonArea .reasonBox .box h3 span{
        width:6.0rem;
    }
    .reasonArea .reasonBox .box .text{
        line-height: 1.8;
    }
    .reasonArea .reasonBox .slick-arrow{
        width:45px;
        height:45px;
    }
    .reasonArea .reasonBox .slick-arrow.prev-arrow{
        right:calc(100% - 22.5px);
    }
    .reasonArea .reasonBox .slick-arrow.next-arrow{
        left:calc(100% - 22.5px);
    }
    .reasonArea .comment{
        width:calc(100vw - 6.0rem);
        margin-top: 1.5rem;
    }
}

/*--------------------------------------
    faqArea
--------------------------------------*/

.faqArea{
    width:100%;
    padding: 7.0rem 0 8.0rem 0;
    background: #F7F7F7;
    position: relative;
    z-index: 40;
}
.faqArea .inner{
    width:112.0rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.faqArea .inner h2{
    font-size:3.8rem;
    font-weight: 900;
    margin-bottom: 3.5rem;
    text-align: center;
}
.faqArea .boxArea .box{
    margin-bottom: 20px;
}
.faqArea .boxArea .box dl{
    width:100%;
    background: #FFFFFF;
    padding: 0 4.0rem 0 4.0rem;
}
.faqArea .boxArea .box dl dt{
    width:100%;
    display: flex;
    align-items: center;
    font-size:2.2rem;
    font-weight: 700;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    padding: 3.0rem 3.0rem 3.0rem 0;
}
.faqArea .boxArea .box dl dt:before{
    content: "Q.";
    font-size:3.8rem;
    font-weight: 700;
    font-family: "figtree", sans-serif;
    color:#F1C524;
    margin-right: 3.5rem;
}
.faqArea .boxArea .box dl dt::after{
    content: "";
    background: url("../img/top/icon_faq_001.png") no-repeat center center/auto;
    width:2.0rem;
    height:2.0rem;
    position: absolute;
    top:0;
    left:auto;
    right:0;
    bottom:0;
    margin: auto;
}
.faqArea .boxArea .box dl.select dt::after{
    background: url("../img/top/icon_faq_002.png") no-repeat center center/auto;
}
.faqArea .boxArea .box dl dd{
    border-top: 1px solid rgba(112,112,112,0.28);
    display: none;
    font-size:1.8rem;
    font-weight:400;
    line-height: 1.8;
    padding: 3.5rem 5.5rem 4.5rem 8.0rem;
    position: relative;
    text-align: left;
}
.faqArea .boxArea .box dl dd:before{
    content: "A.";
    font-size:3.8rem;
    font-weight: 700;
    font-family: "figtree", sans-serif;
    color:#F1C524;
    position: absolute;
    top:3.2rem;
    left:0;
}
.faqArea .boxArea .box dl dd .comment {
    font-size: 1.0rem;
    font-weight: 300;
    margin-top: 1.0rem;
}
@media (max-width: 768px) {
    .faqArea{
        padding: 4.0rem 0 4.5rem 0;
    }
    .faqArea .inner{
        width:calc(100vw - 6.0rem);
    }
    .faqArea .inner h2{
        font-size:2.1rem;
    }
    .faqArea .boxArea .box{
        margin-bottom: 1.5rem;
    }
    .faqArea .boxArea .box dl{
        padding: 0 1.5rem 0 1.5rem;
        border:1px solid #DBDBDB;
        border-radius: 10px;
    }
    .faqArea .boxArea .box dl dt{
        font-size:1.5rem;
    }
    .faqArea .boxArea .box dl dt:before{
        font-size:2.8rem;
        margin-right: 1.4rem;
    }
    .faqArea .boxArea .box dl dt::after{
        width:1.4rem;
        height:1.4rem;
    }
    .faqArea .boxArea .box dl dd{
        font-size:1.3rem;
        padding: 3.0rem 3.0rem 3.8rem 4.5rem;
    }
    .faqArea .boxArea .box dl dd:before{
        font-size:2.8rem;
        top:3.0rem;
    }
}

/*--------------------------------------
    diagnosisArea
--------------------------------------*/

.diagnosisArea{
    width:100%;
    padding: 20.0rem 0 8.0rem 0;
    background: #FFF1BF;
    position: relative;
    z-index: 40;
}
.diagnosisArea .bgletter{
    position: absolute;
    top:5.0rem;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    overflow: hidden;
}
.diagnosisArea .bgletter .bgloop{
    display: flex;
    width:100%;
}
.diagnosisArea .bgletter .bgloop .loopitem{
    flex: 0 0 auto;
    font-size: 9.8rem;
    line-height: 1.2;
    white-space: nowrap;
    padding-right: 2.0rem;
    padding-left: 2.0rem;
    font-weight: 800;
    color:#F1C524;
    user-select: none;
}
.diagnosisArea .bgletter .bgloop .loopitem:nth-child(odd) {
    animation: loop 40s -20s linear infinite;
}
.diagnosisArea .bgletter .bgloop .loopitem:nth-child(even) {
    animation: loop2 40s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
.diagnosisArea h2{
    font-size:3.8rem;
    font-weight: 900;
    margin-bottom: 2.5rem;
    text-align: center;
}
.diagnosisArea .desc{
    font-size:2.0rem;
    line-height: 1.5;
    margin-bottom: 4.5rem;
    text-align: center;
}
.diagnosisArea .boxArea{
    width:88.4rem;
    display: flex;
    justify-content: center;
    gap:2.4rem;
    margin: 0 auto;
}
.diagnosisArea .boxArea .box{
    width:43.0rem;
    background: #FFFFFF;
    border-radius: 1.0rem;
    overflow: hidden;
    text-align: center;
    padding-bottom: 5.0rem;
}
.diagnosisArea .boxArea .box .img{
    width:100%;
    height:24.0rem;
    margin-bottom: 2.0rem;
}
.diagnosisArea .boxArea .box .img img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.diagnosisArea .boxArea .box h3{
    display: flex;
    justify-content:center;
    align-items: center;
    width:100%;
    height:8.0rem;
    margin-bottom: 2.0rem;
}
.diagnosisArea .boxArea .box h3 span{
    font-size:2.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}
.diagnosisArea .boxArea .box .text{
    line-height: 1.8;
    margin-bottom: 4.0rem;
}
.diagnosisArea .boxArea .box .linkBtn{
    width:20.0rem;
    height:5.0rem;
    margin: 3.0rem auto 0 auto;
}
.diagnosisArea .boxArea .box .linkBtn a{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    border-radius: 2.8rem;
    background: #F1C524;
    font-weight: 700;
}
@media (max-width: 768px) {
    .diagnosisArea{
        padding: 10.5rem 0 4.5rem 0;
    }
    .diagnosisArea .bgletter{
        top:1.8rem;
    }
    .diagnosisArea .bgletter .bgloop .loopitem{
        font-size: 6.0rem;
        padding-right: 1.0rem;
        padding-left: 1.0rem;
    }
    .diagnosisArea h2{
        font-size:2.1rem;
        margin-bottom: 1.5rem;
    }
    .diagnosisArea .desc{
        width:calc(100vw - 6.0rem);
        font-size:1.3rem;
        margin:0 auto 3.2rem;
        text-align: left;
    }
    .diagnosisArea .boxArea{
        width:calc(100vw - 6.0rem);
        display: grid;
        gap:1.5rem;
    }
    .diagnosisArea .boxArea .box{
        width:100%;
        padding-bottom: 3.0rem;
    }
    .diagnosisArea .boxArea .box .img{
        width:100%;
        height:auto;
        margin-bottom: 1.5rem;
    }
    .diagnosisArea .boxArea .box h3{
        height:auto;
        margin-bottom: 1.5rem;
    }
    .diagnosisArea .boxArea .box h3 span{
        font-size:2.2rem;
    }
    .diagnosisArea .boxArea .box .text{
        margin-bottom: 3.0rem;
    }
    .diagnosisArea .boxArea .box .linkBtn{
        width:17.4rem;
        height:4.5rem;
        margin: 0 auto 0 auto;
    }
}