html {
	font-size: 62.5%;
}

/*リセット*/
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,
button,
input,
textarea {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	line-height: 1;
}

* {
	appearance: none;
}

a,
i.fa,
i.fas,
i.fab {
	cursor: pointer;
	text-decoration: none;
}

.container {
	width: calc(100% - 165px - 10em);
	margin: 15px auto;
	background: rgba(255, 255, 255, 0.95);
	padding: 2em;
	z-index: 2;
	margin-left: calc(190px + 3em);
	min-height: calc(100vh - 86px);
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
	overflow-y: auto;
}

.container .section_middle {
	width: 1000px;
}

.container .section_small {
	width: 100%;
}

.container.full {
	max-width: 100%;
}

.container.big {
	max-width: 960px;
}

.container.middle {
	max-width: 500px;
}

.container.mini {
	max-width: 320px;
}

.container.small {
	max-width: 280px;
}

body {
	font-family: "メイリオ", Meiryo, sans-serif;
	font-style: normal;
	line-height: 1.5em;
	font-size: 14px;
	font-weight: 400;
	color: #2f2e33;
	width: 100%;
	display: flex;
	box-shadow: 1px 1px 2px #50a3a2;
	background: #f3f2f1;
	/* background: -webkit-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: -moz-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: -o-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: linear-gradient(to bottom right,#5058a3 0%,#53b8e3 100%);
	background: linear-gradient(to bottom right,#7ECAF7 0%,#1D0000 100%);
	background: linear-gradient(to bottom right,#1C144E 0%,#1D0000 100%); */
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background: linear-gradient(to right, #00dbde, #fc00ff) !important;
	animation: fadein 1.5s forwards;
}

@keyframes fadein {
	0% {
		opacity: 0.2
	}

	100% {
		opacity: 1
	}
}

button {
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}

.td_btn {
	width: 150px;
	text-align: center;
}

.search {
	width: 100%;
	text-align: center;
	display: flex;
}

textarea,
select,
input[type="url"],
input[type="search"],
input[type="datetime-local"],
input[type="time"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="text"],
input[type="password"] {
	border: 1px solid #ccc;
	text-align: left;
	width: calc(100% - 2px - 1em);
	padding: 0.5em 0.5em;
	vertical-align: middle;
	color: #2f2e33;
}

select {
	color: currentColor;
}

/* input[type="search"]{
  width: calc(100% - 8%);
} */

input[type="checkbox"] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
	border: 1px solid #2f2e33;
	appearance: auto;
}

input[type="radio"] {
	width: 15px;
	height: 15px;
	vertical-align: top;
	border: 1px solid #2f2e33;
	appearance: auto;
}

textarea.long {
	min-height: 100px;
}

.search_area {
	margin-bottom: 15px;
}

.search_area input {
	margin-bottom: 0.5rem;
}

select {
	width: calc(100% - 2px);
}

.center {
	text-align: center;
}

.gray {
	background: #ccc;
}

.btn {
	cursor: pointer;
	padding: 0.5em 1em;
	border: none;
	border-radius: 2px;
	display: inline-block;
	vertical-align: top;
	transition: all 0.5s 0s ease;
	min-width: 5em;
	text-align: center;
}

.btn:hover {
	filter: invert(100%);
}

tr .btn {
	padding: 0.5em 2em;
}

.btn-default {
	border: 1px solid #2f2e33;
	background: #2f2e33;
	color: #fff !important;
}

.btn-edit {
	border: 1px solid #3a5199;
	background: #3a5199;
	color: #fff !important;
}

.btn-search {
	border: 1px solid blueviolet;
	background: blueviolet;
	color: #fff !important;
}

.btn-list {
	border: 1px solid #7d4f1e;
	background: #7d4f1e;
	color: #fff !important;
}

.btn-green {
	border: 1px solid #67baca;
	background: #67baca;
	color: #fff !important;
}

.btn-danger {
	border: 1px solid #af1c1c;
	background: #af1c1c;
	color: #fff !important;
}

.btn-small {
	font-size: 8px;
	padding: 0;
}

/*login*/
/*header*/
header {
	position: fixed;
	height: calc(100vh - 58px);
	width: calc(200px - 2em);
	background: rgba(255, 255, 255, 0.95);
	/* background: -webkit-linear-gradient(top left,#5058a3 50%,#53b8e3 100%);
	background: -moz-linear-gradient(top left,#5058a3 50%,#53b8e3 100%);
	background: -o-linear-gradient(top left,#5058a3 50%,#53b8e3 100%);
	background: linear-gradient(to bottom right,#5058a3 50%,#53b8e3 100%); */

	/* background: #50a3a2;
	background: -webkit-linear-gradient(top left,#50a3a2 0%,#53e3a6 50%);
	background: -moz-linear-gradient(top left,#50a3a2 0%,#53e3a6 50%);
	background: -o-linear-gradient(top left,#50a3a2 0%,#53e3a6 50%);
	background: linear-gradient(to bottom right,#50a3a2 0%,#53e3a6 50%); */
	color: #fff;
	padding: 1em;
	z-index: 2;
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
	margin: 15px;

}

header a {
	color: #2f2e33;
}

header i {
	font-size: 30px;
	float: left;
	margin-right: 10px;
}

header span {
	display: block;
	font-size: clamp(10px, 10px, 12px);
	padding-top: 2px;
	float: left;
	overflow: hidden;
	width: 13em;
	height: 1em;
}

header span:last-child {
	font-size: clamp(8px, 10px, 12px);
}

.navi {
	float: left;
	margin-top: 2em;
	width: 100%;
}

.navi ul {
	text-align: left;
}

.navi li {
	text-decoration: none;
	list-style: none;
	font-size: 12px;
	margin-bottom: 1em;
	cursor: pointer;
	transition: all 0.5s 0s ease;
}

.navi li a {
	padding: 1em 0;
	display: block;
}

.navi li a::before {
	content: '\25C7';
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.navi li:hover {
	background: #2f2e33;
}

.navi li:hover::before,
.navi li:hover a {
	color: #fff;
}

.admin .wrapper {
	width: calc(100% - 200px - 2em);
	padding: 20px;
}

/*title*/
.title {
	text-align: left;
	font-size: 18px;
	margin-bottom: 1em;
}

.title:before {
	content: '-';
	margin: auto 0.5em;
}

.title:after {
	content: '-';
	margin: auto 0.5em;
}

/*table*/
.table-wrap {
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.table-wrap::-webkit-scrollbar {
	display: none;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 0.5em auto;
	min-width: 700px;
}

thead td,
thead th {
	border: none;
}

th,
td {
	border-bottom: 1px solid #ccc;
	padding: 0.75em;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.3;
}

th {
	color: #2f2e33;
	font-weight: bold;
	text-align: left;
}

/*edit*/
form .center {
	margin: 1em auto;
	text-align: left;
}

form label {
	display: block;
	margin: 2em 0 0.5em;
	font-weight: bold;
}

.half_box div.aa {
	width: calc(40% - 1em);
	display: inline-block;
}

select.select-verry-mini,
input.input-verry-mini {
	width: 50px;
}

input.input-mini {
	width: 100px;
}

input.input-mini-middle {
	width: 150px;
}

input.input-middle {
	width: 200px;
}

input.input-long {
	width: 300px;
}

.radio_area {
	text-align: left;
	border: 1px solid #ccc;
	padding: 0.5em;
}

.radio_area label {
	display: inline-block;
	margin-right: 0.5em;
	white-space: nowrap;
}

tr.danger {
	background: rgba(0, 0, 0, 0.1);
}

tr.complete {
	background: rgba(255, 0, 0, 0.1);
}

.half_box div {
	width: calc(40% - 1em);
	display: inline-block;
}

form {
	margin: auto;
}

.bg-bubbles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bg-bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	top: -160px;
	-webkit-animation: square 25s infinite;
	animation: square 25s infinite;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
	left: 10%;
}

.bg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	animation-delay: 2s;
	animation-duration: 17s;
}

.bg-bubbles li:nth-child(3) {
	left: 25%;
	animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-duration: 22s;
	background-color: rgba(255, 255, 255, 0.25);
}

.bg-bubbles li:nth-child(5) {
	left: 70%;
}

.bg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	animation-delay: 15s;
	animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	animation-delay: 2s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	animation-delay: 11s;
}

/* peager */
.cp_navi {
	width: 100%;
	text-align: center;
	margin: 1em auto;
}

.cp_pagination {
	margin: auto;
	max-width: 640px;
}

.cp_pagenum {
	font-size: 16px;
	padding: 0.25em 0.5em;
	background: #123c69;
	color: #fff;
	margin: 0 0.3em;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.cp_pagenum.current {
	background: #d9334c;
}

@media screen and (max-width: 600px) {
	header {
		width: calc(100px - 2em);
		overflow: hidden;
	}

	header a i {
		position: absolute;
		left: 0;
		right: 0;
		width: 30px;
		margin: auto;
		top: 10px;
	}

	header .left a span {
		transform: scale(0.75);
		position: absolute;
		left: 0;
		right: 0;
		top: 50px;
	}

	header .left a span:last-child,
	header li a:before {
		display: none;
	}

	header .navi {
		margin-top: 5em;
	}

	.navi li a {
		transform: scale(0.75);
		padding: .5em 0;
		margin-left: -1em;
	}

	header center {
		width: 80%;
		margin: auto;
	}

	.container {
		width: calc(100% - 65px - 10em);
		margin-left: calc(90px + 3em);
	}

}

@media screen and (max-width: 400px) {
	header {
		width: calc(50px - 2em);
	}

	header .left a span {
		display: none;
	}

	header .navi {
		margin-top: 3em;
	}

	.navi li a {
		transform: scale(0.5);
		white-space: nowrap;
	}

	.container {
		width: calc(100% - 15px - 10em);
		margin-left: calc(40px + 3em);
	}

	.navi li a {
		transform: scale(0.75);
		padding: 0;
		margin-left: -1em;
	}

}

@-webkit-keyframes square {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(700px) rotate(600deg);
	}
}

@keyframes square {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(700px) rotate(600deg);
	}
}

/* animation */
@keyframes korokoro {
	0% {
		transform: translate(0%, 0%);
	}

	3% {
		transform: translate(10%, 0%) rotate(10deg);
	}

	12% {
		transform: translate(20%, 0%) rotate(20deg);
	}

	15% {
		transform: translate(-10%, 0%) rotate(-10deg);
	}

	17% {
		transform: translate(-15%, 0%) rotate(-15deg);
	}

	22% {
		transform: translate(10%, 0%) rotate(10deg);
	}

	25% {
		transform: translate(15%, 0%) rotate(15deg);
	}

	30% {
		transform: translate(-5%, 0%) rotate(-5deg);
	}

	32% {
		transform: translate(-7%, 0%) rotate(-7deg);
	}

	37% {
		transform: translate(0%, 0%) rotate(0deg);
	}

	50% {
		transform: translate(0%, 0%) rotate(0deg);
	}

	100% {
		transform: translate(0%, 0%) rotate(0deg);
	}
}

@keyframes purupuru {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	5% {
		transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg);
	}

	12% {
		transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg);
	}

	17% {
		transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg);
	}

	20% {
		transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg);
	}

	25% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

@keyframes poyon {
	0% {
		transform: scale(0.8, 1.4) translate(0%, -100%);
	}

	10% {
		transform: scale(0.8, 1.4) translate(0%, -15%);
	}

	20% {
		transform: scale(1.4, 0.6) translate(0%, 30%);
	}

	30% {
		transform: scale(0.9, 1.1) translate(0%, -10%);
	}

	40% {
		transform: scale(0.95, 1.2) translate(0%, -30%);
	}

	50% {
		transform: scale(0.95, 1.2) translate(0%, -10%);
	}

	60% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	70% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

@keyframes poyooon {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	10% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	40% {
		transform: scale(1.2, 0.8) translate(0%, 15%);
	}

	50% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	60% {
		transform: scale(0.9, 1.2) translate(0%, -100%);
	}

	75% {
		transform: scale(0.9, 1.2) translate(0%, -20%);
	}

	85% {
		transform: scale(1.2, 0.8) translate(0%, 15%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

@keyframes purun {
	0% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}

	15% {
		transform: scale(0.9, 0.9) translate(0%, 5%);
	}

	30% {
		transform: scale(1.3, 0.8) translate(0%, 10%);
	}

	50% {
		transform: scale(0.8, 1.3) translate(0%, -10%);
	}

	70% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
	}
}

/* 検索フォーム内の入力欄を横並びで均等に配置 */
.search_area form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.search_area input {
	flex: 1;
	/* 均等に幅を分配 */
	min-width: 150px;
	/* 最小幅を設定 */
	margin-right: 10px;
	margin-bottom: 10px;
}

.search_area button {
	margin-left: auto;
	/* 右寄せ */
	margin-bottom: 10px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	.search_area input {
		flex-basis: calc(50% - 10px);
		/* タブレットサイズでは2列 */
	}
}

@media screen and (max-width: 480px) {
	.search_area input {
		flex-basis: 100%;
		/* スマホサイズでは1列 */
		margin-right: 0;
	}

	.search_area button {
		width: 100%;
	}
}