@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;
	}
	.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;
	
	& > 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);
		}
	}
}

	header[role="banner"] > div{
		background: #8e98ee;
		border-top: 1px solid #4483df;
		border-bottom: 1px solid #4483df;
		text-align: center;
		position: relative;
		overflow: hidden;
		
		& figure{
			position: relative;	
			z-index: 2;
		}
		
		&::before{
			content: "a";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-size: 120% auto;
			background-position: center center;
			background-repeat: no-repeat;
			filter: blur(8px) saturate(0%);
			mix-blend-mode: screen;
			mix-blend-mode: overlay;
			mix-blend-mode: hard-light;
			opacity: .5;
		}
		
		&.common-header{
			background: url(/assets/images/header-bk.jpg) center center no-repeat;
			background-size: 100%;
			& > figure{
				min-height: 160px;
				max-width: 1000px;
				padding: 0 1em;
				box-sizing: border-box;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: end;
				& > img{
					width: 18%;
					aspect-ratio: 3/2;
					transition: .2s;
				}
			}
			@media (width <= 767px){
				& {
					background-size: 180%;
				}
				& > figure img{
					width: 30%;
					transition: .2s;
				}
			}
			&::before{
				content: none;
			}
		}
	}
		header[role="banner"] > figure a{
			display: block;
		}
		header[role="banner"] > figure a:hover{
			opacity: .8;
			transition: .2s;
		}

		
		
nav{
		
	& > div{
		background: linear-gradient(to bottom, #2b55d3,#4484e0);
		border-top: 1px solid #4ea3ff;
		border-bottom: 1px solid #4ea3ff;
		position: relative;
		z-index: 50;
	}
	& a{
		display: block;
		text-decoration: none;
		font-size: .9em;
		font-weight: bold;		
	}
	a:hover{
		background-color: #034ea2;
		transition: 1s;
	}
	
	@media (width <= 767px){/*SP*/
		& span{
			cursor: pointer;
			padding: 1em 0;
			text-decoration: none;
			text-align: center;
			color: #fff;
			font-weight: bold;
			display: block;
			font-size: .9em;
			padding: 1em 2.5em;
			position: relative;
			
			&::before, &::after {
				content: "";
				position: absolute;
				display: inline-block;
				top: 1.6em;
				left: 50%;
				transform: translate(-280% , 0);
				background: #fff;
				width: 20px;
				height: 2px;
				box-shadow: 0 -.4em 0 0 #fff, 0 .4em 0 0 #fff;
				transition: .2s;
			}
		}
		& div.open span::before{
			box-shadow: none;
			transform:  translate(-280% , 0) rotate(45deg);
			transition: .2s;
		}
		& div.open span::after{
			box-shadow: none;
			transform:  translate(-280% , 0) rotate(-45deg);
			transition: .2s;
		}
		& ul{
			top: 2.9em;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			margin: auto;
			box-sizing: border-box;
			padding: .5em;
			position: absolute;
			background: #4b66d1;
			box-shadow: 0 .2em .5em 0 #d6ecf8;
			
			& li{
				width: 48%;
				margin: .3em auto;
			}
			& a{
				text-align: center;
				background-color: #fff;
				border-radius: .3em;
				padding: .5em 0;
				border: 1px solid #d6ecf8;
				&:hover{
					background-color: #fff;	
					opacity: 1;
				}
			}
		}
	}
	@media (width >= 767px){/*PC*/
		& span{
			display: none;
		}
		& ul{
			display: flex;
			max-width: 1000px;
			margin: auto;
		
			& li{
				width: calc(100% / 6);
			}
			& a{
				padding: 1em 0;
				text-decoration: none;
				text-align: center;
				color: #fff;
				font-size: .9em;
				font-weight: bold;
			}
		}
	}
}
			
			
main[role="main"]:not(:has(.fair-template)) {
	border-top: 1px solid #fff;
	background: linear-gradient(to bottom , #e5e5e5 0, #fff 4em , #fff);
	padding: 4em 1.5em;
	text-align: center;
	color: #777;
	@media (width < 767px){
		& {
			padding: 2em 1em;
		}
	}
	&:not(:has(.fullwide)){
		justify-content: center;
		align-items: stretch;
		display: flex;
		@media (width <= 767px){
			& {
				display: block;
			}
		}
	}
	
}

.event main[role="main"]{
	padding: 2em 0;
}

	:not(.event) main[role="main"] > section.content:not(.overwide){
		width: 75%;
		max-width: 750px;
		margin: 0 1em auto auto;
		@media (width <= 767px){
			& {
				width: 100%;
				max-width: 100%;		
			}
		}
		
		&.fullwide{
			width: 100%;
			max-width: 1000px;	
			margin: auto auto 2em;
			
			& > h2{
				font-size: 1.4em;
				color: #2a43a9;
				margin-bottom: .5em;
			}
			& > h3{
				background: var(--zoneThin);
				padding: 1em 0;
				margin-bottom: 1em;
				& > img{
					max-width: 30%;
				}
			}
		}
	}
	
	:not(.event) main[role="main"] > section.content.overwide{
		margin: auto -1.5em 2em;
		& > h2{
			font-size: 1.6em;
			color: #2a43a9;
			margin-bottom: 1em;
		}
		& > h3{
			background: var(--zoneThin);
			padding: 1em 0;
			margin-bottom: 1em;
			& > img{
				max-width: 30%;
			}
		}
		@media (width < 767px){
			& {
				margin: auto -1em 2em;
			}
		}
	}
		
	:not(.event) main[role="main"] > aside.sidebar{
		width: 25%;
		max-width: 250px;
		margin: 0 auto auto 1em;
		@media (width <= 767px){
			& {
				width: 100%;
				max-width: 100%;
				margin: 0 auto auto;
			}
		}
	}
	
	
	section.content article.template{
		text-align: left;
		
		box-sizing: border-box;
	}


/*-TopPage-*/
section.toppage{
	margin-bottom: 2em;
	
	& h2{
		text-align: left;
		font-size: 1.6em;
		border-bottom: 3px solid #2a43a9;
		color: #2a43a9;
		padding: .5em 0 .3em 3em;
		margin-bottom: .7em;
		position: relative;
		&::after{
			content: "";
			position: absolute;
			width: 2.5em;
			aspect-ratio: 5/4;
			left: 0;
			bottom: .2em;
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
	}
	
	&.event h2::after{background-image: url(/assets/images/deco-dai.png);}
	&.newshop h2::after{background-image: url(/assets/images/deco-kids.png);}
	&.information h2::after{background-image: url(/assets/images/deco-kira.png);}
	
	& a{
		color: #555;
		text-decoration: none;
	}
	
	&.event{
		
		& ul li{
			padding-bottom: 1em;
			margin-bottom: 1em;
			border-bottom: 1px solid #ccc;
			& a{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				&:hover{
					transform: translate(.3em, 0);
					transition: .2s;
				}
				
				& figure{
					width: 30%;
					& img{
						border-radius: .3em;
					}
				}
				& p{
					text-align: left;
					width: 68%;
					& time{
						display: block;
						color: #777;
						font-size: .95em;
					}
					& em{
						display: block;
						font-weight: bold;
						font-size: 1.25em;
						padding: .3em 0;
						color: #2b55d3;
					}
				}
			}
		}
	}
	
	&.newshop{
		& ul{
			display: flex;
			justify-content: space-between;
			
			& li{
				width: calc(96% /3);
				& a{
					display: block;
					border: 1px solid #ccc;
					border-radius: .3em;
					overflow: hidden;
					
					&:hover{
						transform: scale(1.05);
						transition: .2s;
						box-shadow: .1em .1em .5em 0 #ddd;
						border: 1px solid #2b55d3;
					}
					
					& figure{
						aspect-ratio: 16/9;
						overflow: hidden;
						position: relative;
						& img{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
						}
					}
					& span{
						display: block;
						padding: .8em 0;
						font-size: .9em;
					}
				}
			}
		}
	}
	
	&.information{
		& ul{
			margin-bottom: 2em;
			& li{
				border-bottom: 1px dashed #ccc;
				text-align: left;
				margin-bottom: .5em;
				
				& a{
					display: block;
					padding: 0 0 .5em 1.3em;
					position: relative;
					&::before{
						content: "";
						position: absolute;
						height: 0;
						width: 0;
						left: 0;
						top: calc(50% - .3em);
						transform: translate(0,-50%);
						border-width: .5em;
						border-color: #fff #fff #fff #2a43a9;
						border-style: solid;
						opacity: .5;
						
					}
					&::after{
						content: "";
						display: block;
						clear: both;
					}
					&:hover{
						transform: translate(.3em,0);
						transition: .2s;
						&::before{
							opacity: 1;
						}
					}
				}
				& time{
					float: right;
					opacity: .5;
				}
			}
		}
		& div{
			border: 1px solid #ccc;
			padding: 1em;
			border-radius: .3em;
			display: flex;
			justify-content: space-between;
			align-items: center;
			& figure{
				width: calc(98% /2);
			}
		}
	}
	
}


/*-inquiry-*/
section.inquiry{
	margin-bottom: 2em;
	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;
			}
		}
	}
}
	

/*-記事スタイル-*/
article.entry{
	background: #fff;
	box-shadow: 0 0 .5em 0 #7e859d;
	padding: 1.5em 1.2em;
	text-align: left;
	font-size: 1.2em;
	color: #555;
	margin-bottom: 1.5em;
	
	& header{
		position: relative;
		border-bottom: 1px solid #ccc;
		margin-bottom: 2em;
		& h2{
			font-size: 1.6em;
			line-height: 1.2em;
			color: #2b55d3;
			font-weight: normal;
			padding: 1em 0 .8em;
			
			& > span{
				font-size: .6em;
				opacity: .5;
				display: block;
				padding-bottom: .3em;
			}
		}
		& > span{
			display: block;
			width: fit-content;
			background: #9ab9ff;
			color: #fff;
			font-size: .7em;
			padding: .1em 1em;
			border-radius: .3em;
		}
		& > time{
			position: absolute;
			right: 0;
			top: 0;
			color: #aaa;
			font-size: .85em;
		}
	}
	
	& > *{
		margin-bottom: 1em;
	}

		
	& h3{
		font-size: 1.4em;
		padding: .3em .5em;
		border-left: 6px solid #99a6cd;
		line-height: 1em;
		margin: 1.5em 0 .5em;
		color: #333;
	}
	& h4{
		color: #ff5f5f;
		display: block;
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: .5em;
		
	}
	& p{
		line-height: 1.5em;
	}
	& p b{
		font-weight: bold;
	}
	& p em{
		font-weight: bold;
		display: block;
	}
	& p.underline{
		text-decoration:underline double #2b55d3;
	}
		& a.link{
			color: #2364cb;
			&:hover{
				color: #c50;
				transition: .2s;
			}
		}
		
		& small{
			display: block;
			font-size: .9em;
			position: relative;
			padding-left: 1.2em;
			&::before{
				content: "※";
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		& a.link:before{
			content:"» ";
		}
		
	& dl.event-summary{
		display: flex;
		flex-wrap: wrap;
		font-size: .9em;
		& > *{
			padding: .3em 0 .1em;
			border-bottom: 3px solid #fff;
		}
		& > dt{
			width: 7em;
			background: #fdb330;
			color: #fff;
			text-align: center;
			font-size: .85em;
			font-weight: bold;
		}
		& > dd{
			width: calc(100% - 7em);
			box-sizing: border-box;
			padding-left: 1em;
		}
		&.wide{
			& > dt{
				width: 10em;
			}
			& > dd{
				width: calc(100% - 10em);
			}
		}
	}
	
	& dl.shop-summary{
		display: flex;
		flex-wrap: wrap;
		font-size: .8em;
		border-top: 1px solid #ccc;
		padding: .5em;
		& > *{
			border-bottom: 1px solid #ddd;
			padding: .5em 0;
		}
		& > dt{
			width: 25%;
			opacity: .7;
		}
		& > dd{
			width: 75%;
		}
	}
		
	& ul li{
		padding-left: 1.3em;
		position: relative;
	}
		& ul li::before{
			content: "■";
			position: absolute;
			left: 0;
			top: 0;
			opacity: .5;
		}
	& ol{
		counter-reset: section;
		padding-left: .5em;
		& li{
			position: relative;
			counter-increment: section;
			padding-left: 2.4em;
			padding-bottom: .5em;
			&::before{
				content: counter(section);
				position: absolute;
				left: 0; top: 0;
				text-align: center;
				width: 1.5em;
				border: 1px solid #ccc;
			}
		}
	}
		
		
	& figure{
		text-align: center;
	}
		& figure figcaption{
			font-size: .9em;
			padding-top: .5em;
		}
		
	& figure.just-images{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		& > *{
			width: calc(97% / 2);
			margin-bottom: .5em;
		}
		& img{
			/*box-shadow: .1em .1em .2em 0 #888;*/
		}
	}
	
	& figure.wifi{
		background: #d3edfa;
		padding: 1em;
		& > img{
			margin: auto 1em;
		}
	}

}/*-article.entry-*/


	figure.map-image{
		border: 2px solid #799dfa;
		background: #fefcde;
		border-radius: .5em;
		overflow: hidden;
		position: relative;
		margin-bottom: 2em;
		&.all{
			border-left: none;
			border-right: none;
			border-radius: 0;
		}
		& img{
			position: relative;
			margin: auto;
			width: 100%;
			max-width: 1200px;
			image-rendering: -webkit-optimize-contrast;
		}
		&.west::before , &.south::before , &.east::before{
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			z-index: 1;
		}
		&.west::before{ background-image: url(/map/images/filter-west.png);}
		&.south::before{ background-image: url(/map/images/filter-south.png);}
		&.east::before{ background-image: url(/map/images/filter-east.png);}
	}
	
	
	
aside.sidebar{
	text-align: left;
	
	& > *{
		margin-bottom : .5em;
	}
	
	& .newshop{
		margin-bottom: 1em;
		& em{
			display: block;
			font-weight: bold;
			background: #4b66d1;
			color: #fff;
			margin-bottom: .5em;
			padding: .4em 0 .3em .5em;
			&::before, &::after{
				content: "★";
				color:  #dd0;
			}
		}
		& a{
			margin: auto .2em .2em;
			background: linear-gradient(to bottom, #f5f5f5, #fff);
			border: 1px solid #ccc;
			display: block;
			line-height: 1em;
			padding: 1em 0 .8em .6em;
			color: #555;
			font-size: .9em;
			text-decoration: none;
			border-radius: .2em;
			&:hover{
				background: #e2e8ff;
				border: 1px solid #4b66d1;
				color: #4b66d1;
				transition: .2s;
				padding: 1em 0 .8em .8em;
				transform: scale(1.05);
			}
		}
		
		
	}
	
	& .banner.information , .banner.external{
		width: 100%;
		@media (width < 767px){
			& {
				display: flex;
				justify-content: space-between;
				& > a{
					width: calc(98% / 2);
				}
			}
		}
	}
	
	& a{
		display: block;
		text-align: left;
		
		& img{
			max-width: 100%;
			margin: auto auto .5em;
			&:hover{
				opacity: .5;
				transition: .2s;
			}
		}
	}
	
	& div.newshop{
		
		
	}
}

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;
		}
	}
}