﻿@charset "UTF-8";

/*
浦添市
*/


/* =====================================
	共通
====================================== */
/* =====基本背景===== */
body{
    /*background: url(../../../images/site/47213/imageMain.jpg) center 0 no-repeat;*/
    /*background-color: #44B2B3;*/
    background-color: #f7f7f7;
    background-size: 100vw;
}
#mapSelect body{
    background: none;
}

/* =====各ページタイトル、サブタイトル===== */
h1{
    background-color: #000000 !important;
    background-image: none !important;
}
#search .txt_03{
    background-color: #333333 !important;
    background-image: none !important;
}



/* =====================================
	ポータルページ
====================================== */

#menu_top{
    background: linear-gradient(180deg, rgba(3, 54, 255, 1) 10px , rgba(3, 54, 255, 0) 60px);
    background-size: 100vw !important;
}


/*-----サイト名画像-----*/
#menu_top h1.portaltitle{
    height: max(40px,5vw);
    color: transparent;
    text-indent: -9999px;
    background-size: auto 75% !important;
    background-image: url('../../../images/site/47213/logo_map.png') !important;
    background-color: transparent !important;
    border-bottom: none;
    background-position: 10px center;
    background-repeat: no-repeat;
}

/*-----ポータル画像-----*/
#menu_top div.portalimage{
    height: min(calc( 100vw * 224 / 472),50vh);/*画像の縦横比を指定*/
    /*background: url('../../../images/site/47213/imageMain.jpg') center center no-repeat;*/
    background-size: 100vw;
    /*background-color: #E0E0E0;*/
    display: block !important;
}

#menu_top #menu_top_body {
    background-color: white;
    margin: 4px;
    width: calc(100% - 8px);
    border-radius: 4px;
}

#menu_top #menu_top_body, #menu_top menu_top_body{
    background-color: #FFFFFF;
}


/*-----マップ選択-----*/
@media only screen and (min-width: 599px){
  .map_select_list li.mapclick {
      width: calc(50vw - 20px);
  }
}

/*-----マップ選択表示前ローディング画像-----*/
#menu_top_mapsel:empty{
    background:linear-gradient(180deg, rgba(8, 178, 179, 0) 0px , rgba(68, 178, 179, 1) 100%);
}
#menu_top_mapsel:empty{
    background:url('../../../images/plugin/NowLoadingTile.gif') center center no-repeat #ffffff;
    width:100% !important;
    height:calc(100vh - 250px) !important;
}

/*-----マップ選択-----*/
#menu_top h1 {
    background-color: #0033FF !important;
    margin: 4px;
    padding: 0;
    border-radius: 4px;
    height: 40px;
    line-height:40px;
}
#menu_top h2 {
    display: none;
    background-color: #000033;
    color: white;
    clear: both;
}

#menu_top_mapsel #menu_top_mapsel_body ul {
    display: block;
    flex-wrap: unset;
    justify-content: unset;
    gap: unset;
}
@media only screen and (max-width: 639px){
    .map_select_list li.mapclick {
        width: calc(100vw / 1 - 4px * 1 - 23px);
    }
}
@media only screen and (min-width: 640px){
    .map_select_list li.mapclick {
        width: calc(100vw / 2 - 4px * 2 - 5px);
    }
}
@media only screen and (min-width: 960px){
    .map_select_list li.mapclick {
        width: calc(100vw / 3 - 4px * 3 - 5px);
    }
}
@media only screen and (min-width: 1280px){
    .map_select_list li.mapclick {
        width: calc(100vw / 4 - 4px * 4 - 5px);
    }
}
@media only screen and (min-width: 1600px){
    .map_select_list li.mapclick {
        width: calc(100vw / 5 - 4px * 5 - 5px);
    }
}

.map_select_list li.mapclick {
    float: left;
    height: 60px;
    border: 1px solid #999999;
    border-radius: 8px;
    margin: 4px;
    padding: 0;
    position: relative;
    /*background: url(/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1010.png) 50% 50% no-repeat;*/
    background-color: #FFFFFF;
}

.map_select_list li.mapclick a {
    padding: 0;
    background-color: #FFFFFF;
    width: 100%;
    height: calc(100% - 13px);
    padding-left: 60px;
    right: 0;
    font-weight: bold;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0px,rgba(255, 255, 255, 0) 55px,rgba(255, 255, 255, 1) 65px);
    padding-top: 13px;
    line-height: 15px;
}

.map_select_list li.mapclick a {
    padding: 0;
    background-color: #FFFFFF;
    width: auto;
    height: calc(100% - 13px);
    padding-left: 60px;
    right: 0;
    font-weight: bold;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0px,rgba(255, 255, 255, 0) 45px,rgba(255, 255, 255, 1) 60px);
    padding-top: 13px;
    line-height: 15px;
    border-radius: 8px;
}

.map_select_list li.mapclick.map1002 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1002.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1010 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1010.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1011 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1011.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1012 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1012.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1013 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1013.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1014 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1014.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1016 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1016.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map1017 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L1017.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map2004 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L2004.png') 0% 50% no-repeat;background-size: 114px;}

.map_select_list li.mapclick.map13 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_土砂災害危険箇所.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map14 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_山地災害危険地区.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map16 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_高潮浸水予測18.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map17 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_津波浸水予測18.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map71 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_津波浸水予測24.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map75 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_海抜高度表示.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map76 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_津波避難困難地域.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map83 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_南海トラフ地震.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map94 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_液状化危険度分布図.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map205 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_想定地震位置図.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map206 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_地震被害想定調査.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map207 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_地震土砂災害危険度.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map223 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_津波浸水想定26.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map401 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_国民保護避難施設.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map412 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47201/津波災害警戒区域.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map795 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_洪水浸水想定区域図_想定最大規模.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map796 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_洪水浸水想定区域図_浸水継続時間.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map797 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_洪水浸水想定区域図_計画規模.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map798 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_家屋倒壊等氾濫想定区域図_氾濫流.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map799 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/sel_家屋倒壊等氾濫想定区域図_河岸侵食.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map2002 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47213/thumP4L2002.png') 0% 50% no-repeat;background-size: 114px;}
.map_select_list li.mapclick.map2003 {background: url('/uruma/uruma/Content/images/plugin/map-thumbnail/47000/森林地域.png') 0% 50% no-repeat;background-size: 114px;}





/* =====PCサイトリンク===== */
.linkMPD {
    position: absolute;
    top: 3px;
    right: 3px;
    width: max(40px,5vw);
    height: max(40px,5vw);
    color: transparent;
    text-indent: -9999px;
}
.linkMPD a {
    width: max(40px,5vw);
    height: max(40px,5vw);
    display: block;
    position: relative;
    margin: 0 auto;
    padding-left: 1em;
    line-height: 26px;
    text-indent: -9999px;
    background: url('../../../images/pages/top/btn_desktop.png') 50% 50% no-repeat;
    background-size: auto max(40px,5vw);
    border-radius: 3px;
    z-index: 9999 !important;
}

/* =====ポータル上部説明文===== */
/* フローティング版（topは画像の縦横比から指定） */

#menu_top .txt_01{
    position: absolute;
    top: min(calc( 100vw * 224 / 472) - 35px ,50vh);
    z-index: 9999;
    background: rgba(255,255,255,0.7);
    border-radius: 5px;
    padding: 5px;
    margin: auto 5px;
    font-weight: bold;
}



/* =====================================
	地図ページ
====================================== */
/*-----TITLE画像-----*/
.maptitle{
    padding-bottom: 4px;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    background: url('../../../images/site/47213/logo_map.png') no-repeat left center;
    background-size: auto 75%;
}

/*-----TITLE背景-----*/
#wrapper #header{
    background: linear-gradient(180deg, rgba(3, 54, 255, 1) 10px , rgba(3, 54, 255, 0) 100%);
}


/*
li.mapclick{
    color: #000000;
    text-shadow: 4px 4px 1px #fff, -4px 4px 1px #fff, 4px -4px 1px #fff, -4px -4px 1px #fff;
    font-size: 20px;
    height: 80px;
    border-top: 1px solid #FFFFFF !important;
    border-bottom: 1px solid #999999 !important;
    background-position: calc( 80px - 224px ) 50%;
    background-repeat: no-repeat;
    padding: 0 !important;
    background-image: url(/urasoe/urasoe/Content/images/plugin/map-thumbnail/47213/dm.png);
}

li.mapclick.map820{
    background-image: url(/urasoe/urasoe/Content/images/plugin/map-thumbnail/47213/tokei.png);
}
li.mapclick.map830{
    background-image: url(/urasoe/urasoe/Content/images/plugin/map-thumbnail/47213/dm.png);
}

li.mapclick.mapclick a{
    margin-left: 80px;
    line-height: 80px !important;
}
*/


/*-----マップ選択-----*/
/* マップ名縁取り */
map-select-body ul li.map-list{
    text-shadow: -3px -3px 3px #ffffff, 3px 3px 3px #ffffff;
}
}

