/* ======================================== div#gHeader
======================================== */
div#gHeader { position: relative; width: 960px; height: 130px; margin: 0 auto; background: url(../images/header_line.gif) no-repeat left top #F3F4F6; background-size: 100% 5px; -moz-background-size: 100% 5px; -webkit-background-size: 100% 5px; -o-background-size: 100% 5px; -ms-background-size: 100% 5px; text-align: left; }
div#gHeader.talk .gNav, div#gHeader.home .gNav { background-color: #a7e0f7; }
div#gHeader.setting .gNav, div#gHeader.history .gNav { background-color: #dcc499; }
div#gHeader div.logo { position: absolute; left: 10px; top: 12px; z-index: 1001; width: 182px; }
div#gHeader div.logo a { display: block; height: 68px; text-indent: 100%; white-space: nowrap; overflow: hidden; *text-indent: -9000px; /* for IE7/6 */ background: url(../images/logo.png) no-repeat left top; }
div#gHeader div.logoJustsystem { position: absolute; right: 10px; top: 33px; z-index: 1001; width: 70px; }
div#gHeader div.logoJustsystem a { display: block; height: 32px; text-indent: 100%; white-space: nowrap; overflow: hidden; *text-indent: -9000px; /* for IE7/6 */ background: url(../images/logo_justsystem.gif) no-repeat left top; }
div#gHeader div#gMenu { position: absolute; left: 0; top: 15px; width: 100%; height: 130px; }
div#gHeader div#gMenu ul.gNav { position: absolute; z-index: 500; left: 0; top: 75px; width: 100%; overflow: hidden; }
div#gHeader div#gMenu ul.gNav li { float: left; width: 240px; text-align: center; }
div#gHeader div#gMenu ul.gNav li a { display: block; height: 42px; text-indent: 100%; white-space: nowrap; overflow: hidden; *text-indent: -9000px; /* for IE7/6 */ }
div#gHeader div#gMenu ul.gNav li a#talk { background: url(../images/header/nav04.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a#home { background: url(../images/header/nav01.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a#sho_timeline { background: url(../images/header/nav05.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a#chu_timeline { background: url(../images/header/nav06.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a#history { background: url(../images/header/nav02.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a#setting { background: url(../images/header/nav03.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#talk { background: url(../images/header/nav04_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#home { background: url(../images/header/nav01_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#history { background: url(../images/header/nav02_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#sho_timeline { background: url(../images/header/nav05_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#chu_timeline { background: url(../images/header/nav06_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li.current a#setting { background: url(../images/header/nav03_sel.png) no-repeat center top; }
div#gHeader div#gMenu ul.gNav li a:hover, div#gHeader div#gMenu ul.gNav li a:active { color: #EB6000; }
div#gHeader div#gMenu div.btn_logout { display: block; position: absolute; right: 100px; top: 20px; background: url(../images/logout.png) no-repeat center center; }
div#gHeader div#gMenu div.btn_help { display: block; position: absolute; right: 195px; top: 20px; background: url(../images/help.png) no-repeat center center; }
div#gHeader div#gMenu div.btn_operational_status { display: block; position: absolute; right: 290px; top: 20px; background: url(../images/operational_status.png) no-repeat center center; }

div#gHeader.chu { background: #1C6188; }
div#gHeader.chu div.logo { left: 15px; top: 25px; width: 220px; }
div#gHeader.chu div.logo a { height: 40px; background: url(../images/chugaku/logo.png) no-repeat left top; }
div#gHeader.chu div.logoJustsystem { right: 25px; }
div#gHeader.chu div.logoJustsystem a { background: url(../images/chugaku/just_logo.png) no-repeat left top; }
div#gHeader.chu div#gMenu ul.gNav { top: 73px; }
div#gHeader.chu div#gMenu ul.gNav li a { height: 50px; }
div#gHeader.chu div#gMenu ul.gNav li a#talk { background: url(../images/chugaku/header/menu_talk.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li a#chu_timeline { background: url(../images/chugaku/header/menu_torikumi.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li a#chu_result { background: url(../images/chugaku/header/menu_result.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li a#setting { background: url(../images/chugaku/header/menu_setting.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li.current a#talk { background: url(../images/chugaku/header/menu_talk_sel.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li.current a#chu_timeline { background: url(../images/chugaku/header/menu_torikumi_sel.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li.current a#chu_result { background: url(../images/chugaku/header/menu_result_sel.png) no-repeat center top; }
div#gHeader.chu div#gMenu ul.gNav li.current a#setting { background: url(../images/chugaku/header/menu_setting_sel.png) no-repeat center top; }
div#gHeader.chu div#gMenu div.btn_logout { right: 105px; top: 15px; background: url(../images/chugaku/logout_normal.png) no-repeat center center; }
div#gHeader.chu div#gMenu div.btn_help { right: 210px; top: 15px; background: url(../images/chugaku/help_normal.png) no-repeat center center; }
div#gHeader.chu div#gMenu div.btn_operational_status { right: 315px; top: 15px; background: url(../images/chugaku/operational_status_normal.png) no-repeat center center; }

header.you, header.sho, header.chu, header.yousho, header.youchu, header.shochu, header.youshochu { position: relative; background: #FFF; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); margin-top: 0px; }
header.you > .inner, header.sho > .inner, header.chu > .inner, header.yousho > .inner, header.youchu > .inner, header.shochu > .inner, header.youshochu > .inner { max-width: 960px; height: 110px; margin: 0 auto; padding: 0; box-shadow: none; background: none; }
header.you .tb, header.sho .tb, header.chu .tb, header.yousho .tb, header.youchu .tb, header.shochu .tb, header.youshochu .tb { display: block; }
header.you .topArea, header.sho .topArea, header.chu .topArea, header.yousho .topArea, header.youchu .topArea, header.shochu .topArea, header.youshochu .topArea { height: 60px; display: flex; justify-content: space-between; align-items: center; }
header.you .mainLogo, header.sho .mainLogo, header.chu .mainLogo, header.yousho .mainLogo, header.youchu .mainLogo, header.shochu .mainLogo, header.youshochu .mainLogo { margin-right: 0; margin-left: 50px; width: 100%; max-width: 150px; min-width: 150px; margin-top: -3px; }
header.you img, header.sho img, header.chu img, header.yousho img, header.youchu img, header.shochu img, header.youshochu img { width: 100%; }
header.you .subNav ul, header.sho .subNav ul, header.chu .subNav ul, header.yousho .subNav ul, header.youchu .subNav ul, header.shochu .subNav ul, header.youshochu .subNav ul { font-size: 107.5%; display: flex; justify-content: flex-end; width: auto; min-width: 230px; }
header.you .subNav li, header.sho .subNav li, header.chu .subNav li, header.yousho .subNav li, header.youchu .subNav li, header.shochu .subNav li, header.youshochu .subNav li { color: #3E3E3E; position: relative; z-index: 1; }
header.you .subNav li a, header.sho .subNav li a, header.chu .subNav li a, header.yousho .subNav li a, header.youchu .subNav li a, header.shochu .subNav li a, header.youshochu .subNav li a { display: block; padding: 0 10px; line-height: 45px; text-decoration: none; color: inherit; cursor: pointer; z-index: 2; }
header.you .subNav li a:visited, header.sho .subNav li a:visited, header.chu .subNav li a:visited, header.yousho .subNav li a:visited, header.youchu .subNav li a:visited, header.shochu .subNav li a:visited, header.youshochu .subNav li a:visited { color: inherit; }
header.you .subNav li a.tx p, header.sho .subNav li a.tx p, header.chu .subNav li a.tx p, header.yousho .subNav li a.tx p, header.youchu .subNav li a.tx p, header.shochu .subNav li a.tx p, header.youshochu .subNav li a.tx p { display: inline-block; }
header.you .subNav li a.tx:hover, header.sho .subNav li a.tx:hover, header.chu .subNav li a.tx:hover, header.yousho .subNav li a.tx:hover, header.youchu .subNav li a.tx:hover, header.shochu .subNav li a.tx:hover, header.youshochu .subNav li a.tx:hover { transition: opacity .2s; opacity: .8; }
header.you .subNav li::before, header.sho .subNav li::before, header.chu .subNav li::before, header.yousho .subNav li::before, header.youchu .subNav li::before, header.shochu .subNav li::before, header.youshochu .subNav li::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 50%; border-right: 1px solid #d9d9d9; margin: auto; z-index: -1; }
header.you .subNav li:first-child::before, header.sho .subNav li:first-child::before, header.chu .subNav li:first-child::before, header.yousho .subNav li:first-child::before, header.youchu .subNav li:first-child::before, header.shochu .subNav li:first-child::before, header.youshochu .subNav li:first-child::before { border-left: 1px solid #d9d9d9; }
header.you .mainNav, header.sho .mainNav, header.chu .mainNav, header.yousho .mainNav, header.youchu .mainNav, header.shochu .mainNav, header.youshochu .mainNav { height: 50px; width: 100%; color: #6B6B6B; font-size: 107.5%; }
header.you .mainNav ul, header.sho .mainNav ul, header.chu .mainNav ul, header.yousho .mainNav ul, header.youchu .mainNav ul, header.shochu .mainNav ul, header.youshochu .mainNav ul { display: flex; justify-content: center; width: 100%; height: 100%; text-align: center; }
header.you .mainNav li, header.sho .mainNav li, header.chu .mainNav li, header.yousho .mainNav li, header.youchu .mainNav li, header.shochu .mainNav li, header.youshochu .mainNav li { position: relative; z-index: 1; width: calc(100% / 3); text-align: center; }
header.you .mainNav li::before, header.sho .mainNav li::before, header.chu .mainNav li::before, header.yousho .mainNav li::before, header.youchu .mainNav li::before, header.shochu .mainNav li::before, header.youshochu .mainNav li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 60%; margin: auto; border-right: 1px solid #D8D8D8; z-index: -1; }
header.you .mainNav li:first-child::before, header.sho .mainNav li:first-child::before, header.chu .mainNav li:first-child::before, header.yousho .mainNav li:first-child::before, header.youchu .mainNav li:first-child::before, header.shochu .mainNav li:first-child::before, header.youshochu .mainNav li:first-child::before { border-left: 1px solid #D8D8D8; }
header.you .mainNav li::after, header.sho .mainNav li::after, header.chu .mainNav li::after, header.yousho .mainNav li::after, header.youchu .mainNav li::after, header.shochu .mainNav li::after, header.youshochu .mainNav li::after { content: ""; position: absolute; bottom: -1px; right: 0; width: calc(100% - 2px); border-bottom: 3px solid rgba(56, 111, 223, 0); }
header.you .mainNav li:hover, header.sho .mainNav li:hover, header.chu .mainNav li:hover, header.yousho .mainNav li:hover, header.youchu .mainNav li:hover, header.shochu .mainNav li:hover, header.youshochu .mainNav li:hover { color: #386FDF; }
header.you .mainNav li:hover::after, header.sho .mainNav li:hover::after, header.chu .mainNav li:hover::after, header.yousho .mainNav li:hover::after, header.youchu .mainNav li:hover::after, header.shochu .mainNav li:hover::after, header.youshochu .mainNav li:hover::after { border-bottom: 3px solid #386FDF; }
header.you .mainNav li.active, header.sho .mainNav li.active, header.chu .mainNav li.active, header.yousho .mainNav li.active, header.youchu .mainNav li.active, header.shochu .mainNav li.active, header.youshochu .mainNav li.active { color: #386FDF; }
header.you .mainNav li.active::after, header.sho .mainNav li.active::after, header.chu .mainNav li.active::after, header.yousho .mainNav li.active::after, header.youchu .mainNav li.active::after, header.shochu .mainNav li.active::after, header.youshochu .mainNav li.active::after { border-bottom: 3px solid #386FDF; }
header.you .mainNav a, header.sho .mainNav a, header.chu .mainNav a, header.yousho .mainNav a, header.youchu .mainNav a, header.shochu .mainNav a, header.youshochu .mainNav a { display: flex; justify-content: center; align-items: center; padding-bottom: 10px; text-decoration: none; color: inherit; cursor: pointer; z-index: 2; padding: 13px 0; }
header.you .mainNav a:visited, header.sho .mainNav a:visited, header.chu .mainNav a:visited, header.yousho .mainNav a:visited, header.youchu .mainNav a:visited, header.shochu .mainNav a:visited, header.youshochu .mainNav a:visited { color: inherit; }
header.you .mainNav .imgWrap, header.sho .mainNav .imgWrap, header.chu .mainNav .imgWrap, header.yousho .mainNav .imgWrap, header.youchu .mainNav .imgWrap, header.shochu .mainNav .imgWrap, header.youshochu .mainNav .imgWrap { margin-right: 10.1px; font-size: 1.5em; }

div#gHeader.youshochu div#gMenu ul.gNav li { width: 20%; }

/* ===================================================== header_btn */
.header_btn, .header_btn_s { text-align: center; font-size: 110%; border: solid 1px #ced7da; background: #ffffff; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(90%, #ffffff), color-stop(100%, #f6f6f6)); background-image: -moz-linear-gradient(#ffffff 90%, #f6f6f6); background-image: -webkit-linear-gradient(#ffffff 90%, #f6f6f6); background-image: linear-gradient(#ffffff 90%, #f6f6f6); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; text-shadow: 0px -1px 1px rgba(255, 255, 255, 0.5); }

.header_btn:hover, .header_btn_s:hover { border: solid 1px #87bed6; background: #ffffff; -moz-box-shadow: 0px 0px 6px rgba(67, 188, 236, 0.5); -webkit-box-shadow: 0px 0px 6px rgba(67, 188, 236, 0.5); box-shadow: 0px 0px 6px rgba(67, 188, 236, 0.5); cursor: pointer; }

.header_btn:active, .header_btn_s:active { border: solid 1px #87bed6; border: solid 1px #b8c8cf; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f6f6f6), color-stop(100%, #ffffff)); background-image: -moz-linear-gradient(#f6f6f6 10%, #ffffff); background-image: -webkit-linear-gradient(#f6f6f6 10%, #ffffff); background-image: linear-gradient(#f6f6f6 10%, #ffffff); -moz-box-shadow: 0px 0px 4px rgba(67, 188, 236, 0.4); -webkit-box-shadow: 0px 0px 4px rgba(67, 188, 236, 0.4); box-shadow: 0px 0px 4px rgba(67, 188, 236, 0.4); cursor: pointer; }

.header_btn { padding: 8px; }

.header_btn_s, .header_btn_s_chu { padding: 2px 6px; }

/* ===================================================== dropdown_container */
div#gHeader div#gMenu div.dropdown_container { position: relative; background-color: inherit; position: relative; margin-top: 3px; left: 345px; width: 270px; }
div#gHeader div#gMenu div.dropdown_container span.caret { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #000000; content: ""; display: inline-block; height: 0; vertical-align: top; width: 0; float: right; margin-right: 4px; margin-top: 5px; margin-left: 0; }
div#gHeader div#gMenu div.dropdown_container a.dropdown { display: block; text-decoration: none; margin: 0 auto; }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; overflow: auto; float: left; margin: 2px 0 0; padding: 5px 0; list-style: none; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border-radius: 6px 6px 6px 6px; border: solid 1px #87bed6; }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li > a { clear: both; display: block; line-height: 20px; padding: 3px 20px; white-space: nowrap; text-decoration: none; }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li a:hover { background-color: #007bbd; color: #fff; }
div#gHeader div#gMenu div.dropdown_container span.caret { margin-top: 14px; }
div#gHeader div#gMenu div.dropdown_container a.dropdown { height: 40px; width: 250px; }
div#gHeader div#gMenu div.dropdown_container a.dropdown span.year_icon { display: block; height: 36px; line-height: 38px; color: #666666; font-size: 22px; font-weight: bold; letter-spacing: 3px; text-indent: 42px; background: url(../images/child_icon_4.png) no-repeat left top; margin-top: 2px; width: 220px; float: left; margin-left: 8px; }
div#gHeader div#gMenu div.dropdown_container a.dropdown.open.gray_btn { background-color: #E6E6E6; background-image: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05); }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu { width: 268px; max-height: 300px; background-color: #ffffff; border: solid 1px #87bed6; }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li > a { color: #333333; font-weight: normal; padding-left: 100px; padding-right: 60px; background-repeat: no-repeat; background-position: right 10px center; overflow: hidden; text-overflow: ellipsis; }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li.sho > a { background-image: url(../images/icon_user_sho.png); }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li.sho > a:hover { background-image: url(../images/icon_user_sho_hover.png); }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li.chu > a { background-image: url(../images/icon_user_chu.png); }
div#gHeader div#gMenu div.dropdown_container ul.dropdown_menu li.chu > a:hover { background-image: url(../images/icon_user_chu_hover.png); }