:root {
	-webkit-text-size-adjust: 100%;
	font-size: 18px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	font-family: 'Roboto', sans-serif;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #eee;
	color: #333;
}
.deactivated a, 
a.deactivated {
	display: none;
}

[lang='ja'] .en, 
[lang='en']  .ja {
	display: none;
}

outer-container {
	display: inline-block;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow-y: auto;
}
inner-container {
	display: inline-block;
	position: relative;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 4rem;
}

qr-factory {
	display: none;
}

.sheets_container {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width:840mm;
	/* min-width: 210mm; */
}
a4-sheet {
	display: inline-block;
	position: relative;
	float: left;
	width: 210mm;
	height: 297mm;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 1px 0 5px #ccc;
	overflow: hidden;
}
.top_margin {
	width: 100%;
}

qr-block {
    display: inline-block;
    position: relative;
    float: left;
    box-sizing: border-box;
    border-radius: 8px;
    outline: 1px solid transparent;
}
[print-borders='1'] qr-block {
    outline: 1px solid #ccc;
}
qr-pad {
	display:  inline-block;
	position: relative;
	float: left;
	width: 100%;
	height: var(--padding);
}
qr-block div {
    display: inline-block;
    position: relative;
    float: left;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100% - var(--padding) - var(--font-size));
    height: calc(100% - 3 * var(--padding) - var(--font-size));
}
qr-block span {
    display: inline-block;
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-weight:bold;
    /* margin-top: var(--padding); */
    font-size: var(--font-size);
    line-height: var(--font-size);
    height: var(--font-size);
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 0 1mm;
}

._2 a4-sheet{
	padding-left: 10mm;
}
._2 .top_margin {
	height: 23mm;
}
._2 qr-block {
	--padding: 10mm;
	--font-size: 6mm;
	width: 190mm;
	height: 122mm;
	margin-bottom: 6mm;
}

._3 a4-sheet{
	padding-left: 30mm;
}
._3 .top_margin {
	height: 24mm;
}
._3 qr-block {
	--padding: 8mm;
	--font-size: 5mm;
	width: 150mm;
	height: 80mm;
	margin-bottom: 4mm;
}

._4 a4-sheet{
	padding-left: 15mm;
}
._4 .top_margin {
	height: 18mm;
}
._4 qr-block {
	--padding: 16mm;
	--font-size: 5mm;
	width: 92mm;
	height: 131mm;
	margin-right: 6mm;
}
._4 qr-block:nth-child(2n + 1) {
	margin-right: 0;
}

._10 a4-sheet {
	padding-left: 15mm;
}
._10 .top_margin {
	height: 12mm;
}
._10 qr-block {
	--padding: 4mm;
	--font-size: 4mm;
	width: 89mm;
	height: 53mm;
	margin-right: 2mm;
	margin-bottom: 2mm;
}

._14 a4-sheet {
	padding-left: 20mm;
}
._14 .top_margin {
	height: 24mm;
}
._14 qr-block {
	--padding: 4mm;
	--font-size: 4mm;
	width: 83mm;
	height: 32mm;
	margin-right: 4mm;
	margin-bottom: 4mm;
}
._14 qr-block div {
	height: calc(100% - 2 * var(--padding));
}
._14 qr-block span {
	position: absolute;
	bottom: 0;
	left: calc(100% - 2 * var(--padding));
	width: 32mm;
	transform-origin: bottom left;
	transform: rotate(-90deg);
}

._24 a4-sheet {
	padding-left: 17mm;
}
._24 .top_margin {
	height: 14.5mm;
}
._24 qr-block {
	--padding: 4mm;
	--font-size: 3.7mm;
	width: 56mm;
	height: 30mm;
	margin-right: 4mm;
	margin-bottom: 4mm;
}
._24 qr-block div {
	height: calc(100% - 2 * var(--padding));
}
._24 qr-block span {
	position: absolute;
	bottom: 0;
	left: calc(100% - 2 * var(--padding));
	width: 30mm;
	transform-origin: bottom left;
	transform: rotate(-90deg);
}

._65 a4-sheet {
	padding-left: 4.75mm;
}
._65 .top_margin {
	height: 10.92mm;
}
._65 qr-block {
	
	--padding: 3mm;
	--font-size: 2.7mm;
	width: 38.1mm;
	height: 21.2mm;
	margin-right: 2.5mm;
}
._65 qr-block div {
	height: calc(100% - 2 * var(--padding));
}
._65 qr-block span {
	position: absolute;
	bottom: 0;
	left: calc(100% - 2 * var(--padding));
	width: 21.2mm;
	transform-origin: bottom left;
	transform: rotate(-90deg);
}


/*

*/

.top {
	display: block;
	position: relative;
	padding-top: 3rem;
	padding-bottom: 2rem;
	/* overflow: hidden; */
	/* overflow-x: hidden; */
}
.bg {
	display: inline-block;
	position: absolute;
	top: -40%;
	left: 0;
	width: 107%;
	height: 180%;
	opacity: 0.06;
	background-image: url('../img/QR codes.jpg');
	background-size: 150%;
	background-position: center right;
	/* transform: translateY(20%); */
	animation: parallax_effect 1s linear both;
	animation-timeline: view(y 15% 112%);
}
h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	color: #000;
	font-size: 1.8rem;
}
h2 {
	text-align: center;
	margin-top: 0.5rem;
	margin-bottom: 4rem;
}
p, 
#borders {
	display: block;
	position: relative;
	width: 100%;
	max-width: 210mm;
	box-sizing: border-box;
	padding: 0.5rem 0.5rem;
	margin: 0.5rem auto;
	text-align: justify;
}
p u {
	background: #ff0;
}
.must {
	font-size: 1.3rem;
	color: #f00;
}
qr-button {
	--font-size: 1rem;
	--padding: 0.2rem;
	--height: calc(var(--font-size) + 2 * var(--padding));
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: fit-content;
	min-width: 7rem;
	height: var(--height);
	border: 1px solid;
	color: #555;
	border-radius: 0.3rem;
	overflow: hidden;
}
.deactivated qr-button {
	opacity: 0.5;
}
qr-button qr-label {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	cursor: default;
	font-size: var(--font-size);
	line-height: calc(var(--height) - 2px);
	height: 100%;
	text-align: center;
	width: 100%;
	padding: 0 1rem;
}
qr-button a {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
qr-instructions {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0;
	margin-bottom: 2rem;
}
#language {
	--height: 2rem;
	position: fixed;
	top: 0;
	right: 0;
	min-width: 4rem;
	border-color: #eee9;
	border-right: none;
	border-top: none;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 1px 2px 4px #0005;
	z-index: 100;
	background: #eee9;
	backdrop-filter: blur(2px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
#language.hidden {
	transform: translate(110%,-110%);
}
.can_do {
	position: relative;
	background: #333;
	color: #eee;
	padding: 2rem 3rem;
	/* line-height: 2rem; */
	/*margin-bottom: 2rem;*/
}
.can_do li {
	margin-bottom: 0.5rem;
}
.details {
	position: relative;
	padding-top: 2rem;
	background: #eee;
}
ul {
	display: block;
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding-inline-start: 0;
	width: 100%;
	max-width: 190mm;
	text-align: justify;
}
.links ul {
	padding-inline-start: 0;
	list-style-type: none;
	overflow: hidden;
	width: 43rem;
	max-width: initial;
}
.links li {
	display: inline-block;
	position: relative;
	float: left;
	box-sizing: border-box;
	width: 10rem;
	border: 1px solid #aaa;
	border-radius: 0.5rem;
	text-align: center;
	padding: 0.5rem;
	margin-left: 1rem;
	margin-bottom: 1rem;
}
.links li:nth-child(4n + 1) {
	margin-left: 0;
}
.links li a {
	text-decoration: none;
	font-size: 1.2rem;
}
.links li small {
	font-size: 60%;
}

.console {
	position: relative;
	display: block;
	margin: 3rem auto 2rem auto;
	overflow: hidden;
	width: 42rem;
	padding: 3rem 0.5rem;
	border: 1px solid;
	border-radius: 1rem;
}
.parameters {
	position: relative;
	display: inline-block;
	display: inline-grid;
	grid-template-columns: auto 2fr 2fr 2fr 2fr 2fr;
	grid-column-gap: 1rem;
	grid-row-gap: 2rem;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1rem;
}
.parameters span, 
.parameters input, 
.parameters select {
	position: relative;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	line-height: 1rem;
	padding: 0.2rem;
	border: 1px solid #555;
	margin-bottom: 0.4rem;
}
.parameters span, 
#borders>div {
	font-size: 1rem;
	width: 9rem;
	width: 100%;
	border-color: transparent;
	text-align: right;
	padding-left: 0;
	padding-right: 0.5rem;
	padding-right: 0;
	margin: 0;
}
.parameters span.jp {
	font-size: 0.8rem;
}
.parameters input, 
.parameters select {
	font-size: 0.8rem;
	width: 4rem;
	width: 100%;
	margin-right: 1rem;
	margin: 0;
}
#borders {
	grid-column: span 6;
}
#borders>div {
	display: inline-block;
	float: left;
	box-sizing: border-box;
	border: 1px solid;
	height: 1.4rem;
	width: 1.4rem;
	padding: 0.3rem;
}
[print-borders='1'] #borders>div::before {
	content: "";
	display: inline-block;
	float: left;
	width: 100%;
	height: 100%;
	background: #000;
}
#borders span {
	width: auto;
	padding-left: 1rem;
}

#create, 
#print {
	margin-bottom: 1rem;
	display: block;
	margin: auto;
	margin-top: 0.5rem;
}
qr-disclaimer {
	display: block;
	position: relative;
	margin-top: 10rem;
	padding-top: 3rem;
	border-top: 1px solid #ccc;
	font-size: 0.8rem;
	white-space: break-spaces;
}

@keyframes parallax_effect {
	from {
		transform: translateY(0) rotateZ(-15deg);
	}
	to {
		transform: translateY(20%) rotateZ(-15deg);
	}
}


/*

*/

@media screen and (max-width: 860mm) {
	.sheets_container {
		width: 630mm;
	}
}
@media screen and (max-width: 650mm) {
	.sheets_container {
		width: 420mm;
	}
}
@media screen and (max-width: 440mm) {
	.sheets_container {
		width: 210mm;
	}
}
@media screen and (max-width: 230mm) {
	.sheets_container {
		transform-origin: top;
		margin-left: 50%;
		transform: translateX(-50%) scale(0.75);
	}
}
@media screen and (max-width: 164mm) {
	.sheets_container {
		transform: translateX(-50%) scale(0.5);
	}
}
@media screen and (max-width: 112mm) {
	.sheets_container {
		transform: translateX(-50%) scale(0.2);
	}
}


@media screen and (max-width: 52rem) {
	.console {
		width: 28rem;
	}
	.links ul {
		width: 29rem;
	}
	.links li {
		width: 6.5rem;
	}
}
@media screen and (max-width: 36rem) {
	.console {
		width: 14rem;
	}
	.links ul {
		width: 15rem;
	}
	.links li {
		width: 7rem;
	}
	.links li:nth-child(2n + 1) {
		margin-left: 0;
	}
}
@media screen and (max-width:120mm) {
	.bg {
		background-size: auto;
	}
	.console {
		box-sizing: border-box;
		width: 96%;
		margin: 3rem auto;
	}
	.parameters {
		grid-template-columns: auto 1fr;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
	}
	.parameters #borders {
		grid-column: span 2;
	}
	.parameters #borders span {
		font-size: 4.3vw;
		padding-left: 1vw;
	}
	.parameters span, 
	.parameters input, 
	.parameters select {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.links {
		width: 100%;
		box-sizing: border-box;
		padding-right: 2%;
	}
	.links ul {
		width: 100%;
	}
	.links li:nth-child(n) {
		width: 48%;
		margin-left: 2%;
	}
	#language {
		right: 0;
	}
	#print {
		display: none;
	}
}

/*

*/


@media print {
	:root, 
	body, 
	outer-container, 
	inner-container {
		overflow: initial;
		width: initial;
		height: initial;
		overflow: initial;
		margin: 0;
		padding: 0;
		background-color: initial;
	}
	qr-instructions, 
	qr-disclaimer {
		display: none;
	}
	.sheets_container, 
	outer-container, 
	inner-container {
		float: left;
		width: 210mm;
		margin: 0;
		padding: 0;
	}
	a4-sheet {
		display: inline-block;
		overflow: hidden;
		width: 210mm;
		height: 297mm;
		clear: both;
		page-break-after: always;
		margin-bottom: 1px;
	}
	a4-sheet, 
	qr-block {
		background-color: initial;
		box-shadow: none;
	}
	img {
		-webkit-print-color-adjust: exact;
	}
}