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

#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: #f06840;margin: 1rem 0 0; order: 2; width: fit-content;font-size: 1.5rem;color: #fff;padding: 0.5rem 1rem;position: relative; left: 50%; transform: translateX(-50%);    border-radius: 0.5rem;}
#infoBar .lhName {font-size:20px;padding:1rem 3rem 1rem 1rem ; order:1; text-align: left;background: #2191d0 url(../sub/arrow.png) no-repeat;background-position: 95%;color: #fff;line-height: 1.3; position: relative;text-align: center; background-size: 0.8rem;}
#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;    justify-content: center;}
#infoBar .lhInfo dl:last-child {margin-bottom: 0;}
#infoBar .lhInfo dl dt {position: relative; padding-left: 15px; font-size: 1.5rem;font-weight: bold;}
#infoBar .lhInfo dl dd { font-size: 1.5rem; margin-left: 0.5rem;font-weight: bold;}

.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(../sub/IC.png) no-repeat top center / 50%;}
.box-with-border.GG::after {background: url(../sub/GG.png) no-repeat top center / 50%;}
.box-with-border.SU::after {background: url(../sub/SU.png) no-repeat top center / 50%;}
.box-with-border.CN::after {background: url(../sub/CN.png) no-repeat top center / 50%;}
.box-with-border.CB::after {background: url(../sub/CB.png) no-repeat top center / 50%;}
.box-with-border.JN::after {background: url(../sub/JN.png) no-repeat top center / 50%;}
.box-with-border.JB::after {background: url(../sub/JB.png) no-repeat top center / 50%;}
.box-with-border.GJ::after {background: url(../sub/GJ.png) no-repeat top center / 50%;}
.box-with-border.GN::after {background: url(../sub/GN.png) no-repeat top center / 50%;}
.box-with-border.GB::after {background: url(../sub/GB.png) no-repeat top center / 50%;}
.box-with-border.JJ::after {background: url(../sub/JJ.png) no-repeat top center / 50%;}
.box-with-border.GW::after {background: url(../sub/GW.png) no-repeat top center / 50%;}
.box-with-border.BS::after {background: url(../sub/BS.png) no-repeat top center / 50%;}
.box-with-border.US::after {background: url(../sub/US.png) no-repeat top center / 50%;}
.box-with-border.DJ::after {background: url(../sub/DJ.png) no-repeat top center / 50%;}
.box-with-border.DG::after {background: url(../sub/DG.png) no-repeat top center / 50%;}
.box-with-border.SJ::after {background: url(../sub/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: center;
    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: #e6f7ff;}
.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:#9cccf1;}
.search_wrap form label input[type="submit"] {position: absolute; right: 1rem; top:50%;transform:translateY(-50%) ;width:2rem; height:2rem; text-indent: -9999px; background: url('../sub/search.png') no-repeat center / cover;}


@media screen and (max-width:768px) and (min-width: 500px) {
    #infoBar .lhName {width: 50%;}
}
.sec_header .header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
}

.sec_header .header h1 {
    color: #242b36;
    text-align: center;
    font-size: 2.3rem;
    font-weight: bold;
    letter-spacing: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sec_header .header h1 i {
    font-size: 1.5rem;
    color: #4f4f4f;
}


.sec_header .header h1 span {
    color: #00bdf2
}

.sec_header {border-bottom:2px solid #c7c7c7;}
.sec_header > div {display:flex;justify-content: space-between;background:url(../sub/background.png) no-repeat ;background-size: contain;}
.service_top .visual {position:relative; top:17rem}
.banner {    padding: 0.5rem 2rem; box-sizing: border-box;height: 4rem;position: relative;display: flex;justify-content: center;flex-direction: column;}
.sec_header > div > div:nth-child(2) {width :50%; background:linear-gradient( 125deg, transparent 27%, #4884c1 0);color:#fff;position:relative;}
.sec_header > div > div:nth-child(2) p {position: absolute; right: 1rem; text-align: end; top: 50%; font-size: .9rem; transform: translateY(-50%); line-height: 1.3;}
.banner img {width: 100%;height: 100%;}