@charset "utf-8";

@import url("normalize.css");
@import url("common.css");

/*-------------------------------------------------------*/
/* 共通設定
/*-------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
a, span, em, strong, b, i,
p, div, dl, dt, dd, ol, ul, li,
header, footer, hgroup, figcaption, figure, menu, nav, article, section, aside, details, fieldset,
form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td { box-sizing: border-box; }

.container { width: 100%; max-width: 1200px; min-width: 640px; margin: 30px auto; }
.contents { width: 100%; max-width: 1200px; min-width: 640px; margin: 80px auto 20px; }
.contents .inner { width: calc(100% - 20px); margin: 0 auto; }

.after::after { content: "\A"; white-space: pre; }
body { line-height: 1.2; font-size: 1.6rem; }

h1, h2 { text-align: center; font-weight: bold; font-size: 20px; }

.bar7 {
	display: block; overflow: hidden; margin: 10px 0 15px 0; clear: both; padding: 10px;
	background-color: #EEF; border-left: 5px solid #66F; border-right: 5px solid #66F; text-align: center;
}


header {
	position: sticky; left: 0; top: 0; z-index: 1000;
	width: 100%; height: 70px;
	display: block;
	background: rgba(230,230,230,0.8); border-bottom: 1px solid #999;
}
header nav.menu {
	max-width: 1200px; width: calc(100% - 20px); height: 70px;
	margin: 0 auto; padding: 15px 0;
}
header nav.menu ul {
	width: auto; height: 40px;
	display: flex; flex-direction: row;
}
header nav.menu li {
	width: auto; height: 40px;
	margin-right: 5px;
}
header nav.menu li:last-child { margin-right: 0; }

header nav.menu li span,
header nav.menu li a {
	height: 40px; line-height: 40px; display: block;
	padding: 0 12px; color: #fff; text-decoration: none;
	border-radius: 8px; white-space: nowrap;
}

span.login { background: #4657eb; }
a.btn { padding: 6px 12px; background: #28a745; color: #fff; text-decoration: none; border-radius: 4px; }
a.btn:hover { background: #104c1d; }
a.btn2 { padding: 6px 12px; background: #a78328; color: #fff; text-decoration: none; border-radius: 4px;  }
a.btn2:hover { background: #bf2d3e; }
a.btn3 { width: 120px !important; display: inline-block; padding: 6px 12px; background: #a78328; color: #fff; text-align: center; text-decoration: none; border-radius: 4px;  }
a.btn3:hover { background: #bf2d3e; }

.pctb { display: inline !important; }
.sp { display: none !important; }
@media screen and (max-width: 767px) {
	.pctb { display: none !important; }
	.sp { display: inline !important; }
}

.text-center, .text_c { text-align: center; }
.text-right, .text_r { text-align: right; }
.block { display: block; }
/*-------------------------------------------------------*/
/* トップページ
/*-------------------------------------------------------*/
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
td { border: 1px solid #ccc; padding: 7px; text-align: left; background-color: #fff; }
th { background-color: #eee; font-weight: 700; border: 1px solid #ccc; padding: 7px; text-align: center; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }

/*------------------------------------------------------------------------------------------------*/
/*　DIVテーブル
--------------------------------------------------------------------------------------------------*/
.tbl, .td, .th, .captbl, .captbl div { box-sizing: border-box; }
.tbl { display: flex; flex-wrap: wrap; width: 100%; }
.tbl div { vertical-align: top; padding: 10px; border: 1px solid #CCC; }
.th { width: 30%; min-width: 200px; }
.td { width: 70%; }

.save { display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 30px; text-align: center; }
.save div { width: calc(100% / 2); vertical-align: top; padding: 7px; text-align: center; }

/*------------------------------------------------------------------------------------------------*/
/*　フォーム設定
--------------------------------------------------------------------------------------------------*/
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], textarea { border-radius: 5px; padding: 5px; font-size: 100%; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus { border: 1px solid #F66; background-color: #FEE; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"] { width: 100%; max-width: calc(100% - 10px); height: 30px; color: #333; background-color: #FFF; border: 1px solid #999; }
input[type="number"] { text-align: right; }
/*--------*/
button[type="submit"] { color: #FFF; font-weight: bold; font-size: 112.5%; width: auto; max-width: 300px; min-width: 160px; padding: 7px; margin-bottom: 10px; background-color: rgba(4,4,4,1.0); border: 1px solid rgba(0,0,0,1.0); border-radius: 10px; transition: 0.5s; }
button[type="submit"]:hover { background-color: #F33; border: 1px solid #C00; color: #FFF; cursor: pointer; transition: 0.5s; }
/*--------*/
button[type="button"] { color: #000; font-size: 87.5%; width: auto; max-width: 300px; min-width: 160px; background-color: #CCC; border: 1px solid #666; padding: 7px; border-radius: 10px; }
button[type="button"]:hover { color: #CCC; background-color: #666; border: 1px solid #333; cursor: pointer; }
/*--------*/
textarea { width: 100%; max-width: calc(100% - 10px); height: 100px; line-height: 20px; ime-mode: active; background-color: #FFF; border: 1px solid #999; }
/*--------*/
select { background-color: white; border: thin solid blue; border-radius: 4px; display: inline-block; font: inherit; padding: 0.5em 3.5em 0.5em 1em; margin: 0; box-sizing: border-box; }

button.bg_red { background: #FF6633 !important; color: #FFF !important; }
button.bg_blue { background: #9966FF !important; color: #FFF !important; }

/*------------------------------------------------------------------------------------------------*/
/*　ログインページ
--------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
/*　ログイン:login.php＆opt.php
--------------------------------------------------------------------------------------------------*/
body.login div.login-tbl { width: 100%; display: grid;  grid-template-columns: 1fr 1fr; margin-bottom: 30px; }
body.login div.login-tbl > div {
	border: 1px solid #CCC;
	font-weight: bold;
	text-align: center;
	padding: 10px 5px;
	font-size: 87.5%;
}

body.login input[type=text], input[type=password] { width: calc(100% - 10px); padding: 0.7em; }
body.login button { padding: 0.5em 2em; background: #007bff; color: #fff; border: none; border-radius: 4px; }
body.login button:hover { background: #0056b3; }
body.login .err { color: red; font-weight: bold; }