:root {
	--statusbar: 20px;
	--navigationbar: 44px;
	--toolbar : 44px;
	--viewheight : calc(100vh - var(--statusbar) - var(--navigationbar) - var(--toolbar));
}

@media screen, print {

*{
  box-sizing: border-box;
}

body {
	background-color:#D7C4BB;
	margin: 0;
	padding: 0;
	font-family: 'M PLUS 1p', sans-serif;
	font-size:inherit;
	font-weight:800;
	overflow:hidden;
	min-height: 100vh;
}
#wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	min-height:100vh;
	max-width:400px;
	margin:auto;
	padding:1em;
}

	#ticket {
		margin:auto;
		width:100%;
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

		#ticket section {
			width:100%;
			margin:0;
			padding:0;
			overflow:hidden;
		}
		#ticketimage {
			width:100%;
			height:auto;
			background-color:#fffacd;
			flex:0 0 auto;
		}
			#ticketimage img { 
				width: 100%;
				height:auto;
				margin:0;
				padding:0;
				vertical-align: top;
			}

		#ticketstub {
			width:100%;
			height:100%;
			background-color: #FD951E;
			display: flex;
			justify-content: center;
			flex:1 1 auto;
		}

			#stub {
				display: flex;
				width:100%;
				height:100%;
				list-style-type: none;
				margin:0;
				padding:0.5em 0;
				flex-flow: column;
			}
				#stub li {
					text-align:center;
					font-weight:bold;
					color:white;
				}
				#stub li:first-child {
					font-size:1.75rem;
					line-height:1.75rem;
				}
				#stub li:nth-child(2) {
					width:95%;
					margin:0 auto;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				#stub li:last-child {
					margin-top:0.5rem;
					font-size:0.8rem;
				}
				
		#ticketfooter {
			display: block;
			width:100%;
			font-size:0.6em;
			font-weight: bold;
			margin:0 auto;
			padding:0;
			text-align:center;
			background-color:white;
			flex: 0 0 auto;
		}


#ticketchecked {
	position: absolute;
	box-sizing: border-box;
	bottom: 47%;
	left:0;
	transform-origin: bottom center;
	border: 1px transparent solid;
	z-index: 999;
	width: 100%;
	height: fit-content;
	font-size: 300px;
	color: #66cc33;
	opacity: 0;
	text-align: center;
	line-height: 100%;
	overflow: hidden;
}

	#force #ticketchecked {
		color:#51A8DD;
	}

.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
		transform: scale(1.5) translateY(50%);
	}
	
	to {
		opacity: 0.7;
		transform:scale(1) translateY(50%);
	}
}

.notime {
	opacity: 0.7 !important;
	transform:scale(1) translateY(50%);
}

	/* 円を描くターゲット要素の基本スタイル（既存）に追記 */
	#interaction {
		position: fixed;
		top: 0;
		height: 100vh;
		width: 100%;
		z-index: 1000;

		transition: opacity 0.3s ease;
		cursor: pointer;
		touch-action: none;
	}

	/* 送信中の状態：少し薄くして操作できないように見せる */
	#interaction.sending {
		opacity: 0.5;
		pointer-events: none; /* 送信中の連打防止 */
	}

	/* 送信中に出すくるくる（改善版） */
	#interaction.sending::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* --- サイズアップ --- */
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	
	/* --- 色と視認性の調整 --- */
	/* 全体の枠線を薄いグレーに、回転する先端をハッキリした色（例: #3498db）に */
	border: 6px solid rgba(0, 0, 0, 0.1); 
	border-top: 6px solid #3498db; 
	
	border-radius: 50%;
	/* スピナー自体に影をつけて浮き上がらせる */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
	
	animation: spin 0.8s linear infinite;
	z-index: 100; /* 最前面に */
	}

	/* 背景を少し暗くしてスピナーを際立たせる（オプション） */
	#interaction.sending::before {
	content: "送信中...";
	position: absolute;
	top: 55%; /* スピナーの下あたり */
	left: 50%;
	transform: translateX(-50%);
	color: #333;
	font-weight: bold;
	font-size: 30px;
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
}

@media screen and (max-width:640px) {
}

@media screen and (max-width:480px) {
	#ticketchecked {
		font-size:85vw;
	}
	#wrapper {
		min-height: -webkit-fill-available;
		margin:auto;
		padding:var(--statusbar) 1em var(--toolbar);
	}
}

@media screen and (max-width:320px) {

/*	#ticketstub {
		height: calc(1em + 1.5em + 1em + 1em + 1em);
	}
	#stub {
		padding:7px 0;
	}
*/
	#stub li:first-child {
		font-size:1.5em;
		line-height:110%;
	}
	#stub li:nth-child(2) {
		font-size:0.9em;
		line-height: 1em;
	}
	#stub li:last-child {
		font-size:0.6em;
		line-height: 100%;
	}

	#ticketfooter > span {
		display: inline-block;
		white-space: nowrap;
		font-size:10px;
		transform:scale(0.9);
	}
}