/*modal*//*PC 1600x1000...SMP 1000x1000*/
.modal { display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: 10000000000;}
.modal__bg { height: 100vh; position: absolute; width: 100%; background: rgba(255, 255, 255, 0);}
.modal__content { width: 100%; max-width: 480px; height: 80%; background: rgba(255, 255, 255, 0); padding: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10em;}
.js-modal-close { cursor: pointer; color: rgba(0, 0, 0, 1);}
.modal__content a { z-index: 100000; text-align: center; margin: 0 auto; padding: 5px 0 10px 0; font-size: 80%; display: block; cursor: pointer; color: rgba(0, 0, 0, 1);}
.modal__content a:hover { color: rgba(0, 0, 0, .5);}
.clsbtn a { display: inline-block; margin: 1em auto; padding: .5em 1em; text-align: center; color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); font-weight: 700; font-size: 90%; position: relative; z-index: 1000;}
.clsbtn a:hover { opacity: .8;}
/*_chart*/
.bg_orange { background: rgba(88, 47, 17, .95);}
.bg_pink { background: rgba(108, 14, 45, .95);}
.bg_blue { background: rgba(38, 49, 129, .95);}
.bg_bluegreen { background: rgba(24, 93, 65, .95);}
.bg_green { background: rgba(30, 95, 25, .95);}
.bg_yellow { background: rgba(112, 88, 9, .95);}
.bg_purple { background: rgba(70, 24, 100, .95);}
/*_txt*/
.prof_txt { box-sizing: border-box; width: 96%; margin: 0 auto; padding: 1.5em 1.2em; text-align: left; line-height: 220%; font-size: 90%; font-weight: 500; letter-spacing: .05em; background-color: rgba(255, 255, 255, .98); font-feature-settings: "palt";}
/*_img*/
.bg_img { width: 100%; height: 0; padding-top: 100%; background-repeat: no-repeat; background-size: contain; margin-bottom: .5em;}

#m_kaoru .bg_img { background-image: url(../chart/img/chara/kaoru_s.jpg);}
#m_kaoru .prof_txt { border: 2px solid rgba(205, 103, 27, 1); color: rgba(88, 47, 17, 1);}
#m_kaoru .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(255, 161, 99, 1);}

#m_mamie .bg_img { background-image: url(../chart/img/chara/mamie_s.jpg);}
#m_ryoma .bg_img { background-image: url(../chart/img/chara/ryoma_s.jpg?0);}
#m_mamie .prof_txt, #m_ryoma .prof_txt { border: 2px solid rgba(156, 54, 88, 1); color: rgba(108, 14, 45, 1);}
#m_mamie .prof_txt .udl, #m_ryoma .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(255, 99, 151, 1);}

#m_tomoya .bg_img { background-image: url(../chart/img/chara/tomoya_s.jpg);}
#m_tomoya .prof_txt { border: 2px solid rgba(84, 95, 178, 1); color: rgba(38, 49, 129, 1);}
#m_tomoya .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(136, 150, 255, 1);}

#m_iroha .bg_img { background-image: url(../chart/img/chara/iroha_s.jpg);}
#m_iroha .prof_txt { border: 2px solid rgba(106, 163, 140, 1); color: rgba(24, 93, 65, 1);}
#m_iroha .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(31, 238, 154, 1);}

#m_reika .bg_img { background-image: url(../chart/img/chara/reika_s.jpg?0);}
#m_miu .bg_img { background-image: url(../chart/img/chara/miu_s.jpg?0);}
#m_shiori .bg_img { background-image: url(../chart/img/chara/shiori_s.jpg?0);}
#m_reika .prof_txt, #m_miu .prof_txt, #m_shiori .prof_txt { border: 2px solid rgba(134, 188, 130, 1); color: rgba(30, 95, 25, 1);}
#m_reika .prof_txt .udl, #m_miu .prof_txt .udl, #m_shiori .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(139, 255, 130, 1);}

#m_sayuri .bg_img { background-image: url(../chart/img/chara/sayuri_s.jpg?0);}
#m_sayuri .prof_txt { border: 2px solid rgba(219, 175, 34, 1); color: rgba(112, 88, 9, 1);}
#m_sayuri .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(255, 223, 120, 1);}

#m_nazo .bg_img { background-image: url(../chart/img/chara/nazo_s.jpg?0);}
#m_nazo .prof_txt { border: 2px solid rgba(176, 100, 226, 1); color: rgba(70, 24, 100, 1);}
#m_nazo .prof_txt .udl { padding-bottom: 3px; border-bottom: 2px dotted rgba(205, 130, 255, 1);}

/*for_W485-*/
@media screen and (min-width: 485px) {
.prof_txt { width: 100%;}
}

/*for_W768-*/
@media screen and (min-width: 768px) {
.modal__content { box-sizing: border-box; width: 720px; max-width: 720px; height: 490px; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%,-50%); padding-bottom: 10em;}
.clsbtn a { width: 60px; position: absolute; top: 445px; margin-left: -30px;}
/*_img*/
.bg_img { width: 100%; height: 0; padding-top: 62.5%; margin-bottom: 0;}
#m_kaoru .bg_img { background-image: url(../chart/img/chara/kaoru.jpg?1);}
#m_mamie .bg_img { background-image: url(../chart/img/chara/mamie.jpg?1);}
#m_ryoma .bg_img { background-image: url(../chart/img/chara/ryoma.jpg?1);}
#m_tomoya .bg_img { background-image: url(../chart/img/chara/tomoya.jpg?1);}
#m_iroha .bg_img { background-image: url(../chart/img/chara/iroha.jpg?1);}
#m_reika .bg_img { background-image: url(../chart/img/chara/reika.jpg?1);}
#m_miu .bg_img { background-image: url(../chart/img/chara/miu.jpg?1);}
#m_shiori .bg_img { background-image: url(../chart/img/chara/shiori.jpg?1);}
#m_sayuri .bg_img { background-image: url(../chart/img/chara/sayuri.jpg?1);}
#m_nazo .bg_img { background-image: url(../chart/img/chara/nazo.jpg?1);}
/*_txt*/
.prof_txt { box-sizing: border-box; width: 47%; height: 50.5%; overflow: hidden; overflow-y: auto; margin: 0; padding: .25em .75em .5em .75em; position: absolute; top: 36.5%; left: 49.5%; border: 0; line-height: 230%; font-size: 86%; }
}