/* GENERAL */
/* ------------------------------------------------------------------------- */

:root {
	--bg-color-light: #fff;
	--txt-color-light: #000;
	--img-opacity-light: 1;

	--bg-color-dark: #000;
	--txt-color-dark: rgba(255,255,255,.7);
	--img-opacity-dark: .5;
}


* {
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
}

p {
	margin: 0;
	padding: 0;
}

a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #000;
	transition: color 0.2s;
}
.no-touchevents a:hover {
	color: var(--txt-color-dark);
	border-bottom: 1px solid var(--txt-color-dark);
}

main {
	margin: 0 auto;
}



/* HOME */
/* p-home */
/* ------------------------------------------------------------------------- */

/*
.touchevents body.p-home {
	height: calc(100vh - 120px);
}

.no-touchevents body.p-home {
	height: 100vh;
}
*/


body.p-home {
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: flex;

	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;	
	flex-direction: column;
	margin: 20px;
}


.start p {
	text-align: justify;
	text-justify: inter-word;
}

.stealth-link, a.stealth-link:hover {
	border-bottom: none;
}

img {
	max-width: 540px;
	width: 100%;
}
a img {
	cursor: default;
}



@media only screen and (max-width:380px) {
	.start {
		margin-top: 15px;
		padding-bottom: 100px;
		letter-spacing: 0.04em;
		font-size: 12px;
		line-height: 21px;
	}
	.start p {
		max-width: 280px;
		margin: 60px 50px 60px 0px;
	}
	.dark .start {
		letter-spacing: 0.05em;
	}
}
@media only screen and (min-width:381px) and (max-width:520px) {
	.start {
		margin-top: 15px;
		padding-bottom: 100px;
		line-height: 21px;
		font-size: 13px;
		letter-spacing: 0.03em;
	}
	.start p {
		max-width: 300px;
		margin: 60px 40px 60px 0px;

		letter-spacing: 0.02em;
		font-size: 14px;
		max-width: 295px;
	}
	.dark .start p {
		letter-spacing: 0.02em;
		font-size: 14px;
		max-width: 295px;
	}
}
@media only screen and (min-width:521px) and (max-width:1450px) {
	.start {
		margin-top: 200px;
		padding-bottom: 100px;
		max-width: 540px;
		line-height: 21px;
		font-size: 13px;
		letter-spacing: 0.03em;
	}
	.start p {
		max-width: 325px;
		margin: 70px 30px 70px 30px;
	}
}
@media only screen and (min-width:1450px) {
	.start {
		margin-top: 200px;
		padding-bottom: 100px;
		width: 580px;
		line-height: 23px;
		font-size: 14px;
		letter-spacing: 0.03em;
	}
	.start p {
		max-width: 350px;
		margin: 70px 30px 70px 30px;
	}
	img {
		max-width: 580px;
		width: 100%;
	}
}



/* DARK */
.dark {
	background: #000;
	color: var(--txt-color-dark);
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
}

.dark a {
	color: var(--txt-color-dark);
	border-bottom: 1px solid var(--txt-color-dark);
}
.no-touchevents .dark a:hover {
	color: #999;
	border-bottom: 1px solid #999;
}

.dark .stealth-link, .dark a.stealth-link:hover {
	border-bottom: none;
}
.no-touchevents a:hover, .no-touchevents a.stealth-link:hover {
	color: #999;
}

.dark img {
	opacity: var(--img-opacity-dark);
}
.dark img:hover {
	opacity: var(--img-opacity-dark);
}