@charset 'UTF-8';

/*

    Basic

*/

/*  color  */
:root {
	--color-h: 220;
	--color-s: 100%;
	--color-l: 20%;
}





/*  base font  */
html { font-size: 9px;}
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	color: #333333;
}
@media screen and (min-width: 768px) {
	html { font-size: 10px;}
}

/*  font size  */
body { font-size: 1.5rem;}
h1 { font-size: 2.2rem;}
h2 { font-size: 2.0rem;}
h3 { font-size: 1.6rem;}
h4 { font-size: 1.3rem;}
h5 { font-size: 1.3rem;}
h6 { font-size: 1.3rem;}

/*  anchor  */
a {
	color: #1558d6;
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
	transition: all 0.1s linear;
}
a:hover {
	opacity: 0.7;
}

/*  global  */
.global ul,
.global li,
.global dl,
.global dt,
.global dd,
.global p {
	margin: 0;
	list-style: none;
}





/*

    Header

*/

/*  header  */
body {
	padding-top: 50px;
}
header.global {
	position: fixed;
	top: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background-color: #eeeeee;
	box-sizing: border-box;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
}

/*  home  */
header.global a.home {
	display: flex;
	gap: 0.25em;
	align-items: center;
	justify-content: flex-start;
	width: 180px;
	height: 50px;
	padding: 0 8px;
	color: #999999;
	font-size: 1.8rem;
	z-index: 5;
	box-sizing: border-box;
}

/*  sub navigation  */
nav.sub {
	position: fixed;
	top: 5px;
	right: 5px;
	height: 40px;
	display: flex;
	align-items: center;
	z-index: 9;
	color: #ffffff;
}
nav.sub a {
	display: block;
	margin: 0 1em;
	color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	font-size: 0.9rem;
	text-align: center;
}
nav.sub a i {
	display: block;
	margin-bottom: 0.125em;
	font-size: 1.8rem;
}

/*  navigation  */
nav.global {
	position: fixed;
	top: 50px;
	left: -100%;
	width: calc(100% - 50px);
	height: 100%;
	background-color: #ffffff;
	color: #666666;
	font-size: 1.3rem;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.05);
	overflow: auto;
}
nav.global dl {
	padding-bottom: 3em;
}
nav.global dl dt {
	display: flex;
	align-items: center;
	padding: 2.0em 1.5em 0.5rem;
	color: #999999;
	font-size: 1.1rem;
	font-weight: normal;
}
nav.global dl dt i {
	margin-right: 0.3em;
	font-size: 3.0rem;
}
nav.global dl dt strong {
	display: block;
	font-size: 1.2rem;
	color: #666666;
}
nav.global dl dd {
	margin: 1.5em 0;
}
nav.global dl dd.settings {
	padding: 1.5em 0;
	border-top: 1px #cccccc solid;
}
nav.global dl dd ul li {
	margin: 0.5em 0;
}
nav.global dl dd ul li.category {
	padding: 0.75em 1em 0;
	color: #999999;
	border-top: 1px #eeeeee solid;
}
nav.global dl dd ul li a {
	display: block;
	padding: 0.5em 1em;
	color: inherit;
}
nav.global dl dd ul li a.current {
	border-left: 3px hsla(var(--color-h),var(--color-s),var(--color-l),1) solid;
}
nav.global dl dd ul li a i {
	display: inline-block;
	color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	width: 1.25em;
	margin-right: 0.5em;
	font-size: 1.6rem;
	text-align: center;
}

/*  wide  */
@media screen and (min-width: 768px) {
	body {
		padding-top: 0;
	}
	header.global {
		width: 260px;
		height: 55px;
	}
	header.global a.home {
		width: 260px;
		height: 100%;
		padding: 0 2rem;
	}
	header.global a.home img {
		height: 45px;
	}
	nav.sub {
		position: absolute;
		height: 45px;
	}
	nav.sub a {
		color: #ffffff;
	}
	nav.sub a.nav {
		display: none;
	}
	nav.global {
		top: 55px;
		left: 0 !important;
		width: 260px;
	}
}

/*  single  */
@media screen and (min-width: 768px) {
	body.single header.global {
		display: none;
	}
}






/*

    Footer

*/

/*  layout  */
footer.global {
	margin-top: 3em;
	padding: 1em;
	border-top: 1px #cccccc solid;
	font-size: 1.3rem;
	color: #999999;
	text-align: right;
}





/*

    Contents

*/

/*  layout  */
main #contents {
	padding: 1.75em;
}
@media screen and (min-width: 768px) {
	main {
		padding-left: 260px;
	}
	main #contents {
		padding: 2.5em;
	}
	body.single main {
		padding: 0;
	}
	body.single main #contents {
		max-width: 720px;
		margin: 0 auto;
	}
}

/*  title  */
main h1 {
	padding: 0.5em 1.5em;
	background: rgb(0,152,141);
	background: linear-gradient(90deg, hsla(var(--color-h),var(--color-s),var(--color-l),1) 0%, hsla(var(--color-h),var(--color-s),var(--color-l),0.7) 100%);
	color: #ffffff;
}

/*  message  */
main p.success,
main p.failure {
	margin: 0 0 2em;
	padding: 1em;
}
main p.success {
	border: 1px #999999 solid;
	background-color: #f9f9f9;
	color: #666666;
}
main p.failure {
	border: 1px #FF6666 solid;
	background-color: #ffdddd;
	color: #FF6666;
}

/*  container  */
div.container {
	margin-bottom: 4.5em;
	padding: 0.5em 1em;
	background-color: #ffffff;
	border-radius: 0.5em;
}
@media screen and (min-width: 768px) {
	div.container {
		padding: 1em 1.75em;
	}
}

/*  headings  */
main h2 {
	margin: 0.5em 0;
}
main h2 a {
	margin-left: 2em;
	font-size: 1.3rem;
	font-weight: normal;
}
main h3 {
	margin: 1em 0;
}

/*  text  */
main strong {
	background: linear-gradient(transparent 60%, #ffff00 0%);
}

/*  hr  */
main hr {
	margin: 3em 0;
	border-color: #dddddd;
}

/*  list  */
main ul.list {
	border: 1px #dddddd solid;
}
main ul.list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 0.5em;
}
main ul.list li:nth-child(odd) {
	background-color: #f9f9f9;
}
main ul.list li.title {
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	color: #ffffff;
}

/*  table  */
main table {
	min-width: 100%;
	border: #eeeeee 1px solid;
}
main table th,
main table td {
	border: none;
	border-left: #eeeeee 1px solid;
	border-right: #eeeeee 1px solid;
}
main table thead th {
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	color: #ffffff;
}
main table tbody th {
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),0.1);
}
main table tbody tr:nth-child(even) th {
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),0.2);
}
main table tr:nth-child(even) td {
	background-color: #f9f9f9;
}
main table tbody tr.disabled th,
main table tbody tr.disabled td {
	background-color: #dddddd;
	color: #999999;
}
main table tr.disabled:nth-child(even) td {
	background-color: #e9e9e9;
}
div.table {
	overflow: auto;
}
div.table table th,
div.table table td {
	white-space: nowrap;
}
main table tbody a.button {
	padding: 0.125em 1em;
	font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
	div.table {
		width: 100%;
		overflow: auto;
	}
	div.table table {
		width: auto;
	}
	div.table table th,
	div.table table td {
		white-space: nowrap;
	}
}

/*  pager  */
main nav.pager {
	text-align: center;
}
main nav.pager a {
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0.25em;
	background-color: #eeeeee;
	color: #333333;
}
main nav.pager a.current {
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	color: #ffffff;
}

/*  button  */
a.button,
button,
input[type=submit] {
	display: inline-block;
	margin: 0.25em 0;
	padding: 0.5em 2em;
	border: none;
	border-radius: 0.3em;
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	border: 2px hsla(var(--color-h),var(--color-s),var(--color-l),1) solid;
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
}
a.button.light,
button.light,
input[type=submit].light {
	background-color: #ffffff;
	color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
}
a.button.large,
button.large,
input[type=submit].large {
	font-size: 1.8rem;
}
a.button.small,
button.small,
input[type=submit].small {
	padding: 0.25em 1em;
	font-size: 1.3rem;
}
a.button.x-small,
button.x-small,
input[type=submit].x-small {
	padding: 0 1em;
	font-weight: normal;
	font-size: 1.1rem;
}

/*  form  */
input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=number],
select,
textarea {
	margin: 0.15em 0;
	background-color: #ffffff;
	border: 1px #cccccc solid;
}
form {
	margin: 1em 0;
}
form dl dt {
	font-weight: normal;
	color: #666666;
}
form dl dd {
	margin: 0 0 1em;
}
form dl dd input[type=text],
form dl dd input[type=password],
form dl dd input[type=email],
form dl dd textarea {
	width: 100%;
}
form p {
	margin: 1.5em 0;
}
form dl dt em {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.125em 0.25em;
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	color: #ffffff;
	font-size: 1.0rem;
	font-style: normal;
	border-radius: 2px;
	vertical-align: middle;
}
form dl dd input.phone {
	max-width: 15em;
}

/*  large form  */
@media screen and (min-width: 768px) {
	form.large dl {
		display: flex;
		flex-wrap: wrap;
		border: 1px #dddddd solid;
	}
	form.large dl dt,
	form.large dl dd {
		margin: 0;
		padding: 1em;
		box-sizing: border-box;
	}
	form.large dl dt:nth-of-type(odd),
	form.large dl dd:nth-of-type(odd) {
		background-color: #f9f9f9;
	}
	form.large dl dt {
		width: 30%;
	}
	form.large dl dd {
		width: 70%;
	}
}

/*  confirm and information  */
main form.confirm dl,
main dl.information {
	border: 1px #dddddd solid;
}
main form.confirm dl dt,
main dl.information dt {
	padding: 0.5em;
	background-color: #eeeeee;
}
main form.confirm dl dd,
main dl.information dd {
	padding: 0.5em;
	margin: 0;
	min-height: 1em;
}

/*  back  */
main p.back {
	margin: 3em 0;
	padding-top: 1.5em;
	border-top: 1px #cccccc solid;
}
main p.back a,
main a.back {
	display: inline-block;
	padding: 0.1em 1.5em;
	background-color: #ffffff;
	border: 2px hsla(var(--color-h),var(--color-s),var(--color-l),1) solid;
	color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	font-size: 1.5rem;
	border-radius: 0.3em;
}

/*  label  */
main span.label {
	display: inline-block;
	padding: 0.25em 0.25em;
	background: rgb(0,152,141);
	background: linear-gradient(90deg, hsla(var(--color-h),var(--color-s),var(--color-l),1) 0%, hsla(var(--color-h),var(--color-s),var(--color-l),0.7) 100%);
	color: #ffffff;
	font-size: 1.1rem;
	line-height: 1;
	border-radius: 3px;
}

/*  badge  */
span.badge {
	display: inline-block;
	min-width: 8px;
	height: 8px;
	padding: 2px 2px 1px;
	background-color: #ff0000;
	color: #ffffff;
	border-radius: 8px;
	text-align: center;
	line-height: 8px;
	font-size: 8px;
	vertical-align: super;
}

/*  supple  */
main div.supple {
	margin: 1em 0;
	padding: 0 1em;
	border: 1px hsla(var(--color-h),var(--color-s),var(--color-l),1) solid;
	background-color: #e5f4f3;
}

/*  notes  */
main .notes {
	font-size: smaller;
	color: #666666;
}

/*  search form  */
main form.search {
	margin-bottom: 2em;
	padding: 0 1.5em;
	border: 1px #cccccc solid;
	border-radius: 5px;
}
main form.search h2 {
	margin: 0 -1.5em 1em;
	padding: 0.75em 1em 0.5em;
	border-bottom: 1px #cccccc solid;
	font-size: inherit;
}
main form.search div.group {
	display: flex;
	align-items: top;
	gap: 1em;
}
main form.search div.group div.item {
	display: flex;
	gap: 0.5em;
	align-items: center;
}
main form.search div.group div.item span.name {
	white-space: nowrap;
	font-weight: bold;
}
main form.search div.group div.item span.input {
	display: flex;
	gap: 0.25em;
	align-items: center;
}
main form.search p.submit {
	text-align: center;
}