h1, h1+div 
{
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
}

h2, h2+div 
{
  display: inline-block;
  border-bottom: 0px;
}

h4
{
	margin-block-end: 0.1em;
}

img.elemType {
	object-fit: contain;
	width: 4.0vw;
	height: 3.0vw;
}

section.skills {
	display:inline-block;
	
	margin-left: auto;
	margin-right: auto;
}

article {
	clear: both;
	overflow: auto;
	width: 100%;
}

hgroup {
	margin-top: 10px;
}

* {
	box-sizing: border-box;
}

.quote-container {
	position: relative;
	display: inline-block;
	//cursor: pointer;
}

.quote {
	font-size: 14px;
	visibility: hidden;
	width: 300px;
	height: 50px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 10px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 10%;
	margin-left: -100px;
	opacity: 0;
	transition: opacity 0.3s;
}

.quote-container .quote::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.quote-container:hover .quote {
	visibility: visible;
	opacity: 0.8;
}

.column {
	float: left;
	width: 50%;
	padding: 5px;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

/* Two-Column or Four-Column Layouts */
.column1, .column2, .column3, .column4 {
	width: 24%;
	display: inline-block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/*margin: 1%;*/
}

/* Two-Column Center-Wide */
.columnL, .columnR {
	width: 32%;
	display: inline-block;
	text-align: center;
	align: center;
	margin-left: auto;
	margin-right: auto;
	/*margin: 1%;*/
}

/* Three-Column or Five-Column Layouts */
.columnA, .columnB, .columnC, .columnD, .columnE {
	width: 25%;
	display: inline-block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/*margin: 1%;*/
}
.columnA, .columnE {
	width: 10%;
}

/*
.columnA, .columnB {
	width: 45%;
	display: inline-block;
	text-align: center;
}
.columnA {
	margin-left: auto;
	margin-right: 0;
}
.columnB {
	margin-left: 0;
	margin-right: auto;
}

*/

.places {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	height: auto;
	border: 2px solid #000000;
}

.places-image {
	width:100%;
	height:auto;
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
}

figure img {
	display: block;
	width: calc(25vw - 22px);
	height: calc(25vw - 22px);
	max-width: 200px;
	max-height: 200px;
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fddec2;
	border-radius: 16px;
	/* padding: 10px 10px 10px 10px; */
	aspect-ratio: 1 / 1;
	/* box-shadow: 0 0 0 0.3em #655;
	outline: 0.6em solid #655; */
}

div.app
{
	max-width: 20vw;
	max-height: 300px;
}

figure.goodsFigure
{
	width: 110%;
	height: 110%;
	max-height: 330px;
}

figure img.goods 
{
	max-width: 300px;
	max-height: 300px;
}

figure.honmonerFigure
{
	width: 23vw;
	//height: 25vw;
	min-width: 100px;
	max-width: 98%;
	//max-height: 300px;
}

figure img.honmoner
{
	width: 25vw;
	height: 25vw;
	
	max-width: 300px;
	max-height: 300px;
}

figure.campusFigure
{
	width: 23vw;
	//height: 25vw;
	min-width: 100px;
	max-width: 98%;
	//max-height: 300px;
}

figure img.campus
{
	width: 25vw;
	height: 25vw;
	
	max-width: 300px;
	max-height: 300px;
}

.honmoner-image {
	background-size:25vw 25vw;
	background-position:center center;
	background-repeat:no-repeat;
}

.campus-image {
	background-size:25vw 25vw;
	background-position:center center;
	background-repeat:no-repeat;
}

.infotable {
	display: inline-block;
	border-spacing: 2px;
	border-collapse: separate;
}
.infotable td {
	padding: 3px;
	font-size: 1em;
}

.infoheader {
	background: clear; /* #3A2700; */
	color: black;
	text-align: center;
	width: 20%;
	font-weight: bold;
}

.leftcell {
	background: #3A2700;
	color: white;
	text-align: center;
	width: 2%;
	max-width: 200px;
	border: 1px solid #3A2700;
	border-radius: 12px 0 0 12px / 12px;
}
.rightcell {
	background: #3A2700;
	color: white;
	text-align: center;
	width: 4%;
	max-width: 200px;
	border: 1px solid #3A2700;
	border-radius: 0 12px 12px 0 / 12px;
}

td, th {
	display: table-cell;
	vertical-align: middle;
	padding-bottom: 0;
	padding-top: 4;
}

@keyframes elastic-grow {
	from { transform:scale(0); }
	70% {
		transform: scale(1.1);
		animation-timing-function:
		cubic-bezier(0.1, 0.25, 1.0, 0.25);
	}
}

input:not(:focus) + .callout {
	 transform: scale(0); 
	 transition: 0.25s;
 }
 

.callout {
	transform-origin: 1.4em - 0.4em;
	transition: 0.5s cubic-bezier(0.25, 0.1, 0.3, 1.5);
	//transition: 0.5s transform;
}

.sprite {
	display: inline-block;
	width: 96px;
	height: 96px;
}