@charset "UTF-8";

/* Reset
------------------------------------------------------------------*/
* { box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
figure, figcaption,
article, section, nav, header, footer {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	}

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

body {
	width: 100%;
	font-family: sans-serif;
	font-weight: 400;
	background-color: #fff;
	background-size: 20% auto;
	background-position: bottom 7vw left 5vw;
	}

html {
	overflow-y: scroll;
	font-size: 62.5%;
	color: #666;
	}


/* Basic elements
------------------------------------------------------------------*/
img {
	border: none;
	width: 100%;
	height: auto;
	}

ul, ol {
	list-style: none;
	list-style-position: inside;
	}

dl { margin: 0;}

dl dt { margin: 0;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	}

blockquote, pre, dl, ol, ul, th, td {}

p { margin: 0;}

ul, ol, dl { list-style-position: outside;}

/* Base Link
------------------------------------------------------------------*/
a {
	color: #094;
	text-decoration: none;
	}
	
a:hover {
    color: #094;
    text-decoration: none;
	}

a:active,
a:focus { outline: none;}

/* Font
------------------------------------------------------------------*/
/* type */
h1, h2, h3, h4, h5, h6 { font-weight: 700;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: 700;}


table th,
table td {
	vertical-align: top;
	text-align: left;
	}

/* リンクの付いたイメージは全て半透明になる */
a:hover img.hover,
span:hover img.hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

/* header ___________________ */

header {
	margin: 0px;
	padding: 0;
	background-color: #809ebb;
	}

header li {
	font-size: 1.8rem;
	line-height: 1.5em;
	font-weight: bold;
	color: #fff;
	font-family: 'Paytone One', sans-serif;
	}

header ul {
	max-width: 980px;
	margin: 0px auto;
	padding: 10px;
	top: 0px;
	display: flex;
	left: 50%;
	justify-content: space-between;
	align-items: stretch;
	}

header #s {
	border: none;
	background-color: #fff;
	border-radius: 3px;
	padding: 3px;
	}

header #searchSubmit {
	border: none;
	background-color: #fff;
	color: #666;
	border-radius: 3px;
	padding: 3px;
	}

/* main ___________________ */

main {
	margin: 20px 0px 30px;
	min-height: 70vh;
	}

main h1 {
	max-width: 980px;
	padding: 0px;
	margin: 0px;
	font-size: 2.6rem;
	line-height: 1.5em;
	font-weight: bold;
	color: #809ebb;
	font-family: 'Paytone One', sans-serif;
	}

main p {
	font-size: 1.6rem;
	line-height: 1.5em;
	margin-bottom: 1em;
	}

main p.day { margin-bottom: 1em;}
main p.desc { margin-bottom: 3em;}
main p.time { margin-bottom: 1em;}

main article h1,
main h1.single {;
	font-size: 2rem;
	line-height: 1.5em;
	margin-bottom: 1em;
	}

main article h1 a { color: #809ebb;}

.post-categories {
	margin-bottom: 1em;
	display: flex;
	}

.post-categories li {
	margin-right: 0.5em;
	}

main article .post-categories a,
main .post-categories a {
	color: #fff;
	background-color: #809ebb;
	padding: 3px 10px;
	border-radius: 3px;
	font-weight: bold;
	}


/* pagenation ___________________ */

.pagenation ul {
	display: flex;
	font-size: 1.6rem;
	justify-content: center;
	}

.pagenation li {
	margin-right: 0.5em;
	width: 2em;
	display: block;
	}

.pagenation li:last-child { margin-right: 0px;}

/* Hibiscus ___________________ */

.hibiscus img { margin-top: 30px;}


/* article ___________________ */

article {
	border-top: dotted 1px #094;
	padding: 3em 0px;
	}

/* Navi ___________________ */

nav {
	margin: 20px 0px 30px 20px;
	width: 100%;
	}

nav h1 {
	margin-bottom: 1px;
	padding: 5px 10px;
	text-align: center;
	background-color: #094;
	color: #fff;
	font-size: 1.6rem;
	border-radius: 5px;
	}

nav .entries a {
	color: #094;
	text-decoration: none;
	font-size: 1.6rem;
	padding: 5px 10px;
	background-color: #a4d5aa;
	margin-bottom: 1px;
	border-radius: 5px;
	display: block;
	}

nav .entries h2 {
	color: #094;
	text-decoration: none;
	font-size: 1.4rem;
	}

nav .entries p {
	color: #094;
	text-decoration: none;
	font-size: 1.2rem;
	}

nav li a {
	display: block;
	color: #094;
	text-decoration: none;
	font-size: 1.6rem;
	padding: 5px 10px;
	background-color: #a4d5aa;
	margin-bottom: 1px;
	border-radius: 5px;
	}

nav li:last-child,
nav .entries:last-child { margin-bottom: 10px;}

nav li a:hover,
nav li a:active,
nav li a:visited { color: #094;}

nav li {
	margin: 0px;
	padding: 0px;
	}

.power p { font-size: 1.4rem;}

/* footer ___________________ */

footer {
	border-top: 1px solid #809ebb;
	width: 100%;
	margin: 30px auto 0px;
	}

small {
	max-width: 980px;
	padding: 20px 10px 10px;
	margin: 0px auto;
	display: block;
	font-size: 1.2rem;
	line-height: 1.5em;
	}

address {
	max-width: 980px;
	padding: 0px 10px 10px;
	margin: 0px auto;
	display: block;
	font-size: 1.2rem;
	line-height: 1.5em;
	}


/* グリッド ___________________ */

body {
	display: grid;
	grid-template-columns: [left] 1fr [centerL] 980px [centerR] 1fr [right];
	grid-template-rows: [head] auto [main] auto [foot] auto [bottom];
	}

header {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	}

main {
	grid-column-start: centerL;
	grid-column-end: centerR;
	grid-row-start: main;
	}

nav {
	grid-column-start: centerR;
	grid-column-end: navi;
	grid-row-start: main;
	}

footer  {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: foot;
	}


@media screen and (max-width: 767px) {
	
body {
	grid-template-columns: [left] 20px [mainL] auto [mainR] 20px [right];
	grid-template-rows: [head] auto [img] auto [main] auto [navi] auto [foot] auto [bottom];
	}

header {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: head;
	}

.hibiscus {
	grid-column-start: mainL;
	grid-column-end: mainR;
	grid-row-start: img;
	}

main {
	grid-column-start: mainL;
	grid-column-end: mainR;
	grid-row-start: main;
	}

nav {
	grid-column-start: mainL;
	grid-column-end: mainR;
	grid-row-start: navi;
	}

footer  {
	grid-column-start: left;
	grid-column-end: right;
	grid-row-start: foot;
	}

nav { margin: 0px;}

.hibiscus { text-align: center;}
.hibiscus img { width: 50%;}
	
}