html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; position:fixed; font-family: "MS Pゴシック",sans-serif; background-color: black; } h2 { font-size:13px; font-weight:bold; text-align:center; } a { color:black; text-decoration:none; } a:active { background-color:gray; } /*Cesium関連スタイル設定*/ .cesium-home-button { display:none; } .cesium-viewer-toolbar { top:6px; right:52px; } .cesium-toolbar-button { width:36px; height:36px; } .cesium-baseLayerPicker-dropDown { right:-44px; } .cesium-baseLayerPicker-dropDown-visible { right:-44px; } .cesium-selection-wrapper { transform: translateY(-12px); } .cesium-infoBox-iframe { width:320px; overflow:hidden; padding:0px; margin:0px; z-index:10001; } .cesium-infoBox { width:320px; overflow:hidden; padding:0px; margin:0px; z-index:10001; background-color:rgba(255,255,255,0.8); overflow-y: auto; -webkit-overflow-scrolling: touch; } .cesium-infoBox-visible { width:320px; overflow:hidden; padding:0px; margin:0px; z-index:10001; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cesium-infoBox-title { padding:5px 24px; overflow:hidden; color:#000; background-color:rgba(255,255,255,0.5); } .custom-infoBox { position: absolute; display: none; top: 14px; right: 8px; width: 320px; height: calc(100vh - 28px); max-height: calc(100vh - 28px); z-index: 10001; background-color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(120, 120, 120, 0.8); border-radius: 6px; overflow: hidden; } .custom-infoBox-titlebar { height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.55); position: relative; } .custom-infoBox-title { width: 100%; font-size: 18px; text-align: center; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 42px; box-sizing: border-box; } .custom-infoBox-close { border: 0; background: transparent; color: #888; font-size: 32px; line-height: 1; cursor: pointer; padding: 0; width: 24px; height: 24px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .custom-infoBox-body { height: calc(100% - 38px); max-height: calc(100% - 38px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 7px 8px 7px; box-sizing: border-box; } .custom-infoBox-body .balloon { margin: 0; padding: 0; } .custom-infoBox-body p.faceimage { text-align: center; padding: 0; margin: 8px 0 5px 0; } .custom-infoBox-body p.video { margin: 5px 0; padding: 0; text-align: center; width: 100%; height: 163px; } .custom-infoBox-body img.faceimage { padding: 0; margin: 0; } .custom-infoBox-body div.shogen { margin: 0; padding: 0; } .custom-infoBox-body p.home, .custom-infoBox-body p.birth { font-size: 12px; text-align: right; line-height: 1.2em; margin: 0; color: #000; } .custom-infoBox-body p.subject { font-size: 19px; text-align: center; font-weight: bold; color: #000; } .custom-infoBox-body p.shogen { text-indent: 1em; color: #000; font-size: 15px; line-height: 1.75em; } .custom-infoBox-body p.yomitan { color: #000; text-align: center; font-size: 14px; line-height: 16px; } .custom-infoBox-body p.photograph { margin: 8px 0 5px 0; padding: 0; } .custom-infoBox-body p.description { width: 100%; color: #000; font-size: 13px; } .custom-infoBox-body p.credit { width: 100%; color: #000; font-size: 11px; text-align: center; } .custom-infoBox-body img.photograph { width: 100%; } @media (max-width: 640px) { .custom-infoBox { left: 10px; right: 10px; top: 10px; width: auto; height: calc(100vh - 20px); max-height: calc(100vh - 20px); border-radius: 8px; } .custom-infoBox-title { font-size: 24px; } .custom-infoBox-body p.shogen { font-size: 14px; line-height: 1.65em; } .custom-infoBox-body { padding: 0 6px 8px 6px; } .custom-infoBox-body p.video { height: 180px; } } .cesium-viewer .cesium-widget-credits { display: inline; position: absolute; bottom: 0px; left: 2px; padding-right: 0px; margin-right: 140px; font-size: 9px; text-shadow: 0px 0px 2px #000; opacity: 0.8; } .cesium-credit-imageContainer { visibility:hidden; } .cesium-credit-textContainer { visibility:hidden; } .cesium-button { color: rgb(180, 180, 180); fill: rgb(180, 180, 180); cursor: pointer; } button.cesium-infoBox-close { color:#aaa; } .cesium-selection-wrapper{ margin-top:-18px; } .cesium-selection-wrapper-visible { margin-top:-18px; } .cesium-selection-wrapper svg { fill: #FFF; stroke: #FFF; stroke-width: 0px; opacity:0.7; } .cesium-timeline-ticLabel { visibility:hidden; } .cesium-timeline-ticTiny{ visibility:hidden; } .cesium-timeline-icon16 { border: 1px solid rgba(0,0,0,0.5); height:22px; width:33px; background: #f2f6f8; /* Old browsers */ background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #c0ccdb 51%, #e0eff9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#c0ccdb), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#c0ccdb 51%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#c0ccdb 51%,#e0eff9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#c0ccdb 51%,#e0eff9 100%); /* IE10+ */ background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#c0ccdb 51%,#e0eff9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */ margin-bottom:0px; margin-left:-9px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .cesium-timeline-main { border:none; } .cesium-timeline-bar{ background:rgba(0,0,0,0.4); } .cesium-viewer-timelineContainer { position:absolute; left:0px; } .cesium-timeline-ticTiny { display:none; } .cesium-viewer-animationContainer { bottom: 20px; left: -28px; opacity: 0.8; -webkit-filter:grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } .cesium-animation-shuttleRingG { display: none; } .cesium-animation-shuttleRingBack { display: none; } .cesium-animation-shuttleRingG .cesium-animation-shuttleRingSwoosh { display: none; } .cesium-animation-shuttleRingSwoosh line { display: none; } .cesium-animation-shuttleRingPausePointer { display: none; } .cesium-animation-knobOuter { display: none; } .cesium-animation-knobInner { display: none; } .cesium-animation-svgText { display: none; } .cesium-animation-blank { display: none; } .cesium-animation-buttonDisabled { display: none; } .cesium-animation-buttonDisabled .cesium-animation-buttonGlow { display: none; } .cesium-animation-buttonDisabled .cesium-animation-buttonMain { display: none; } /*以降Cesium以外の要素*/ /*タイトルスクリーン*/ .titleScreen { position:absolute; margin:0px; padding:0px; width:100%; height:100%; display:table; z-index:10002; background-color:rgba(0,0,0,0); opacity:0.9; } .titleScreen p { display:table-cell; text-align:center; vertical-align:middle; } .titleImage { width:80%; } /*ボタン*/ #button { position:absolute; top:8px; left:8px; opacity:0.9; } #button2 { position:absolute; top:8px; right:54px; opacity:0.9; } #button3 { position:absolute; top:8px; right:8px; opacity:0.9; } #buttonGeo { position:absolute; bottom:30px; left:50%; margin-left:-20px; opacity:0.9; } .sharebutton { position: absolute; text-align: left; top: -4px; right: 140px; width: 130px; z-index: 2; opacity:0.9; } .share { width:28px; height:28px; margin:-2px; } .share-buttons{ list-style: none; } .share-buttons li{ display: inline; } /*事象名ボックス*/ #descriptionDiv{ position: fixed; bottom: 72px; right: 2px; height:20px; width: 320px; padding:0px; margin:0px; background:rgba(0,0,0,0.0); font-size:10px; color:#fff; text-align:right; } /*タイムカウンター*/ #timeCounter { width:160px; text-align:right; position:absolute; bottom:26px; right:2px; margin:0px; z-index:10000; font-size:16px; line-height:16px; text-align:right; font-family:sans-serif; color:white; } .archive-index-button { position: absolute; left: 18px; bottom: 72px; z-index: 10001; display: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; background: rgba(176, 104, 36, 0.24); color: #f3f6fa; font-size: 12px; line-height: 1.3; font-family: "MS Pゴシック", sans-serif; text-decoration: none; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0.9; } .archive-index-button:hover { background: rgba(176, 104, 36, 0.32); border-color: rgba(255, 255, 255, 0.45); color: #f3f6fa; } .archive-index-button:focus-visible { outline: none; background: rgba(176, 104, 36, 0.36); border-color: rgba(255, 255, 255, 0.52); box-shadow: 0 0 0 2px rgba(255, 214, 170, 0.18), 0 4px 14px rgba(0, 0, 0, 0.22); color: #f3f6fa; } /*スライドインメニューー*/ #slide_menu{ position: fixed; top: 66px; left: -200px; width: -moz-fit-content; width: fit-content; min-width: 78px; opacity: 1; padding: 8px 10px 10px 10px; margin:0px; margin-bottom:0px; background: rgba(20, 24, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align:left; border-radius: 8px; z-index: 10001; } #slide_menu2{ position: fixed; top: 66px; right: -200px; width: 136px; opacity: 1; padding: 8px 10px 10px 10px; margin:0px; margin-bottom:0px; background: rgba(20, 24, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align:left; border-radius: 8px; z-index: 10001; } .viewpoint { padding: 0; margin: 0; font-size:12px; list-style-type:none; line-height:1.7em; text-indent:0px; background: transparent; } .viewpoint li a { display: block; padding: 2px 6px; border-radius: 6px; color: #f3f6fa; } .viewpoint li a:hover { background: rgba(255, 255, 255, 0.14); } .viewpoint hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); margin: 8px 0; } .slide_label{ font-size: 12px; color: #f3f6fa; font-weight: normal; margin: 4px 0 2px 0; padding:0px; height:auto; line-height: 1.7em; } #slider { position: absolute; width: 100px; top: 5px; background: none repeat scroll 0% 0% transparent; z-index: 10001; right: 98px; } #slide_menu2 input[type="range"] { display: block; width: 100% !important; margin: 0 0 8px 0; } /*ジオコーディング*/ input { margin:2px 0px 0px 0px; padding:0px; } .loading { position:absolute; top:50%; left:50%; margin-top:-40px; margin-left:-40px; } .geocode { opacity:0.8; position:absolute; top:8px; left:55px; z-index:10001; } form.textbox { margin: 0; padding: 0; } input.textbox { border: 1px solid rgba(255, 255, 255, 0.28); margin: 0; padding: 1px 8px; font-size: 12px; width: 132px !important; height: 24px; border-radius: 8px; color: #f3f6fa; background: rgba(20, 24, 30, 0.62); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); outline: none; box-sizing: border-box; } input.textbox:focus, input.textbox:active { color: #f3f6fa; background: rgba(20, 24, 30, 0.74); border-color: rgba(255, 255, 255, 0.45); outline: none; -webkit-text-fill-color: #f3f6fa; } input.textbox::placeholder { color: rgba(243, 246, 250, 0.68); } /* テキスト検索 */ #textSearch { position: absolute; z-index: 10001; top: 34px; left: 55px; opacity: 0.8; } /* ボタン（検索ボックスと同テイスト） */ .general-button { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; background: rgba(20, 24, 30, 0.62); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .general-button:before { background: transparent; border: 0; border-radius: 8px; } .general-button .button-content { border-radius: 8px; padding: 3px 6px; color: #f3f6fa; box-shadow: none; } .general-button .icon-font { font-size: 28px; padding: 0 3px; } .general-button:hover { background: rgba(20, 24, 30, 0.74); border-color: rgba(255, 255, 255, 0.45); } .general-button:hover .button-content { box-shadow: none; } .general-button:active { background: rgba(16, 20, 26, 0.78); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) inset; } .general-button:active .button-content { box-shadow: none; } @media screen and (max-width: 768px) { input.textbox { width: 124px !important; } .archive-index-button { display: none; } #slide_menu { top: 66px; width: -moz-fit-content; width: fit-content; min-width: 74px; } #slide_menu2 { top: 66px; width: 128px; } } /*ローディング*/ #blackOut { position:absolute; margin:0px; padding:0px; width:100%; height:100%; background:black; z-index:10002; opacity:0.6; } /*Cesium Ion*/ .cesium-credit-logoContainer * { display: none; }