@charset "utf-8";

	body,h1,h2,h3,h4,h5,p,em,div,table,tr,td,th,ul,li,dl,dt,dd,figure{
		margin: 0;
		padding: 0;
		font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-style: normal;
		list-style: none;
		font-size: 1em;
		@media (width <= 767px){
			& {
				font-size: .9em;
			}
		}
	}
	
	:root{
		--eastColor: #0972ba;
		--southColor: #f79321;
		--westColor: #099344;
		--FontMin: "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		--FontGot: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	}
	.east{	--zoneColor: var(--eastColor);	--zoneThin: #d7e8f4;}
	.south{	--zoneColor: var(--southColor); --zoneThin: #feeedb;}
	.west{	--zoneColor: var(--westColor);	--zoneThin: #d7eee1;}
	
	html{}

	body{
		text-align: center;
		background: #eee;
	}
	
	img{
		max-width: 100%;
		image-rendering: -webkit-optimize-contrast;
		-webkit-backface-visibility: hidden;
		vertical-align: bottom;
	}

	header[role="banner"],
	main[role="main"],
	footer[role="contentinfo"]{
		margin: auto;
		box-sizing: border-box;
	}
	
header[role="banner"]{
	text-align: center;
	border-bottom: 4px solid #62A4E8;
	
	& > h1{
		background: linear-gradient(to bottom, #ffffff 20px, #eee);
		border-bottom: 2px solid #fff;
		
		& > p{
			color: #fff;
			padding: .5em 1em;
			background: #62A4E8;
			font-size: .8em;
		}
		
		& div{
			text-align: left;
			padding: 10px;
			max-width: 1000px;
			background: url(/assets/images/town-icon.png) right 10px center no-repeat;
			background-size: auto 65%;
			margin: auto;
		}
		& img{
			height: 42px;
			filter: drop-shadow(2px 2px 1px #aaa);
		}
	}
	& > figure{
		background: #6aa9d7;
	}
	& > h2{
		background: #4467d6;
		color: #fff;
		font-size: 2.5em;
		padding: 1.5em;
	}
}


main[role="main"]{
	border-top: 1px solid #fff;
	background: linear-gradient(to bottom , #e5e5e5 0, #fff 10em , #fff);
	padding: 4em 1.5em 0;
	text-align: center;
	color: #777;
	@media (width < 767px){
		& {
			padding: 2em 1em;
		}
	}
	
	& > section{
		max-width: 900px;
		box-sizing: border-box;
		margin: auto auto 1em;
		
		&.fullwide{
			max-width: initial;
			margin: auto -1.5em 1em;
		}
		&.south h3, &.west h3, &.east h3{
			background: var(--zoneThin);
			padding: 1em 0;
		}
	}
}
	section.tocontanct{
		background: #62A4E8;
		padding: 3em 1em;
		margin: auto -1.5em !important;
		max-width: initial !important;
		text-align: center;
		
		& a{
			border: 2px solid #fff;
			color: #fff;
			display: block;
			width: fit-content;
			padding: .8em 4em;
			margin: auto;
			text-decoration: none;
			&:hover{
				background: #4467d6;
				opacity: .8;
				transition: .2s;
			}
		}
	}
	
	section.totop{
		background: #fff;
		padding: 5em 1em 3em;
		margin: auto -1.5em !important;
		max-width: initial !important;
		text-align: center;
		
		& a{
			border: 2px solid #62A4E8;
			color: #62A4E8;
			display: block;
			width: fit-content;
			padding: .8em 4em;
			margin: auto;
			text-decoration: none;
			&:hover{
				background: #62A4E8;
				color: #fff;
				transition: .2s;
			}
		}
	}
	
	section.map{
		padding-top: 3em;
		& h2{
			background: #799dfa;
			color: #fff;
			padding: .5em 0 .3em;
			font-size: 1.5em;
		}
		
		& figure.map-image{
			border-bottom: 3px solid #799dfa;
			background: #faf8da;
			overflow: hidden;
			position: relative;
			margin-bottom: 3em;
			& img{
				width: 100%;
				max-width: 1200px;
			}
		}
		
	}


		
	/*-inquiry-*/
	section.inquiry{
		
		text-align: left;
		color: #555;
		
		& h2{
			text-align: left;
			font-size: 1.4em;
			border-bottom: 3px solid #2a43a9;
			color: #2a43a9;
			padding: .5em 0 .3em;
			margin-bottom: 1em;
		}
		& h3{
			margin-bottom: .7em;
			background: #aaa;
			width: fit-content;
			line-height: 1em;
			padding: .5em 1em .3em;
			color: #fff;
			border-radius: 0 40em 40em 0;
		}
		& ul{
			margin-bottom: 1.5em;
			& li{
				padding-left: 1.5em;
				position: relative;
				margin-bottom: .3em;
				&::before{
					content: "■";
					position: absolute;
					left: 0;
					top: 0;
					opacity: .3;
				}
			}
		}
		& p{
			margin-bottom: 1.5em;
		}
		& table{
			width: 100%;
			border-bottom: 1px dashed #bbb;
			margin-bottom: 1em;
			& tr{
				& > *{
					padding: .7em 0 .5em;
					border-top: 1px dashed #bbb;
					vertical-align: center;
				}
				& th{
					font-size: .9em;
					width: 12em;
				}
				
				& td{
					&.name input{
						width: 7em;
					}
					&.adress input{
						width: 20em;
					}
					&.tell input{
						width: 5em;
					}
					&.mail input{
						width: 15em;
					}
					&.text textarea{
						width: 100%;
						height: 10em;
						border: 1px solid #aaa;
					}
				}
				@media (width <= 767px){
					& th{
						width: 100%;
						display: block;
						border: none;
						background: #eee;
						padding: .3em 0 .3em .5em;
						border-left: 3px solid #2a43a9;
					}
					& td{
						width: 100%;
						display: block;
						border: none;
						padding-bottom: 1em;
					}
				}
			}
			& input{
				height: 2em;
				border: 1px solid #aaa;
			}
			& b{
				font-size: .9em;
				display: inline-block;
				margin-right: .5em;
				color: #aaa;
			}
			& input+b{
				margin-left: 1em;
			}
			& small{
				color: #e00;
				margin-left: .3em;
				&::before{
					content: "※";
					margin-right: .1em;
				}
			}
			& textarea+small{
				display: block;
			}
		}
		& div{
			padding: 1em .5em;
			text-align: center;
			background: #f2f2f2;
			& input{
				width: 7em;
				margin: auto .5em;
				background: #fff;
				font-size: .9em;
				padding: .5em 0;
				border: none;
				border-radius: .3em;
				&[type="submit"]{
					border: 1px solid #799dfa;
				}
				&[type="reset"]{
					border: 1px solid #ccc;
					color: #777;
				}
			}
		}
	}
		
	
	
	section.charter{
		background: #fbece3;
		border: 5px solid #c6131d;
		padding: 1.5em 2.5em;
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fff inset, 0 0 0 6px #c6131d inset;
		display: grid;
		grid-template-columns: 1fr 10%;
		gap: 1.5em;
		& h2{
			color: #c6131d;
			font-size: 1.7em;
			font-family: var(--FontMin);
			grid-column: 1 / -1;
			font-weight: bold;
		}
		& ul li{
			color: #000;
			font-family: var(--FontMin);
			font-weight: bold;
			padding: .3em 0 .3em 1.5em;
			text-align: left;
			position: relative;
			
			&::before{
				content: "●";
				position: absolute;
				left: 0;
			}
		}
		& figure{
			
		}
		
	}
	
	section.report{
		background: #fff1ac;
		border: 3px solid #004d9f;
		border-radius: .8em;
		box-shadow: 0 0 0 3px #004d9f inset;
		& h2{
			background: #004d9f;
			color: #fff;
			padding: .5em;
			font-size: 1.4em;
		}
		& p{
			padding: 1.5em 2em 1em;
			text-align: left;
			color: #555;
			& em{
				font-weight: bold;
				color: #e40012;
				font-size: 1.2em;
				display: block;
				text-align: center;
				padding: 0 0 1em;
			}
		}
		& h3{
			display: flex;
			padding: 0 2em;
			align-items: center;
			justify-content: space-between;
			
			&::before, &::after{
				content: "";
				height: 1px;
				flex-grow: 1;
				background: #555;
			}
			&::before{
				margin-right: .8em;
			}
			&::after{
				margin-left: .8em;
			}
		}
		& ul{
			padding: 1em;
			display: flex;
			flex-wrap: wrap;
			font-size: .9em;
			& li{
				width: calc(100% /3);
				padding: .3em 0;
			}
		}
	}
	
	section.manual{
		text-align: left;
		& details{
			
		}
		& details summary{
			list-style: none;
			position: relative;
			cursor: pointer;
			&::-webkit-details-marker{
				display: none;
			}
			&::after{
				position: absolute;
				content: "▼";
				inset: 50% 1em auto auto;
				transform: translate(0,-50%);
				font-size: 1.5em;
				color: #fff;
			}
		}
		& details[open] summary::after{
				content: "▲";
		}
		& details summary h2{
			background: #b71c22;
			color: #fff;
			text-align: left;
			padding: .5em 1em;
			font-size: 1.8em;
			box-shadow: 0 0 0 5px rgba(255,255,255,.1) inset;
			& span{
				font-size: .8em;
				display: block;
				opacity: .8;
			}
			&:hover{
				box-shadow: 0 0 0 5px rgba(255,255,255,.4) inset;	
				trasition: .2s;
			}
		}
		
		& details > p{
			font-weight: bold;
			color: #333;
			margin: auto 1em;
			font-size: 1.4em;
			padding: 1.5em 1em .8em;
			position: relative;
			&.txt{
				text-align: center;
				&.red{
					color: #e40012;
				}
				&.blr{
					color: #004096;
				}
			}
			&::before, &::after{
				content: "";
				position: absolute;
			}
			&::before{
				width: 5px;
				height: 95%;
				inset: 0 auto 0 50%;
				background: #b71c22;
			}
			&::after{
				width: 1.5em;
				aspect-ratio: 1/1;
				border-right: 5px solid #b71c22;
				border-bottom: 5px solid #b71c22;
				inset: auto auto 10% 50%;
				transform: rotate(45deg) translate(-33%,28%);
			}
			&.no::before,&.no::after{
				content: none;
			}
		}
		
	}
	
	
	
	.manual-content{
		border: 3px solid #b71c22;
		border-radius: .5em;
		padding: 1.5em;
		margin: auto 3%;
		color: #333;
		position: relative;
		box-shadow: 0 0 .5em 0 rgba(0,0,0,.3);
		&::before{
			content: attr(data-num);
			position: absolute;
			inset: 0 auto auto 0;
			background: #b71c22;
			font-size: 1.7em;
			color: #fff;
			width: 1.6em;
			aspect-ratio: 1/1;
			border-radius: 50em;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translate(-40%,-40%);
			border: 2px solid #fff;
			font-weight: bold;
		}
		
		& h3{
			color: #b71c22;
			font-size: 1.5em;
		}
		& h4{
			color: #111;
			font-size: 1.1em;
			padding-top: .8em;
			& span{
				color: #0068B5;
			}
		}
		& a{
			display: inline-block;
			color: #ff7400;
			font-size: 1.1em;
		}
		& div.aed{
			padding: 1.5em 0 1em 12%;
			position: relative;
			border-left: 2px solid #000;
			margin-bottom: .5em;
			&::before{
				content: "";
				position: absolute;
				inset: 0 auto 0 0;
				height: 100%;
				aspect-ratio: 1/1;
				background: url(images/icon-aed.png) center /80% auto no-repeat;
			}
		}
		& div.howto171{
			padding-top: 1em;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1.5em;
			& h5{
				color: #fff;
				text-align: center;
				background: #004096;
				padding: .4em 0 .2em;
				font-size: 1.1em;
				grid-column: 1 / -1;
				border-rdius: .2em;
			}
			& p{
				font-size: 1.3em;
				grid-column: 1 / -1;
			
				& em{
					display: inline-block;
					line-height: 1em;
					margin-right: .2em;
					padding: .2em 0 0 7%;
					background: url(images/icon-tell.png) left center no-repeat;
					background-size: auto 100%;
					font-size: 2em;
					font-weight: bold;
				}
			}
			& dl{
				font-size: 1.2em;
			}
			& dl dt{
				border: 2px solid #000;
				border-radius: .5em;
				padding: .1em 1em;
				border-rdius: .3em;
				margin-bottom: .5em;
			}
			& dl dd{
				position: relative;
				display: flex;
				gap: .5em;
				& b{
					border: 2px solid #000;
					background: #bbb;
					font-weight: bold;
					aspect-ratio: 1/1;
					width: 2em;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				& span{
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold
				}
				& div{
					border: 2px solid #000;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: .5em;
				}
				
			}
			& dl.rec{
				& dt{
					border-color: #e40012;
					color: #e40012;
				}
			}
			& dl.ply{
				& dt{
					border-color: #004096;
					color: #004096;
				}
			}
			& dd{
				
			}
		}
	}


footer[role="contentinfo"]{
	padding: 4em 1em;
	color: #eee;
	font-size: .8em;
	background: #4467d6;
	& >img{
		max-width: 80%;
		width: 300px;
		margin-bottom: 2em;
	}
}
	
/*	
.maps{
	margin:1px 0px 20px;
}
*/

/*-  -*/
div.shoplist-all{
	display: flex;
	justify-content: space-between;
	align-items: start;
	
	& dl{
		margin-top: 0;
		width: calc(98% / 3);
		text-align: left;
		
		& dt{
			padding: 1em 0;
		}
		& dd{
			& ul li a{
				display: block;
				padding: .1em 0 .1em 1.5em;
				position: relative;
				text-decoration: none;
				color: #555;
				&:hover{
					transform: translate(.2em,0);
					background: var(--zoneThin);
					transition: .2s;
				}
				
				&::before{
					content: "■";
					position: absolute;
					color: var(--zoneColor);
					left: .3em;
					top: 0;
				}
			}
		}
	}
}

.shoplist-link{
	display: flex;
	justify-content: space-between;
	margin: auto auto 2em;
	width: 90%;
	&:has(> :nth-child(4):last-child) a{
        width: calc(94% / 4);
    }
	&:has(> :nth-child(5):last-child) a{
        width: calc(94% / 5);
    }
	& a{
		height: 5em;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .8em;
		font-weight: bold;
		border-radius: .3em;
		text-decoration: none;
		border: 1px solid var(--zoneColor);
		box-shadow: 0 0 0 2px #fff inset;
		color: var(--zoneColor);
		&:hover{
			background-color: var(--zoneThin);
			transition: .2s;
		}
	}
}

table.shoplist-zone{
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	color: #555;
	
	& thead{
		background: linear-gradient(to right, var(--zoneColor), var(--zoneThin));
		color: #fff;
		& th{
			padding: .5em 1em .3em;
		}
	}
	
	& tbody{
		& tr > *{
			padding: .5em .3em .3em;
			border-bottom: 1px dashed #ccc;
			
			&:first-child{
				font-weight: bold;
			}
			
			&:last-child{
				text-align: right;
			}
		}
		
		& tr:last-child > *{
			border-bottom: none;
			padding-bottom: 2em;
		}
	}
}