@charset "UTF-8";
.index main {
		background-color: #ffffff;
}
.index main .error {
		color: red;
		margin: 0.5rem 0;
}
.index main .error span {
		display: block;
		font-size: 13px;
}
.index main form > div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.5rem;
}
.index main form > div:first-of-type {
		margin-top: 2.5rem;
}
.index main form > div input {
		width: 70%;
}
.index main form > div label {
		flex-grow: 0;
		flex-shrink: 0;
}
@media all and (max-width: 576px) {
		.index main form {
				padding: 2rem 1.5rem;
		}
		.index main form > div {
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
		}
		.index main form > div input {
				width: 100%;
		}
}

.confirm,
.entry,
.finish,
.menu,
.order,
.reconfirm,
.status {
		background-color: #F8F8F8;
}

.menu h2 {
		margin-top: 0;
}
.menu h2:before {
		display: none;
}
.menu main .container {
		padding: 20px 20px 50px;
}
.menu .cont-wrapper {
		margin: 20vh auto;
		padding: 3rem 2rem;
		background-color: #ffffff;
		border-radius: 0.8rem;
}
.menu .logout {
		margin-top: 3rem;
}
.menu .logout .btn {
		background-color: #E0E0E0;
		color: #5C5C5C;
}

.order .cont-wrapper .section {
		margin: 1rem auto 2rem;
		padding: 1rem 2rem 2rem;
		border-radius: 0.8rem;
		background-color: #ffffff;
}
.order .btn.back {
		border: 1px solid #1CD0AC;
		color: #1CD0AC;
		background: transparent;
		margin-top: 3.5rem;
}
.order #serialnum li {
		margin-bottom: 0.8rem;
}
.order #serialnum input {
		width: 4rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		ime-mode: disabled;
}
.order .addNumber {
		margin: 2rem auto 1rem;
		color: #1CD0AC;
		border: 1px solid #d9dee2;
}
.order .addNumber::before {
		content: "+";
		display: inline-block;
		padding-bottom: 1px;
		font-size: 1.2em;
		margin-right: 0.5em;
}
.order main form {
		border: none;
		padding: 0;
}

.confirm .section,
.finish .section,
.reconfirm .section {
		margin: 1rem auto 2rem;
		padding: 1rem 2rem 2rem;
		border-radius: 0.8rem;
		background-color: #ffffff;
}
.confirm .serial ol li,
.finish .serial ol li,
.reconfirm .serial ol li {
		padding: 1.5em 0;
		border-bottom: 1px solid #e2e2e2;
}
.confirm .serial ol li span:first-of-type,
.finish .serial ol li span:first-of-type,
.reconfirm .serial ol li span:first-of-type {
		padding-right: 3rem;
}
.confirm .serial ol li span:last-of-type,
.finish .serial ol li span:last-of-type,
.reconfirm .serial ol li span:last-of-type {
		display: inline-block;
		min-width: 90px;
		padding: 4px 8px;
		background-color: #1CD0AC;
		color: #ffffff;
		text-align: center;
		margin-top: 5px;
}
.confirm .serial ol li span.error,
.finish .serial ol li span.error,
.reconfirm .serial ol li span.error {
		padding: 4px 8px;
		background-color: red;
		color: #ffffff;
}
.confirm .serial ol li:last-of-type,
.finish .serial ol li:last-of-type,
.reconfirm .serial ol li:last-of-type {
		margin-bottom: 2rem;
		border-bottom: none;
}
.confirm .serial p.error,
.finish .serial p.error,
.reconfirm .serial p.error {
		margin: 1em 0 0;
		color: red;
		font-size: 95%;
}

.status .ticket-status {
		color: #1CD0AC;
}
.status main h3:first-of-type {
		margin-top: 3rem;
}
.status .history .section ul li {
		border-bottom: 1px solid #e2e2e2;
		padding: 1rem 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
}
.status .history .section ul li:last-of-type {
		border-bottom: none;
}
.status .history .section ul li .category {
		margin-right: 0.5rem;
		padding: 1px 10px;
		border-radius: 4px;
		color: #fff;
		flex-grow: 0;
		flex-shrink: 0;
}
.status .history .section ul li .date {
		width: auto;
		font-weight: bold;
}
.status .history .section ul li .ticket {
		flex-grow: 0;
		flex-shrink: 0;
		margin-left: auto;
		font-weight: bold;
		font-size: 110%;
}
.status .history .section ul li .event {
		width: 100%;
		margin-top: 0.8rem;
		color: #adb5bd;
}
.status .history .section ul li .item-wrapper {
		width: 100%;
		margin-top: 0.3rem;
}
.status .history .section ul li.plus .category {
		background: #1CD0AC;
}
.status .history .section ul li.plus .ticket {
		color: #1CD0AC;
}
.status .history .section ul li.minus .category {
		background: #F5878C;
}
.status .history .section ul li.minus .ticket {
		color: #FF4545;
}

.entry .section,
.status .section {
		margin: 1rem auto 2rem;
		padding: 1rem 2rem;
		border-radius: 0.8rem;
		background-color: #ffffff;
}
.entry .ticket span,
.status .ticket span {
		font-weight: bold;
}
.entry .ticket span:last-of-type,
.status .ticket span:last-of-type {
		margin-left: 3rem;
		color: #1CD0AC;
		font-size: 150%;
		vertical-align: initial;
}

.entry .member-list p {
		font-weight: 600;
		border-bottom: 2px solid #E8E8E8;
}
.entry .member-list li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0.5rem 0;
}
.entry .member-list li + li {
		border-top: 1px solid #e8e8e8;
}
.entry .member-list img {
		height: 63px;
		width: auto;
		margin-right: 1rem;
}
.entry .text-area .title {
		font-size: 16px;
		font-weight: 600;
		border-bottom: 1px solid #e2e2e2;
		display: block;
		margin-bottom: 0.5rem;
}
.entry .section.item .title:after {
		content: "応募受付中";
		color: #495057;
		border: 1px solid #495057;
		padding: 0.3rem;
		font-weight: 400;
		font-size: 14px;
		display: inline-block;
		line-height: 1;
		margin-left: 0.5rem;
		border-radius: 2px;
}
.entry .section.item.before .title:after {
		content: "応募受付前";
		color: red;
		border: 1px solid red;
}

.finish .txtB,
.reconfirm .txtB {
		margin-bottom: 2rem;
		font-weight: bold;
}
.finish .txtB span,
.reconfirm .txtB span {
		color: red;
		font-weight: normal;
		font-size: 95%;
}
.finish .buy-ticket,
.reconfirm .buy-ticket {
		font-weight: 500;
		font-size: 18px;
}
.finish .buy-ticket.member-list ul,
.reconfirm .buy-ticket.member-list ul {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
}
.finish .buy-ticket.member-list ul li,
.reconfirm .buy-ticket.member-list ul li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		width: 13.2%;
		margin: 0.5%;
}
.finish .buy-ticket.member-list ul li .member-name,
.reconfirm .buy-ticket.member-list ul li .member-name {
		margin-right: 0;
		line-height: 1;
		margin-top: 0.5rem;
		font-weight: 400;
		font-size: 0.95rem;
}
.finish .buy-ticket.member-list ul li .ticket,
.reconfirm .buy-ticket.member-list ul li .ticket {
		font-weight: 500;
		font-size: 18px;
		line-height: 1;
}

.confirm .section.userinfo,
.entry .section.userinfo,
.finish .section.userinfo,
.reconfirm .section.userinfo,
.status .section.userinfo {
		padding: 1rem 2rem;
}
.confirm .section.userinfo div,
.entry .section.userinfo div,
.finish .section.userinfo div,
.reconfirm .section.userinfo div,
.status .section.userinfo div {
		border-bottom: 1px solid #e2e2e2;
		padding: 0.8em 0;
}
.confirm .section.userinfo div span:first-of-type,
.entry .section.userinfo div span:first-of-type,
.finish .section.userinfo div span:first-of-type,
.reconfirm .section.userinfo div span:first-of-type,
.status .section.userinfo div span:first-of-type {
		color: #adb5bd;
}
.confirm .section.userinfo div span,
.entry .section.userinfo div span,
.finish .section.userinfo div span,
.reconfirm .section.userinfo div span,
.status .section.userinfo div span {
		display: inline-block;
		margin-right: 1rem;
}
.confirm .section.userinfo div:last-of-type,
.entry .section.userinfo div:last-of-type,
.finish .section.userinfo div:last-of-type,
.reconfirm .section.userinfo div:last-of-type,
.status .section.userinfo div:last-of-type {
		border-bottom: none;
}

.entry .item,
.finish .item,
.reconfirm .item,
.status .item {
		position: relative;
		padding-top: 5rem;
}
.entry .item .three,
.finish .item .three,
.reconfirm .item .three,
.status .item .three {
		background-color: #F69DB6;
}
.entry .item .three ~ .title,
.finish .item .three ~ .title,
.reconfirm .item .three ~ .title,
.status .item .three ~ .title {
		border-left: 4px solid #F69DB6;
}
.entry .item .two,
.finish .item .two,
.reconfirm .item .two,
.status .item .two {
		background-color: #99CC33;
}
.entry .item .two + .title,
.finish .item .two + .title,
.reconfirm .item .two + .title,
.status .item .two + .title {
		border-left: 4px solid #99CC33;
}
.entry .item .one,
.finish .item .one,
.reconfirm .item .one,
.status .item .one {
		background-color: #91D0CD;
}
.entry .item .one + .title,
.finish .item .one + .title,
.reconfirm .item .one + .title,
.status .item .one + .title {
		border-left: 4px solid #91D0CD;
}
.entry .item .one,
.entry .item .three,
.entry .item .two,
.finish .item .one,
.finish .item .three,
.finish .item .two,
.reconfirm .item .one,
.reconfirm .item .three,
.reconfirm .item .two,
.status .item .one,
.status .item .three,
.status .item .two {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 0 1rem;
		padding: 1rem 3rem;
		color: #fff;
		border-radius: 0.8rem 0 2rem 0;
}
.entry .item .category,
.finish .item .category,
.reconfirm .item .category,
.status .item .category {
		display: inline-block;
		margin-bottom: 0.5rem;
		padding: 4px 0.8rem;
		border: 1px solid #F69DB6;
		color: #F69DB6;
		font-size: 70%;
}
.entry .item .title,
.finish .item .title,
.reconfirm .item .title,
.status .item .title {
		padding-left: 1rem;
		border-left: 4px solid #1CD0AC;
		font-weight: bold;
}
.entry .item .buy-ticket,
.finish .item .buy-ticket,
.reconfirm .item .buy-ticket,
.status .item .buy-ticket {
		display: flex;
		justify-content: flex-end;
		margin-top: 1rem;
		margin-left: auto;
		margin-bottom: 1rem;
}
.entry .item .buy-ticket button,
.finish .item .buy-ticket button,
.reconfirm .item .buy-ticket button,
.status .item .buy-ticket button {
		width: 40px;
		height: 40px;
		margin: 0 1rem;
		border: 1px solid #adb5bd;
		border-radius: 50%;
		color: #adb5bd;
		font-size: 130%;
		line-height: 40px;
}
.entry .item .buy-ticket .minus,
.finish .item .buy-ticket .minus,
.reconfirm .item .buy-ticket .minus,
.status .item .buy-ticket .minus {
		margin-right: 1rem;
}
.entry .item .buy-ticket .plus,
.finish .item .buy-ticket .plus,
.reconfirm .item .buy-ticket .plus,
.status .item .buy-ticket .plus {
		margin-left: 1rem;
}
.entry .item .buy-ticket span,
.finish .item .buy-ticket span,
.reconfirm .item .buy-ticket span,
.status .item .buy-ticket span {
		line-height: 40px;
}

.status .item .buy-ticket {
		padding-top: 1rem;
		border-top: 1px solid #eeeeee;
}
.status .item .buy-ticket span {
		color: #1CD0AC;
		line-height: 1.4;
		font-size: 17px;
		display: block;
}
.status .item .buy-ticket span p {
		display: inline;
		margin-left: 0.5rem;
		color: red;
}
.status .item.minilive .buy-ticket span {
		text-align: right;
}
.status .item.minilive .buy-ticket span p {
		display: block;
		color: red;
}
.status .history .item-menber:first-of-type {
		margin-top: 1rem;
}
.status .history .item-menber {
		margin-bottom: 0.2rem;
}

.hide-btn {
		display: block;
		max-width: 320px;
		margin: 2rem auto 1rem;
		border: 1px solid #1CD0AC;
		color: #1CD0AC;
		text-align: center;
		padding: 0.5rem 0;
		cursor: pointer;
}
.hide-btn:before {
		content: "メンバーを選択する";
}

.hide-item {
		position: relative;
		overflow: hidden;
		height: 0;
		/*隠した状態の高さ*/
}

.hide-item::before {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		/*グラデーションで隠す高さ*/
		background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
		content: "";
}

.hide-trigger {
		display: none;
		/*チェックボックスは常に非表示*/
}

.hide-trigger:checked ~ .hide-btn::before {
		/*チェックされていたら、文言を変更する*/
		content: "閉じる";
}

.hide-trigger:checked ~ .hide-item {
		height: auto;
		/*チェックされていたら、高さを戻す*/
}

.hide-trigger:checked ~ .hide-item::before {
		display: none;
		/*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

@media screen and (max-width: 880px) {
		.menu .cont-wrapper {
				margin: 20px auto;
		}
		.menu .logout {
				margin-top: 2rem;
		}
		.menu .btn {
				max-width: 530px;
				height: 4rem;
				padding: 2rem;
				border-radius: 3rem;
		}

		.order form {
				padding: 2rem 1rem 1rem;
		}
		.order form ul li input {
				width: 31%;
				margin-bottom: 0.5rem;
		}
		.order main form {
				padding: 0;
		}

		.confirm .section.userinfo,
.entry .section.userinfo,
.finish .section.userinfo,
.reconfirm .section.userinfo,
.status .section.userinfo {
				padding: 1rem;
		}
		.confirm .section.userinfo div,
.entry .section.userinfo div,
.finish .section.userinfo div,
.reconfirm .section.userinfo div,
.status .section.userinfo div {
				border-bottom: 1px solid #e2e2e2;
				padding: 0.8em 0;
		}
		.confirm .section.userinfo div span:first-of-type,
.entry .section.userinfo div span:first-of-type,
.finish .section.userinfo div span:first-of-type,
.reconfirm .section.userinfo div span:first-of-type,
.status .section.userinfo div span:first-of-type {
				color: #adb5bd;
		}
		.confirm .section.userinfo div span,
.entry .section.userinfo div span,
.finish .section.userinfo div span,
.reconfirm .section.userinfo div span,
.status .section.userinfo div span {
				display: block;
		}
		.confirm .section.userinfo div:last-of-type,
.entry .section.userinfo div:last-of-type,
.finish .section.userinfo div:last-of-type,
.reconfirm .section.userinfo div:last-of-type,
.status .section.userinfo div:last-of-type {
				border-bottom: none;
		}

		.entry .section,
.finish .section,
.reconfirm .section,
.status .section {
				margin-bottom: 1rem;
				padding-left: 1rem;
				padding-right: 1rem;
		}
		.entry .ticket span,
.finish .ticket span,
.reconfirm .ticket span,
.status .ticket span {
				display: block;
		}
		.entry .ticket span:last-of-type,
.finish .ticket span:last-of-type,
.reconfirm .ticket span:last-of-type,
.status .ticket span:last-of-type {
				margin-left: 0;
		}

		.entry .item .buy-ticket {
				margin-left: auto;
		}
		.entry .item .buy-ticket button:last-of-type {
				margin-right: 0;
		}

		.finish .buy-ticket.member-list ul li,
.reconfirm .buy-ticket.member-list ul li {
				width: 19%;
		}
}
@media all and (max-width: 600px) {
		.finish .buy-ticket.member-list ul li,
.reconfirm .buy-ticket.member-list ul li {
				width: 24%;
		}
}
@media all and (max-width: 500px) {
		.finish .buy-ticket.member-list ul li,
.reconfirm .buy-ticket.member-list ul li {
				width: 32.3%;
		}
}
@media all and (max-width: 400px) {
		.order .cont-wrapper .section {
				padding: 1rem 1.5rem 2rem;
		}
		.order #serialnum li {
				font-size: 14px;
				margin-left: -10px;
				margin-right: -10px;
		}
		.order #serialnum input {
				margin-left: 0;
				margin-right: 0;
		}

		.entry .member-list img {
				height: 50px;
				margin-right: 0.5rem;
		}
		.entry .member-list .buy-ticket button {
				margin: 0 0.5rem;
		}
}
@media screen and (max-width: 400px) {
		.menu main .btn {
				height: 5rem;
				padding: 3rem 2rem;
				border-radius: 5em;
		}
}
@media all and (max-width: 350px) {
		.finish .buy-ticket.member-list ul li,
.reconfirm .buy-ticket.member-list ul li {
				width: 49%;
		}
}
/*# sourceMappingURL=style.css.map */