html,body{
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size:14px;
	margin:0;
	padding:0;
}
body{
	background:url("images/bg.jpg");
	background-size:cover;
}

.contents{
	width:100%;
	max-width:1200px;
	margin:auto;
}

header{
	background:url("images/header.jpg");
	background-size:cover;
}
h1{
	font-size:1em;
	color:#FFF;
	background:#444444;
	text-align:center;
	margin:0;
	padding:5px 0;
}
header .header_top{
	display:flex;
	justify-content:space-between;
	width:100%;
}
header .header_top img{
	width:auto;
}

nav{
	font-family: "vdl-megamarupop-futoline", sans-serif;
	font-style: normal;
	font-weight: 400;	
}
	nav a{
		color:#FFFFFF;
		text-decoration:none;
		text-shadow:2px 2px 1px #633f6e;
		padding:10px 0;
	}
		nav a:hover,nav li a:hover{
			color:#e8ccff;
			text-decoration:none;
			text-shadow:2px 2px 1px #633f6e;
			transition: 1.5s;
		}

	#sidebar nav{
		border-bottom:#222222 5px solid;
		background:#444444;
	}
		#sidebar nav a{
			display:block;
			border-bottom:#222222 1px dotted;
			text-align:center;
			width:calc(100% - 2em);
			margin:auto;
			padding:10px 1em;
		}
		#sidebar nav a span:before,#sidebar nav a span:after{
			content:"❤︎";
			margin:0 1em;
		}

main{
	min-height:calc(100vh - 188px);
	padding-bottom:80px;
}

	main .mainimage img{
		max-width:100%;
	}

	main .columns{
		display:flex;
		justify-content:space-between;
	}

		main #sidebar{
			width:25%;
	}
		main #content{
			width:75%;
	}

	main .tbl{
		padding: 0.2em 0.5em;
		margin: 10px auto 40px auto;
		color: #444444;
		background: #e8ccff;
		box-shadow: 0px 0px 0px 10px #e8ccff;
		border: dashed 2px #bd6dff;
		border-radius: 8px;
		max-width:90%;
		text-align:center;
	}
		main .tbl h2{
			font-family:"ab-j-gu", sans-serif;
			font-size:2.0em;
			font-style: normal;
			font-weight: 900;
			text-shadow: 
				white 2px 0px 0px, white -2px 0px 0px,
				white 0px -2px 0px, white 0px 2px 0px,
				white 2px 2px 0px, white -2px 2px 0px,
				white 2px -2px 0px, white -2px -2px 0px,
				white 1px 2px 0px, white -1px 2px 0px,
				white 1px -2px 0px, white -1px -2px 0px,
				white 2px 1px 0px, white -2px 1px 0px,
				white 2px -1px 0px, white -2px -1px 0px,
				white 1px 1px 0px, white -1px 1px 0px,
				white 1px -1px 0px, white -1px -1px 0px;
			}
		main .tbl h2 span{
			font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
			display:block;
			font-size:10px;
			font-weight:300;
		}
		main .tbl p {
			border-bottom:#bd6dff 1px dotted;
			margin: 0; 
			padding: 1em 0;
		}
			main .tbl p:last-of-type {
				border-bottom:none;
			}

		main .tbl img{
			max-width:100%;
		}
		main .tbl ul{
			list-style:none;
			display:flex;
			justify-content: flex-start
			align-items: center;
			flex-wrap: wrap;
			margin:0;
			padding:0;
		}
			main .tbl li{
				width:calc(100%/4 - 22px);
				padding:0 10px;
			}
				main .tbl li h3{
					text-shadow: 
						white 2px 0px 0px, white -2px 0px 0px,
						white 0px -2px 0px, white 0px 2px 0px,
						white 2px 2px 0px, white -2px 2px 0px,
						white 2px -2px 0px, white -2px -2px 0px,
						white 1px 2px 0px, white -1px 2px 0px,
						white 1px -2px 0px, white -1px -2px 0px,
						white 2px 1px 0px, white -2px 1px 0px,
						white 2px -1px 0px, white -2px -1px 0px,
						white 1px 1px 0px, white -1px 1px 0px,
						white 1px -1px 0px, white -1px -1px 0px;
					margin:0 0 1em 0;
					padding:0;
				}
				main .tbl li img{
					border:#4d4d4d 1px solid;
					width:100%;
				}
			main .tbl.menu li{
				width:calc(100%/3 - 22px);
				padding:0 10px;
			}
				main .tbl li img{
					width:100%;
					height:240px;
					object-fit: cover;
				}
			main .tbl.menu li h3 span{
				display:block;
				font-size:12px;
			}

footer{
	background:#444444;
	width:100%;
	margin:0;
	padding:10px 0;
}
	footer p{
		color:#FFF;
		font-size:10px;
		text-align:center;
	}

@media screen and (min-width: 750px) {
	.pc{
		display:block;
	}
	.sp{
		display:none;
	}
	
	header .header_top img.splogo{
		display:none;
	}

	.navToggle{
		display:none;
	}
	header nav{
		border-bottom:#222222 5px solid;
		background:#444444;
		padding:10px 0 5px 0;
	}
		header nav.globalMenuSp ul{
			list-style:none;
			display:flex;
			justify-content:space-between;
			align-items: center;
			max-width:1000px;
			width:100%;	
			margin:auto;
		}
}

@media screen and (max-width: 749px) {
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	.contents{
		max-width:100%;
	}
	header{
		box-shadow:0 3px 10px rgba(100,100,100,0.6);
		margin-bottom:20px;
	}
	h1{
		font-size:10px;
		margin:0;
		padding:0;
	}
	header .header_top{
		align-items: center;
		height:auto;
	}
		header .header_top img.logo,header .header_top img.tel{
			display:none;
		}
		header .header_top .splogo{
			display:block;
			max-width:100%;
			width:100%;
			height:auto;
			margin:0 auto;
		}
	nav a{
		color:#FFF;
	}
	nav.globalMenuSp {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		text-align: center;
		transform: translateY(-100%);
		transition: all 0.6s;
		width: 100%;
	}

		nav.globalMenuSp ul {
			border-bottom: #222222 5px solid;
			background: #444444;
			width: 100%;
			margin: 0 auto;
			padding: 10px 0 5px 0;
		}

		nav.globalMenuSp ul li {
			border-bottom:#222222 1px dotted;
			font-size: 1.1em;
			list-style-type: none;
			padding: 0;
			width: 100%;
		}

		/* 最後はラインを描かない */
		nav.globalMenuSp ul li:last-child {
			padding-bottom: 0;
			border-bottom: none;
		}

		nav.globalMenuSp ul li a {
			display: block;
			padding: 1em 0;
		}
		/* このクラスを、jQueryで付与・削除する */
		nav.globalMenuSp.active {
			transform: translateY(0%);
		}
		.navToggle {
			display: block;
			position: fixed;    /* bodyに対しての絶対位置指定 */
			right: 13px;
			top: 7%;
			width: 42px;
			height: 51px;
			cursor: pointer;
			z-index: 3;
			background: #222222;
			text-align: center;
		}
			.navToggle span {
				display: block;
				position: absolute;    /* .navToggleに対して */
				width: 30px;
				border-bottom: solid 3px #eee;
				-webkit-transition: .35s ease-in-out;
				-moz-transition: .35s ease-in-out;
				transition: .35s ease-in-out;
				left: 6px;
			}
			.navToggle span:nth-child(1) {
				top: 9px;
			}
			.navToggle span:nth-child(2) {
				top: 18px;
			}
			.navToggle span:nth-child(3) {
				top: 27px;
			}
			.navToggle span:nth-child(4) {
				border: none;
				color: #eee;
				font-size: 9px;
				font-weight: bold;
				top: 34px;
			}
			/* 最初のspanをマイナス45度に */
			.navToggle.active span:nth-child(1) {
				top: 18px;
				left: 6px;
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			/* 2番目と3番目のspanを45度に */
			.navToggle.active span:nth-child(2),
			.navToggle.active span:nth-child(3) {
				top: 18px;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				transform: rotate(45deg);
			}

	#sidebar{
		display:none;
	}
	main #content{
		width:90%;
		margin:auto;
	}
	
		main .tbl li,main .tbl.menu li{
			width:calc(100%/2 - 22px);
			padding:0 10px;
		}
			main .tbl li img {
				height: 120px;
			}
}