*{
    font-family: sans-serif;
    scrollbar-width: thin;
}
#map01{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
h1,h2,h3,h4,h5,h6,p,summary{
    margin: 0;
    padding: 0;
}
summary{
    border-top:1px solid black;
    margin-top: 12px;
    padding:5px 0 0 12px;
    cursor: pointer;
}
h1,summary{
    font-size:24px;
}
h2,input,select,textarea{
    font-size: 18px;
}
h3,.shopSearch,#evaSel,.loginPopupIn input,.submitPopupIn input,.submitPopupIn select{
    font-size: 16px;
}
h4,#narrow select{
    font-size: 15.2px;
}
h5,button{
    font-size: 14px;
}
h6{
    font-size: 12px;
}
button{
    margin: 0;
    width: 115px;
    height: 30px;
    z-index: 2000;
}
input,select,textarea{
    border:1px solid rgba(0,0,0,0.3);
    border-radius: 3px;
}
input{
    padding: 3px 11px 3px 11px;
}


/*ピンデザインの設定*/
    #pin{
        color: white;
        margin:-43px 0 0 -8px;
        white-space: nowrap;
        text-shadow:0 0 .2px #000,0 0 .4px #000,0 0 .6px #000,0 0 .8px #000,0 0 1px #000,0 0 1.2px #000,0 0 1.4px #000,0 0 1.6px #000,0 0 1.8px #000,0 0 2px #000
        ,0 0 2.2px #000,0 0 2.4px #000,0 0 2.6px #000,0 0 2.8px #000,0 0 3px #000;
        transition:0.3s ease-in-out;
    }
    #pin:hover{
        color: black;
        text-shadow:0 0 .2px #fff,0 0 .4px #fff,0 0 .6px #fff,0 0 .8px #fff,0 0 1px #fff,0 0 1.2px #fff,0 0 1.4px #fff,0 0 1.6px #fff,0 0 1.8px #fff,0 0 2px #fff
        ,0 0 2.2px #fff,0 0 2.4px #fff,0 0 2.6px #fff,0 0 2.8px #fff,0 0 3px #fff;
    }
    #pin h3{
        font-size:14px;
        margin:6px 0 0 32px;
    }
    #pin h2{
        margin:-5px 0 0 30px;
        font-size: 18px;
    }
    #pin img{
        width: 30px;
        float: left;
    }
/*ピンデザインの設定*/
/*ポップアップの設定*/
    #popup{
        width: 945px;
    }
    #title,summary{
        position: relative;
        z-index: 20000;
        box-shadow:0 0 5px 5px #fff;
    }
    #main,.photo,.review{
        overflow-y: auto;
    }
    #main{
        height: 60vh;
    }
    .photo{
        max-height: 45vh;
        width: 98%;
        text-align: center;
        margin-bottom: 7px;
    }
    .review{
        max-height: 50vh;
        width: 98%;
    }
    h2 img{
        width:140px;
        margin-bottom: -4px;
    }
    #info{
        display: flex;
    }
    select[required]:invalid {
        color:rgba(0,0,0,0.5);
    }
    select[required]:valid option {
        color:black;
    }
    #info h2{
        color: rgb(196,139,9);
    }
    select .hidden{
        color: rgba(0,0,0,0.5);
    }
    #info h3{
        margin-top:2px;
    }
    h6{
        text-align: right;
    }
    #info h6{
        margin-top: 6px;
    }
    #main form{
        margin-top: 10px;
    }
    .review h4{
        border-bottom:1px dashed rgba(0,0,0,0.5);
        padding-bottom: 3px;
    }
    .mes,.review{
        margin: 0 0 8px 0;
        padding-top: 8px;
    }
    .detail{
        margin-top: 6.4px;
        padding-top: 6.4px;
        border-top:1px dashed rgba(0,0,0,0.5);
    }
    .photo img{
        width: 900px;
        border: solid 1px black;
    }
    textarea{
        margin: 4px 0 0 0;
        width: 900px;
        resize: none;
    }
    ::placeholder {
        color: rgba(0,0,0,0.5);;
    }
/*ポップアップの設定*/

#label img{
    width: 30px;
}
#change{
    position: relative;
    margin-top: -110px;
    justify-content: center;
    display: flex;
}
.leaflet-popup-content-wrapper {
    padding: 7px 14px 14px 14px;
}
#loginMail,#nickname{
    width: 330px;
}
@media screen and (max-width: 1200px) {
    #popup{
        width: 78.5vw;
    }
    textarea{
        width: 74.7vw;
    }
    #popup .photo img{
        width:75vw;
    }
}
@media screen and (max-width: 550px) {
    h2 img{
        width:25vw;
        margin-bottom: -0.8vw;
    }
    h1,summary{
        font-size:4.3vw;
    }
    h2,input,select,textarea{
        font-size: 3.27vw;
    }
    h3,#evaSel,.loginPopupIn input,.submitPopupIn input,.submitPopupIn select{
        font-size: 2.91vw;
    }
    h4,#narrow select{
        font-size: 2.75vw;
    }
    h5,button{
        font-size: 2.55vw;
    }
    h6{
        font-size: 2.15vw;
    }
    .res input#search:focus, .res input#search:active,.res:hover input#search{
        width: 84vw;
    }
    button{
        width: 21vw;
        height: 5.3vw;
    }
    .leaflet-popup-content-wrapper {
        padding: 1.33vw 2.66vw 2.66vw 2.66vw;
    }
    #info h3{
        margin-top: 0.33vw;
    }
    #info h6{
        margin-top: 1vw;
    }
    #loginMail,#nickname{
        width: 60vw;
    }
}
@media screen and (max-width: 500px) {
    h2 img{
        width:122px;
        margin-bottom: -3px;
    }
    h1,summary{
        font-size:21.3px;
    }
    h2,input,select,textarea{
        font-size: 16.2px;
    }
    h3,#evaSel,.loginPopupIn input,.submitPopupIn input,.submitPopupIn select{
        font-size: 14.5px;
    }
    h4,#narrow select{
        font-size: 13.7px;
    }
    h5,button{
        font-size: 12.7px;
    }
    h6{
        font-size: 11px;
    }
    button{
        width: 105px;
        height: 27px;
    }
    .leaflet-popup-content-wrapper {
        padding: 6.4px 12.8px 12.8px 12.8px;
    }
    #info h3{
        margin-top: 1.6px;
    }
    #info h6{
        margin-top: 4.8px;
    }
    #loginMail,#nickname{
        width: 300px;
    }

}
@media screen and (max-width: 450px) {
    h2 img{
        width:27vw;
        margin-bottom: -0.8vw;
    }
    h1,summary{
        font-size:4.68vw;
    }
    h2,input,select,textarea{
        font-size: 3.55vw;
    }
    h3,#evaSel,.loginPopupIn input,.submitPopupIn input,.submitPopupIn select{
        font-size: 3.23vw;
    }
    h4,#narrow select{
        font-size: 3.05vw;
    }
    h5,button{
        font-size: 2.86vw;
    }
    h6{
        font-size: 2.5vw;
    }
    button{
        width: 23.4vw;
        height: 6vw;
    }
    .leaflet-popup-content-wrapper {
        padding: 1.43vw 2.86vw 2.86vw 2.86vw;
    }
    #info h3{
        margin-top: 0.33vw;
    }
    #info h6{
        margin-top: 1vw;
    }
    #loginMail,#nickname{
        width: 66.5vw;
    }
}
@media screen and (max-width: 400px) {
    h2 img{
        width:108px;
        margin-bottom: -3px;
    }
    h1,summary{
        font-size:18.6px;
    }
    h2,input,select,textarea{
        font-size: 14.3px;
    }
    h3,#evaSel,.loginPopupIn input,.submitPopupIn input,.submitPopupIn select{
        font-size: 13px;
    }
    h4,#narrow select{
        font-size: 12.3px;
    }
    h5,button{
        font-size: 11.5px;
    }
    h6{
        font-size: 10.2px;
    }
    button{
        width: 94px;
        height: 25px;
    }
    .leaflet-popup-content-wrapper {
        padding: 6px 12px 12px 12px;
    }
    #info h3{
        margin-top: 1.33px;
    }
    #info h6{
        margin-top: 4px;
    }
    #loginMail,#nickname{
        width: 268px;
    }
}
/*マーカークラスターの設定*/
    .cluster {
        background-clip: padding-box;
    }
    .cluster div {
        text-align: center;
        border-radius: 50px;/*四角の丸み*/
        color: white;
        text-shadow:0 0 1px #000,0 0 2px #000,0 0 3px #000;
    }
    .cluster-S div {
        background-color:rgba(0,0,0,0.7);
        width:24px;
        height:24px;
        line-height: 24px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff;
    }
    .cluster-M div {
        background-color:rgba(50,0,0,0.7);
        width:27px;
        height:27px;
        line-height: 27px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff;
    }
    .cluster-L div {
        background-color:rgba(100,0,0,0.7);
        width:30px;
        height:30px;
        line-height: 30px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff;
    }
    .cluster-XL div {
        background-color:rgba(150,0,0,0.7);
        width:33px;
        height:33px;
        line-height: 33px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff;
    }
    .cluster-3L div {
        background-color: rgba(200,0,0,0.7);
        width:36px;
        height:36px;
        line-height: 36px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff;
    }
    .cluster-4L div {
        background-color: rgba(255,0,0,0.7);
        width:39px;
        height:39px;
        line-height: 39px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff;
    }
    .cluster-5L div {
        background-color: rgba(255,50,0,0.7);
        width:42px;
        height:42px;
        line-height: 42px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff,0 0 15px #fff,0 0 16px #fff;
    }
    .cluster-6L div {
        background-color: rgba(255,100,0,0.7);
        width:45px;
        height:45px;
        line-height: 45px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff,0 0 15px #fff,0 0 16px #fff,0 0 17px #fff,0 0 18px #fff;
    }
    .cluster-7L div {
        background-color: rgba(255,150,0,0.7);
        width:48px;
        height:48px;
        line-height: 48px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff,0 0 15px #fff,0 0 16px #fff,0 0 17px #fff,0 0 18px #fff,0 0 19px #fff,0 0 20px #fff;}
    .cluster-8L div {
        background-color: rgba(255,200,0,0.7);
        width:51px;
        height:51px;
        line-height: 51px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff,0 0 15px #fff,0 0 16px #fff,0 0 17px #fff,0 0 18px #fff,0 0 19px #fff,0 0 20px #fff
        ,0 0 22px #fff,0 0 22px #fff;
    }
    .cluster-9L div {
        background-color: rgba(255,255,0,0.7);
        width:54px;
        height:54px;
        line-height: 54px;/*数字の位置調整*/
        box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 5px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 9px #fff,0 0 10px #fff
        ,0 0 11px #fff,0 0 12px #fff,0 0 13px #fff,0 0 14px #fff,0 0 15px #fff,0 0 16px #fff,0 0 17px #fff,0 0 18px #fff,0 0 19px #fff,0 0 20px #fff
        ,0 0 22px #fff,0 0 22px #fff,0 0 23px #fff,0 0 24px #fff;
    }
    .cluster-anim .leaflet-marker-icon, .cluster-anim .leaflet-marker-shadow {
        transition: transform 0.3s ease-out, opacity 0.3s ease-in;
    }
    .leaflet-cluster-spider-leg {
        transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
    }

/*マーカークラスターの設定*/

/* required styles */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane > svg,.leaflet-pane > canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
}
.leaflet-container {
	overflow: hidden;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin:0 0;
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
}
.leaflet-tile-loaded {
	visibility: inherit;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg{
	-moz-user-select: none;
}
.leaflet-pane{
    z-index: 400;
}
.leaflet-tile-pane{
     z-index: 200;
}
.leaflet-overlay-pane{
     z-index: 400;
}
.leaflet-popup-pane{
     z-index: 600;
}
.leaflet-map-pane canvas{
     z-index: 100;
}
.leaflet-map-pane svg{
     z-index: 200;
}
.leaflet-vml-shape {
	width: 1px;
	height: 1px;
}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
}
.leaflet-control {
	position: relative;
	z-index: 700;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
    float: left;
	clear: both;
}
.leaflet-top,.leaflet-bottom {
	position: absolute;
	z-index: 800;
	pointer-events: none;
}
.leaflet-top {
	top: 0;
}
.leaflet-right {
	right: 0;
}
.leaflet-bottom {
	bottom: 0;
}
.leaflet-left {
	left: 0;
}
.leaflet-right .leaflet-control {
	float: right;
    margin-right: 10px;
}
.leaflet-top .leaflet-control {
	margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
	margin-left: 10px;
}
.leaflet-zoom-anim .leaflet-zoom-animated {/*拡大縮小のスピード調整*/
    transition:transform 0.3s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
}
.leaflet-interactive {
	cursor: pointer;
}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}
.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
}
.leaflet-popup-pane,.leaflet-control {
	cursor: auto;
}
.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing;
}
.leaflet-container {/*地図が表示されるまでの背景色*/
	background: #d0d0d0;
	outline-offset: 1px;
}
.leaflet-container {/*Leafletのマップの著作権表示。必ず見えるようにする*/
	font-family: "Helvetica Neue", Arial, Helvetica, sans;
	font-size: 1.3rem;
	line-height: 1.5;
}
.leaflet-container .leaflet-control-attribution {/*著作権表示部分の背景色*/
	background: #fff;
	background: white;
    font-size: 16px;
	margin: 0;
}
.leaflet-attribution-flag {/*著作権表示の国旗部分*/
	display: inline !important;
	vertical-align: baseline !important;
	width: 1.4em;
	height: 0.67em;
}
.leaflet-popup,.leaflet-popup2{
    transition: opacity .3s ease;
	position: absolute;
}
.leaflet-popup-content-wrapper {
	border-radius: 12px;
}
.leaflet-popup-tip-container {/*吹き出しの先っちょを消す*/
	width: 0px;
}
.leaflet-popup-content-wrapper,.leaflet-popup-tip {/*吹き出しの設定*/
	background-color:white;
    border: solid rgba(0,0,0,0.5) 1px;
	color: black;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);/*右への距離,下への距離、ぼかし*/
}
.leaflet-popup-scrolled {
	overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
}
@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}
#loginPopup,#submitPopup,#login,#narrow{
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
}
#loginPopup{
    bottom:100px;
}
#submitPopup{
    bottom:100px;
}
#login{
    bottom:65px;
    cursor: pointer;
}
#narrow{
    bottom:30px;
}
.loginPopupIn,.submitPopupIn,.loginIn,.narrowIn{
    background-color: white;
    border: solid 1px rgba(0,0,0,.5);
    border-radius: 8px;
    display: inline-flex;
    position: relative;
    align-items: center;
    z-index: 2000;
    padding: 2px 9px 2px 9px;
}
.loginPopupIn,.submitPopupIn{
    display: inline-block;
    text-align: left;
    padding: 6px 9px 6px 9px;
}
.loginPopupIn,.submitPopupIn{
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}
.loginPopupIn.open,.submitPopupIn.open{
    opacity: 1;
    visibility: visible;
}
.submitPass{
    color: #06f;
    cursor: pointer;
}
.submitPass:hover{
    text-decoration: underline;
}
.loginPopupIn h3,.submitPopupIn h3{
    margin-top: 5px;
}
.loginBtn,.submitBtn{
    margin-top: 10px;
    cursor: pointer;
}