#bgrmenu { position: relative; width: 550px; max-width: 100%; overflow: hidden; }
#bgrmenu .bgrdiv { width: 300px; height: 100%; transition-duration: 0.5s; box-sizing: border-box; overflow-x: hidden; box-shadow: #999999 0px 1px 3px 0px; }
#bgrmenu .bgrdiv::-webkit-scrollbar { display: none; }
#bgrmenu nav { padding: 40px 0px; text-align: center; background-color: #ffffff; min-height: 100%; width: 300px; box-sizing: border-box; }
#bgrmenu ul { margin: 30px 0px 0px; padding: 0px; list-style-type: none; text-align: left; }
#bgrmenu li { margin: 0px; padding: 0px; }
#bgrmenu .logo { margin: 0px auto; width: 165px; }
#bgrmenu .ultyp1 { font-size: 0.9rem; line-height: 125%; font-weight: 500; width: 300px; max-width: 100%; }
#bgrmenu .ultyp1 > li { position: relative; padding: 0px 20px; }
#bgrmenu .ultyp1 > li > a { position: relative; display: block; padding: 18px 15px 16px; text-decoration: none; border-top: 1px solid #e5e5e5; }
#bgrmenu .ultyp1 > li:last-of-type > a { border-bottom: 1px solid #e5e5e5; }
#bgrmenu .ultyp1 > li > a::after { position: absolute; top: 50%; right: 15px; width: 6px; height: 6px; content: ""; border-top: 1px solid #317fa3; border-right: 1px solid #317fa3; transform: translateY(-50%) rotate(45deg); }
#bgrmenu .ultyp1 > li > div { position: relative; padding: 18px 15px 16px; text-decoration: none; border-top: 1px solid #e5e5e5; opacity: 0.8; }
#bgrmenu .ultyp1 > li > div::after { position: absolute; top: 50%; right: 15px; width: 6px; height: 6px; content: ""; border-top: 1px solid #317fa3; border-right: 1px solid #317fa3; transform: translateY(-50%) rotate(45deg); }
#bgrmenu .ultyp1 > li:hover { background-color: #bddff2; }
#bgrmenu .ultyp1 > li:hover > a { color: #317fa3; border-color: #bddff2; }
#bgrmenu .ultyp1 > li > ul { position: absolute; top: -50px; left: 100%; margin-top: 0px; width: 250px; padding-bottom: 20px; font-size: 0.9rem; font-weight: normal; display: none; z-index: 100; visibility: hidden; opacity: 0; transition-duration: 0.5s; }
#bgrmenu .ultyp3 a { position: relative; display: block; width: 100%; padding: 18px 15px 17px; text-decoration: none; box-sizing: border-box; }
#bgrmenu .ultyp3 a::after { position: absolute; top: 50%; right: 15px; width: 6px; height: 6px; content: ""; border-top: 1px solid #317fa3; border-right: 1px solid #317fa3; transform: translateY(-50%) rotate(45deg); }
#bgrmenu .ultyp3 div { position: relative; width: 100%; padding: 18px 15px 17px; box-sizing: border-box; opacity: 0.8; }
#bgrmenu .ultyp3 div::after { position: absolute; top: 50%; right: 15px; width: 6px; height: 6px; content: ""; border-top: 1px solid #317fa3; border-right: 1px solid #317fa3; transform: translateY(-50%) rotate(45deg); }
#bgrmenu .ultyp3 a:hover { color: #317fa3; background-color: #bddff2; }
#bgrmenu .ultyp2 { padding-left: 30px; font-size: 0.84rem; line-height: 150%; }
#bgrmenu .ultyp2 li { position: relative; padding-left: 14px; }
#bgrmenu .ultyp2 li::before { position: absolute; content: ""; top: 12px; left: 0px; width: 6px; height: 6px; background-color: #317fa3; border-radius: 50%; }
#bgrmenu .ultyp2 a { display: block; padding: 7px 0px; text-decoration: none; }
#bgrmenu .ultyp2 div { padding: 7px 0px; opacity: 0.8; }
#bgrmenu .close_btn { display: inline-block; position: relative; margin: 10px 0px 0px; padding: 10px 10px 10px 30px; cursor: pointer; font-size: 0.9rem; line-height: 100%; }
#bgrmenu .close_btn::before, #bgrmenu .close_btn::after { position: absolute; top: 7px; left: 15px; width: 2px; height: 16px; content: ""; vertical-align: middle; background-color: #317fa3; }
#bgrmenu .close_btn::before { transform: rotate(45deg); }
#bgrmenu .close_btn::after { transform: rotate(-45deg); }
#bgrmenu .sns { margin: 18px auto 0px; width: 120px; text-align: left; display: flex; flex-flow: row; }
#bgrmenu .sns a { display: block; margin: 0px 5px; width: 30px; height: 30px; }
@media (min-width: 768px) {
  #bgrmenu .bgrdiv { background-color: #e9f5fb; }
  #bgrmenu .ultyp1 > li > ul { display: block; }
  #bgrmenu .ultyp1 > li:hover > ul { visibility: visible; opacity: 1; }
}