:root {
  --key-color:#FB3F3F;
}
*{
	 font-family: "Noto Sans JP",sans-serif;
}
body,ul,li,dl,dt,dd,h1,h2,h3,p,fieldset{list-style: none;margin: 0;padding: 0;border: 0}
a{
	text-decoration:none;
	color: inherit;
}
a:visited{
	color:#0000ff;
	text-decoration:none
}
a:link{
	color:#0000ff;
	text-decoration:none
}
a img:hover{
	opacity: 0.8;
}
/*a:hover {
	position:relative;
	text-decoration:none;
	background-color: #ededff
}*/
a:hover .setsumei {
	display: block;
	background-color: #7070D0;
	padding:3px;
	color:#ffffff;
	border-top:#ffffff solid 10px;
	border-left:#7070D0 solid 5px;
}
.setsumei {
	display: none;
	position: absolute;
	top: 1em;
    right: 10%;
    white-space: nowrap;
    z-index: 500;
}
a.q-mark{
	background: var(--key-color);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-left: 5px;
    color: #fff;
    line-height: 20px;
    text-align: center;
}
label {
	padding: 5px;
	border-radius: 30px;
}
label.menuEnabled {
	background-color: #7070FF;
	color: white;
	font-weight: bold; 
}
label.menuDisabled {
	background-color: #E0E0FF;
	color: #A0A0F0;
}
label.menuLoginEnabled {
	background-color: var(--key-color);
    color: white;
    font-weight: bold;
    padding: 8px 30px;
    cursor: pointer;
}
label.menuLoginDisabled {
	background-color: #E0F0E0;
	color: #A0A0F0;
}
label.addBtn {
	background-color: #FF5555;
	color: white;
	cursor: pointer;
}
label.addBtnDisabled {
	background-color: #D0D0D0;
	color: white;
}
label.editBtn {
	background-color: var(--key-color);
	color: white;
	padding: 10px 35px;
}
label.deleteBtn {
	background-color: #555555;
	color: white;
	padding: 10px 35px;
}
label.cancelBtn {
	background-color: #F0B0B0;
	color: white;
}
label.findBox {
	color: white;
}
table{
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
}
th{
	background-color:#F0F0F7;
}
th.header{
	background-color:#C0FAC0;
	border-bottom:2px solid #333333;
}
th.main{
	border-right:1px solid #663300;
	border-bottom:1px solid #663300;
	color:#330000;
	background-color:#E0FAE0;
	background-position:left top;
	padding:0.3em 1em;
	text-align:center;
}
td.main{
	padding:0.3em 1em;
	background-color:#fafffa;
}
td.footer{
	padding:0.3em 1em;
	background-color:#F5F5F5;
}
td.debug{
	background-color:#FFF5F5;
}
div.Tile
{
	position: relative;
	height: 530px;
	width: 500px;
	background-image: linear-gradient(#F0F0F0,#FEFEFE);
	margin: 10px;
	float: left;
	overflow:auto;
}
#mapArea{
	position: relative;
	height: 0;
	overflow: hidden;
}
.item_img{
	width:90px;
	height:90px;
	object-fit: cover;
}
/*common*/
.d-flex{
	display: flex;
}
.btn-bg-w a,.btn-next a,.btn-next input{
	cursor: pointer;
	display: block;
	border-radius: 30px;
	font-weight: bold;
	max-width: 200px;
	margin: auto;
	text-align: center;
	position: relative;
	padding:8px 20px;
	border: 2px solid var(--key-color);
}
.btn-bg-w a,.btn-next a:hover,.btn-next input:hover{
	color: var(--key-color);
	background: #fff;
}
.btn-next a,.btn-bg-w a:hover,.btn-next input{
	color: #fff;
	background: var(--key-color);
}
.btn-next a:before,.btn-next input: before{
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(130deg);
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.btn-next a:hover:before{
	border-top: 2px solid var(--key-color);
	border-left: 2px solid var(--key-color);
}
.pc-only{
	display: none;
}

.ttl-h2{
	position: relative;
	text-align: center;
	margin:20px 0 50px;
}
.ttl-h2 h2{
	font-size: 1.2em;
	margin-top: 5px;
}
.ttl-h2 .ttl-en{
	color: var(--key-color);
	font-size: 0.9em;
}
.ttl-h2:after{
	content: '';
	width: 100px;
	position: absolute;
	border-bottom: 3px solid var(--key-color);
	bottom: -15px;
	left: 0;
	right: 0;
	margin: auto;
}
.text-center{
	text-align: center;
}
/*header*/
header {
    padding: 10px;
}

header h1 img{
	width: 180px;
}
.header-inner,.header-nav{
	justify-content: space-between;
	align-items: center;
}
.header-nav nav{
	margin-right: 30px;
}
.header-nav li{
	margin: 0 15px;
}
.header-nav li a{
	color: #000;
	font-size: 1.1em;
	padding: 8px 0;
	display: block;
	font-weight: bold;
}
.header-nav li.current,.header-nav li:hover{
	border-bottom: 2px solid var(--key-color);
}
.sp-menu ul{
	justify-content: center;
	padding: 10px;
}
.sp-menu li{
	width: 30%;
	text-align: center;
}
.sp-menu li a{
	display: block;
	color: #333;
	padding: 40px 10px 10px 10px;
	border: 2px solid #666;
	margin: 15px 5px;
	border-radius: 5px;
}
.sp-menu .nav-map a{
	background: url(img/icon_map.svg) no-repeat center 10px;
}
.sp-menu .nav-photo a{
	background: url(img/icon_camera.svg) no-repeat center 10px;
}
.sp-menu .nav-howto a{
	background: url(img/icon_info.svg) no-repeat center 10px;
}
.sp-menu .nav-map.current a{
	background: url(img/icon_map_c.svg) no-repeat center 10px;
}
.sp-menu .nav-photo.current a{
	background: url(img/icon_camera_c.svg) no-repeat center 10px;
}
.sp-menu .nav-howto.current a{
	background: url(img/icon_info_c.svg) no-repeat center 10px;
}
.sp-menu li.current a{
	border: 2px solid var(--key-color);
	color: var(--key-color);
}

/*index*/
.main-visual{
	position: relative;
}
.main-visual img{
	width: 100%;
}
.main-visual .btn-next{
	position: absolute;
	bottom: 50px;
	margin: auto;
	left: 0;
	right: 0;
}
.new-list.main-cont {
    margin-bottom: 80px;
}
.new-list ul{
	flex-wrap: wrap;
}
.new-list ul li{
	flex: 0 0 33%;
	box-sizing: border-box;
    padding: 8px 5px;
}
.new-list a{
	color: #000;
}
.new-shop-img{
	height: 100px;
    overflow: hidden;
    position: relative;
}
.new-shop-img img{
	position: absolute;
    width: 100%;
    min-height: 100px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    object-fit: cover;
}
.menu-name {
    font-weight: bold;
    margin-top: 5px;
}
.menu-price {
    text-align: right;
    color: #c00;
    font-weight: bold;
}
.shop-data{
	color: #666;
}
.new-list .shop-data li{
	padding: 0 0 0 20px;
    font-size: 0.9em;
}

.shop-name{
	background: url(img/icon_shop.svg) no-repeat left 5px;
    background-size: 15px;
}
.guest-name{
	background: url(img/icon_user.svg) no-repeat left 5px;
	background-size: 15px;
}
#viewArea{
	margin-bottom: 80px;
}
.notification{
	border: 1px solid #999;
    box-sizing: border-box;
    padding: 30px;
}
.noti-ttl{
	font-weight: bold;
	margin-bottom: 8px;
}
/*shop-detail*/
#buttonArea {
    margin-bottom: 80px;
}
.slick-slide {
    height: 530px;
    overflow: hidden;
}
.slick-next{
	right: 14%;
}
.slick-prev{
	left: 14%;
}
.slick-dots{
	bottom: -30px;
}
.shop-image{
	position: relative;
	height: 250px;
	overflow: hidden;
}
.shop-image img{
	width: 100%;
	height: 250px;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    min-height: 250px;
    object-fit: contain;
}
.shop-detail th,.shop-detail td{
	padding: 8px;
	text-align: left;
}
.btn-alert{
	margin-right: 10px;
}
/*map*/
.leaflet-popup-content {
    margin: 8px 20px 8px 8px;
    position: relative;
}
.leaflet-popup-content:before {
    content: '';
    position: absolute;
    right: 0;
    border-top: 2px solid var(--key-color);
    border-right: 2px solid var(--key-color);
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -12px;
}
.leaflet-popup-content-wrapper{
	width: 130px;
}
.leaflet-popup-content-wrapper img {
    width: 90px;
}
/*post*/
.post-cont {
    text-align: center;
}
.post-cont label{
	position: relative;
	cursor: pointer;
	display: block;
	width: 300px;
	margin:15px auto 0;
	padding: 10px 0;
}
label.addBtn{
	background: var(--key-color);
}
label.addBtnDisabled{
	background: #666;
}
.post-cont label:before{
	content: '';
	position: absolute;
	width: 22px;
	height: 20px;
	left: 50px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.post-cont label.icon-file:before{
	background: url(img/icon_file.svg) no-repeat;
	background-size: 18px;
}
.post-cont label.icon-camera:before{
	background: url(img/icon-camera-w.svg) no-repeat;
	background-size: 22px;
}
/*login*/
.login-panel,.regis-panel{
	border: 1px solid #999;
	padding: 30px 15px;
	margin: 0 15px 30px;
}
.login-panel dl{
	display: flex;
	flex-flow: column;
	margin-bottom: 10px;
}
.login-panel dl input,.regis-panel dl input{
	background: none;
	border: 1px solid #999;
	padding: 8px;
	width: 90%;
}
.login-panel .btn-next input,.regis-panel .btn-next input{
	margin: 30px auto 0;
	width: 200px;
}
/*registration*/
.regis-panel dl{
	display: flex;
	flex-flow: column;
	margin-bottom: 10px;
}
.reg-ttl{
	color: var(--key-color);
	font-weight: bold;
	margin:0 0 8px;
}

.regis-panel.contact dl{
	flex-flow: column;
	align-items: flex-start;
}
.regis-panel.contact dt{
	margin-bottom: 8px;
}
.regis-panel.contact dl input,.regis-panel.contact dl textarea{
	width: 100%;
	border: 1px solid #999;
	box-sizing: border-box;
}
/*edit*/
.edit-table th, .edit-table td {
    padding: 8px;
}
.edit-table input {
    padding: 5px;
}
.edit-table input#shopname, .edit-table input#ext_1, .edit-table input#ext_3,input#tag {
    width: 94%;
    box-sizing: border-box;
}
.photo-table td {
    display: flex;
    align-items: center;
}
a.p-delate {
    margin-left: 15px;
    background: #2e2e81;
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
}
/*howto*/
.howto-cont{
	margin-top: 30px;
}
.howto-cont h3{
	margin-bottom: 8px;
	padding: 8px 15px;
	background: #eee;
	border-left: 5px solid #999;
}
.howto-cont p,.howto-cont ul,.howto-cont dl{
	padding: 8px;
}
.howto-cont li {
    padding: 8px;
    border-bottom: 2px dotted #999;
    margin-bottom: 15px;
    position: relative;
}
/*footer*/
footer{
	text-align: center;
	margin-top: 80px;
}
.footer-text{
	background: url(img/footer_bg_sp.png) no-repeat;
	background-size: 100% 100%;
	align-items: center;
	justify-content: center;
	padding: 40px 10px;
	font-size: 0.9em;
}
.footer-inner p{
	margin-bottom: 50px;
}
.sns-btn{
	justify-content: center;
	margin-bottom: 25px;
}
.sns-btn li a{
	display: block;
	padding: 8px 15px 8px 30px;
	margin-right: 10px;
	color: #fff;
	border-radius: 3px;
	font-size: 0.9em;
}
.sns-fb a{
	background: #4267B2 url(img/sns_icon_fb.png) no-repeat 5px center;
	background-size: 20px 20px;
}
.sns-tw a{
	background: #1D9BF0 url(img/sns_icon_twitter.png) no-repeat 5px center;
	background-size: 20px;
}
.sns-line a{
	background: #06C755 url(img/sns_icon_line.png) no-repeat 5px center;
	background-size: 25px;
}
.copy-right{
	background: #333;
	padding: 10px;
}
.copy-right,.copy-right a{
	color: #fff;
}
#pagetop{
  position: fixed;
  right: 0;
  bottom: 0;
  background: var(--key-color);
}
#pagetop a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    padding: 5px;
    font-size: 10px;
    background: #fb3f3f;
    color: #fff;
    border-radius: 5px;
}
#pagetop a::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    top: 30px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(-135deg);
    border-radius: 3px;
}
@media screen and (max-width: 1024px) {
	.shop-table th,.shop-table td {
	    display: block;
	}
	.regis-msg {
		font-size:0.9em ;
		margin: 10px;
	}
	.shop-detail,.edit-table{
		border: 1px solid #999;
		width: 94%;
		table-layout: fixed; 
	}
	.shop-detail th,.shop-detail td,.edit-table th,.edit-table td{
		display: block;
		padding: 8px;
		border: none;
		box-sizing: border-box;
		text-align: left;
	}
	.photo-table img {
	    width: 150px;
	}
}
@media screen and (min-width: 600px) {
	.shop-image{
		height: 400px;
    	width: 600px;
	}
	.shop-image img{
		width: 100%;
	    height: 400px;
	}

}
@media screen and (min-width: 1025px) {
	.sp-only{
		display: none;
	}
	.pc-only{
		display: block;
	}
	.btn-bg-w a,.btn-next a{
		max-width: 300px;
		padding: 10px 30px;
	}
	.main-cont{
		width: 900px;
		margin: auto;
	}
	header {
	    padding: 20px 0; 
	}
	header h1 img{
		width: 300px;
	}
	.new-list ul li{
		flex: 0 0 20%;
		padding: 15px;
	}
	.new-shop-img{
		height: 140px;
	}
	.new-shop-img img{
		min-height: 140px;
	}
	.shop-image-list {
	    width: 800px;
	    margin: auto;
	}
	.shop-image {
	    width: 800px;
	    height: 600px;
	}
	.shop-image img{
		height: 600px;
	}
	.login-panel,.regis-panel{
		width: 50%;
		margin: 30px auto;
		padding: 50px;
		box-sizing: border-box;
	}
	.login-panel dl{
		flex-flow: row;
		justify-content: center;
	}
	.regis-panel dl{
		flex-flow: row;
		align-items: center;
	}
	.login-panel dt{
		margin-right: 30px;
		flex: 0 0 20%;
	}
	.regis-panel.contact{
		width:60% ;
	}
	.regis-msg {
		text-align: center;
	}
	.regis-panel dt{
		flex: 0 0 40%;
	}
	.regis-panel dd {
	    flex: 0 0 60%;
	}
	.edit-table{
		width: 800px;
	}
	.photo-table img {
	    width: 200px;
	}
	.footer-text{
		background: url(img/footer_bg.png) no-repeat;
		padding: 100px 10px;
		font-size: 1em;
		background-size: 100% 100%;
	}
}