@charset "utf-8";
/* CSS Document */


.lpbgd01 {background:url(../images/lpbgd01.jpg) no-repeat;}
.lpbgd02 {background:url(../images/lpbgd02.jpg) no-repeat;}
.lpbgd03 {background:url(../images/lpbgd03.jpg) no-repeat;}
.lpbgd04 {background:url(../images/lpbgd04.jpg) no-repeat;}
.lpbgd05 {background:url(../images/lpbgd05.jpg) no-repeat;}
.lpbgd06 {background:url(../images/lpbgd06.jpg) no-repeat;}
.lpbgd07 {background:url(../images/lpbgd07.jpg) no-repeat top left;}
.lpbgd08 {background:url(../images/lpbgd08.jpg) no-repeat;}
.lpbgd01, .lpbgd02, .lpbgd03, .lpbgd04, .lpbgd05, .lpbgd06, .lpbgd07 {background-size: cover;}

.divpaean {display:block; position:absolute; top:30px; right:0px; width:30%; padding-bottom:20px; padding-left:20px; background:url(../images/paean.png) bottom left no-repeat; text-align:left}
.divmsearch {display:inline-block; position:absolute; right:50px; bottom:10px; font-size:8pt; text-align:right}
.msearchlogo img {width:40px; margin-left:10px}
.divmsearch li {display:inline-block; vertical-align:bottom}
.divmsearch li:first-child {width:calc(100% - 60px); line-height:normal; position:relative}
.divmsearch li:last-child {width:50px; line-height:normal; position:relative}

.divimagemaps {position:relative; display:block; top:0; left:10%; height:100% !important; width:100%; float:left; overflow:visible}
.divimagemaps figure {height:100%; position:absolute; bottom:0; left:0; display:block; width:auto}
.divimagemaps figure img {height:100%; width:auto; display:block}
.divpointnames {height:100%; width:100%; position:absolute; bottom:0; left:0; display:block}

.imagemap01, .imagemap02, .imagemap03, .imagemap04, .imagemap05, .imagemap06  {display:block; position:absolute; width:10px; height:10px; cursor:pointer; background-color:#FFFFFF; border-radius:10px}

.imagemap01 {left:35%; bottom:79%;}
.imagemap02 {left:31.2%; bottom:76.2%;}
.imagemap03 {left:34.5%; bottom:63%;}
.imagemap04 {left:61.6%; bottom:46%;}
.imagemap05 {left:64.2%; bottom:37%;}
.imagemap06 {left:69%; bottom:25%;}

.tooltip-right {top: -5px; left: 125%;}
.tooltip-right::after {content: ""; position: absolute; top: 50%; right: 100%;  margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #fff transparent transparent;}
.tooltip-bottom {top: 135%; left: 50%; margin-left: -60px;}
.tooltip-bottom::after {content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #fff transparent;}
.tooltip-top {bottom: 125%; left: 50%; margin-left: -60px;}
.tooltip-top::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #fff transparent transparent transparent;}
.tooltip-left {top: -5px; bottom:auto; right: 128%;}
.tooltip-left::after {content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #fff;}


.tooltipwidth01, .tooltipwidth02, .tooltipwidth03, .tooltipwidth04, .tooltipwidth05, .tooltipwidth06 {padding-top:20px}
.tooltip {position: relative; display: inline-block; vertical-align:top}


.divmsearch {font-size:0}

@media screen and (min-width: 300px) {
.divimagemaps {left:0;}
.divpaean {display:none}
.tooltip .tooltipwidth01, .tooltip .tooltipwidth02, .tooltip .tooltipwidth03, .tooltip .tooltipwidth04, .tooltip .tooltipwidth05, .tooltip .tooltipwidth06 {visibility: hidden; background-color: #fff; color: #333; position: absolute;  transition: opacity 0.3s; text-align:center; padding: 5px; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity 0.3s;}
.tooltip:hover .tooltipwidth01, .tooltip:hover .tooltipwidth02, .tooltip:hover .tooltipwidth03, .tooltip:hover .tooltipwidth04, .tooltip:hover .tooltipwidth05, .tooltip:hover .tooltipwidth06 {visibility: visible; opacity: 1;}
.divmsearch {font-size:6pt}
.divmsearch {width:40%}
.divmsearch {display:none}
.tooltipwidth01 {width:180px; bottom: 125%; left: 50%; margin-left: -92px;}
.tooltipwidth01::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #fff transparent transparent transparent;}
.tooltipwidth02 {width:180px; top: 110%; left: 50%; margin-left: -92px;}
.tooltipwidth02::after {content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #fff transparent;}
.tooltipwidth03 {width:120px; top: -18px; left: 110%;}
.tooltipwidth03::after {content: ""; position: absolute; top: 50%; right: 100%;  margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #fff transparent transparent;}
.tooltipwidth04 {width:150px; top: -18px; bottom:auto; right: 128%;}
.tooltipwidth04::after {content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #fff;}
.tooltipwidth05 {width:180px; top: -24px; bottom:auto; right: 128%;}
.tooltipwidth05::after {content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #fff;}
.tooltipwidth06 {width:180px; top: -24px; bottom:auto; right: 128%;}
.tooltipwidth06::after {content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #fff;}
.divworlddisc {display:block; font-size:7pt; padding-top:20px}
.divworlddisc span img {width:40px; height:auto; margin:0 auto; padding:10px 0}
.imagemap01, .imagemap02, .imagemap03, .imagemap04, .imagemap05, .imagemap06  {cursor:pointer;}
}

@media screen and (min-width: 480px) {
.divpaean {width:50%; top:10px; padding-bottom:10px;}
.divimagemaps {left:15%;}

}

@media screen and (min-width: 768px) {
.divpaean {width:50%; top:20px; padding-bottom:20px; display:block}
.divimagemaps {left:10%;}
.divmsearch {right:50px; bottom:10px;}
.divmsearch {font-size:7pt}

}

@media screen and (min-width: 1024px) {
.tooltip .tooltipwidth01, .tooltip .tooltipwidth02, .tooltip .tooltipwidth03, .tooltip .tooltipwidth04, .tooltip .tooltipwidth05, .tooltip .tooltipwidth06 {visibility: visible; background-color: transparent; color: #fff; text-align: right; padding: 20px 0 0 0; position: absolute; top:0; z-index: 1; opacity: 1; transition: opacity 0.3s; text-align:right; background:url(../images/pointsline.png) top right no-repeat}
.tooltipwidth01::after, .tooltipwidth02::after, .tooltipwidth03::after, .tooltipwidth04::after, .tooltipwidth05::after, .tooltipwidth06::after {border:none;}
.tooltipwidth01, .tooltipwidth02, .tooltipwidth03, .tooltipwidth04, .tooltipwidth05, .tooltipwidth06 {top: 0; left: 0; margin-left:0;}
.tooltipwidth01 {width:700px;}
.tooltipwidth02 {width:400px;}
.tooltipwidth02 {width:400px;}
.tooltipwidth03 {width:600px;}
.tooltipwidth04 {width:550px;}
.tooltipwidth05 {width:300px;}
.tooltipwidth06 {width:500px;}
.divimagemaps {left:5%;}
.divmsearch {font-size:7pt}
.divmsearch {width:30%; display:block}
.divpaean {width:35%; top:20px; padding-bottom:20px; padding-left:20px; background:url(../images/paean.png) bottom left no-repeat;}
.divworlddisc {display:none}
.imagemap01, .imagemap02, .imagemap03, .imagemap04, .imagemap05, .imagemap06  {cursor:default;}

}

@media screen and (min-width: 1280px) {
.tooltipwidth01 {width:800px;}
.tooltipwidth02 {width:500px;}
.tooltipwidth03 {width:700px;}
.tooltipwidth04 {width:650px;}
.tooltipwidth05 {width:400px;}
.tooltipwidth06 {width:600px;}
.divmsearch {font-size:7.5pt}
.divmsearch {width:100%}
.divpaean {width:30%; top:30px}

}

@media screen and (min-width: 1366px) {
.tooltipwidth01 {width:850px;}
.tooltipwidth02 {width:550px;}
.tooltipwidth03 {width:750px;}
.tooltipwidth04 {width:700px;}
.tooltipwidth05 {width:450px;}
.tooltipwidth06 {width:650px;}
.divmsearch {font-size:8pt}

}

@media screen and (min-width: 1600px) {
.tooltipwidth01 {width:1000px;}
.tooltipwidth02 {width:600px;}
.tooltipwidth03 {width:900px;}
.tooltipwidth04 {width:850px;}
.tooltipwidth05 {width:500px;}
.tooltipwidth06 {width:800px;}
.divimagemaps {left:10%;}

}

@media screen and (min-width: 1900px) {
.tooltipwidth01 {width:1100px;}
.tooltipwidth02 {width:700px;}
.tooltipwidth03 {width:1000px;}
.tooltipwidth04 {width:950px;}
.tooltipwidth05 {width:600px;}
.tooltipwidth06 {width:900px;}

}