#magazine_viewer{padding:10px 20px}#magazine_viewer .front{width:100%;height:100%;top:0;right:0;left:0;bottom:0;margin:auto;background:#333;position:relative;padding:20px;display:flex;flex-direction:column}#magazine_viewer .front #toolbar{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;position:relative;top:0;right:0;left:0;margin:auto;padding:0 50px;width:auto;height:40px;background:#666;color:#FFF;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:3px}#magazine_viewer .front #toolbar a{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:5px}#magazine_viewer .front #toolbar a:first-child{margin-left:0;margin-right:15px}#magazine_viewer .front #toolbar a img{width:100%;height:100%}#magazine_viewer .front #toolbar input{width:40px;display:inline;border:none;padding:0 3px;border-radius:2px;margin:0 .7em}#magazine_viewer .front ul#viewer{height:calc(100% - 140px);position:relative}#magazine_viewer .front ul#viewer>a{position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border-style:solid;z-index:2}#magazine_viewer .front ul#viewer>a.left{left:0;border-width:20px 15px 20px 0;border-color:transparent #ffffff transparent transparent}#magazine_viewer .front ul#viewer>a.right{right:0;border-width:20px 0 20px 15px;border-color:transparent transparent transparent #ffffff}#magazine_viewer .front ul#viewer li{position:absolute;top:0;right:0;left:0;bottom:0;margin:auto;height:100%;display:flex;justify-content:center;align-items:center;padding:50px}#magazine_viewer .front ul#viewer li>div{background-size:contain;background-position:center;background-repeat:no-repeat;width:100%;height:100%}#magazine_viewer .front ul#navi{display:flex;overflow-x:scroll;overflow-y:hidden;padding:12px 5px;margin-top:auto}#magazine_viewer .front ul#navi li{width:150px;height:106px;flex-shrink:0;margin:0 5px;cursor:pointer}#magazine_viewer .front ul#navi li:first-child{margin-left:0}#magazine_viewer .front ul#navi li:last-child{margin-right:0}@media screen and (max-width: 768px){#magazine_viewer{padding:5px}#magazine_viewer .bg::after{width:auto;top:10px;right:10px}#magazine_viewer .front{padding:25px 10px 0;justify-content:center}#magazine_viewer .front #toolbar{padding:0 25px;margin:0 auto 0}#magazine_viewer .front ul#viewer{height:calc(100% - 100px)}#magazine_viewer .front ul#viewer li{padding:20px}#magazine_viewer .front ul#viewer>a.left{border-width:15px 11px 15px 0}#magazine_viewer .front ul#viewer>a.right{border-width:15px 0 15px 11px}#magazine_viewer .front ul#navi{padding:0}#magazine_viewer .front ul#navi li{width:70px;height:auto}}