@charset "utf-8";

* {
	font-family: 'VL Pゴシック', 'Helvetica Neue', Arial, Roboto, 
		'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 
		Meiryo, 'Open Sans', sans-serif;
}

.serif {
	font-family: 'FreeSerif', 'IPA P明朝', 'Times New Roman',
		'ヒラギノ明朝 Pr6 W6', 'Hiragino Mincho Pro',
		'HGS明朝E', 'メイリオ', Meiryo, serif;
}

html {
	height: 100%;
	color: #313131;		/* 墨 */
	font-weight: 400;
	font-size: 1em;
	line-height: 1.4;
	text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration: none;
	color: inherit;
}

*,
:before,
:after {
	box-sizing: border-box;
}

/******************************
	body -> header, main, aside, footer
 ******************************/

body {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

body {
	--deepColor: hsl(var(--hue, 0), var(--satuation, 33%), 33%);	/* button (strong) */
	--darkColor: hsl(var(--hue, 0), var(--satuation, 33%), 50%);	/* button (hover) */
	--paleColor: hsl(var(--hue, 0), var(--satuation, 33%), 88%);	/* sidebar */
	--baseColor: hsl(var(--hue, 0), var(--satuation, 67%), 76%);	/* header */
	--lightColor: hsl(var(--hue, 0), var(--satuation, 67%), 94%);	/* button (normal) */
	--brightColor: hsl(var(--hue, 0), var(--satuation, 67%), 97%);	/* 未使用? */
}

/******************************
	header (fixed navbar)
 ******************************/

header {
	z-index: 2000;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 40px;
	flex: none;
	display: flex;
	font-size: 1em;
	color: #222;
	background-color: var(--baseColor);
	text-align: center;
	align-items: center;
}

header a {
	color: #222;
	border-bottom: 0;
}

header a:hover {
	color: var(--darkColor);
}

.nav-home, 
.nav-info {
	flex: none;
	height: 32px;
    margin: 0 12px 0 12px;
}

.nav-date {
	flex: none;
    margin: 0 8px;
	font-size: 24px;
	text-shadow: 3px 3px 2px var(--lightColor), 3px -3px 2px var(--lightColor), -3px 3px 2px var(--lightColor), -3px -3px 2px var(--lightColor);
	text-align: left;
}

.nav-title {
	flex: none;
    margin: 0 8px;
	font-size: 20px;
	font-weight: 700;
	text-align: left;
}

.nav-subtitle {
    margin: 0 0.5em;
	text-align: left;
}
@media (max-width:768px) {
	.nav-subtitle {
		display: none;
	}
}

.nav-links {
    margin: 0 0.5em;
	flex: auto;
	display: flex;
	align-items: center;
}

.nav-links a {
	flex: initial;
    margin: 0 0.5em;
}

.flex-gutter {
	flex: auto;
}

/******************************
	nav
 ******************************/

nav {
	z-index: 200;
	position: fixed;
	top: 40px;
	width: 100%;
	height: 32px;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	background: var(--deepColor);
	color: #fff;
	margin: 0;
	padding: 0 40px;
	align-items: center;
}

nav > .nav-item { flex: 1; }
nav > .nav-dropdown { flex: 1; }
nav > .nav-wide { flex: 2 !important; }

@media (max-width:992px) {
	nav > .nav-omit { display: none; }
}


.nav-dropdown {
	float: left;
	overflow: hidden;
}

.nav-dropdown .dropbtn {
	cursor: pointer;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	background-color: inherit;
	color: inherit;
	font-size: inherit;  
	font-family: inherit;
}
.nav-dropdown .dropbtn:hover {
	color: #ccc;
}

.dropdown-content {
	display: none;
	position: absolute;
  	top: 32px;
	background-color: var(--brightColor);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color: #222;
	width: 100%;
	padding: 2px 2px;
	border: none;
	font-size: inherit;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: var(--paleColor);
}

.show {
	display: block;
}

/******************************
	aside / Sidebar Wrapper / footer
 ******************************/

aside {
	background-color: var(--paleColor);
}

.slider {
	z-index: 1200;
	position: fixed;
	top: 40px;
	right: 0px;
	width: 320px;
	height: calc(100% - 40px);
	margin-right: -320px;
	padding: 1.5em 1.5em;
	overflow-y: auto;
	transition: all 0.4s ease;
}

.slider.toggled {
	right: 320px;
}

aside p {
	margin: 0 0 1em;
}

aside p a {
	text-decoration: underline dashed;
}
aside p a:hover {
	color: var(--darkColor);
}

.info-title {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	margin: .25em 0 .75em;
}

.info-version {
	font-size: 0.8em;
	font-weight: 400;
	white-space: nowrap;
}
.info-version:before {
	content: 'ver ';
}

.info-h {
	font-size: 1em;
	margin: 0 0 1em;
}

/* footer (in aside) */

footer {
	margin-bottom: 1rem;
	padding: 8px 16px;
	flex: none;
	background: var(--deepColor);
	color: white;
	font-size: .9em;
	text-align: center;
}

footer a {
	padding-bottom: 1px;
	color: var(--lightColor);
	border: 0;
	text-decoration: underline dashed;
}
footer a:hover {
	color: white;
}

.footer-credits {
	margin: 0;
	padding: 0;
}
.footer-credit {
	display: block;
	margin: 0;
}
.footer-credit-separator {
	display: none;
}

.info-modified-date {
	width: 100%;
	margin: 1em 0;
	text-align: center;
}
.info-modified-date:before {
	content: 'last modified: ';
}

.info-copyright {
	font-size: 0.9em;
}
.info-copyright:before {
	content: 'Copyright ';
}
.info-copyright:after {
	font-weight: 700;
	content: ' drawongeo.com';
}

/******************************
	main (Site content)
 ******************************/

main {
	margin-top: 40px;
	width: 100%;
	flex: 1 0 auto;
	background-color: #FFF;
}

.container {
	margin: 1em 1em;
}

.container-limited {
	max-width: 50em;
}

.container-fit {
	margin: 0 !important;
}

.package {
	margin: 1em 0 0 0;
}
.package:first-child {
	margin: 0;
}

/******************************
	Flex system (grid and grid-cell)
 ******************************/

.grid {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gutters { margin: -1em 0 1em -1em; }
.grid-gutters > .grid-cell { padding: 1em 0 0 1em; }

.grid-fit > .grid-cell { flex: 1; }
.grid-fit > .grid-cell2 { flex: 2; }
.grid-full > .grid-cell { flex: 0 0 100%; }
.grid-1of2 > .grid-cell { flex: 0 0 50%; }
.grid-1of3 > .grid-cell { flex: 0 0 33.3333%; }
.grid-1of4 > .grid-cell { flex: 0 0 25%; }

.grid-flexCells > .grid-cell {
	display: flex;
}

.grid-top { align-items: flex-start; }
.grid-bottom { align-items: flex-end; }
.grid-center { align-items: center; }

.grid-justifyCenter {
	justify-content: center;
}

.grid-cell { flex:1 }
.grid-cell-top { align-self: flex-start; }
.grid-cell-bottom { align-self: flex-end; }
.grid-cell-center { align-self: center; }
.grid-cell-autoSize { flex: none !important; }


.svg-icon {
	width: 32px;
	height: 32px;
}

.label {
	margin-right: 0.6em;
	font-size: 1.333em;
}

.badgeLight {
	padding: 0.4em 0.8em;
	background-color: #ddd;
	color: #222;
	border: 1px solid #222;
	border-radius: 4px;
}

.badgeDark {
	padding: 0.4em 0.8em;
	background-color: #222;
	color: #fff;
	border: 1px solid #222;
	border-radius: 4px;
}

/******************************
	Button
 ******************************/

.button {
	padding: 0.6em 0.8em;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-size: inherit;
	line-height: normal;
	text-decoration: none;
	outline: none;
	background-color: var(--lightColor);
	color: #222;
/*
	white-space: nowrap;
*/
}

.button-small {
	padding: 0.2em 0.4em !important;
}

.button-emphasized {
	background-color: var(--deepColor) !important;
	color: #FFF !important;
}

.button-border {
	border: 1px solid #222 !important;
}

.button:not(:disabled):hover {
	background-color: var(--darkColor) !important;
	color: #FFF !important;
}

/***
 * Form and input
 ***/

.input-group {
	margin-bottom: 1.5em;
}

.input-box {
	display: flex;
}


.input-label {
	font-size: 1.25em;
	margin: 0 0 1.12528em;
}


.input-box-field {
	border: 1px solid var(--lightColor);
	padding: 0.4em 0.6em;
}

.input-box-field:first-child, 
.input-box-item:first-child {
	border-radius: 4px 0 0 4px;
}
.input-box-field:last-child, 
.input-box-item:last-child {
	border-radius: 0 4px 4px 0;
}

.itemize p,
.itemize button {
	margin: 0 0 0.5em !important;
}