/* -------------------------------------------------------------------------- */
/* calc value */
body {
	--font-size: 15px;

	--bg-color: #f0f0f0;
	--font-color: #333;
	--font-color-hover: #04f;

	--bg-color-overlay: #e0e0e0;

	--header-height: 45px;
	--font-size-header: 16px;
	--bg-color-header: #357;
	--font-color-header: #fff;
	--font-color-hover-header: #fa0;

	--font-size-footer: 16px;
	--font-color-footer: #fff;
	--bg-color-footer: #357;

	--font-size-menu: 16px;
	--bg-color-menu: #357;
	--font-color-menu: #fff;
	--font-color-hover-menu: #fa0;

	--font-size-menu: 16px;
	--bg-color-menu: #fff;
	--font-color-menu: #333;
	--font-color-hover-menu: #f00;

	--col-margin: 2px;
	--section-padding: 10px;
	--sidebar-width: 330px

}

/* -------------------------------------------------------------------------- */
/* 全体設定 */

body {
	background-color: var(--bg-color);
	color: var(--font-color);

	font-family: arial,helvetica,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"MS Pゴシック",clean,sans-serif;
	font-size: var(--font-size);
	font-style: normal;
	font-weight: normal;
}
a:link, a:visited {
	color: #26f;
}

/* -------------------------------------------------------------------------- */
/* 全体共通 */

body.debug {
/*	background-color: #f0fff0;*/
}

a {
	text-decoration: none;
}
a:hover, a:active {
	color: var(--font-color-hover);
	text-decoration: underline;
}

.clear { clear:both; }
.clear hr { display:none; }

th {
	text-align: center;
	font-weight: bold;
	color: #fff;
	background-color: #888;
}

ul, ol {
	padding-left: 1.5em;
}

td.center { text-align: center; }

.hide {
	display: none;
}

/* section内blockの上下余白 */
.p {
	margin: 1em 0;
}

.even td {
	background-color:#fff4e8
}

input[type='number'].sm {
	width: 4em;
}

/* ---------------------------------------------------------------- */
/* Table関連 */

.data_list {
	border-collapse: collapse;
}

.data_list th, .data_list td {
	border: 1px solid #555;
	padding: 0.4em;
}

.data_list .bdl {
	border-left-width: 2px;
}
.data_list .bdr {
	border-right-width: 2px;
}
.data_list .bdt {
	border-top-width: 2px;
}
.data_list .bdb {
	border-bottom-width: 2px;
}

/* noborder */
table.noborder {
	margin: 0.4em;
}
table.noborder th, table.noborder td {
	border: 0;
	padding: 0.3em;
}


/* -------------------------------------------------------------------------- */
/* body */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* -------------------------------------------------------------------------- */
/* header */

header {
	width: 100%;
	height: var(--header-height);
}

.header-inner {
/*	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;*/
	height: var(--header-height);

	background: var(--bg-color-header);
	color: var(--font-color-header);
	border-bottom: 1px solid #999;

	display: flex;

	visibility: visible;
	transition: 0.3s ease-out;
	transform: translateY(0);
}

.header-inner.hide {
	visibility: hidden;
	transform: translateY(-100%);
}


/* h1 */
header h1 {
	display: flex;
	margin: 0;
	font-size: var(--font-size-header);
}

header a, header a:hover {
	text-decoration: none;
}
header a:link, header a:visited {
	color: var(--font-color-header);
}
header a:hover {
	color: var(--font-color-hover-header);
}

.site_logo {
	padding-left: 6px;
}

.site_title {
	padding-left: 6px;
}

/* space */
header .space {
	flex-grow: 1;
}

/* menu_btn */
.menu_btn {
	width: 45px;
	padding-left: 6px;

}
.menu_btn_inner {
	text-align: center;
    padding-top: 5px;
    font-size: 35px;
}
.menu_btn_inner a:hover {
	text-decoration: none;
}
.menu_btn_inner a {
	outline: none;  /* focus枠を消す */
}

/* 上下中央配置 */
.site_logo, .site_title, .menu_btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* nav */

nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	list-style: none;

	width: 100%;
/*	height: var(--menu-height);*/
	margin: 0;
	padding: 0;

	background: var(--bg-color-menu);
	color: var(--font-color-menu);
	font-weight: bold;
	border-bottom: 1px solid #999;

	font-size: var(--font-size-menu);
}

nav a, nav a:hover {
	text-decoration: none;
	transition: 0.2s;
}
nav a:link, nav a:visited {
	color: var(--font-color-menu);
}
nav a:hover {
	color: var(--font-color-hover-menu);
}

nav li {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 0.5em 1em;

	white-space: nowrap;
	overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* footer */
footer {
	margin-top: auto;
	font-size: var(--font-size-footer);
	color: var(--font-color-footer);
	background-color: var(--bg-color-footer);
	padding: 0.5em 0.5em
}

footer a:link, footer a:visited, footer a:hover {
	color: var(--font-color-footer);
}
footer a {
	text-decoration: none;
}


/* -------------------------------------------------------------------------- */
/* bodyer */

.bodyer {
/*	background-color: #f0f0f0;*/
	padding-left: var(--col-margin);
	padding-right: var(--col-margin);
}


/* -------------------------------------------------------------------------- */
/* col */

.col {
	margin-left: var(--col-margin);
	margin-right: var(--col-margin);
}

/* -------------------------------------------------------------------------- */
/* Topレベルsection */

.section {
	background-color: #ffffff;
	box-shadow: 0 1px 5px rgba(0, 0, 1, 0.05);
	margin-top: calc(var(--col-margin) * 2);
	margin-bottom: calc(var(--col-margin) * 2);
	padding: 0 var(--section-padding);
	overflow-x: hidden;
}

.section h1, .section h2, .section h3, .section h4  {
	margin: 0.5em 0;
}

.section h1 {
	font-size: 1.2rem;
}
.section h2 {
	font-size: 1.15rem;
}
.section h3 {
	font-size: 1.1rem;
}
.section h4 {
	font-size: 1.05rem;
}
.section h5 {
	font-size: 1.0rem;
}
/* -------------------------------------------------------------------------- */
/* col-main */
.col-main {
	flex: 1;

	background-color: #fff0f0;
	background-color: inherit;
}


/* -------------------------------------------------------------------------- */
/* col-sub */
.col-sub {
/*	flex: 1 330px;*/
	width: var(--sidebar-width);

	display: none;
	background-color: #f0f0ff;
	background-color: inherit;
}

/* -------------------------------------------------------------------------- */
/* overlay */
.overlay {
	position: fixed;
/*	top: var(--header-height);*/
	top: 0;
	right: 0;
	width: 80%;
/*	height: calc(100% - var(--header-height));*/
	height: 100%;
	z-index: 1000;
	overflow-x: hidden;

	color: var(--font-color);
	background-color: var(--bg-color-overlay);

	padding-left: calc(var(--col-margin) * 1);
	padding-right: calc(var(--col-margin) * 1);

	box-shadow: 0 1px 5px rgba(0, 0, 1, 0.05);

	visibility: hidden;
	transition: 0.3s ease-out;
	transform: translateX(100%);
}

.overlay.show {
	visibility: visible;
	transform: translateX(0);
}

.overlay .section {
	margin-top: calc(var(--col-margin) * 1);
	margin-bottom: calc(var(--col-margin) * 1);
}


.overlay-close {
    position: fixed;
/*	top: var(--header-height);*/
	top: 0;
    left: 0;
    width: 100%;
/*	height: calc(100% - var(--header-height));*/
	height: 100%;

	z-index: 100;

	visibility: hidden;
	transition: 0.3s ease-out;

    background: #000;
    opacity: 0;
}
.overlay-close.show {
	visibility: visible;
    opacity: 0.5;
}

/* ========================================================================== */
/* site customize */


/* ---------------------------------------------------------------- */
/* general */


div.err {
	background-color: #ffcccc;
	padding: 0.4em 0.8em;
	border-radius: 0.5em;
}
div.msg {
	background-color: #ccffcc;
	padding: 0.4em 0.8em;
	border-radius: 0.5em;
}


/* ---------------------------------------------------------------- */
/* title list */

.title, .info {
	margin: 2px 0;
}
.info {
	display: flex;
	font-size: 90%;
}
/*.info > * {
	display: flex;
	align-items: center;
}*/
.site {
	margin-left: 0.4em;
}
.time {
	white-space: nowrap;
}

/* ========================================================================== */
/* JQuery UI */

.ui-button {
	padding: 0.4em 0.4em;
}

a.ui-state-active,
a:link.ui-state-active,
a:visited.ui-state-active {
	color: #ffffff;
}

/* ========================================================================== */
/* Media Queries */
/* ========================================================================== */

@media screen and (min-width:10px){
	/* bodyer */
	.bodyer {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* col-main */
	.col-main {
	}

	/* col-sub */
	.col-sub {
		display: block;
	}

	.menu_btn {
		display: none;
	}
}