html {
    overscroll-behavior: none;
    width: 100vw;
    height: 100vh;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 100vh;
    /*background-color: #F8F9FA;*/
    /*background-color: #202020;*/
    background-color: #ffffff;
    font-family: Verdana, Roboto, "Noto Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
    /*background-color: red;*/
}
input[type="submit"] {
    -webkit-appearance: none;
}

/* ================= common =================== */

#grandWrap {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    /*
    background-image: url(../images/template/tmp_cong_50.png);
    background-size: cover;
    background-repeat: no-repeat;
        */
}

#grandWrap02 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    /*
    background-image: url(../images/template/tmp_fall_50.png);
    background-size: cover;
    background-repeat: no-repeat;
        */
}

#headPart {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 20vw;
    background-image: url(../images/common/header_area.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/*  FIX  */
#toggle-sw {
    position: absolute;
    left: 52%;
    top: 3vw;
    width: 46vw;
    height: 13.4vw;
    cursor: pointer;
}

    #toggle-sw img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
        object-fit: contain;
    }

/*  FIX  */
#cont-titles {
    position: absolute;
    top: 26vw;
    width: 100vw;
    height: 50vw;
    text-align: center;
}

/*  FIX  */
#contTitle {
    position: relative;
    width: 100%;
    color: #0073bc;
    font-size: 6.8vw;
    font-weight: bold;
}


#footerPart01 {
    position: absolute;
    width: 100vw;
    height: 16.9vw;
    top: 202vw;
    background-image: url(../images/common/footer_logo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#footerPart02 {
    position: absolute;
    width: 100vw;
    height: 16.9vw;
    top: 202.3vw;
    background-image: url(../images/common/footer_logo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#badge {
    z-index: 10;
    position: absolute;
    top: 2.9vw;
    left: 90.3vw;
    width: 5.3vw;
    height: 5.3vw;
    font-size: 2.5vw;
    padding-top: 1vw;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    background-image: url(../images/common/badge.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#cover {
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
    display: none;
}

    #cover img {
        position: absolute;
        display: block;
        width: 20vw;
        height: 20vw;
        top: 45vh;
        left: 40vw;
        margin-left: auto;
        margin-right: auto;
    }


/* ================== fall ================== */
#cont02Disc {
    position: relative;
    margin: auto;
    top: 4vw;
    width: 91.6%;
    color: #646464;
    font-size: 3.4vw;
    font-weight: bold;
}

#cont02-Refresh {
    position: absolute;
    top: 56vw;
    left: 5vw;
    width: 90vw;
    height: 10vw;
    padding-top: 3vw;
    text-align: center;
    font-weight: bold;
    font-size: 3.5vw;
    color: #646464;
    background-image: url(../images/fall/refresh_base_fall.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#photo {
    position: absolute;
    width: 100vw;
    height: 56.3vw;
    top: 71vw;
    left: 0px;
}
#photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#photoImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#fall-map {
    position: absolute;
    width: 42vw;
    height: 42.6vw;
    top: 128.7vw;
    left: 5.3vw;
}

#fall-map img {
    width: 100%;
    height:100%;
    object-fit: contain;
}

#fall-area {
    position: absolute;
    width: 45.3vw;
    height: 17.4vw;
    top: 128.7vw;
    left: 50.5vw;
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    color: #646464;
    padding-top: 9.3vw;
    background-image: url(../images/fall/area.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#fall-time {
    position: absolute;
    width: 45.3vw;
    height: 22.8vw;
    top: 148.5vw;
    left: 50.5vw;
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    color: #646464;
    padding-top: 9.6vw;
    background-image: url(../images/fall/time.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#btn-to-rescue {
    position: absolute;
    width: 49.5vw;
    height: 17.4vw;
    top: 174.9vw;
    left: 10.9vw;
    background-image: url(../images/fall/btn_to_rescue.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

#btn-to-cong {
    position: absolute;
    width: 34.9vw;
    height: 17.4vw;
    top: 174.9vw;
    left: 57.6vw;
    background-image: url(../images/fall/btn_to_conges.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

#btn-to-list {
    position: absolute;
    width: 34.9vw;
    height: 17.4vw;
    top: 174.9vw;
    left: 57.6vw;
    background-image: url(../images/fall/btn_to_list.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

#rescue-text {
    position: absolute;
    width: 41.1vw;
    height: 10.4vw;
    top: 190.7vw;
    left: 14.0vw;
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    color: #343434;
}

/* ================== cong ================== */
#cont01Disc {
    position: relative;
    margin: auto;
    top: 4vw;
    width: 72%;
    color: #646464;
    font-size: 3.4vw;
    font-weight: bold;
}


#cont01-Refresh {
    position: absolute;
    top: 52.5vw;
    left: calc((100vw - 86.2vw) / 2 - 2vw);
    width: 86.2vw;
    height: 17.2vw;
    padding-top: 6vw;
    padding-right: 8vw;
    text-align: center;
    font-size: 3.5vw;
    font-weight: bold;
    color: #646464;
    background-image: url(../images/cong/refresh_set.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#cont01-refreshBtn {
    z-index: 10;
    position: absolute;
    top: 55.8vw;
    left: 84.8vw;
    width: 10.9vw;
    height: 10.9vw;
    /*background-color: red;*/
    /*opacity: 0.3;*/
    cursor: pointer;
}

#cong-map {
    position: absolute;
    width: 100vw;
    height: 98vw;
    top: 71vw;
    left: 0px;
    background-image: url(../images/cong/map_cong_new.png);
    background-size: contain;
    background-repeat: no-repeat;
}


#cong-legends {
    position: absolute;
    width: 100vw;
    height: 30vw;
    top: 173vw;
    left: 0px;
    background-image: url(../images/cong/legends.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.cong-areaIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#icon-area01, #icon-area02, #icon-area03, #icon-area04, #icon-area05, #icon-area06, #icon-area07, #icon-area08, #icon-area09, #icon-area10, #icon-area11, #icon-area12, #icon-area13, #icon-area14, #icon-area15, #icon-area16 {
    width: 14.4vw;
    height: 14.4vw;
}

#icon-area01 {
    position: absolute;
    left: 3.6%;
    top: 72.9%;
}
#icon-area02 {
    position: absolute;
    left: 7.3%;
    top: 57.1%;
}
#icon-area03 {
    position: absolute;
    left: 28.7%;
    top: 82.2%;
}
#icon-area04 {
    position: absolute;
    left: 28.7%;
    top: 65.9%;
}
#icon-area05 {
    position: absolute;
    left: 52.5%;
    top: 77.1%;
}
#icon-area06 {
    position: absolute;
    left: 53.5%;
    top: 61.1%;
}
#icon-area07 {
    position: absolute;
    left: 81.7%;
    top: 64.7%;
}
#icon-area08 {
    position: absolute;
    left: 72.2%;
    top: 52.3%;
}
#icon-area09 {
    position: absolute;
    left: 35.2%;
    top: 47.7%;
}
#icon-area10 {
    position: absolute;
    left: 15.6%;
    top: 36.8%;
}
#icon-area11 {
    position: absolute;
    left: 45.6%;
    top: 35.6%;
}
#icon-area12 {
    position: absolute;
    left: 72.9%;
    top: 26.7%;
}
#icon-area13 {
    position: absolute;
    left: 8.5%;
    top: 10.2%;
}
#icon-area14 {
    position: absolute;
    left: 36.1%;
    top: 0.55%;
}
#icon-area15 {
    position: absolute;
    left: 49.4%;
    top: 4.8%;
}
#icon-area16 {
    position: absolute;
    left: 80.5%;
    top: 0.63%;
}

/*-----------login-----------*/
#loginRect {
    position: relative;
    width: 80%;
    height: auto;
    text-align: center;
    font-size: 1em;
    color: #21446c;
    padding-top: 32px;
    padding-bottom: 24px;
    margin: 0 auto;
    /*margin-top: 1em;*/
    /*background-image: linear-gradient(to right, #167ADE 0%, #0059B3 100%);*/
    background-color: #bedcf6;
    border-radius: 1em 1em 1em 1em;
    border: 1px #aaaaaa;
}

.login_fail {
    /*display: none;*/
    color: red;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: bold;
}

.formsCenter {
    display: table;
    width: 70%;
    border-spacing: 14px 12px;
    margin-left: auto;
    margin-right: auto;
}

.loginRectTitle {
    width: 100%;
    text-align: center;
    font-size: 1em;
    color: #21446c;
}

.loginIdName, .loginPwName {
    display: table-cell;
    width: 35%;
    height: 40px;
    text-align: right;
    vertical-align: middle;
    color: #21446c;
    font-size: 0.7em;
}

.loginIdArea, .loginPwArea {
    display: table-cell;
    width: 55%;
    height: 40px;
    text-align: left;
    font-size: 1.4em;
    /*background-color: #00ff00;*/
}

.input_login, .input_login {
    width: 70%;
}

.loginButton input {
    display: block;
    width: 50%;
    height: 1.8em;
    font-size: 1em;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: #21446c;
    border-radius: 0.4em;
}


.input_login {
    height: 36px;
    font-size: 1.25em;
}

/* ==================================== */

/*-------------- list ---------------*/
.coltitle {
	font-size: 1.25em;
	font-weight: bold;
	color: #000000;
	padding-left: 16px;
	margin-bottom: 0.5em;
}

.MsgBannar {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #ff004e;
    border-radius: 0.5em;
    padding: 0.5em;
    margin-left: 5%;
    width: 90%;
    height: 6em;
    font-size: 0.8em;
    margin-bottom: 0.4em;
    clear: both;
}
.MsgBannar_done {
    position: relative;
    background-color: #bedcf6;
    border-radius: 0.5em;
    padding: 0.5em;
    margin-left: 5%;
    width: 90%;
    height: 6em;
    font-size: 0.8em;
    margin-bottom: 0.4em;
    clear: both;
}
.MsgTitle {
	font-weight: bold;
}
.MsgTitle_done {
    font-weight: bold;
    color: #000000;
}
.MsgCont {
}

.MsgStrings {
	float: left;
	width: 65%;
}

.btn_join {
    position: relative;
    width: 60%;
    height: calc(2.0em);
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1em;
    color: #ffffff;
    padding-top: 0.3em;
    border-radius: 1.2em 1.2em 1.2em 1.2em;
    /*border: 1px solid #000000 ;*/
    /*background-color: #aaaaaa;*/
    background-color: #ff004e;
    cursor: pointer;
}
.btn_join_done {
    position: relative;
    width: 60%;
    height: calc(2.0em);
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1em;
    color: #ffffff;
    padding-top: 0.3em;
    border-radius: 1.2em 1.2em 1.2em 1.2em;
    /*border: 1px solid #000000 ;*/
    /*background-color: #aaaaaa;*/
    background-color: #0072bc;
    cursor: pointer;
}

#listWrap {
	position: absolute;
	width: 90vw;
	top: 20%;
	left: 5vw;
}


/*-------------- event ----------------*/
.joinedInfo {
	float: right;
	width: 35%;
	height: 5.5em;
	/*margin-top: 0.5em;*/
	text-align: center;
	color: #000000;
	font-size: 0.8em;
	font-weight: normal;
	padding-top: 0.7em;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
	/*border: 1px solid #000000;*/
	/*background-color: #494949;*/
}


/*-------------- New Event Notify ----------------*/

#startNotifySetting {
	position: absolute;
	z-index: 50;
	top: 0px;
	width: 75vw;
    height: 25vw;
	left: calc((100vw - 75vw - 4em) / 2);
	/*margin-left: calc((100vw - 65vw) / 2);*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	background-color: #bedcf6;
	display: none;
}

#nen_title {
    /*width: 80%;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    text-align: center;
    font-weight: bold;
    color: #000000;
}

#nen_body {
	font-weight: normal;
	color: #000000;
	margin-bottom: 1em;
}

#nen_btn {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
	text-align: center;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	background-color: #21446c;
	cursor: pointer;
}