#infoBar {
    background-color: white;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1000;
    flex-flow: column;
    display: flex;
	padding-bottom:.5rem
}

#infoBar > {display: flex; padding: 10px; border:1px solid #ccc;}
#infoBar > * { min-width: 50px; text-align: center;}
#infoBar > span { border:1px solid #333}
#infoBar > em {background: #e2610e; margin:1rem 1rem 0; order:2; width: fit-content; font-size:1.5rem; color:#fff; padding:0.5rem 1rem;}
#infoBar .lhName {font-size:20px;padding:1rem 3rem 1rem 1rem ; order:1; text-align: left; background: #69960e; color:#fff; line-height: 1.3; position: relative;}
#infoBar .lhName::after {content: ''; display: block; width: 18px; height: 34px; background: url('../img/arrow.png') no-repeat center / 50%; position: absolute; right: 1rem; top:50%; margin-top: -17px;}
#infoBar .lhName span {margin-right: 10px; font-weight: 800; color:darkcyan}
#infoBar .lhInfo {order:3; margin: 1rem;}
#infoBar .lhInfo dl {display: flex; margin : 0; margin-bottom: 10px;}
#infoBar .lhInfo dl:last-child {margin-bottom: 0;}
#infoBar .lhInfo dl dt {position: relative; padding-left: 15px; font-size: 1.5rem;;}
#infoBar .lhInfo dl dt::after {content:''; display: block; width: 5px; height: 1px; background: #000; position: absolute; left: 0; top: 50% }
#infoBar .lhInfo dl dd { font-size: 1.5rem; margin-left: 0.5rem;}

.box.arrow-top-left:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-top-left:after {
    border-width: 10px;
    border-bottom-color: #4fade3;
    top: -20px;
    left: 10px;
}

.box.arrow-top-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-top-right:after {
    border-width: 10px;
    border-bottom-color: #4fade3;
    top: -20px;
    right: 10px;
}

.box.arrow-top-center:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-top-center:after {
    border-width: 10px;
    border-bottom-color: #4fade3;
    top: -20px;
    right: 50%;
    margin-right: -10px;
}

.box.arrow-bottom-left:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-bottom-left:after {
    border-width: 10px;
    border-top-color: #4fade3;
    bottom: -20px;
    left: 10px;
}

.box.arrow-bottom-right:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-bottom-right:after {
    border-width: 10px;
    border-top-color: #4fade3;
    bottom: -20px;
    right: 10px;
}

.box.arrow-bottom-center:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-bottom-center:after {
    border-width: 10px;
    border-top-color: #4fade3;
    bottom: -20px;
    right: 50%;
    margin-right: -10px;
}

.box.arrow-left-top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-left-top:after {
    border-width: 10px;
    border-right-color: #4fade3;
    left: -20px;
    top: 10px;
}

.box.arrow-left-center:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-left-center:after {
    border-width: 10px;
    border-right-color: #4fade3;
    left: -20px;
    top: 50%;
    margin-top: -10px;
}

.box.arrow-left-bottom:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-left-bottom:after {
    border-width: 10px;
    border-right-color: #4fade3;
    left: -20px;
    bottom: 10px;
}

.box.arrow-right-top:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-right-top:after {
    border-width: 10px;
    border-left-color: #4fade3;
    right: -20px;
    top: 10px;
}

.box.arrow-right-center:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-right-center:after {
    border-width: 10px;
    border-left-color: #4fade3;
    right: -20px;
    top: 50%;
    margin-top: -10px;
}

.box.arrow-right-bottom:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box.arrow-right-bottom:after {
    border-width: 10px;
    border-left-color: #4fade3;
    right: -20px;
    bottom: 10px;
}

.box-with-border.arrow-top-left:after, .box-with-border.arrow-top-left:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-top-left:after {
    border-width: 10px;
    border-bottom-color: #eee;
    top: -20px;
    left: 10px;
}

.box-with-border.arrow-top-left:before {
    border-width: 16px;
    border-bottom-color: #4fade3;
    top: -32px;
    left: 4px;
}

.box-with-border.arrow-top-right:after, .box-with-border.arrow-top-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-top-right:after {
    border-width: 10px;
    border-bottom-color: #eee;
    top: -20px;
    right: 10px;
}

.box-with-border.arrow-top-right:before {
    border-width: 16px;
    border-bottom-color: #4fade3;
    top: -32px;
    right: 4px;
}

.box-with-border.arrow-top-center:after, .box-with-border.arrow-top-center:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-top-center:after {
    border-width: 10px;
    border-bottom-color: #eee;
    top: -20px;
    right: 50%;
    margin-right: -10px;
}

.box-with-border.arrow-top-center:before {
    border-width: 16px;
    border-bottom-color: #4fade3;
    top: -32px;
    right: 50%;
    margin-right: -16px;
}

.box-with-border.arrow-bottom-left:after, .box-with-border.arrow-bottom-left:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-bottom-left:after {
    border-width: 10px;
    border-top-color: #eee;
    bottom: -20px;
    left: 10px;
}

.box-with-border.arrow-bottom-left:before {
    border-width: 16px;
    border-top-color: #4fade3;
    bottom: -32px;
    left: 4px;
}

.box-with-border.arrow-bottom-right:after, .box-with-border.arrow-bottom-right:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-bottom-right:after {
    border-width: 10px;
    border-top-color: #eee;
    bottom: -20px;
    right: 10px;
}

.box-with-border.arrow-bottom-right:before {
    border-width: 16px;
    border-top-color: #4fade3;
    bottom: -32px;
    right: 4px;
}


.box-with-border.arrow-left-top:after, .box-with-border.arrow-left-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-left-top:after {
    border-width: 10px;
    border-right-color: #eee;
    left: -20px;
    top: 10px;
}

.box-with-border.arrow-left-top:before {
    border-width: 16px;
    border-right-color: #4fade3;
    left: -32px;
    top: 4px;
}

.box-with-border.arrow-left-center:after, .box-with-border.arrow-left-center:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-left-center:after {
    border-width: 10px;
    border-right-color: #eee;
    left: -20px;
    top: 50%;
    margin-top: -10px;
}

.box-with-border.arrow-left-center:before {
    border-width: 16px;
    border-right-color: #4fade3;
    left: -32px;
    top: 50%;
    margin-top: -16px;
}

.box-with-border.arrow-left-bottom:after, .box-with-border.arrow-left-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-left-bottom:after {
    border-width: 10px;
    border-right-color: #eee;
    left: -20px;
    bottom: 10px;
}

.box-with-border.arrow-left-bottom:before {
    border-width: 16px;
    border-right-color: #4fade3;
    left: -32px;
    bottom: 4px;
}

.box-with-border.arrow-right-top:after, .box-with-border.arrow-right-top:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-right-top:after {
    border-width: 10px;
    border-left-color: #eee;
    right: -20px;
    top: 10px;
}

.box-with-border.arrow-right-top:before {
    border-width: 16px;
    border-left-color: #4fade3;
    right: -32px;
    top: 4px;
}

.box-with-border.arrow-right-center:after, .box-with-border.arrow-right-center:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-right-center:after {
    border-width: 10px;
    border-left-color: #eee;
    right: -20px;
    top: 50%;
    margin-top: -10px;
}

.box-with-border.arrow-right-center:before {
    border-width: 16px;
    border-left-color: #4fade3;
    right: -32px;
    top: 50%;
    margin-top: -16px;
}

.box-with-border.arrow-right-bottom:after, .box-with-border.arrow-right-bottom:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
}

.box-with-border.arrow-right-bottom:after {
    border-width: 10px;
    border-left-color: #eee;
    right: -20px;
    bottom: 10px;
}

.box-with-border.arrow-right-bottom:before {
    border-width: 16px;
    border-left-color: #4fade3;
    right: -32px;
    bottom: 4px;
}

/************
   Css for demo
  ************/
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica neue';
    padding: 24px;
}

.box-with-border, .box {
    width: 100px;
    /* min-height: 50px; */
    background: #4fade3;
    /* margin: 24px; */
    display: inline-block;
    position: relative;
}

/* .box-with-border span, .box span {
    color: #f1f1f1;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 1.6vh;
} */

.box-with-border {
    border: .4vh solid #4fade3;
    background: #eee;
    display: flex;
    flex-flow: column;
    top: -36px;
    border-radius:3px;
}
.box-with-border.IC {border: 4px solid #004882;}
.box-with-border.GG {border: 4px solid #f2673d;}
.box-with-border.SU {border: 4px solid #fd6476;}
.box-with-border.CN {border: 4px solid #00b467;}
.box-with-border.CB {border: 4px solid #1cb59b;}
.box-with-border.JN {border: 4px solid #1f9a7d;}
.box-with-border.JB {border: 4px solid #34cc23;}
.box-with-border.GJ {border: 4px solid #c94753;}
.box-with-border.GN {border: 4px solid #ca5da0;}
.box-with-border.GB {border: 4px solid #b800d0;}
.box-with-border.JJ {border: 4px solid #fe9611;}
.box-with-border.GW {border: 4px solid #554bd1;}
.box-with-border.BS {border: 4px solid #3f6def;}
.box-with-border.US {border: 4px solid #0ba1d6;}
.box-with-border.DJ {border: 4px solid #b27700;}
.box-with-border.DG {border: 4px solid #8e5946;}
.box-with-border.SJ {border: 4px solid #d63a88;}

.box-with-border::after {content:''; display: block; width: 32px; height: 22px; position: absolute; left: 50%; margin-left: -16px; bottom:-26px;}
.box-with-border.IC::after {background: url(../img/IC.png) no-repeat top center / 50%;}
.box-with-border.GG::after {background: url(../img/GG.png) no-repeat top center / 50%;}
.box-with-border.SU::after {background: url(../img/SU.png) no-repeat top center / 50%;}
.box-with-border.CN::after {background: url(../img/CN.png) no-repeat top center / 50%;}
.box-with-border.CB::after {background: url(../img/CB.png) no-repeat top center / 50%;}
.box-with-border.JN::after {background: url(../img/JN.png) no-repeat top center / 50%;}
.box-with-border.JB::after {background: url(../img/JB.png) no-repeat top center / 50%;}
.box-with-border.GJ::after {background: url(../img/GJ.png) no-repeat top center / 50%;}
.box-with-border.GN::after {background: url(../img/GN.png) no-repeat top center / 50%;}
.box-with-border.GB::after {background: url(../img/GB.png) no-repeat top center / 50%;}
.box-with-border.JJ::after {background: url(../img/JJ.png) no-repeat top center / 50%;}
.box-with-border.GW::after {background: url(../img/GW.png) no-repeat top center / 50%;}
.box-with-border.BS::after {background: url(../img/BS.png) no-repeat top center / 50%;}
.box-with-border.US::after {background: url(../img/US.png) no-repeat top center / 50%;}
.box-with-border.DJ::after {background: url(../img/DJ.png) no-repeat top center / 50%;}
.box-with-border.DG::after {background: url(../img/DG.png) no-repeat top center / 50%;}
.box-with-border.SJ::after {background: url(../img/SJ.png) no-repeat top center / 50%;}

.box-with-border span.infomation {
    color:#fff;
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
    font-size: 13px;
    padding: 3px 0;
}
.box-with-border.IC span.infomation {background: #004882;}
.box-with-border.GG span.infomation {background: #f2673d;}
.box-with-border.SU span.infomation {background: #fd6476;}
.box-with-border.CN span.infomation {background: #00b467;}
.box-with-border.CB span.infomation {background: #1cb59b;}
.box-with-border.JN span.infomation {background: #1f9a7d;}
.box-with-border.JB span.infomation {background: #34cc23;}
.box-with-border.GJ span.infomation {background: #c94753;}
.box-with-border.GN span.infomation {background: #ca5da0;}
.box-with-border.GB span.infomation {background: #b800d0;}
.box-with-border.JJ span.infomation {background: #fe9611;}
.box-with-border.GW span.infomation {background: #554bd1;}
.box-with-border.BS span.infomation {background: #3f6def;}
.box-with-border.US span.infomation {background: #0ba1d6;}
.box-with-border.DJ span.infomation {background: #b27700;}
.box-with-border.DG span.infomation {background: #8e5946;}
.box-with-border.SJ span.infomation {background: #d63a88;}
.box-with-border span.name {
    text-align: left;
    overflow: hidden;
    padding-left: 4px;
    padding-top: 1px;
    white-space: normal;
    font-size: 13px;
    padding: 3px 0;
    font-weight: 800;
}
.text-center {
    text-align: center;
}

.use-spec {
    background: #f1f1f1;
    display: inline-block;
    padding: 6px 12px;
    font-size: 16px;
    border-radius: 3px;
    margin: 0 auto;
}

.gist-group, .box-group {
    display: inline-block;
    vertical-align: top;
}

.gist-group {
    width: 40%;
}

.box-group {
    width: 59%;
}

.search_wrap {}
.search_wrap form {}
.search_wrap form label {position: relative; width: 100%;}
.search_wrap form label input {border: 0 ; background: #f0f5e7;}
.search_wrap form label input[type="text"] {line-height: 4rem; font-size:1.4rem; width: 100%; text-indent: 1rem;}
.search_wrap form label input[type="text"]::placeholder {color:#c1d39b;}
.search_wrap form label input[type="submit"] {position: absolute; right: 1rem; top:-0.7rem; width:2rem; height:2rem; text-indent: -9999px; background: url('../img/search.png') no-repeat center / cover;}


@media screen and (max-width:768px) and (min-width: 500px) {
    #infoBar .lhName {width: 50%;}
}