@charset "utf-8";
body, * {
	margin: 0; padding: 0; font: 1em/1.75em sans-serif;
	box-sizing: border-box;
}

/* 色指定とか */

body {
	background: #eda; color: #000;
	background-image: repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.1) 16px, transparent 24px);
}

#main>section, #menu>section {
	background: rgba(255,255,255,0);
	background-image: linear-gradient(180deg, rgba(255,255,255,0) 4em, rgba(255,255,255,0.4) 4em);
}

header, footer {
background-color: #fbd;
background-image: linear-gradient(45deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5)), linear-gradient(-45deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.5));
background-size: 16px 16px;
}
h1, h2, h3, h4, h5, h6 { color: #254; }
#main>section>h3, #menu>section>h3 {
background-color: #9a8; 
background-image: linear-gradient(180deg, rgba(255,255,255,0.5),
 transparent 5%, rgba(255,255,255,0.8) 60%, transparent 60%, rgba(255,255,255,0.5) 95%, transparent),
radial-gradient(30% 50% at 40% 0.2em, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent);
text-shadow: #fff 1px 1px, rgba(0,0,0,0.5) -1px -1px;
border: 2px outset #666; border-radius:0.5em; padding: 0.3em 1em;
}
div.gallery >*{
	
	box-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,0.5); border-radius: 1em;
}
hr {
	border-bottom: 2px dotted #597; border-width:0 0 2px 0;
	width: 80%; margin:auto;
}
a { color: #254; text-decoration: underline dashed; }
a:visited { color: #824; }
a:hover { background: #fbd; }


aside { border: 1px dashed #254; font-size: 90%; padding:1em; }

/* 基本指定とか */
p, figure,
ul, ol, dl
{ margin: 0.2em; padding: 0.2em; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0.2em; }
h1 { font-size: 2em; } h2 { font-size: 1em; }
h3 { font-size: 1.5em; } h4 { font-size: 1.3em; }
h5, h6 { font-size: 1em; }

header, footer { padding: 0.2em; text-align: center; }
header h1, header h2,footer p, address
{ display: inline-block; padding: 0.1em 0.5em; }
header p,footer p{ margin: 0; padding: 0; }
li { margin: 0.1em 1.2em; padding: 0.2em; }
ul li { list-style: none; }

#menu a { line-height: 1em; padding: 0; }

.splitnav { text-align: center; }

img { max-width: 100%; height: auto; width /***/:auto; }


figure { text-align: center; margin: 0 auto; padding: 0.5em; }
figcaption { margin: auto; text-align: left; font-size: 95%; padding: 1em 0; }
p.data { text-align: right; font-size: 90%; }

div.gallery { display: flex; flex-wrap: wrap; }
div.gallery >* {
	width: 240px; object-fit: contain;
	text-align: left; margin-top: 1em;
	border-radius:1em; width: 240px; padding:0.5em;margin: 0.2em auto;
}
.gallery img{ height: 240px; object-fit: contain; }

/* #fixmenu */
#fixmenu { position: fixed; top: 8em; right: -4.5em; width: 8em; height: 3em;
	margin:0; padding: 0; }
#fixmenu li {
	margin: 0; padding: 0em 0 0em 0.6em;
	font-weight: bold; font-size: 1.5em;
	background: #fbd; border: 1px solid;
	border-radius: 1.5em 0 0 1.5em; 
	box-shadow: 2px 2px 2px #000 inset; opacity: 0.7;
}
#fixmenu li:hover	{
	box-shadow: 2px 2px 2px #000; opacity: 1;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

/* PC閲覧用 */
@media screen and (min-width: 800px) {
#pagenav	{ position: fixed; top: 6em; right: 0px; width: 6.5em; }
#pagenav li	{ border-radius: 50vh 0 0 50vh; }
}

/* PC閲覧用 */
@media screen and (min-width: 800px) {
div#box {
	display: flex; -webkit-display: flex;
	justify-content: center;
}
#main { order: 2; width: 100%; }
#menu { order: 1; width: 360px; }

#box { width: 90%; margin: 0 auto; padding: 0.5em; }
#main, #menu { margin: 0.5em; }
#main { padding: 1em; }
#menu section { border-radius: 1em; margin: 1em 0; }

p, figure,
ul, ol, dl
{ margin: 0.5em; padding: 0.5em; }

}