@charset "UTF-8";
@font-face {
font-family: 'm_number';
    src: url('KsNumeralArabicGCN.woff') format('woff'),
        url('KsNumeralArabicGCN.ttf') format('truetype');
}

html,body{margin:0;border:0;padding:0; height:100%;font-family:Meiryo,'ＭＳ Ｐゴシック',MS-Gothic,sans-serif;-webkit-text-size-adjust: 100%;-webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-size:16px;  line-height: 1.8; color: #000;}
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
*{box-sizing:border-box;vertical-align: middle;}
img{max-width: 100%;border: 0;-ms-interpolation-mode:bicubic;image-rendering: -webkit-optimize-contrast;}
sup{vertical-align: top;font-size: 12px; line-height:normal}
sub{vertical-align: initial; font-size: 12px; line-height:normal}
body{min-width: 1200px; overflow: hidden; background-color: #fff}
.wrap{width: 1200px; margin: 0 auto}
.df{display: flex; justify-content: space-between;align-items: center }
.mt15{margin-top:15px}
button{margin: 0; padding: 0}

#header{background-color: #DBF2FD; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1); position: relative;z-index: 9}
#header_top{position: relative;height: 70px}

#logo,#t_logo{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100%}
#logo img{height: 28px}
#t_logo{right: 0; top:20px;  left: auto}
#t_logo img{height: 20px}

#search{position: absolute; left: 350px; width:540px; top:15px;}

#search div{position: relative; padding-left: 50px; width: 100%; background: url(../img/search_icon.png) no-repeat left center; background-size: auto 30px; height: 40px}
#search div input[type="text"]{width:calc(100% - 175px);border: none; padding: 10px; padding-right: 50px;  height: 40px; position: absolute; left:40px; top: 0; z-index: 0; border-radius: 2px}
#search div input:focus,#search div input:active{outline: none}
#search_btn{position: absolute;  right: 0; top: 0; cursor: pointer; display: block; height: 40px; width:120px; text-align: center; border: none; background-color:#b33e5c; color: #fff; font-size: 18px; z-index: 1}
#clear_search_btn{position: absolute; width: 40px; height: 40px; left:365px; top: 0; text-indent: -9999em; border: none; cursor: pointer; background-color:transparent}
#clear_search_btn:hover{opacity: 0.6}

#clear_search_btn:before,#clear_search_btn:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:15px; height:2px; background-color:#000; content:""; transform:rotate(45deg);}
#clear_search_btn:after{transform:rotate(-45deg);}


#search_history{position: absolute;left:40px; top:38px;display: none; background-color: #fff;border-bottom-left-radius:5px; border-bottom-right-radius: 5px; width:calc(100% - 175px); padding:10px 0;box-shadow: 0 0 0 1px rgba(0,0,0,.1),0 2px 4px 1px rgba(0,0,0,.18);z-index:9}
#search_history.active{display: block}
#search_history span{display: flex; padding: 0 10px; cursor: pointer; align-items: center; position: relative}
#search_history span i{position: absolute; display: none; right: 0; top: 0;bottom: 0; margin: auto; width:25px; height: 25px; transform: skewX(0); cursor: pointer}
#search_history span:hover{background-color: #f1f1f1;}
#search_history span:hover i{display: block}
#search_history span i:before,#search_history span i:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:10px; height: 1px; background-color:#000; content:""; transform:rotate(45deg);}
#search_history span i:after{transform:rotate(-45deg);}
#search_history span i:hover:before,#search_history span i:hover:after{background-color: red}

#search_history font{display: block; background-color: #f1f1f1; margin-bottom: -10px; margin-top: 5px; padding: 5px; font-size: 12px;  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; text-align: right}
#search_history font b{cursor: pointer; font-weight: normal}
#search_history font b.active{font-weight: bold}
#set_font{position: absolute; right: 0; top: 20px; cursor: pointer}
#set_font img{height: 30px}

#font_change{display: none; position: absolute;width: 260px; right: 0; top: 60px; font-size: 12px; z-index: 999; background-color: #fff;box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3); border-radius: 5px}
#font_change h2{position: relative; display: flex; line-height: 1; justify-content: center; align-items: center; font-size: 12px; text-align: center; height: 35px; border-bottom: 1px solid #e7e7e7;border-top: 1px solid #e7e7e7; background-color: #f9f9f9;margin: 0; border-top-right-radius:5px; border-top-left-radius:5px;}
#font_change h2 span.beta{display: flex; height: 15px; align-items: center; padding-left:30px; background: url(../img/icon_beta.svg) no-repeat left center; background-size: auto 10px}

#font_change_wrap{padding:15px 10px}

#close_f_change{position: absolute; right:5px; top:5px; display: block;width:25px; height:25px; cursor: pointer}
#close_f_change b:before,#close_f_change b:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 15px; height: 2px; background-color:#1F2433; content:""; transform:rotate(45deg);}
#close_f_change b:after{transform:rotate(-45deg);}
#close_f_change:hover b{opacity: 0.6}
#f_text{display: flex; justify-content: space-between; margin-bottom: 10px; padding: 7px}
#f_text span{background-color:#f9f9f9; border: 1px solid #e7e7e7; font-weight: bold; display: block; padding:0 25px;  height:30px; line-height: 30px; font-size: 12px; align-items: center; text-align: center; cursor: pointer;user-select: none;border-radius:5px}
#f_change_slider{padding: 0 10px}
#f_gird{display: flex; position: relative;margin: 5px 0}
#f_gird i{display: block; border-right: 1px solid #ddd; width:calc(100% / 6); height:10px;transform: skewX(0);}
#f_gird:before{position: absolute; left: -1px; top: 0; width: 1px; height: 10px; background-color: #ddd; content: ""}

#Fchange{display: none}

.radio{display: flex; justify-content: center; height:45px; align-items: center}
.radio label,#mode_setting div label{display: flex; align-items: center; cursor: pointer; margin: 0 10px}
.radio input,#mode_setting div input{width:15px; height:15px; margin: 0; margin-right: 5px}

#mode_setting{display: flex;flex-direction: column; justify-content: center; align-items: center; margin:10px 0}
#mode_setting div{display: flex; padding-left:80px; position:relative; margin-top:5px}
#mode_setting div:first-child{margin-top: 0}
#mode_setting div span{display: flex; width: 80px; align-items: center; position: absolute; left: 0; top: 0; height: 100%}
.voice_setting {padding: 10px; display: flex; padding-top: 0; justify-content: center; opacity: 0.4}
.voice_setting.active{opacity:1}
.voice_setting select{width: 100%;border-radius: 3px; height: 30px; border:1px solid #e7e7e7; background-color: #fff; padding-left: 10px;}


#change_sp{position: absolute; right:100px; top:20px}
#change_sp img{height: 30px;}
#font_change p{font-size: 12px; line-height: 1.2; margin: 0;  padding: 10px;padding-top: 0}

#or_and{position: absolute; right:150px; top:13px; display: flex; flex-direction: column; align-items: center}
#or_and div{display: flex}
#or_and label:first-child{margin-right: 20px;}
#or_and span{display: block; line-height: 1;font-size: 11px; color: #009EA7;transform: scale(0.9, 1);font-weight: bold;}

#guide{position: absolute; right: 50px; top: 20px}
#guide img{height: 30px}
#search_filter{position: relative; height:35px; background-color:#005F64}
#search_filter:before{position: absolute; left:-28px; top: 0; width: calc(50% + 30px); height:35px; background-color: #AAAE00; content: "";transform: skewX(-25deg);}

#search_filter .wrap{position: relative; z-index: 3}
#search_filter .wrap div{display: flex; justify-content: space-around; align-items: center; width: 50%; height:35px; color: #fff; padding: 0 50px}
#search_filter .wrap div input,#or_and input{width:20px; height:20px; margin: 0; margin-right: 10px; vertical-align: middle;accent-color: #009EA7;}
#font_change input { accent-color: #009EA7;}
#search_filter .wrap div label,#or_and label{display: flex; align-items: center; cursor: pointer; height: 30px; overflow: hidden}
#search_filter .wrap #s_right.goi label:nth-child(1),#search_filter .wrap #s_right.goi label:nth-child(2){cursor: default}

#container{position: relative; display: flex; justify-content: space-between; height:calc(100% - 170px); padding-right: 50px; margin:15px auto; min-height:419px}
#container.x{padding-right: 0; border: 1px solid #555; background-color: #fff; flex-direction: column; position: relative; justify-content: center; align-items: center}
#container.x h2{padding: 0 50px}
.bottom_box{border: 1px solid #e7e7e7; min-width:600px; margin-top:20px; padding: 20px; font-size: 14px}

#page #container{height:calc(100% - 120px);}
.error{color:red; display: block; margin-top: 5px; line-height: 1.2}
#login_page{background: rgb(100,248,255);  background: linear-gradient(0deg, rgba(100,248,255,1) 0%, rgba(241,243,192,1) 70%);overflow: auto}
#login_page #container{justify-content: flex-start;align-items: center; background: url(../img/bg3_bg.png) no-repeat right center;  background-size:60% auto; height: auto; min-height:calc(100% - 105px); margin: 0 auto; padding: 50px 0; padding-left: 20px;}
#login_wrap.x{max-width:450px}
#login_wrap.hide{display: none}
#login_wrap h1{font-size:22px; line-height: 1; color: #fff;margin:0; margin-bottom: 10px}
#login_wrap .sub_title{margin: 0; margin-bottom: 20px; color: #fff}
.login{border:1px solid #e7e7e7; border-radius:5px;  background-color: rgba(255,255,255,0.75);-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); min-width:400px; user-select: none}

.login input[type=text],.login input[type=password]{width:100%; border:1px solid #AEADAD; padding:5px 10px; line-height:27px; height: 37px; border-radius:3px}

.login h2{ padding:0 20px; margin: 0; margin-top: 20px}
.login h2 span{display: block; line-height:25px; font-size: 20px; border-left:5px solid #000; padding-left: 10px}
.login_form{padding:20px; padding-bottom:15px; position: relative}
.login_form.x{padding-bottom: 20px}
.login_form .error{display: block; font-size: 12px}
#pw{position: relative; margin-top: 15px}
#pw input{padding-right:37px}
#pw span{position: absolute; right: 0; top: 0; display: block; width: 37px; height: 37px; background:url(../img/pw_off.png) no-repeat center center; background-size:20px auto; cursor: pointer}
#pw span.active{ background:url(../img/pw_on.png) no-repeat center center;background-size:20px auto;}
#pw.x{margin-top: 0}

#license_code input[type="text"]{width:167px}

#register_q{max-width:420px}
#register_table{background-color: #eee; padding: 10px; margin-top: 10px; margin-bottom: 15px; display: flex; justify-content: center}
#register_table th{text-align: right; padding-right: 20px}
#register_table td{display: flex; align-items: center}
#register_table td input{width: 80px;margin-right: 5px}
#register_table td i{display: block; position: relative; margin-left:18px}
#register_table td i.t{width:12px; height:7px; margin-top: -5px; border-bottom:2px solid #00B200;border-left:2px solid #00B200;    transform: rotate(-45deg); margin-left: 20px}
#register_table td i.f:before,#register_table td i.f:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:15px; height:2px; background-color:red; content:""; transform:rotate(45deg);}
#register_table td i.f:after{transform:rotate(-45deg);}
#register_q .red{color:red}

.login_form label{display: flex; align-items: center; margin-top: 10px; font-size: 14px; cursor: pointer}
.login_form label input:first-child{margin: 0; margin-right: 10px}
.login_btn_area{position: relative;border-top:1px solid #e7e7e7; background-color:#f5f5f5; padding:10px 0; text-align:center}
.btn{display:inline-block;border: none; border-radius:5px; color:#fff;background-color:#009EA7; line-height: 30px; padding:0 30px;font-size:15px; cursor:pointer;-webkit-appearance: none;font-family: -apple-system,BlinkMacSystemFont,Verdana,arial,HiraKakuProN-W3,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDGothic,Meiryo,sans-serif; user-select: none}
.btn:hover{-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; opacity:.6;filter:alpha(opacity=60);-ms-filter: "alpha( opacity=60)";}
.btn.back{background-color:#555; margin-right: 10px}
.btn.orange{background-color:#F58347;}
.btn.green{background-color:#50b451;}
.login_btn_area a{text-decoration: none;}
.login_right_btn{text-align: right; margin: 20px; margin-top: 0}
.login_etc{display: flex; justify-content:space-between; padding:10px 20px; align-items: center; text-align: center;border: 1px solid #e7e7e7;border-radius: 5px;background-color: rgba(255,255,255,0.75);-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);margin-top:10px}
.login_etc .btn{background-color: #e4007f;text-decoration: none; padding: 0 20px;}
.login_etc.n{padding: 10px}
.login_etc span{display: flex; align-items: center; font-size: 12px;}
.login_etc span:first-child{margin-bottom:5px}
.login_etc.n span:first-child{margin-bottom:0}
.login_etc span font{display: flex; justify-content: center; align-items: center; width:20px; height:20px; background-color:#fff; color: #000;border-radius: 50%; margin-right: 5px}
.login_etc span i,.login_etc span a{text-decoration: underline; cursor: pointer; font-style: normal; color: #000}


.login_btn_area #rm{font-size: 12px; display: flex; width: 100%; justify-content: center; line-height: 1; text-decoration: underline; margin-top:10px;}
#rm span{display: block; text-align: right}
.login h3{margin: 20px; margin-bottom: 0; font-size:14px; font-weight: normal}
.login h3.x{margin-bottom: 20px}
.login h3 span{display: block; margin-bottom: 10px;}
.login h3.end{width: 400px}
.login p{font-size: 12px; margin: 0; margin-top: 5px; line-height: 1.2}
#side{position: relative;min-width: 250px; max-width:474px; height: 100%; background-color: #fff; flex: none}
#side.active{padding-bottom:45px;}
#side_scroll{overflow: auto; height: 100% }
#side_container{padding: 20px;}
#side_container a{display: block; color: #000; text-decoration: none; margin-top: 5px; line-height: 1.5;  padding: 10px; cursor: pointer; word-break: break-all}
#side_container a:hover,#side_container a.active,#main_list nav a:hover,#main_list nav a.active{background-color:#EBC7CA; transition: all .2s ease-in-out;}
#side_container a:first-child{margin-top: 0}
#side_container a div{text-indent:-16px; padding-left: 16px}
#side_container a .indent{display: block; padding-left: 16px;}

#side.active #page_nav,#main_list.active #page_nav{display: flex}
#page_nav{position:absolute; width: 100%; left: 0; bottom: 0; height:45px; display: none; align-items: center; justify-content: center; background-color: #f7f7f7; border-top: 1px solid #e7e7e7; font-size: 12px}
#page_nav div{display: flex; align-items: center; justify-content: space-between; width: 240px;}
#page_nav.c div{width: 460px;}
#page_nav .arrow{display: block; border-radius: 3px; width:35px; height:35px; border: 1px solid #e7e7e7; background-color: #fff; cursor: pointer;position: relative}
#page_nav .arrow:hover{opacity: 0.6}
#page_nav .arrow:before{position:absolute; content:""; left:13px; top:0; bottom: 0; margin: auto; width:10px;height:10px;border-top:2px solid #777;border-right:2px solid #777;transform: rotate(-135deg);}
#page_nav #next.arrow:before{transform: rotate(45deg); left:8px}
#page_nav #current_page,#page_nav #current_view{display: flex; align-items: center; line-height: 1}
#page_nav #current_page{margin-bottom: 5px}
#page_nav #current_page span{display: block; margin-left: 5px}
#page_nav.c #current_page{margin-bottom:0; margin-right:50px}

#page_nav #current_view font{display: block; margin-right: 5px}
#page_nav #current_view span{display: block; margin-left: 5px}

#page_nav div div{flex-direction: column;width: auto; justify-content: center}
#page_nav.c div div{flex-direction: row; width:auto}

#page_nav input{border: 1px solid #ddd; border-radius: 2px; width: 50px; text-align: center; background-color: #fff; margin: 0; margin-right:5px}

#main{position: relative; flex: auto; margin-left: 15px; padding-top:76px; background-color: #fff;height:100%;}
#main_list{position: relative; background-color: #fff;height:100%;width:100%; border: 1px solid #555;}
#main_list.active{padding-bottom: 35px}
#main_list nav{padding:20px; }
#main_list nav a{display: block; margin-top: 10px;padding: 10px; line-height: 1.5; text-decoration: none; color:#000}

#main_list nav a:first-child{margin-top: 0}
#main_list nav a .dots,#main_list nav a .indent{margin-bottom: 0}
.blue{color:#009EA7;}
.contents_wrap{height:100%;overflow: auto; overflow-x: hidden; padding: 10px 20px 20px 20px;}
.contents{transform-origin:left top;}
.contents p{margin: 0; margin-bottom:20px;}
.contents a{color:#1532aa; text-decoration: underline}

.headword{position: absolute; left: 0; top: 0; width: 100%;}
.headword_container{border-bottom: 1px solid #e7e7e7; margin:0 10px; padding: 20px 10px; padding-right:130px }



.popup{text-decoration: underline; cursor: pointer;}
.popup_contents{background:rgba(57,66,87,0.75); z-index:999999; width:100%; height:100%; position:fixed; left:0; top:0; display:none; justify-content: center; align-items: center; padding: 30px}
.popup_contents.active{display: flex !important}

.popup_contents .box{position: relative; display: flex; font-size: 16px; padding:30px; padding-top: 50px; border-radius:10px; background-color:#fff; color: #1E2433; box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3); z-index:9999; max-height: 100%; height: auto}
.popup_contents.column .box{flex-direction: column;}
.popup_contents .box .box_contents{max-width: 750px; overflow: auto; padding-right: 20px}
.popup_contents h2{text-align: center; margin: 0; margin-bottom: 30px}
.popup_contents h2 span {display: inline-block; border-bottom: 2px solid #333;}
.close_btn{position: absolute; display: block; right:10px; top:10px; cursor: pointer;border-radius: 50%;}
.close_btn b{display: block;  width:50px; height:50px; border-radius: 50%; position: relative}
.close_btn b:before,.close_btn b:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 25px; height: 4px; background-color:#000; content:""; transform:rotate(45deg);}
.close_btn b:after{transform:rotate(-45deg);}
.close_btn:hover{opacity: 0.9}
.btn.popup{text-decoration: none}
.popup_contents.column .box .box_contents{overflow: inherit; padding: 0}
.popup_contents.column h2{line-height: 1.2}
.popup_contents.column p{margin-bottom: 30px}
.dots li,.dots,.dots_ul,.dots_ul li{margin: 0; padding: 0}
.dots li,.dots_ul li{position: relative;list-style: none; padding-left:20px;margin-bottom: 10px; line-height: 1.5; text-align: left}
.dots li:before,.dots_ul li:before{position: absolute; left:4px; top:9px; width:5px; height:5px; background-color: #000; border-radius: 50%; content:""}
.dots_ul li{text-align: left}

#add_bookmark_btn_area{position: absolute;width: 120px; right:10px; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column}
#add_bookmark,#m_add_bookmark{width: 100%;}
#add_bookmark.active{display: none}
#add_bookmark_btn_area div{display: none}
#add_bookmark_btn_area div.active{display: block}
#add_bookmark_btn_area div .btn{width:55px}
#add_bookmark_btn_area .btn{font-size: 12px; padding: 0;  text-align:center; background-color:#009EA7;}
#add_bookmark_btn_area .btn.back{margin-right: 0; margin-left: 10px; background-color: #555}


#add_book_mark{position: absolute; right:80px; bottom:0; display: flex;background-color: #b33e5c; color: #fff; border-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 5px;align-items: center; height: 30px;  padding:0 15px;  cursor: pointer;  font-size: 16px; z-index: 9999}
#add_book_mark:hover{opacity:0.6}
#add_book_mark.active{display: none}

#bookmark_box_wrap{position:absolute;right:80px; bottom:25px; width:470px; height:50px; background-color: #fff; border-radius:3px; z-index: 1000;box-shadow:0 .5rem 1.5rem rgba(22,28,45,0.1); display: none; align-items: center; border: 1px solid #999}
#bookmark_box_wrap.active{display: flex}

.drag_btn{position: relative; width:48px; height:48px;cursor: move;touch-action: none; border-bottom-left-radius: 3px; border-top-left-radius: 3px; background-color: #f1f1f1; border-right: 1px solid #999}
.drag_btn:before{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; content: ""; width: 30px; height:5px; border-top: 3px solid #555;border-bottom: 3px solid #555}
.drag .drag_btn:before{border-top: 3px solid #F58347;border-bottom: 3px solid #F58347}


.b_btn{display:flex; position: relative;border: none; border-radius: 5px; color: #fff; background-color:#F58347; width: 160px; height: 30px; align-items: center; justify-content: center; padding:0 10px; margin-left: 10px; font-size:12px; cursor: pointer; text-decoration: none}
.b_btn:hover{opacity: 0.6}
#book_index{min-width:auto;background-image: url(../img/home_icon.png); background-repeat: no-repeat; background-position: center center; background-size: auto 18px;width: 30px;}
.b_btn.prev:before,.b_btn.next:before{position: absolute; top: 0; bottom: 0; margin: auto; width: 0; height: 0;border-style: solid;content: ""}
.b_btn.prev:before{left:7px;border-width: 4px 7px 4px 0px;border-color: transparent #fff transparent transparent; }
.b_btn.next:before{right: 7px;border-width: 4px 0 4px 7px;border-color: transparent transparent transparent #fff;}
.b_btn.prev{padding-left:20px;}
.b_btn.next{padding-right:20px;}
.b_btn.disable{opacity: 0; pointer-events: none}

#bookmark_close{position: relative; display: block; width:40px; height: 50px; cursor: pointer}
#bookmark_close:before,#bookmark_close:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:20px; height:3px; background-color:#555; content:""; border-radius: 10px; transform:rotate(45deg);}
#bookmark_close:after{transform:rotate(-45deg);}
#bookmark_close:hover{opacity:0.6}

#bookmark_box_wrap.beta{border: 1px solid #6f8bbe}
.beta .b_btn{background-color:#a2b4d5}
.beta #bookmark_close:before,#bookmark_close:after{background-color:#6f8bbe;}
.beta .drag_btn{border-right: 1px solid #6f8bbe;}
.beta .drag_btn::before{border-top: 3px solid #6f8bbe; border-bottom: 3px solid #6f8bbe;}
.beta #book_index{background-image: none; position: relative}
.beta #book_index:before,.beta #book_index:after{position: absolute; left: 0; right: 0; margin: auto; content: ""}
.beta #book_index:before{width:10px; height: 3px; top: 8px; background-color: #fff}
.beta #book_index:after{width: 0; height: 0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid #fff; top: 15px}

#bookmark_notice .btn,#bookmark_notice2 .btn{min-width: 105px}


#book_mark{position: absolute;display: flex;right:0; top:0; height:100%;flex-direction: column; width: 50px;}
#book_mark span{display: flex; background-color: #555; background-image: url(../img/book_mark.png); background-position: center 10px; background-repeat: no-repeat; background-size:15px auto; border-top-right-radius: 5px; border-bottom-right-radius: 5px; justify-content:flex-start; align-items: center; width:35px;writing-mode: vertical-rl; padding-top:30px; padding-bottom: 10px; cursor: pointer;transition: all .1s ease-in-out;color: #fff; margin-top: 5px; min-height: 100px}
#book_mark span:first-child{margin: 0}
#book_mark span.active,#book_mark span:hover{background-color:#009EA7;;  width: 45px}

.book_mark{position: absolute; left: 0;top: 0; width:calc(100% - 50px); height: 100%; padding:10px; background-color: #009EA7;; display: none}
.book_mark_contents{background-color: #fff; height: 100%;padding:10px 20px 55px 20px; position: relative}
.book_mark_contents .close_btn{position: absolute; right:20px; top:13px; background-color: #009EA7;; display: block; border-radius:5px; color: #fff; font-size: 14px; padding:7px 10px; line-height: 1;z-index: 1}

.book_mark_contents h2{position: relative;display: flex; align-items: center;padding:10px 0; justify-content: space-between; margin: 0;line-height: 1; font-size:24px; border-bottom:4px solid #009EA7;; background: url(../img/book_mark_b.png) no-repeat left 5px;background-size: 30px auto;padding-left: 50px;}

.rb_btn_wrap{position: absolute; right: 0; top: 0; display: flex; height: 100%; align-items: center;}
.rb_btn{border: 1px solid #009EA7;; color: #009EA7;; height: 22px; font-weight: normal; background-color: #fff; border-radius: 5px; display: flex; align-items:center; justify-content: center; font-size:12px; margin-right: 10px; padding: 0 7px; cursor: pointer;font-family: -apple-system,BlinkMacSystemFont,Verdana,arial,HiraKakuProN-W3,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDGothic,Meiryo,sans-serif;}
.rb_btn b{display: block; position: relative;width: 16px; height: 16px; background-color: #e4007f; border-radius: 50%; margin-right:5px}
.rb_btn b:before,.rb_btn b:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:10px; height:2px; background-color:#fff; content:""; border-radius: 10px; transform:rotate(45deg);}
.rb_btn b:after{transform:rotate(-45deg);}
.rb_btn:hover{opacity:0.6}

.rb_btn.all{background-color:#009EA7;; color: #fff; position: absolute; right:10px; bottom:10px; font-size:14px; line-height: 1; padding: 7px 10px; height: auto; text-decoration: none}
.rb_btn.all b{background-color: #fff}
.rb_btn.all b:before,.rb_btn.all b:after{background-color: #b20000}


.book_mark_list{overflow: auto;padding:10px 20px 0 20px; height: calc(100% - 45px) }
.book_mark_list ul{margin:0;padding: 0; width: 100%; height: 100%;}
.book_mark_contents li{position: relative;display: flex; justify-content: space-between; align-items: center; list-style: none; border-bottom:1px solid #96EDFA;padding:5px 90px 0 30px;}
.book_mark_contents li a{text-decoration: none; color: #000}
.bcheck{position: absolute; left: -14px; top:1px; width: 16px; height: 16px; display: none}
.dots.m .bcheck{top:3px}
.dots.m .dots .bcheck{top:1px}
.dots.batu .bcheck,.dots.maru .bcheck{left:-28px}
.chat .bcheck{left: -30px}
.bcheck.active{display: block}

.headword_container .bcheck{position: relative;top: 0; left: -5px}
.headword_container .bcheck.active{display: inline-block}

#b1 .book_mark_contents li{font-weight:bold;font-size:18px }
.book_mark_contents li .dots,.book_mark_contents li .indent[data-type="gogi"]{margin-bottom: 0}
.bookmark_out.active{margin-left: 20px; position: relative}
.bookmark_out .bcheck{left: -25px; top: 2px}


.book_mark_list .drag{position: absolute; left:0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;width:30px; height:100%;cursor: pointer}
.book_mark_list .drag:before,.book_mark_list .drag:after{height: 2px; width:14px; background-color: #aaa; content: ""}
.book_mark_list .drag:after{ margin-top:2px}
.book_mark_list .drag:hover:before,.book_mark_list .drag:hover:after{background-color:#009EA7;}

#b_register_ok{z-index:9999; width:100%; height:100%; position:fixed; left:0; top:0; display:none; justify-content: center; align-items: center; padding: 30px}
#b_register_ok.active{display: flex !important}

#b_register_ok_contents h2{margin: 0; font-size:22px; border-bottom: 3px solid #aaa}
#b_register_ok_contents{position: relative}
#b_register_ok_contents{position: relative; display: flex; font-size: 16px; padding:30px; border-radius:10px; background-color:#fff; color: #1E2433; box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3); z-index:9999; max-height: 100%; height: auto}

#b_remove.popup_contents .box{flex-direction: column}
#b_remove .btn{background-color:#009EA7;}
#b_remove .btn.back{background-color:#999}

#footer {position: relative; height:35px; line-height:35px; font-size:12px; text-align: center;background-color:#E9EAEA}
#footer a{position: absolute; right:10px; top:10px; height: 20px;display: block; line-height: 0}
#footer a img{height:15px}
#footer .wrap{position: relative}


#p404{display: flex; justify-content: center; align-items: center; height: 100%; width: 100%}

.ref-paper{color: #4169E1;}


@-webkit-keyframes animate-positive{
    0% { width: 0%; }
}
@keyframes animate-positive {
    0% { width: 0%; }
}
@keyframes progress-bar-stripes {
  from { background-position: 20px 0; }
  to { background-position: 0 0; }
}

#progress,#bookmark_error{background-color: rgba(0,0,0,.5); padding: 20px; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute;left: 0; top: 0; z-index:9999; display: none}
#progress.active,#bookmark_error.active{display: flex}
#pbox{display: flex;padding: 20px; background-color: #fff; border-radius: 10px;flex-direction: column}
#pbox h2{text-align: center; font-size:22px; margin: 0;}
#pbox p{line-height: 1.5;margin: 0; margin-bottom: 15px; font-size: 14px}
#pbox .btn_area{display: flex; justify-content: center}
#progress_bar{margin: 20px 0; overflow: hidden}
#progress_bar div{display: flex;height:20px; width: 100%;background-color:#eaedf3;box-shadow: inset 0 5px 5px rgba(244, 245, 250,0.9);}
#progress_bar div span{position: relative; overflow: hidden;display:block;background-color:#009EA7; height:20px;animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size: 1rem 1rem;}

#progress_bar div font {position: absolute;height: 20px; right:10px;top:0;font-size: 12px; line-height: 1;display: flex; align-items: center; font-weight: bold;color: #fff;letter-spacing:1px;}    

#bookmark_error #pbox{padding: 30px}
#bookmark_error #pbox h2{line-height: 1; margin-bottom:20px}
#bookmark_error #pbox p{margin-bottom: 20px}
#bookmark_error .back{margin-left: 15px}

@keyframes open-menu {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes close-menu {
   0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



#slide_notice{position: absolute; left: 0; top: 0; display: flex; height: 100%; width: 0; align-items: center; z-index: 99999}
#slide_notice.active{width: 100%}
#slide_notice_wrap{position: relative;padding: 10px 0;background-color: #009EA7;;  display: flex; height:400px;transform: translateX(-100%);}
#slide_notice.active #slide_notice_wrap{transform: translateX(0);}
#slide_notice.close #slide_notice_wrap{animation: close-menu 0.3s forwards;}
#slide_notice.open #slide_notice_wrap{animation: open-menu 0.3s forwards;}



#slide_notice .obi{position: absolute; border-bottom-right-radius:10px; border-top-right-radius: 10px; right: -30px; top: 0; display: flex; width: 32px; height: 100%; align-items: center; justify-content: center; writing-mode:vertical-rl;color: #fff; background-color: #009EA7;; cursor: pointer; z-index: 10}
#slide_notice .obi b{position: relative; padding:30px 0 20px 0; background: url(../img/guide.svg) no-repeat center top; background-size:20px auto; user-select: none}
#slide_notice .obi b:before{position: absolute; left: 0; bottom:0;right: 0; margin: auto; content: "";width: 0;
height: 0;border-style: solid;border-width: 6px 0 6px 12px;border-color: transparent transparent transparent #fff;}
#slide_notice.active .obi b:before{transform: rotate(180deg)}
#slide_notice_wrap div{ padding:20px; padding-bottom: 35px; width: 100%; overflow-y: auto; background-color: #fff}
#slide_notice_wrap .imt{font-size: 12px; text-align: right; width: 100%; position: absolute; left:0; bottom: 10px; background-color: #f1f1f1; padding:3px 10px}


.news ul{padding: 0; margin: 0; list-style: none}
.news li{padding:20px 0 10px 0; border-bottom: 1px solid #ddd; line-height: 1.2}
.news li:first-child{padding-top: 0}
.news li span{display: block; font-size: 12px; color: #555; line-height: 1; margin-bottom:5px}
.news li a{color: #000;}

#bg_color{display: flex; border-top: 1px solid #e7e7e7; padding:10px; align-items: center}
#bg_color span{display: block; font-weight: bold; margin-right: 15px}
#bg_color select{border-radius: 3px; height: 30px; border:1px solid #e7e7e7; background-color: #fff; padding-left: 10px;}

.bc1 #main, .bc1 #side,.bc7 #main, .bc7 #side{border: 1px solid #e7e7e7}
.bc6 #main, .bc6 #side, .bc2 #main, .bc2 #side, .bc3 #main, .bc3 #side, .bc4 #main, .bc4 #side,.bc5 #main, .bc5 #side{border: 1px solid #fff}
.bc2{background-color: #F8E4E2}
.bc3{background-color: #DBEEF7}
.bc4{background-color: #D9F7EC}
.bc5{background-color: #FFF5D9}
.bc6{background-color:#EFEFEF}

.bc7{background-color:#fff; filter: invert();}
.bc7 #header,.bc7 #slide_notice,.bc7 .contents .c_img,.bc7 #footer a img:first-child{filter: invert();}

#login_notice{background-color:yellow; font-size: 12px; margin-bottom: 20px; padding: 10px}
#login_notice b{display: block}
#login_notice p{margin: 0}
#login_guide_notice{display: none}
#login_guide_notice.active{display: block}
#login_guide_notice .login_btn_area.big{display: flex; flex-direction: column; padding:10px; }
#login_guide_notice .login_btn_area.big .btn{text-decoration: none; line-height: 1.2; display: flex; align-items: center; justify-content: center; height: 45px; margin-top: 10px; text-align: center}
#login_guide_notice .login_btn_area.big .btn:first-child{margin-top: 0}
.login h2 span{display: block; line-height:25px; font-size: 20px; border-left:5px solid #000; padding-left: 10px}

#login_guide_notice .login{max-width: 450px;}
#login_guide_notice h2{text-align: left; margin-bottom: 0; margin-top: 20px}
#login_guide_notice h2 span{border-bottom:none}
#login_guide_notice b{display: block;  margin-bottom: 20px}
#login_guide_notice li{font-size: 14px}
#login_guide_notice .box_contents{padding: 0; margin:20px}
#login_guide_notice.popup_contents{background: none; padding-top: 90px; padding-bottom: 55px}

#bookmark_notice .btn_area,#bookmark_notice2 .btn_area{margin-top: 20px}
#bookmark_notice .btn.back,#bookmark_notice2 .btn.back{margin: 0;  margin-left: 10px; }

@media screen and (max-width:1260px){
	#slide_notice{display: none}
}