* {
	font-family: 'DINPro', 'Helvetica Now', sans-serif;
	text-decoration: none;
    color: #333;
}

html, body {
	margin: 0;
	-webkit-text-size-adjust: none;
    background: #FFF;
}

body {
    background: none;
}

page {
	position: absolute;
	right: calc(600vw/6/6);
	bottom: calc(400vh/4/4);
}

page contact {
	float: right;
	clear: both;
}

contact * {
	font-size: 12pt;
}

contact {
	position: relative;
	margin-top: 2px;
	font-size: 12pt;
}

contact mail a {
    text-decoration: none;
    cursor: pointer;
}

contact mail a ~ p {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	margin: 0;
	top: 0;
	left: 0;
}

contact mail a ~ p:before {
	content: attr(K);
	color: transparent;
}

contact mail:hover:not(:active) at-sign,
contact mail a:hover ~ p,
contact mail a:active ~ p {
	text-decoration: underline;
}

span {
	font-family: 'かなざわ本丸ゴシックmini', sans-serif !important;	
}

contact mail a at-sign {
	text-decoration: underline;
}

@media screen and (max-width: 99px) {
    contact mail local-part,
	contact mail domain {
	    display: none;
    }

	contact mail a ~ p:before {
		content: '@';
	}
}

@font-face {
	font-family: 'DINPro';
	font-style: normal;
	src: url('fonts/DIN/DINPro-Regular.woff2') format('woff2');
	font-display: block;
}

@font-face {
	font-family: 'かなざわ本丸ゴシックmini';
	font-style: normal;
    src: url('fonts/KanazawaFontMini/KanazawaHonmaruGothicMini.otf');
    font-display: block;
}