@charset 'UTF-8';

/*

    Base

*/

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

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
}
input[type=password], input[type=text], button, textarea {
	max-width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

/*  font  */
html { font-size: 8px;}
@media screen and (min-width: 768px) { html { font-size: 10px;}}
body {
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333333;
}
a {
	color: var(--link-color);
	transition: all 0.1s linear;
}
a:hover   { opacity: 0.7;}
p {
	line-height: 2;
	font-feature-settings: "palt";
}
}

/*  size color  */
body { font-size: 1.8rem;}
h1 { font-size: 2.2rem;}
h2 { font-size: 2.0rem;}
h3 { font-size: 1.8rem;}

/*  common  */
.global ul,
.global li,
.global p {
	margin: 0;
	list-style: none;
	line-height: 1;
}
.global a {
	text-decoration: none;
	color: inherit;
}
div.wrapper {
	margin: 0 20px;
}
@media screen and (min-width: 768px) {
	div.wrapper {
		max-width: 1020px;
		margin: 0 auto;
	}
	div.wrapper.narrow {
		max-width: 640px;
	}
}

/*  max width  */
body img,
body iframe {
	max-width: 100%;
}

/*  placeholder  */
::placeholder {
	font-size: 1.4rem;
	color: #999999;
}

/*  material icons  */
.material-icons {
	margin-right: 0.25em;
	font-size: 1.25em;
	vertical-align: middle;
}




/*

    Header

*/

/*  link  */
header.global {
	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;
	text-align: center;
}
header.global > a {
	display: inline-block;
	padding: 0.5em 0;
	font-weight: bold;
}





/*

    Footer

*/

/*  layout  */
footer.global {
	text-align: center;
}





/*

    Message

*/

/*  layout  */
.message {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1em 0;
	padding: 0.5em 1em;
	color: #ffffff;
	border-radius: 3px;
	line-height: 1.75;
}
.message.success { background-color: #8fc31f;}
.message.failure { background-color: #ea545d; animation: failure 1s linear both;}
.message.progress { background-color: #cccccc; animation: none;}
.message.progress span.load {
	animation: progress 2s linear infinite;
}
.message p {
	text-align: center;
	margin: 0 0 0 0.75em;
}
@keyframes failure {
	0% { opacity: 1;}
	50% { opacity: 1;}
	75% { opacity: 0.3;}
	100% { opacity: 1;}
}
@keyframes progress {
	from { transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}





/*

    Common

*/

/*  div#contents  */
#contents {
	padding: 1em;
}

/*  h1  */
h1 {
	text-align: center;
}

/*  nav.main  */
nav.main {
	padding: 0 2em;
}
nav.main ul {
	margin: 0;
	padding: 2em 0;
	border-top: 1px #cccccc solid;
}
nav.main ul:first-child {
	border: none;
}
nav.main ul li {
	margin: 0;
	padding: 0.5em 0;
	list-style: none;
}
nav.main ul li a {
	display: block;
	padding: 1em 0;
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	color: #ffffff;
	text-align: center;
}

/*  #contents nav  */
#contents nav {
	text-align: center;
}

/*  buttons  */
a.button, input[type=submit], button {
	display: inline-block;
	min-width: 5em;
	margin: 0.25em 0;
	padding: 0.5em 2em;
	background-color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
	border: 1px hsla(var(--color-h),var(--color-s),var(--color-l),1) solid;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.5;
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
	border-radius: 5px;
	cursor: pointer;
	box-sizing: border-box;
}
a.button.small, input[type=submit].small, button.small {
	min-width: 4em;
	padding: 0.25em 1em;
}
a.button.xsmall, input[type=submit].xsmall, button.xsmall {
	min-width: 3em;
	padding: 0.125em 0.5em;
	font-size: 1.2rem;
}
a.button.large, input[type=submit].large, button.large {
	min-width: 8em;
	padding: 0.75em 4em;
	font-size: 1.8rem;
}
a.button.xlarge, input[type=submit].xlarge, button.xlarge {
	width: 100%;
	padding: 0.75em 3em;
	font-size: 2.1rem;
	box-sizing: border-box;
}
a.button.light, input[type=submit].light, button.light,
a.button.back, input[type=submit].back, button.back {
	background-color: #ffffff;
	color: hsla(var(--color-h),var(--color-s),var(--color-l),1);
}
a.button.back, input[type=submit].back, button.back {
	margin-top: 2em;
	padding: 0.25em 1em;
}

/*  div#summary  */
div#summary form {
	margin: 0.5em 0;
	border: 1px #cccccc solid;
	border-radius: 5px;
	text-align: center;
}
div#summary form strong {
	display: block;
	padding: 0.25em 0;
}
div#summary form div.other {
	padding: 0.5em;
	border-top: 1px #cccccc solid;
}
div#summary form div.other span.note,
div#summary form div.other span.messages {
	display: block;
}
div#summary form div.other span.messages span.date {
	display: block;
	margin-top: 0.25em;
	font-size: 1.3rem;
	color: #666666;
	line-height: 1.25;
}
div#summary form div.other textarea {
	margin-top: 0.5em;
	border-color: #eeeeee;
}

/*  div#status  */
div#status {
	text-align: center;
}
div#status form {
	margin: 2em 0;
	padding: 0.5em;
	background-color: #eeeeee;
}
div#status p.status strong {
	color: #ff0000;
}

/*  #order  */
#order {
	display: none;
	margin: 2em 0;
	padding: 1em;
	background-color: #eeeeee;
}
#order a.openclose {
	display: block;
	text-align: center;
}
#order div.body {
	display: none;
}
#order p {
	margin-top: 0;
}
#order table td {
	background-color: #f6f6f6;
}

/*  div.items  */
div.items div.item {
	display: flex;
	justify-content: space-between;
	margin: 1em 0;
	padding: 0.5em 1em;
	background-color: #eeeeee;
}
div.items div.item div.text {
	padding-right: 0.75em;
}
div.items div.item.picked div.text {
	opacity: 0.5;
}
div.items div.item.checked {
	opacity: 1;
	background-color: #3399CC;
	color: #ffffff;
}
div.items div.item.checked div.text:before {
	content: '✔︎';
}
div.items div.item a.cancel {
	display: none;
}
div.items div.item.checked a.cancel {
	display: inline-block;
}
div.items div.item.checked a.check {
	display: none;
}
div.items div.item div.supple {
	display: none;
}

/*  modal  */
#modal-base #modal-body div.supple {
	max-height: 80vh;
	overflow: auto;
}
#modal-base #modal-body div.supple h3 {
	margin: 1em 0;
	border-bottom: 1px #cccccc solid;
}
#modal-base #modal-body div.supple ul li {
	margin: 0;
	list-style: none;
}
#modal-base #modal-body p.verify {
	margin-top: 2em;
	text-align: center;
}
#modal-base #modal-body p.save {
	margin: 1em 0 0;
}
#modal-base #modal-body div.inventory-edit {
	padding: 1em;
	background-color: #eeeeee;
}
#modal-base #modal-body div.inventory-edit h3 {
	display: flex;
	align-items: center;
	margin: 0;
	border: none;
}
#modal-base #modal-body div.inventory-edit ul {
	margin: 1em 0 1em;
}