html {
	font-size: 10px;
}
body {
	font-family: sans-serif;
	margin: 0px;
	touch-action: none;

}

.arrowimg {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
:root {
	--makername-height: 2.2rem;
	--machine-pos-width: 13rem;
	--machine-item-width-default: 8rem;
	--machine-item-height: 3rem;
	--machine-spec-height: 2.8rem;
	--machine-style-width: 1.2rem;

	--year-width: calc( var(--font-size) * 2.5);
}
* {
	overscroll-behavior: none;
}
#area {
	position: relative;
	width: 100vw;
	height: 100vh;
/*	overflow: visible; */
	overflow: scroll;
}
@media print {
#area {
	position: relative;
	width: 15000px;
	height: 1000px;
	overflow: visible;
}
}
.year_area {
	display: inline-block;
	position: sticky;
	left: 0;
	z-index: 5;
	background-color: #eeeeee;
	border-bottom: 1px solid black;
	font-size: var(--font-size);
	box-sizing: border-box;
}
.year_one {
	left: 0;
	display: block;
	border-bottom: 1px solid black;
	width: var(--year-width);
	box-sizing: border-box;
}
.year_text {
	position: sticky;
	font-size: 0.8em;
	font-weight: bold;
	top:0;
}
.year_body {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff3f3;
	border-bottom: 1px solid black;
	box-sizing: border-box;
	z-index: 0;
}
.year_body_one {
	top: 0;
	display: block;
	border-bottom: 1px solid black;
	box-sizing: border-box;
	width: 100%;
}

.makername_area {
	position: sticky;
	top: 0;
	left: var(--year-width);
	z-index: 4;
	padding: 0.3rem;
	box-sizing: border-box;
	width: 12rem;
	height: var(--makername-height);
	color: white;
	background-color: hsl(240 100% 57%);
	border-color: hsla(240 100% 70% / 80%) hsl(240 100% 43% / 80%) hsl(240 100% 30% / 80%) hsl(240 100% 43% / 80%);
	border-width: 0.2rem;
	border-style: solid;
	text-align: center;
	font-weight: bold;
}
.content {
	display: inline flex;
	flex-direction: row;
	position: absolute;
	top: 0;
}

.content .country {
	min-width: 100%;
	display: flex;
	flex-shrink: 0;
	position: relative;
	border-right: 5px double black;
}
.content .maker {
	display: inline-block;
	flex-shrink: 0;
	position: relative;
}
.content .maker + .maker {
	border-left: solid 1px #555555;
}
.machine {
	position: absolute;
	z-index: 1;
	display: grid;
	grid-template-areas : "empty spec"
	                      "style item";
	--machine-item-width: var(--machine-item-width-default);
	--machine-base-pos: calc( calc( var(--machine-item-width-default) - var(--machine-item-width) ) / 2 );
	pointer-events: none;
}
.machine:has(.large12) {
	/* (name < 15) and (subname < 21) */
	--machine-item-width: 8.8rem;
	.name {
		font-size: 0.9rem;
	}
}

.machine:has(.large15) {
	/* (name < 19) and (subname < 27) */
	--machine-item-width: 10.5rem;
	.name {
		font-size: 0.8rem;
	}
}

.machine:has(.large19) {
	/* (name < 21) and (subname < 30) */
	--machine-item-width: 11rem;
	.name {
		font-size: 0.8rem;
	}
}

.machine:has(.large21) {
	/* (name < 24) and (subname < 34) */
	--machine-item-width: 11.5rem;
	.name {
		font-size: 0.7rem;
	}
	.subnamesize20, .subnamesize24 {
		font-size: 90%;
	}
}

.machine:has(.large24) {
	/* (24 <= name ) or (34 <= subname) */
	--machine-item-width: 11.5rem;
	.name {
		font-size: 0.7rem;
	}
	.namesize32 {
		.name {
			font-size: 0.64rem;
		}
	}
	.subnamesize24 {
		.subname {
			font-size: 60%;
		}
	}
	.subnamesize28 {
		.subname {
			font-size: 55%;
		}
	}
}

.empty {
	grid-area: empty;
	width: calc(var(--machine-style-width) * 0.8);
	height: 1.4rem;
}
.style{
	grid-area: style;
	width: var(--machine-style-width);
}
.style img{
	width: calc(var(--machine-style-width) * 0.8);
	height: calc(var(--machine-style-width) * 0.8);
	user-select: none;
}

.item {
	grid-area: item;
	display: block;
	width: var(--machine-item-width);
	height: var(--machine-item-height);
	border-radius: 0.8rem;
	position: relative;
	border-style: solid;
	border-width: 0.3rem;
	box-shadow: 0.2rem 0.2rem 0.4rem #333333;
	background: hsl(0 0% 100%);
	border-color: hsl(0 0% 80%) hsl(0 0% 64%) hsl(0 0% 50%) hsl(0 0% 64%);
	pointer-events: auto;
}
.item:active {
	transform: translate(3px , 3px);
}
.item.popup-open {
	border: 0.3rem solid red !important;
}

.item span {
	position: absolute;
	width: 100%;
	left: 50%;
	transform: translate(-50%);
	text-align: center;
	user-select: none;
	pointer-events: none;
}
.name {
	top: 0px;
	font-weight: bold;
}
.subname {
	top: 1.1rem;
	font-size: 70%;
}
.price {
	font-size: 80%;
}
.name ~ .price {
	top: 1.5rem;
}
.subname ~ .price {
	top: 2rem;
}
.date {
	top: 2.6rem;
	font-size: 80%;
}

.spec {
	grid-area: spec;
	display: block flex;
	height: var(--machine-spec-height);
	flex-direction: column;
	width: fit-content;
	align-items: start;
	justify-content: end;
}

.spec .peri {
	display: flex;
	max-width: calc( 1.3rem * 10 );
	flex-wrap: wrap;
}

.spec > * {
	display: inline-block;
	user-select: none;
}
.spec .ram {
	border: solid 1px #333333;
	border-radius: 0.4rem;
	background-color: white;
	height: calc(1.2rem - 2px);
	font-size: 70%;
	width: 8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.spec .mixed_ram {
	width: 3rem;
}
.spec .ram > img {
	margin: 0 2px 0 2px;
	width: 0.7rem;
	height: 0.7rem;
	vertical-align: middle;
}
.spec img {
	margin-left: 2px;
	width: 1.2rem;
	height: 1.2rem;
}

.popup_item {
	background-color: #ffffff;
	position: absolute;
	font-size: var(--font-size);
	z-index: 10;

	width: min(30em, 80vw);
	min-height: 3em;
	max-height: 50vh;
	overflow-y: scroll;

	border-style: solid;
	border-width: 2px;
	border-color: #333333;
	box-shadow: 4px 6px 16px #444444;
	padding: 0 0.5em 0.5em 0.5em;

	display: grid;
	grid-template-areas:
		"popup_menu popup_menu"
		"title_series body_series"
		"title_modelNo body_modelNo"
		"title_launchDay body_launchDay"
		"title_price body_price"
		"title_nickname body_nickname"
		"title_photo body_photo"
		"title_cpu body_cpu"
		"title_memory body_memory"
		"title_storage body_storage"
		"title_feature body_feature"
		"title_diff body_diff"
		"title_memo body_memo"
		"title_spec body_spec"
	;
	grid-template-columns: 7em auto;
}
@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.popup_item.show {
	animation: show 0.2s linear 1;
}
.popup_item * {
	pointer-events: none;
	padding: 2px;
}
.popup_menu {
	position: sticky;
	top: 0;
	grid-area: popup_menu;
	height: 1.5em;
	width:100%;
	display: flex;
	z-index: 2;
	background-color: white;
	justify-content: flex-end;
	align-items: center;
}
.btn_copy {
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	pointer-events: auto;
}
.btn_copy:active {
	transform: translate(2px , 2px);
}
.btn_close {
	width: 1em;
	height: 1em;
	pointer-events: auto;
}
.btn_close:active {
	transform: translate(2px , 2px);
}
.lang_selector {
	background-color: #eeeeff;
	display: grid;
	grid-template-columns: repeat(7,1fr);
	column-gap: 0.4em;
	width: 8em;
}
.lang_selector div {
	text-align: center;
	box-shadow: 2px 2px 2px #666666;
	border-radius: 0.8em;
	user-select: none;
	pointer-events: auto;
	font-size: 0.8em;
}
.lang_selector div.selected {
	background-color: #4444ff;
	font-weight: bold;
	color: #ffffff;
}
.hidden {
	display: none !important;
}

.popup_item [class^=title] {
	background-color: #cccccc;
}
.popup_item [class^=title] ~ [class^=title] {
		border-top: solid 1px #444444;
}
.popup_item [class^=body] ~ [class^=body] {
		border-top: solid 1px #444444;
}
.popup_item .title_series {
	grid-area: title_series;
}
.popup_item .body_series {
	grid-area: body_series;
}
.popup_item .title_modelNo {
	grid-area: title_modelNo;
}
.popup_item .body_modelNo {
	grid-area: body_modelNo;
}
.popup_item .title_photo {
	grid-area: title_photo;
}
.popup_item .body_photo {
	grid-area: body_photo;
	position: relative;
}
.popup_item .title_launchDay {
	grid-area: title_launchDay;
}
.popup_item .body_launchDay {
	grid-area: body_launchDay;
}
.popup_item .title_price {
	grid-area: title_price;
}
.popup_item .body_price {
	grid-area: body_price;
}
.popup_item .title_nickname {
	grid-area: title_nickname;
}
.popup_item .body_nickname {
	grid-area: body_nickname;
}
.popup_item .title_diff {
	grid-area: title_diff;
}
.popup_item .body_diff {
	grid-area: body_diff;
}
.popup_item .title_cpu {
	grid-area: title_cpu;
}
.popup_item .body_cpu {
	grid-area: body_cpu;
}
.popup_item .title_memory {
	grid-area: title_memory;
}
.popup_item .body_memory {
	grid-area: body_memory;
}
.popup_item .title_storage {
	grid-area: title_storage;
}
.popup_item .body_storage {
	grid-area: body_storage;
}
.popup_item .title_feature {
	grid-area: title_feature;
}
.popup_item .body_feature {
	grid-area: body_feature;
}
.popup_item .title_changepoint {
	grid-area: title_changepoint;
}
.popup_item .body_changepoint {
	grid-area: body_changepoint;
}
.popup_item .title_memo {
	grid-area: title_memo;
}
.popup_item .body_memo {
	grid-area: body_memo;
}
.popup_item .title_spec {
	grid-area: title_spec;
}
.popup_item .body_spec {
	grid-area: body_spec;
	display: grid;
	grid-template-columns: 2em auto;
}
.popup_item .body_spec img {
	width: 1.5em;
	height: 1.5em;
}
.popup_item .photo_img {
	width: 80px;
	height: 80px;
	background-color: #eeeeee;
	object-fit: scale-down;
	pointer-events: auto;
}

#modal_photo {
	--photo-btn-size: 3rem;
	--photo-btn-area-size: calc( var(--photo-btn-size) + 2rem);
}
#modal_photo .loading {
	position: absolute;
	width: 10rem;
	top: calc(50% - 0.5rem);
	left: calc(50% - 5rem);
	color: black;
	text-shadow: white 0 0 10px;
	-webkit-text-stroke: white 1px;
	font-weight: bold;
	font-size: 2rem;
	z-index: 1;
}
#modal_photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:20;
	background: rgba(0,0,0,60%);
	align-items: center;
}
#modal_photo:not(.hidden) {
	display: grid;
}
#photo_on_modal {
	object-fit: scale-down;
	justify-self: center;
	z-index: 2;
}
#modal_photo .photo_btn {
	pointer-events: auto;
	margin: 0.2rem;
	border-radius: 1rem;
}
#btn_prev_on_modal {
	justify-self: end;
}
#btn_next_on_modal {
	justify-self: start;
}
#modal_photo .btn_modal_close {
	position: fixed;
	right: 1rem;
	top: 1rem;
	width: min(3rem, 10vmin);
	height: min(3rem, 10vmin);
	background: #ffffff;
}

@media (orientation: landscape) {
	#modal_photo {
		grid-template-columns: var(--photo-btn-size) auto var(--photo-btn-size);
	}
	#photo_on_modal {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		height: 100svh;
	}
	#modal_photo .photo_btn {
		grid-row: 1;
		width: var(--photo-btn-size);
		height: 80%;
	}
	#btn_prev_on_modal {
		grid-column: 1;
	}
	#btn_next_on_modal {
		grid-column: 3;
	}
}
@media (orientation: portrait) {
	#modal_photo {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto var(--photo-btn-area-size);
	}
	#photo_on_modal {
		grid-column: 1 / span 2;
		width: 100%;
		max-height: calc(100% - var(--photo-btn-area-size));
	}
	#modal_photo .photo_btn {
		width: min(6rem, 30%);
		height: var(--photo-btn-size);
	}
	#btn_prev_on_modal {
	}
	#btn_next_on_modal {
	}
}

div.MACHINE_MEMO {
	background: hsl(0 0% 95%);
	border-color: hsl(0 0% 100%) hsl(0 0% 90%) hsl(0 0% 85%) hsl(0 0% 90%);
}
div.MACHINE_MEMO span {
	color: hsl(0 0% 45%);
}
div.GAME {
	background: hsl(45 100% 80%);
	border-color: hsl(45 100% 90%) hsl(45 100% 75%) hsl(45 100% 70%) hsl(45 100% 75%);
}
div.GAME span {
	color: hsl(225 70% 50%);
}