html
{
	margin:0;
	padding:0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body
{
	margin:0px 0px 0px 0px;
	padding:0px;
}

#preview
{
	opacity: 0;
}

#map
{
filter: saturate(150%);
}


#loading , #backtotop , #imaging , #uploading
{
	display: none;
	position: fixed;
	top:50%;
	left:50%;
	background-color: #BDBDBD;
	color: black;
	width: 15vmin;
	height: 15vmin;
	border-radius: 50%;
	opacity: 0;
	z-index:1;
	text-align: center;
	line-height:700%;
	font-size: 2.3vmin;
	animation:loader 1.5s ease-in  0s infinite;
}

@keyframes loader
{
	0% {
	transform: translate(-50%,-50%) scale(1.2);
	opacity: 0.3;
	}
	10% {
	transform: translate(-50%,-50%) scale(1.5);
	opacity: 0.7;
	}
	100% {
	transform: translate(-50%,-50%) scale(1.2);
	opacity: 0.3;
	}
}


/* 写真 */
#BG {
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: 0;
}



/* タイトル */
#title
{
	display:block;
	position:fixed;
	padding-top:1vmin;
	padding-bottom:3vmin;
	top:15vmin;
	width:100%;
	left: 50%;
	transform: translateX(-50%);
	font-size:12vmin;
	font-weight:600;
	text-align:center;
	line-height:11vmin;
	color:white;
	text-shadow:0px 0px 0.8px #000000;
	opacity: 1;
	animation: bodyFadeIn 1.5s ease 0s 1 normal;
	z-index:5;
	}

	@keyframes bodyFadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}


#wrap_location
{
position: fixed;
height: 9vmin;
width:70%;
bottom: 0vmin;
right:0vmin;

}
#text_location
{
position: absolute;
height: 9vmin;
width:100%;
bottom: 3vmin;
right: 15vmin;
color:white;
text-decoration: none;
font-size: 4vmin;
text-shadow:0px 0px 4px black;
opacity: 1;
display: none;
-webkit-tap-highlight-color:transparent;

}
.pin
{
float: right;
right: 15vmin;
}
.text_loc
{
right: 15vmin;
line-height: 4.8vmin;
text-align: right;
overflow: hidden;
}

#map-locator{
	width:  9vmin;
	height: 9vmin;
	opacity: 0.8;
  margin-right:1vmin;
	margin-bottom:1vmin;
	-webkit-tap-highlight-color:transparent;
	filter:drop-shadow(0px 0px 2px rgb(45, 45, 45))brightness(100%);
	}
.fadein {
		animation : fadeIn 1s;
		animation-fill-mode: both;
	}
@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	#myphoto{
		position: fixed;
		bottom: 2vmin;
		left: 1vmin;
		vertical-align:top; /*縦方向の揃え位置を指定*/
		color:white;
		text-decoration: none;
		text-align: right;
		font-size: 3vmax;
		text-shadow:0px 0px 1.5px #000000;
		opacity: 1;
		/* display: none; */
		padding:0px 10px 0px 10px;
		}

	#album{
		display:block;
		position: fixed;
		width: 10vmin;
		height:10vmin;
		opacity: 0.8;
		filter:drop-shadow(0px 0px 1px rgb(45, 45, 45)) brightness(100%);
		transform: translateY(-100%);
		-webkit-tap-highlight-color:transparent;

		}

	.fadein {
			animation : fadeIn 1s;
			animation-fill-mode: both;
		}
	@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}

	/* スワイプ */
	#swipe1
	{
		display: none;
		position: fixed;
		bottom:50%;
		left:30%;
		background-color: #F2F2F2;
		width: 10vmin;
		height: 10vmin;
		border-radius: 50%;
		opacity: 0;
		transform: translate(-50%,-50%);
		animation:swipe 2s ease-in 0.5s infinite normal both;
	}

	@keyframes swipe
	{
		0% {
		left:30%;
		opacity: 0;
		}
		5% {
		left:32%;
		opacity: 1;
		}
		40% {
		left:70%;
		opacity: 1;
		}
		55% {
		left:72%;
		opacity: 0;
		}
		100% {
		left:72%;
		opacity: 0;
		}
	}

	#swipe2
	{
		display: none;
		position: fixed;
		bottom:50%;
		left:30%;
		background-color: #F2F2F2;
		width: 10vmin;
		height: 10vmin;
		border-radius: 50%;
		opacity: 0;
		transform: translate(-50%,-50%);
		animation:swipe2 2s ease-in 0.55s infinite normal both;
	}

	@keyframes swipe2
	{
		0% {
		left:30%;
		opacity: 0;
		}
		5% {
		left:32%;
		opacity: 0.7;
		}
		40% {
		left:70%;
		opacity: 0.7;
		}
		55% {
		left:72%;
		opacity: 0;
		}
		100% {
		left:72%;
		opacity: 0;
		}
	}

#swipe3
{
	display: none;
	position: fixed;
	bottom:50%;
	left:30%;
	background-color: #F2F2F2;
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%,-50%);
	animation:swipe3 2s ease-in 0.6s infinite normal both;
}

@keyframes swipe3
{
	0% {
	left:30%;
	opacity: 0;
	}
	5% {
	left:32%;
	opacity: 0.3;
	}
	40% {
	left:70%;
	opacity: 0.3;
	}
	55% {
	left:72%;
	opacity: 0;
	}
	100% {
	left:72%;
	opacity: 0;
	}
}


	/* カメラボタン ラベル*/

#circle_cam_label
	{
		display: block;
		position: fixed;
		bottom:26vmin;
		left:50%;
		filter:drop-shadow(0px 0px 2px rgb(45, 45, 45)) brightness(150%);
		width: 18vmin;
		height: 18vmin;
		opacity: 0.8;
		transform: translate(-50%);
		z-index: 3;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		-webkit-tap-highlight-color:transparent;
	}


	/* カメラボタン*/
#circle_cam
	{
		display: block;
		position: fixed;
		left:50%;
		filter:drop-shadow(0px 0px 2px rgb(45, 45, 45)) brightness(150%);
		width: 18vmin;
		height: 18vmin;
		opacity: 0.8;
		transform: translate(-50%);
		z-index: 3;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		-webkit-tap-highlight-color:transparent;
	}


/* ウェルカムモーダル */
.modal-content-welcome
{
	width: 80% ;
	height: 40%;
	top: 30% ;
	left:50%;
	transform: translate(-50%);
	padding: 5% ;
	background: #FFFFFF ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: left;
	color: black;
	opacity: 1;
	z-index: 5 ;
	font-size: 4vmin;
	overflow: auto;
	animation: bodyFadeIn 1.5s ease 0s 1 normal;
	-webkit-overflow-scrolling: touch;
}


.modal-content-atfirst
{
	width: 80% ;
	/* height: 5% ; */
	bottom:25vmin;
	left:50%;
	transform: translate(-50%);
	padding: 3%;
	border: solid 2px #F2F2F2 ;
	background: #FFFFFF ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 1;
	z-index: 5 ;
	font-size: 4vmin;
	overflow: auto;
	animation: bodyFadeIn 1.5s ease 0s 1 normal;
	-webkit-overflow-scrolling: touch;
	transition: 0.8s all ease 0s;
	vertical-align: middle;
}

.modal-content-atfirst.on
{
bottom:60vmin;
}

.modal-content-second
{
	width: 80% ;
	bottom:60vmin;
	left:50%;
	transform: translate(-50%);
	padding: 3%;
	border: solid 2px #F2F2F2 ;
	background: #FFFFFF ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 1;
	z-index: 5 ;
	font-size: 4vmin;
	overflow: auto;
	animation: bodyFadeIn 1.5s ease 0s 1 normal;
	-webkit-overflow-scrolling: touch;
	transition: 0.8s all ease 0s;
	vertical-align: middle;
}


/* エラーモーダル */
.modal-content-error
{
	width: 80% ;
	height: 7% ;
	top: 70% ;
	left:50%;
	transform: translate(-50%);
	padding: 5% ;
	border: solid 1px #F2F2F2 ;
	background: #F2F2F2 ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 0.8;
	z-index: 5 ;
}

#modal-location-error{
	width: 80% ;
	height: 7% ;
	top: 70% ;
	left:50%;
	transform: translate(-50%);
	padding: 5%;
	padding-top: 2%;
	border: solid 1px #F2F2F2 ;
	background: #F2F2F2 ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 0.8;
	z-index: 5 ;
}

#modal-location-error2{
	width: 80% ;
	height: 7% ;
	top: 70% ;
	left:50%;
	transform: translate(-50%);
	padding: 5%;
	padding-top: 2%;
	border: solid 1px #F2F2F2 ;
	background: #F2F2F2 ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 0.8;
	z-index: 5 ;
}

#modal-location-error_first{
	width: 80% ;
	height: 7% ;
	top: 70% ;
	left:50%;
	transform: translate(-50%);
	padding: 5%;
	padding-top: 2%;
	border: solid 1px #F2F2F2 ;
	background: #F2F2F2 ;
	position: fixed ;
	border-radius: 1em;
	display: none ;
	text-align: center;
	color: black;
	opacity: 0.8;
	z-index: 5 ;
}


	/* mapモーダル全体 */
.modal-content
	{
		width: 100% ;
		height: 100% ;
		margin: 0 ;
		border: 0 solid #aaa ;
		background: white ;
		position: fixed ;
		display: none ;
		z-index: 5 ;
	}

	/* mapモーダル内の写真 */
#modal-content-photo
{
	background-repeat:no-repeat;
	background-color:white;
	background-position:center center;
	background-size: contain;
	position: fixed;
	bottom: 1%;
	width: 100%;
	height: 48%;
	content: "";
	z-index: 0;
	display: block;
}

.fadeout
{
	animation : fadeOut 1s;
	animation-fill-mode: both;
}
@keyframes fadeOut
{
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

	/* mapモーダル内のmap */
#modal-content-map
{
	position:fixed;
	bottom:50%;
	left:0%;
	width: 100%;
	height:50%;
	z-index:0;
	opacity: 1;
	display: block;
}

#circle_map
{
	display: block;
	position: fixed;
	top:25%;
	left:50%;
	background-color: #BDBDBD;
	border: solid 0.2vmin #585858;
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	box-shadow: 0 0 0 1vmin #BDBDBD;
	opacity: 0;
	z-index:1;
	animation:loader 2s ease-in  0s infinite;

}

@keyframes forcus
{
	0% {
	transform: translate(-50%,-50%) scale(4);
	opacity: 0.1;
	}
	10% {
	transform: translate(-50%,-50%) scale(1.5);
	opacity: 0.5;
	}
	30% {
	transform: translate(-50%,-50%) scale(1);
	opacity: 0.5;
	}
	40% {
	transform: translate(-50%,-50%) scale(1);
	opacity: 0;
	}
	100% {
	transform: translate(-50%,-50%) scale(0);
	opacity: 0;
	}
}



#filter{
	display: block;
	position: fixed;
	top:0%;
	left:0%;
	background-color: #BDBDBD;
	width: 90%;
	height: 50%;
	opacity: 0;
	z-index:1;
}



#filter_2{
	display: block;
	position: fixed;
	top:0%;
	left:90%;
	background-color: red;
	width: 10%;
	height: 30%;
	opacity: 0;
	z-index:1;
}



	/* モーダル内のいいね */
#heart
{
	position:fixed;
	bottom:2vmin;
	right:1.8vmin;
	width: 9.5vmin;
	height:10.7vmin;
	z-index:1;
	opacity: 0.8;
	display: none;
	filter: drop-shadow(0px 0px 2px black);
	-webkit-tap-highlight-color:transparent;
}

.nice_count
{
	position:absolute;
	display: table-cell;
  vertical-align: middle;
	bottom:2vmin;
	right:2vmin;
	width: 9.5vmin;
	height:10.7vmin;
	color:black;
	font-size: 4vmin;
	line-height:10vmin;
	text-align: center;
	z-index:2;
	opacity: 1;
	-webkit-tap-highlight-color:transparent;
	animation: appeare_count 0.5s ease 0s 1 normal forwards running;
}



@keyframes appeare_count
{
	0% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}


/* myphotoモーダル */
#modal-content-myphoto
{
position:fixed;
overflow-y: auto;
width: 100%;
height:100%;
background-color: white;
z-index:5;
opacity: 1;
display: none;
}

#myphotolist
{
	margin: 10px;

}

#myphotonolist
{
	position: absolute;
	top: 20%;
	left: 20%;
 	z-index: 5;
	color:black;
	font-size: 2.3vmax;
	opacity: 1;
	transform: translateX(-10%);
}


.myphotothumb
{
	margin: 5px;
}

	/*TOP画面 ボタンの出し入れ */
	#hyouji
	{
	display: none;
	position: fixed;
	top: 0%;
	width: 100%;
	height: 85%;
	background-color: blue;
	opacity: 0;
	z-index:1;
	-webkit-tap-highlight-color:transparent;
	}

	#hihyouji
	{
	display: block;
	position: fixed;
	top: 0%;
	width: 100%;
	height: 85%;
	background-color: red;
	opacity: 0;
	z-index:1;
	-webkit-tap-highlight-color:transparent;
	}


	/* mapモーダル全体 */
.modal-person
	{
		width: 100% ;
		height: 100% ;
		margin: 0 ;
		border: 0 solid #aaa ;
		background: white ;
		position: fixed ;
		display: none ;
		z-index: 5 ;
	}

	/*myphotoモーダル */
	#modal-content-myphotofull
	{
		background-repeat:no-repeat;
		background-color:white;
		background-position:center center;
		background-size: contain;
		position: fixed;
		width: 100%;
		height: 100%;
		content: "";
		z-index: 5;
		display: none;
	}

	.fadeout
	{
		animation : fadeOut 1s;
		animation-fill-mode: both;
	}

	#myphotofullimg
	{
		position: absolute;
	  top: 0;
	  bottom: 7%;
	  left: 0;
	  right: 0;
	  margin: auto;
		background-color: white;
	  max-width: 93%;
	  max-height: 90%;
	}

#myphotolocation
{
	position: fixed;
	width:70%;
	bottom: 2vmin;
	right: 1vmin;
	right: 13vmin;
	vertical-align:top; /*縦方向の揃え位置を指定*/
	color:black;
	text-decoration: none;
	text-align: right;
	font-size: 2.3vmax;
	opacity: 1;
	padding:0px 10px 0px 10px;
}

#heart_myphoto
{
	position:fixed;
	bottom:2.3vmin;
	right:4vmin;
	width: 8vmin;
	height:9vmin;
	z-index:1;
	opacity: 0.8;
	filter: invert(10%);
}

#nice_count_myphoto
{
	position:fixed;
	bottom:1.2vmin;
	right:3.2vmin;
	width: 9.8vmin;
	height:7.5vmin;
	color:black;
	font-size: 3.5vmin;
	line-height:100%;
	text-align: center;
	z-index:2;
	opacity: 1;
}



#back{
  position:fixed;
  width: 13vmin;
  height:13vmin;
	border-radius:50%;
  background-color: gray;
  bottom:0.7vmin;
  left: 2.2vmin;
  transform: translate(0%,0%);
  text-align: center;
  z-index:5;
  opacity: 0.8;
  display: block;
  }
#text_back{
  position:fixed;
  color: white;
  bottom:2.5vmin;
	left: 3.5vmin;
  font-size: 6vmin;
  z-index:5;
}
#back_mini{
  position:relative;
  width: 5vmin;
  height:5vmin;
	border-radius:50%;
  background-color: gray;
	vertical-align: middle;
  transform: translate(0%,-15%);
  text-align: center;
  z-index:5;
  opacity: 0.8;
	color:white;
	font-size: 3vmin;
  display: inline-block;
	line-height: 180%;
  }

	#checkicon {
	position: relative;
	display: inline-block;
  color: #000;
  margin-left: 3px;
	margin-right: 3px;
  width: 10px;
  height: 6px;
	bottom: 5px;
  border-bottom: solid 1px currentColor;
  border-left: solid 1px currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}