@charset "utf-8";
/* chart-fv */
.chart{
    background-image: url(../images/dodo_png/member-firstView.png);
}
.chart-fv{
    padding:140px 0 40px;
    background-image: url(../images/dodo_png/front-fv.png);
}

.chart-fv hgroup{
    background-image: url(../images/dodo_png/bgi-charttitle.png);
    padding:48px 0 48px;
    width:45.3%;
    /* max-width:170px; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:0 auto;
}

.chart-fv__lead{
    text-align:center;
    max-width:170px;
    width:45.3%;
    font-size:1.4rem;
    margin:0 auto;
    margin-top:40px;
}

.chart-inner{
    position:relative;
    max-width: 800px;
    margin:0 auto;
}

.fv-sirotuti,
.fv-akatuti,
.fv-jikituti,
.fv-kokudeituti{
    position:absolute;
}

.fv-sirotuti{
    width:28.5%;
    max-width:107px;
transform: rotate(-5deg);
left:16px;
top:-48px;
}

.fv-akatuti{
width: 25.3%;
max-width:95px;
transform: rotate(13deg);
right:16px;
top:-48px;
}

.fv-jikituti{
    width:21.3%;
    max-width:80px;  
    bottom:0;
    left:24px; 
}

.fv-kokudeituti{
    max-width:82px;
    width:21.8%;
    bottom:0;
    right:24px;
}

.chart__inner{
    padding:40px 16px;
}

.chart-item{
    padding:40px 8px;
}

.chart-item hgroup{
    text-align: center;
}
.chart-item p{
    font-size:1.4rem;
    margin-top:24px;
}

.chart-item h2{
    font-size:4rem;
}
.chart-item span{
    font-size:1.8rem;
}
.chart-item--jikituti{
    background-color: #C7EDF6;
    
}

.chart-item--sirotuti{
    background-color:#FFF9CF;
}

.chart-item--akatuti{
    background-color:#ECAE9B;
}

.chart-item--kokudeituti{
    background-color: #C4C4C4;
}


.type-box{
    background-color:#fdfdfd;
    margin-top:40px;
}

.chart__txt{
    padding:0 16px 24px;
}

.type-image{
    display: block;
    margin:0 auto;
}

.type-image--sirotuti{
    max-width:214px;
}

.type-image--jikituti{
    max-width:121px;
}

.type-image--akatuti{
    max-width:191px;
}

.type-image--kokudeituti{
    max-width:136px;
}

.category-box{
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:8px;
    align-items: center;
    padding-bottom:40px;
}

.chart-category{
    display: flex;
width:277px;
justify-content: center;
align-items: center;
font-size:1.5rem;
padding:8px 24px;
border-radius: 4px;
}

.chart-category--jiki{
border: 1px solid #4B88C4;
background: #fdfdfd;
}

.chart-category--siro{
border: 1px solid #C79F28;
background: #FFFDEE;
}

.chart-category--kuro{
    background-color: #ACABAA;
}

.chart-category--aka{
    background-color: #E9987F;
}

#jiki,
#siro,
#aka,
#kuro{
    scroll-margin-top:8vh ;
}
.share-x{
    display: block;
    font-size:1.6rem;
    background-color:#fdfdfd;
    border-radius: 10px;
    padding:16px 8px;
    border: solid 1px var(--vivid-brown);
   width:200px;
   text-align: center;
   margin: 24px auto 0;

    
}
.mitituti{
    padding:40px 4.2%;
}
.btn--mitituti{
    margin:0 auto;
}

.mitituti p{
    margin:0 auto;
    text-align: center;
}

.mitituti p:nth-of-type(2){
    margin-bottom:24px;
}

.mitituti__image{
    width:80px;
    display: block;
    margin:24px auto;
}
@media screen and (min-width:768px) {
    .chart-fv{
        padding:120px 80px 120px;
    }
  
    .chart-fv hgroup{
        max-width:500px;
       background-size: contain;
       padding:160px 24px;
    }
    .chart-item{
        max-width:768px;
        margin:0 auto;
        border-radius: 10px;
    }

    .chart-item p{
        font-size:1.6rem;
    }
   
    .chart__image--pc{
        max-width:768px;
       display: block;
       margin:0 auto;
    }
    .chart__inner{
        padding:48px 0;
    }

    .chart-result{
        padding-bottom:48px;
    }
    .fv-sirotuti{
        width:16.6%;
        max-width:240px;
    }
    
    .fv-akatuti{
    width: 13.8%;
    max-width:200px;

    }
    
    .fv-jikituti{
        width:83.3%;
        max-width:120px;  
    }
    
    .fv-kokudeituti{
        width:83.3%;
       max-width: 120px;
    }
    .chart-fv__lead{
        font-size:1.6rem;
        max-width:768px;
    }

    .type-box{
        max-width:560px;
        margin:16px auto;
        border-radius: 4px;
        padding:16px;
    }
    
    
}