/* ================================= sicks_specsaga chart CSS
================================= */
#chart_space { margin-top:-10px; margin-bottom: 20px;}
#chart_space .contents_txt { padding: 10px 0; text-align: center;}
#character_space .contents_txt { margin-top: 10px; padding-bottom: 10px;}
.link_chart { text-align: center; padding-bottom: 10px;}
.link_chart a { text-decoration: none; font-size: 110%; letter-spacing: .1em; font-weight: bold; display: block;}
.link_chart a .ya { color: rgba(255, 255, 255, 1);}
.link_chart a .chart_txt { padding-bottom: 1px; border-bottom: 1px dashed rgba(234, 178, 102, 1);}
.link_chart a:hover .chart_txt { border-bottom: 1px dashed  rgba(178, 230, 240, 1); color: rgba(178, 230, 240, 1);}

.chara-unit { padding-top:10px;}
.chara-unit { background-color:hsla(0,0%,0%,0.3); padding:12px;}
.chara-unit:not(:last-child) { margin-bottom:10px;}
.chara-unit dt { font-weight:bold; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; position:relative; color: rgba(178, 230, 240, 1);}
.chara-unit dt::after { content:""; display:block; height:2px; width:100%; background-color: rgba(255, 255, 255, 1);}
.chara-unit dt rt { font-weight:normal; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif; color: rgba(255, 255, 255, 1);}
.chara-unit dt .role { font-size:175%; text-align: left;}
.chara-unit dt .nm { position:absolute; right:0; bottom:0.2em; color: rgba(255, 255, 255, 1); font-size:125%;}
.chara-unit dd { padding-top: 20px; line-height:1.75; font-size:125%;}

.chara-pic { width: 60%; margin:0 auto; max-width: 360px;}
.chara-pic p { background-color: rgba(255, 255, 255, 1); margin-bottom:12px;}
.chara-pic p span, .chara-pic p span img { display:block;}
.chara-pic p span { position:relative; height:0; background-repeat:no-repeat; background-size:cover; padding-top:133.3333333333%;}
.chara-pic p span img { position: absolute; left:0; top:0; width:100%; height:100%;}
.chara-pic p .lazy-done { -webkit-animation: fadeIn 700ms; animation: fadeIn 700ms;}

#chart_img { width: 100%; max-width: 720px; margin: 5px auto 10px auto;}
#chart_img img { position: absolute; left:0; top:0; width:100%; height:100%;}
#chart_img .lnk { display: none;}
#chart_img .lazy-done { -webkit-animation: fadeIn 700ms; animation: fadeIn 700ms;}
#chart_img .lazy-done .lnk { display: block;}
#chart_base { width: 100%; height: 0; padding-top: 100%; position: relative;}
#chart0 { width: 100%; height: 0; padding-top: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#chart0 .lnk { width: 30%; height: 30%; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;}
#chart0 .lnk:hover { background: rgba(255, 255, 255, .2); cursor: pointer;}
#chart0 #lnk1 { width: 38%; height: 38%; position: absolute; left: 31%; top: 2%;}
#chart0 #lnk2 { position: absolute; left: 3%; top: 32.5%;}
#chart0 #lnk3 { position: absolute; left: 67%; top: 32.5%;}
#chart0 #lnk4 { position: absolute; left: 20%; top: 62.5%;}
#chart0 #lnk5 { position: absolute; left: 51%; top: 66.5%;}
#chart0 #lnk6 { position: absolute; left: 35%; top: 39%;}
.change_img { width: 100%; height: 0; padding-top: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: none;}
.chart_cls { width: 6.944444444444444%; height: 0; padding-top: 6.944444444444444%; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: absolute; top: 1.111111111111111%; left: 92.222222222222222%; display: none;}
.chart_cls:hover { background: rgba(255, 255, 255, .2); cursor: pointer;}
.psn_space { width: 16.666666666666667%; position: absolute;}
.psn_space .psn { width: 100%; height: 0; padding-top: 133.333333333333333%; position: absolute; top: 0; left: 0;}
.psn_space .psn:hover { background: rgba(255, 255, 255, .2); cursor: pointer;}
/*tokumu+keishicho*/
#a_shizuru { top: 24.027777777777778%; left: 18.194444444444444%;}
#a_takakura { top: 24.027777777777778%; left: 64.583333333333333%;}
#a_nonomura { top: 9.722222222222222%; left: 41.666666666666667%;}
#a_kondo { top: 65.138888888888889%; left: 41.666666666666667%;}
#a_kondo { top: 55.277777777777778%; left: 78.194444444444444%;}
#a_kasu { top: 69.444444444444444%; left: 8.75%;}
#a_kuzu { top: 69.444444444444444%; left: 30.972222222222222%;}
#a_biichi { top: 69.444444444444444%; left: 53.194444444444444%;}
/*naikaku+*/
#a_irie { top: 22.083333333333333%; left: 41.666666666666667%;}
#a_hasebe { top: 56.666666666666667%; left: 24.305555555555556%;}
#a_yamagi { top: 56.666666666666667%; left: 59.027777777777778%;}
#a_shuke { top: 72.222222222222222%; left: 13.888888888888889%;}
#a_momochi { top: 72.222222222222222%; left: 46.527777777777778%;}
#a_fuma { top: 72.222222222222222%; left: 79.166666666666667%;}
#a_irie { top: 16.527777777777778%; left: 41.666666666666667%;}
#a_hasebe { top: 40%; left: 24.305555555555556%;}
#a_yamagi { top: 40%; left: 59.027777777777778%;}
/*？*/
#a_ito { top: 33.333333333333333%; left: 41.666666666666667%;}
/*innner_planets*/
#a_oshima { top: 56.944444444444444%; left: 41.666666666666667%;}
#a_teiho { top: 12.5%; left: 41.666666666666667%;}
#a_oshima { top: 56.944444444444444%; left: 26.388888888888889%;}
#a_habu { top: 56.944444444444444%; left: 56.944444444444444%;}
/*asia_bo*/
#a_chin { top: 19.444444444444444%; left: 41.666666666666667%;}
#a_rose { top: 61.111111111111111%; left: 41.666666666666667%;}
/*holic*/
#a_kurono { top: 48.611111111111111%; left: 41.666666666666667%;}

@media all and (min-width: 768px) {
.link_chart { text-align: right; font-size: 90%; padding: 5px 5px 8px 5px; margin-bottom: 10px; background: rgba(255, 255, 255, .1);}

.chara-unit { background-color:hsla(0,0%,0%,0); padding: 10px 0 0 0;}
.chara-unit:before, .chara-unit:after { content: ""; display: table;}
.chara-unit:after { clear: both;}
.chara-unit:not(:last-child) { margin-bottom:30px;}
.chara-unit dl { width:334px; float:right; font-size: 90%;}
.chara-unit dt .role { font-size:160%;}
.chara-unit dt .nm { font-size:120%;}
.chara-unit dd { font-size: 75%;}

.chara-pic { width:170px; float:left; margin: 0 10px 0 0;}
.chara-pic p { margin-bottom:0;}
}