body,html { margin:0; padding:0; height:100%; }
body {font-family: Tahoma, Geneva, Meiryo, sans-serif; color:#020202; background-color:#444; }

main {
  background:linear-gradient(-45deg, rgba(16,8,32,0.9), rgba(8,16,32,0.95)), url(../images/title1.gif); 
  background:-moz-linear-gradient(left 45deg, rgba(16,8,32,0.89), rgba(8,16,32,0.95)), url(../images/title1.gif); 
  background:-webkit-gradient(linear,left top,right bottom, from(rgba(16,8,32,0.89)), to(rgba(8,16,32,0.95))), url(../images/title1.gif); 
  background-size:contain;
}

@media screen and (orientation: portrait) {
main   { margin:0; padding:0; width:100%; position:fixed; top:44px; bottom:42px; left:0px; right:0px; }
header { margin:0; padding:0; width:100%; height:40px; background-color:#101214; position:fixed; top:0px;}
footer { margin:0; padding:0; width:100%; height:40px; background-color:#101214; position:fixed; bottom:0px;}
article { margin:0; padding:0; width:100%; }
#position { background:linear-gradient(105deg,#111,#282828,#111); background:-moz-linear-gradient(left 105deg,#111,#282828,#111);}
.btn12 { width:12%; }
}

@media screen and (orientation: landscape) {
main   { margin:0; padding:0; width:100%; position:fixed; top:1px;bottom:1px;left:0px;right:0px; }
header { margin:0; padding:0; width:100%; height:40px; background-color:rgba(16,18,20,0.5); position:fixed; top:0px;z-index:5;}
footer { margin:0; padding:0; width:100%; height:40px; background-color:rgba(16,18,20,0.5); position:fixed; bottom:0px;z-index:5;}
article { margin:0; padding:0; width:100%; }
#position { background-color:rgba(24,24,24,0.01);}
button.time { background-color:rgba(8,16,32,0.05); }
button.zoom { background-color:rgba(8,16,32,0.05); }
.btn12 { width:22%; }
}

#wrapper { position: relative; width:100%; height:100%; min-height:100%; text-align:center; font-size:18px; font-weight:bold; background:#333; z-index:2; top:0;bottom:0; }

#header-inner { position:relative; width:100%; height:100%;}
#footer-inner { position:relative; width:100%; height:100%;}
#main-inner { width:100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling: touch; }

#nav-left { position:absolute; top:50%; margin-top:-115px; left:10px; width:50px; height:230px;}
#nav-left .xtbl-cl.label { margin:24px 0;}

#nav-right { position:absolute; top:50%; margin-top:-115px; right:10px; width:50px; height:230px;}
#nav-right .ytbl-cl { margin:27px 0; }

#dialog  { color:#ffd; position:fixed; z-index:20; height:100%; width:100%; top:0; left:0; background-color:rgba(64,64,64,0.7);}
#dialog-inner  { position:relative; height:280px; width:94%; max-width:480px; margin:0 auto; top:50%; margin-top:-155px; padding:8px 0px;
  border-radius:10px;-webkit-border-radius:10px; -moz-border-radius:10px; border:2px solid #124; border-top:36px solid #124;
  background:linear-gradient(rgba(16,16,24,1),rgba(24,24,30,1),rgba(16,16,20,1));
  background:-moz-linear-gradient(rgba(16,16,24,1),rgba(24,24,30,1),rgba(16,16,20,1));
  background:-webkit-gradient(linear,left top,left bottom,from(rgba(16,16,24,1)),color-stop(0.5,rgba(24,24,30,1)),to(rgba(16,16,20,1)));
}
.dialog-title { width:100%; height:28px; position:absolute; top:-28px; font-size:14px; border-bottom:1px solid #248; color:#fdd; }
.dia-moji { font-size:15px; }

input.usr_pos { font-family: Tahoma, Geneva, Meiryo, sans-serif; font-size:16px; font-weight:bold;}
#dialog .user_pos_input { margin:8px 2px 4px;padding:8px 2px 4px;}
#dialog .user_pos_input .input_lon { padding: 6px 0 0 0; height:32px;}
#dialog .user_pos_input .input_lat { padding: 8px 0 0 0; height:32px;}
#dialog .pos_switch_wrap { margin:0 ;padding:16px 0; height:30px;}

input.usr_pos { width:90px; }

.dialog_btn_wrap { padding:16px 0 0 0; }
.dialog_btn_wrap.gps { text-align:right; }


#dialogDep  { color:#ffd; position:fixed; z-index:20; height:100%; width:100%; top:0; left:0; background-color:rgba(64,64,64,0.7);}
#dialogDep-inner  { position:relative; height:160px; width:94%; max-width:480px; margin:0 auto; top:50%; margin-top:-155px; padding:8px 0px;
  border-radius:10px;-webkit-border-radius:10px; -moz-border-radius:10px; border:2px solid #124; border-top:36px solid #124;
  background:linear-gradient(rgba(16,16,24,1),rgba(24,24,30,1),rgba(16,16,20,1));
  background:-moz-linear-gradient(rgba(16,16,24,1),rgba(24,24,30,1),rgba(16,16,20,1));
  background:-webkit-gradient(linear,left top,left bottom,from(rgba(16,16,24,1)),color-stop(0.5,rgba(24,24,30,1)),to(rgba(16,16,20,1)));
}
#dialogDep .user_dep_input { margin:8px 2px 4px;padding:8px 2px 4px;}
#dialogDep .dep_switch_wrap { margin:0 ;padding:16px 0; height:30px;}


select::-ms-expand { display: none; }
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; border-style:none; font-size:18px; font-weight:bold; }

select.dept {opacity:0; position:absolute; top:0; left:0; background-color:#060c18; color:#eef;cursor:pointer; width:100%; height:40px; margin:0; padding:0; text-align:center;}
select.dept:focus {background-color:#0c1830; color:#eff;}

.center-select { position:relative; }
.center-select-label { width:100%; text-align:center; position:relative; color:#efe }

select.time { opacity:0; position:absolute; top:0;left:0; color:#eef; background-color:#060c18; cursor:pointer; width:100%; height:40px; margin:0; padding:0; text-align:center;;}
select.time:focus { opacity:0; }

button { cursor:pointer; border:none; -webkit-appearance:button; appearance:none; margin:0;padding:0; background-color:#081020;}

button.dept { color:#8ff; width:100%; height:40px; background-color:rgba(114,128,144,0.07); }
button.time { color:#8ff; width:100%; height:40px; }
button.zoom { color:#8ff; width:100%; height:40px; }
button.test { color:#8ff; width:100%; height:40px; font-size:18px; font-weight:bold; text-align:center; }

button.dialog { color:#8ff; width:120px; height:40px; font-size:18px; font-weight:bold; text-align:center; }
button.dialog.gps{ width:140px; font-size:14px; color:#fa4; }

button:active {
  background:linear-gradient(-45deg,rgba( 128,128,128,0.2),rgba(235,255,255,0.3),rgba( 128,128,128,0.2));
  background:-moz-linear-gradient(left 45deg,rgba( 128,128,128,0.2),rgba(235,255,255,0.3),rgba( 128,128,128,0.2));
  background:-webkit-gradient(linear,left top,right bottom,from(rgba( 128,128,128,0.2)),color-stop(0.5,rgba(235,255,255,0.3)),to(rgba( 128,128,128,0.2)));
}

img.time { margin:0 auto; width:32px;height:32px; vertical-align:middle;}
img.zoom { margin:0 auto; width:32px;height:32px; vertical-align:middle;}
img.dept { margin:0 auto; width:32px;height:32px; vertical-align:middle;}

button img:active { opacity:0.5; }

div.tbl-hd { display:table; table-layout:fixed; width:100%; height:40px; background:rgba(0,0,15,0); position:relative; }
div.tbl-ft { display:table; table-layout:fixed; width:100%; height:40px; background:rgba(24,24,24,0.2); }
div.tbl-rw { display:table-row;  border:none; height:100%; vertical-align:middle; }
div.tbl-cl { display:table-cell; border:none; height:100%; vertical-align:middle; position:relative;}

#zoom-yaji { position:absolute; left:-10px; top:2px; height:24px; border:4px solid transparent; border-top:6px solid #888; border-bottom:6px solid #888;}

div.h-separeter { border:none;width:100%; height:1px;
  background:linear-gradient(90deg,#081020,#888,#081020);
  background:-moz-linear-gradient(left,#081020,#888,#081020);
  background:-webkit-gradient(linear,left top,right top,from(#081020),color-stop(0.5,#888),to(#081020)); }
div.v-separeter { border:none;width:1px; height:100%; background:linear-gradient(#081020,#666,#081020); }

#position {color:#fde; font-weight:bold; text-align:center; width:100%; height:40px; font-size:18px; line-height:40px; margin:0;padding:0;;}

.dep-panel { text-shadow:1px 1px 1px #bbb,-1px 1px 1px #bbb,1px -1px 1px #bbb,-1px -1px 1px #bbb,4px 4px 4px rgba(120,120,120,0.2); }
.dep-panel.side { color:#337; font-weight:normal; font-size:16px; line-height;32px; height:32px;}
.dep-panel.cntr { color:#225; font-weight:normal; font-size:19px; line-height;38px; height:38px;}

input[type="checkbox"] { display:none; }
label.chkbx { display:inline-block; color:#888;background-color:rgba(127,127,127,0.07); text-shadow:4px 4px 4px rgba(120,120,120,0.3); width:100%; vertical-align:middle;line-height:40px; cursor:pointer;}
input[type="checkbox"].koumoku:checked + label { color:#222; background-color:rgba(111,111,159,0.07); text-shadow:1px 1px 2px #ddd,1px -1px 2px #ddd,-1px 1px 2px #ddd,-1px -1px 2px #ddd,4px 4px 8px rgba(120,120,120,0.5); }

iframe#vwp_cgiout { display:none; border:1px solid #888; margin:0; padding:0; width:300px; height:20px; }

#map-frame { position:relative; margin:0 auto; padding:0; border:none; }
img#mapmap { width:100%; height:auto; }
img#targetmark { position:absolute; top:-32px; left:-32px; z-index:10; margin:-17px 0 0 -17px; }

.display_none { display:none; }

/*-------------------------------------------------*/

#loading { width:100%; height:100%; background-color:rgba(16,16,16,0.7); z-index:30; position:fixed; top:0px; left:0px; bottom:0px; right:0px;}
#loading-inner { position:relative; margin:0 auto; width:61px; height:61px; top:47%;}

#loading #load-rote1 { position:absolute; top:24px; left:24px; width: 8px; height: 8px; border-radius:50%; border:3px solid rgba(68,187,255,0.2); border-right-color:#4bf; animation:spin 0.6s linear infinite; -webkit-animation:spin 0.6s linear infinite; -moz-animation:spin 0.6s linear infinite;}
#loading #load-rote2 { position:absolute; top:20px; left:20px; width:20px; height:20px; border-radius:50%; border:1px solid rgba(85,204,255,0.2); border-bottom-color:rgba(85,204,255,0.5); border-top-color:rgba(85,204,255,0.5); animation:spinR 1.5s linear infinite; -webkit-animation:spinR 1.5s linear infinite; -moz-animation:spinR 1.5s linear infinite;}
#loading #load-rote3 { position:absolute; top:12px; left:12px; width:30px; height:30px; border-radius:50%; border:4px solid #6df; border-left-color:rgba(102,221,255,0.2); border-right-color:rgba(102,221,255,0.2); animation:spin 2.1s linear infinite; -webkit-animation:spin 2.1s linear infinite; -moz-animation:spin 2.1s linear infinite;}
#loading #load-rote4 { position:absolute; top: 8px; left: 8px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(119,238,255,0.2); border-top-color:rgba(119,238,255,0.5); animation:spinR 2.7s linear infinite; -webkit-animation:spinR 2.7s linear infinite; -moz-animation:spinR 2.7s linear infinite;}
#loading #load-rote5 { position:absolute; top: 0px; left: 0px; width:56px; height:56px; border-radius:50%; border:3px solid rgba(136,255,255,0.8); border-right-color:rgba(136,255,255,0.2); animation:spin 3.3s linear infinite; -webkit-animation:spin 3.3s linear infinite; -moz-animation:spin 3.3s linear infinite;}

@keyframes spin {
 0% { transform: rotate(0deg);   opacity: 1.0; }
 50%  { transform: rotate(180deg); opacity: 0.5; }
 100%   { transform: rotate(360deg); opacity: 1.0; }
}

@keyframes spinR {
 0% { transform: rotate(0deg);   opacity: 0.5; }
 50%  { transform: rotate(-180deg); opacity: 1.0; }
 100%   { transform: rotate(-360deg); opacity: 0.5; }
}

/*-------------------------------------------------*/

.pos_switch label { padding: 12px; font-size: 16px; font-weight: bold; cursor: pointer; }

.pos_switch label:before {
    padding: 6px 10px;
    content: '\00a0\00a0\00a0 GPS \00a0\00a0\00a0';
    border-radius: 6px 0 0 6px;
    background: linear-gradient(#333, #444);
    background: -moz-linear-gradient(#333, #444);
    background: -webkit-gradient(linear,left top,left bottom, from(#333),to(#444));
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2) inset;
    color: #888;
}
.pos_switch label:after {
    padding: 6px 10px;
    content: '\00a0\00a0\00a0 USR \00a0\00a0\00a0';
    border-radius: 0 6px 6px 0;
    background: linear-gradient(#EA8274,#F2c9d1);
    background: -moz-linear-gradient(#EA8274,#F2c9d1);
    background: -webkit-gradient(linear,left top,left bottom,from(#EA8274),to(#F2c9d1));
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2) inset;
    color: #010;
}
.pos_switch input + label:hover:before { opacity: 0.9; }
.pos_switch input:checked + label:before {
    background: linear-gradient(#EA8274,#F2c9d1);
    background: -moz-linear-gradient(#EA8274,#F2c9d1);
    background: -webkit-gradient(linear,left top,left bottom,from(#EA8274),to(#F2c9d1));
    color: #100; opacity: 1;
}
.pos_switch input:checked + label:after {
    background: linear-gradient(#333, #444);
    background: -moz-linear-gradient(#333, #444);
    background: -webkit-gradient(linear,left top,left bottom, from(#333),to(#444));
    color: #888; }
.pos_switch input:checked + label:hover:after { opacity: 0.8; }

/*-------------------------------------------------*/

.dep_switch label { padding: 12px; font-size: 16px; font-weight: bold; cursor: pointer; }

.dep_switch label:before {
    padding: 6px 10px;
    content: '\00a0\00a0\00a0 \7c21\6613 \00a0\00a0\00a0';
    border-radius: 6px 0 0 6px;
    background: linear-gradient(#333, #444);
    background: -moz-linear-gradient(#333, #444);
    background: -webkit-gradient(linear,left top,left bottom, from(#333),to(#444));
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2) inset;
    color: #888;
}
.dep_switch label:after {
    padding: 6px 10px;
    content: '\00a0\00a0\00a0 \8a73\7d30 \00a0\00a0\00a0';
    border-radius: 0 6px 6px 0;
    background: linear-gradient(#EA8274,#F2c9d1);
    background: -moz-linear-gradient(#EA8274,#F2c9d1);
    background: -webkit-gradient(linear,left top,left bottom,from(#EA8274),to(#F2c9d1));
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2) inset;
    color: #010;
}
.dep_switch input + label:hover:before { opacity: 0.9; }
.dep_switch input:checked + label:before {
    background: linear-gradient(#EA8274,#F2c9d1);
    background: -moz-linear-gradient(#EA8274,#F2c9d1);
    background: -webkit-gradient(linear,left top,left bottom,from(#EA8274),to(#F2c9d1));
    color: #100; opacity: 1;
}
.dep_switch input:checked + label:after {
    background: linear-gradient(#333, #444);
    background: -moz-linear-gradient(#333, #444);
    background: -webkit-gradient(linear,left top,left bottom, from(#333),to(#444));
    color: #888; }
.dep_switch input:checked + label:hover:after { opacity: 0.8; }