/*modal*/
.modal{ display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: 10000000000;}
.modal__bg{ height: 100vh; position: absolute; width: 100%;}
.modal__content { box-sizing: border-box; width: 90%; max-width: 700px; max-height: 75%; background: rgba(255, 255, 255, 1); padding: 5px 5px 20px 5px; position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); overflow-y: auto; font-size: 100%; font-family: 'arial', "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro";}
.js-modal-close { cursor: pointer;}
.modal__content a { z-index: 100000; text-align: center; margin: 0 auto; padding: 5px 0 10px 0; font-size: 110%; font-weight: bold; display: block; cursor: pointer;}
/*_chart*/
#gurame { background: rgba(151, 20, 35, .8);}
#gaku { background: rgba(13, 116, 195, .8);}
#hotel { background: rgba(91, 39, 161, .8);}
#magazine { background: rgba(207, 122, 21, .8);}
#other { background: rgba(28, 111, 65, .8);}
.waku { width: 100%; max-width: 760px; margin: 5px auto; background-repeat: repeat-y; -webkit-background-size: contain; background-size: contain; -webkit-background-position: center center; background-position: center center;}
.red { background-image: url(../chart/img/bg_red.png);}
.blue { background-image: url(../chart/img/bg_blue.png);}
.green { background-image: url(../chart/img/bg_green.png);}
.orange { background-image: url(../chart/img/bg_orange.png);}
.purple { background-image: url(../chart/img/bg_purple.png);}
.ue { width: 100%; height: 0; padding-top: 6.578947368421053%; position: relative;}
.ue_sp { width: 100%; height: 0; padding-top: 6.578947368421053%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; -webkit-background-position: center center; background-position: center center;}
.red .ue_sp { background-image: url(../chart/img/top_red.png);}
.blue .ue_sp { background-image: url(../chart/img/top_blue.png);}
.green .ue_sp { background-image: url(../chart/img/top_green.png);}
.orange .ue_sp { background-image: url(../chart/img/top_orange.png);}
.purple .ue_sp { background-image: url(../chart/img/top_purple.png);}
.shita { width: 100%; height: 0; padding-top: 6.578947368421053%; position: relative;}
.shita_sp { width: 100%; height: 0; padding-top: 6.578947368421053%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; -webkit-background-position: center center; background-position: center center;}
.red .shita_sp { background-image: url(../chart/img/bottom_red.png);}
.blue .shita_sp { background-image: url(../chart/img/bottom_blue.png);}
.green .shita_sp { background-image: url(../chart/img/bottom_green.png);}
.orange .shita_sp { background-image: url(../chart/img/bottom_orange.png);}
.purple .shita_sp { background-image: url(../chart/img/bottom_purple.png);}
.photo_all { width: 80%; max-width: 450px; margin: 10px auto 5px auto;}
.photo_sp { width: 100%; height: 0; padding-top: 100%; position: relative; box-shadow: 1px 2px 5px rgba(200, 200, 200, .75); -webkit-box-shadow: 1px 2px 5px rgba(200, 200, 200, .75); -moz-box-shadow: 1px 2px 5px rgba(200, 200, 200, .75);}
.photo { width: 100%; height: 0; padding-top: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
.name_txt { text-align: center; font-size: 120%; letter-spacing: .1em; line-height: 1.6em; margin-top: 1em;}
.name_txt ruby { line-height: .5em; font-family: Arial, Verdana, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; font-size: 90%; position: relative;}
.name_txt rt { transform: translateY( - .3em);}

.red .name_txt { color: rgba(121, 0, 5, 1);}
.blue .name_txt { color: rgba(0, 86, 165, 1);}
.purple .name_txt { color: rgba(61, 9, 131, 1);}
.orange .name_txt { color: rgba(177, 92, 0, 1);}
.green .name_txt { color: rgba(8, 91, 45, 1);}
.profile { box-sizing: border-box; width: 85%; max-width: 600px; margin: 10px auto; font-size: 120%; line-height: 150%; text-align: left; color: rgba(0, 0, 0, 1);}
/*for_W1000-*/
@media screen and (min-width: 1000px) {
.waku { margin: 10px auto;}
.modal__content { font-size: 130%; max-width: 760px; max-height: 80%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.modal__content a { padding: 0 0 30px 0; font-size: 110%;}
.photo_all { width: 80%; max-width: 400px; margin: 10px auto;}
}