@charset "UTF-8";

/* CSS Document */

.mv-item {
    width: 95%;
    max-width: 860px;
    background-color: #FFF;
    margin: 0 auto;
    padding: 6% 5% 120px;
}
.mv-item img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.white-popup .mfp-close {
    opacity: 0;
    color: #FFF!important;
}
.mv-item .inner {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}
.mv-item .inner > h1 {
    width: 180px;
    margin: 0 auto;
}
.mv-item .inner h2.prof {
    color: #0069ba;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    -moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	text-align: center;
	text-justify: inter-ideograph;
	overflow-wrap: break-word;
}
.mv-item .inner > p {
    text-align: center;
    margin-top: .5em;
}
.mv-item .inner h1.title-s {
    width: 90%;
    max-width: 480px;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    background-color: #0069ba;
    border-radius: 30px;
    margin: 1em auto 0;
    padding: .5em .5em;
}
.mv-item .inner dl {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    
    background-color: #e83c00;
    margin-top: 5%;
    padding: 4% 4%;
}
.mv-item .inner .slide2 dl {
    background-color: #000;
}
.mv-item .inner dl dt {
    width: 80px;
    position: relative;
    background-color: #FFF;
    border-radius: 40px;
    padding: 40px 0;
}
.mv-item .inner dl dt span {
    width: 1em;
    position: absolute;
    text-align: center;
    font-size: clamp(2.4rem, 3.2vw, 3.2rem);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
    z-index: 1;
}
.mv-item .inner dl dd {
    flex: 1;
    color: #FFF;
    padding-left: 4%;
}
.mv-item .inner dl dd h2 {
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.mv-item .inner .chart {
    width: 100%;
    max-width: 769px;
    position: relative;
    margin: 40px auto 0;
}
.mv-item .inner .chart .c-point1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mv-item .inner .chart .c-point2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mv-item .inner .chart .c-point3 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mv-item .inner .chart .c-point4 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mv-item .inner .chart div {
    width: 6.5%;
    position: absolute;
    cursor: pointer;
    background-color: transparent;
    padding: 3.5% 0;
    z-index: 1;
}

/* point 1 */

.mv-item .inner .chart .c-point1 div:nth-of-type(1) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 280%); 
    transform: translate(138%, 280%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(2) {
    top: 0;
    left: 0;
    -webkit-transform: translate(400%, 400%);
    transform: translate(400%, 400%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(3) {
    top: 0;
    left: 0;
    -webkit-transform: translate(670%, 300%);
    transform: translate(670%, 300%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(4) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1020%, 305%);
    transform: translate(1020%, 305%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(5) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1380%, 160%);
    transform: translate(1380%, 160%);
}


/* point 1b */

.mv-item .inner .chart .c-point1 div:nth-of-type(6) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 400%); 
    transform: translate(138%, 400%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(7) {
    top: 0;
    left: 0;
    -webkit-transform: translate(400%, 280%);
    transform: translate(400%, 280%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(8) {
    top: 0;
    left: 0;
    -webkit-transform: translate(670%, 190%);
    transform: translate(670%, 190%);
}
.mv-item .inner .chart .c-point1 div:nth-of-type(9) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1020%, 175%);
    transform: translate(1020%, 175%);
}

.mv-item .inner .chart .c-point1 div:nth-of-type(10) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1380%, 340%);
    transform: translate(1380%, 340%);
}

/* point 2 */

.mv-item .inner .chart .c-point2 div:nth-of-type(1) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 420%); 
    transform: translate(138%, 420%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(2) {
    top: 0;
    left: 0;
    -webkit-transform: translate(580%, 415%);
    transform: translate(580%, 415%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(3) {
    top: 0;
    left: 0;
    -webkit-transform: translate(930%, 190%);
    transform: translate(930%, 190%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(4) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1195%, 110%);
    transform: translate(1195%, 110%);
}

/* point 2b */

.mv-item .inner .chart .c-point2 div:nth-of-type(5) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 280%); 
    transform: translate(138%, 280%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(6) {
    top: 0;
    left: 0;
    -webkit-transform: translate(400%, 280%);
    transform: translate(400%, 280%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(7) {
    top: 0;
    left: 0;
    -webkit-transform: translate(930%, 440%);
    transform: translate(930%, 440%);
}
.mv-item .inner .chart .c-point2 div:nth-of-type(8) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1195%, 440%);
    transform: translate(1195%, 440%);
}

/* point 3 */

.mv-item .inner .chart .c-point3 div:nth-of-type(1) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 290%); 
    transform: translate(138%, 290%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(2) {
    top: 0;
    left: 0;
    -webkit-transform: translate(350%, 290%);
    transform: translate(350%, 290%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(3) {
    top: 0;
    left: 0;
    -webkit-transform: translate(515%, 205%);
    transform: translate(515%, 205%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(4) {
    top: 0;
    left: 0;
    -webkit-transform: translate(880%, 200%);
    transform: translate(880%, 200%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(5) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1225%, 140%);
    transform: translate(1225%, 140%);
}

/* point 3b */

.mv-item .inner .chart .c-point3 div:nth-of-type(6) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 400%); 
    transform: translate(138%, 400%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(7) {
    top: 0;
    left: 0;
    -webkit-transform: translate(400%, 400%);
    transform: translate(400%, 400%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(8) {
    top: 0;
    left: 0;
    -webkit-transform: translate(670%, 410%);
    transform: translate(670%, 410%);
}
.mv-item .inner .chart .c-point3 div:nth-of-type(9) {
    top: 0;
    left: 0;
    -webkit-transform: translate(995%, 440%);
    transform: translate(995%, 440%);
}

/* point 4 */

.mv-item .inner .chart .c-point4 div:nth-of-type(1) {
    top: 0;
    left: 0;
    -webkit-transform: translate(440%, 395%); 
    transform: translate(440%, 395%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(2) {
    top: 0;
    left: 0;
    -webkit-transform: translate(910%, 395%);
    transform: translate(910%, 395%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(3) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1200%, 335%);
    transform: translate(1200%, 335%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(4) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1380%, 200%);
    transform: translate(1380%, 200%);
}

/* point 4b */

.mv-item .inner .chart .c-point4 div:nth-of-type(5) {
    top: 0;
    left: 0;
    -webkit-transform: translate(138%, 220%); 
    transform: translate(138%, 220%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(6) {
    top: 0;
    left: 0;
    -webkit-transform: translate(440%, 220%);
    transform: translate(440%, 220%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(7) {
    top: 0;
    left: 0;
    -webkit-transform: translate(840%, 220%);
    transform: translate(840%, 220%);
}
.mv-item .inner .chart .c-point4 div:nth-of-type(8) {
    top: 0;
    left: 0;
    -webkit-transform: translate(1085%, 280%);
    transform: translate(1085%, 280%);
}


.mv-item .inner .chart .c-point1 div:nth-of-type(n+6) {
    background-color: transparent;
}
.mv-item .inner .mind {
    margin-top: 40px;
}
.mv-item .inner .mind h2 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: #FFF;
    text-align: center;
    background-color: #0069ba;
    padding: .5em 1em;
}
.mv-item .inner .mind table {
    width: 100%;
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    line-height: 160%;
    margin-top: 30px;
}
.mv-item .inner .mind table th {
    width: 170px;
    color: #FFF;
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    text-align: center;
    vertical-align: middle;
    background-color: #969da1;
    padding: 1.5em .5em;
}
.mv-item .inner .mind table:nth-of-type(2) th {
    background-color: #7fb4dc;
}
.mv-item .inner .mind table td {
    vertical-align: middle;
    background-color: #eaebec;
    padding: 1.5em 1.5em;
}
.mv-item .inner .mind table:nth-of-type(2) td {
    background-color: #cce1f1;
}

.mv-item .inner .chance {
    margin-top: 40px;
}
.mv-item .inner .chance h2 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    text-align: center;
    background-color: #ffea00;
    padding: .5em 1em;
}
.mv-item .inner .chance h3 {
    display: inline-block;
    font-size: clamp(1.4rem, 2vw, 2rem);
    text-align: center;
    background-color: #ffea00;
    margin-top: 30px;
    padding: .3em .5em;
}
.mv-item .inner .chance p {
    margin-top: .5em;
}

.mv-item .inner .close {
    width: 70%;
    max-width: 360px;
    cursor: pointer;
    margin: 10% auto 0;
}

@media only screen and (min-width:1px) and (max-width: 768px) {
	
    .mv-item .inner > h1 {
        width: 140px;
        margin: 0 auto;
    }
    .mv-item .inner dl dt {
        width: 40px;
        position: relative;
        background-color: #FFF;
        border-radius: 20px;
        padding: 20px 0;
    }
    .mv-item .inner dl dd {
        flex: 1;
        color: #FFF;
        padding-left: 4%;
    }
    .mv-item .inner .chart {
        margin: 6% auto 0;
    }
    
    .mv-item .inner .mind {
        margin-top: 6%;
    }
    .mv-item .inner .mind table {
        margin-top: 3%;
    }
    .mv-item .inner .mind table th {
        width: 100%;
        display: block;
        color: #FFF;
        font-size: clamp(1.2rem, 1.6vw, 1.6rem);
        text-align: center;
        vertical-align: middle;
        background-color: #969da1;
        padding: 1em .5em;
    }
    .mv-item .inner .mind table:nth-of-type(2) th {
        background-color: #7fb4dc;
    }
    .mv-item .inner .mind table td {
        width: 100%;
        display: block;
        vertical-align: middle;
        background-color: #eaebec;
        padding: 1em .5em;
    }
    .mv-item .inner .mind table:nth-of-type(2) td {
        background-color: #cce1f1;
    }

    .mv-item .inner .chance {
        margin-top: 6%;
    }
    .mv-item .inner .chance h3 {
        margin-top: 4%;
    }

}