@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

html {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Titillium Web', sans-serif;
	padding: 0;
	min-height: 100vh;
	min-width: 20em;
	margin: 0;
}

span.avoidwrap {
	display: inline-block;
}

*[class^='appear-'] {
	position: relative;
}

.bkgnd-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.bkgnd-image > * {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	margin: auto;
	opacity: 0.1;
}

#main {
	min-height: 100vh;
	overflow: hidden;
}

#index-header {
	min-height: 95vh;
	position: relative;
	padding: 0 3rem;
}

#index-header .background-image {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transform: skewY(-8deg);
	transform-origin: 0 0;
	border-bottom: 1px solid #99cf16;
	overflow: hidden;
}

#index-header .background-image .animation {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	transform: skewY(8deg);
	transform-origin: 0 0;
}

#index-header object.logo {
	position: absolute;
	height: 30vh;
	width: 60vh;
	min-height: 10em;
	min-width: 18em;
	max-height: 20vw;
	max-width: 40vw;
	margin: 5rem 0 5rem 0;
	padding: calc(1vh + 1vw) 0;
	top: 0;
	bottom: calc(2vh + 2vw + 2em);
}

#index-header .catchphrase {
	position: relative;
	padding-top: calc(15rem + 5vh + 8vw);
	padding-bottom: calc(15vw + 5rem);
	font-size: 3vw;
}

@media (max-width: 60rem) {
	#index-header .catchphrase {
		font-size: 1.8rem;
	}
}

#header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	margin: 0;
	padding: 0 1rem;
	background-color: #f0f0f0;
	border-bottom: 1px solid #99cf16;
}

#main.index #header {
	position: absolute;
	background: none;
	border-bottom: none;
	height: 4rem;
}

#header > div:not(#menu) {
	display: inline-block;
	position: relative;
}

#header object.logo {
	height: 4rem;
	vertical-align: bottom;
	padding: 0.5rem;
	pointer-events: none;
	/*transition: height 0.5s;*/
}

#main.index #header object.logo {
	display: none;
}

#header object.logo.big {
	height: 6rem;
}

#header object.logo + a {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 30;
}

#menu {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	height: 2rem;
	margin: auto 0;
	cursor: default;
	white-space: nowrap;
	z-index: 100;
}

#menu .collapsible {
	display: inline-block;
}

#menu .items {
	box-sizing: border-box;
	display: none;
	position: absolute;
	top: 100%;
	right: -1rem;
	white-space: nowrap;
	padding: 1rem 0.5rem 0.5rem 0.5rem;
	background: linear-gradient(to bottom, transparent, transparent 0.4rem, #f0f0f0 0.65rem, #f0f0f0 100%);
	border: 1px solid #99cf16;
	border-top: none;
	box-shadow: 0px 6px 5px rgba(0,0,0,0.5);
	font-size: 1rem;
}

#menu .item:hover .items {
	display: block;
}

#menu .item {
	padding: 0.25rem;
}

#menu .item > a {
	display: block;
}

#menu .items .items {
	font-size: 1rem;
}

#menu .item-account {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: -40%;
	background: center / contain no-repeat url(../images/icon-account.svg);
	padding: 0 0.5rem;
}

@media (max-width: 30rem) {
	#menu .items {
		white-space: normal;
	}
	#menu .items {
		width: calc(100vw - 3rem);
	}
	#menu .items .items {
		width: 100%;
	}
}

.title {
	min-height: calc(100vh - 12rem);
	position: relative;
	background: linear-gradient(to left, #959595, #959595 10em, #d8ff90 100%);
	border-bottom: 1px solid #99cf16;
	overflow: hidden;
	font-size: 2rem;
	padding-top: 10rem;
}

.title > .text {
	position: relative;
	padding-left: 15rem;
	padding-right: 4rem;
	max-width: 50rem;
}

.title > .bkgnd-image {
	position: absolute;
	left: auto;
	right: 0;
	top: 5rem;
	bottom: 0;
	width: 50%;
	height: 100%;
	min-width: 20rem;
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	z-index: 0;
}

.title .square {
	position: absolute;
	left: 4rem;
	top: 14rem;
}

.title .subtitle {
	position: relative;
	width: 90%;
	box-sizing: border-box;
	padding: calc(1rem + 10vh) 4rem 4rem 4rem;
}

#contents {
	padding: 1rem 2rem;
	max-width: 70em;
	margin: 0 auto;
}

#header + #contents {
	margin-top: 5rem;
}

#contents.smaller-width {
	max-width: 50rem;
}

.no-overflow {
	overflow: hidden;
}

iframe#contents {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: none;
	width: 100vw;
	max-width: unset;
	height: calc(100vh - 5rem);
}

#footer {
	margin-top: 2rem;
	font-size: 80%;
	color: #707070;
}

#footer > div {
	background-color: #f0f0f0;
	border-top: 1px solid #99cf16;
	padding: 1em;
}

#footer .container {
	vertical-align: top;
	display: inline-block;
	width: 49%;
}

#footer .email,
#footer .phone {
	padding-left: 1rem;
	position: relative;
}

#footer .email::before {
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 0.8rem;
	height: 0.8rem;
	content: "";
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22stroke-linejoin%3A%20round%3B%20stroke-linecap%3A%20round%3B%20stroke-width%3A%201.2%3B%22%3E%0A%3Cpath%20style%3D%22stroke%3A%20%23707070%3B%20fill%3A%20none%22%20d%3D%22M%2012.813183%2C18.02088%20C%2010.760478%2C18.740957%208.4330749%2C18.677954%206.3175147%2C17.661193%202.0863946%2C15.627674%200.30488793%2C10.549179%202.3384079%2C6.3180589%204.3719279%2C2.086939%209.4504225%2C0.30543157%2013.681543%2C2.3389519%20c%203.80603%2C1.8292176%205.777368%2C5.6804823%204.259125%2C10.0461531%20-0.488059%2C1.403401%20-1.57685%2C2.263227%20-2.947014%2C2.374037%20-0.293601%2C0.02374%20-0.608803%2C-0.03343%20-0.897229%2C-0.11028%20-0.291185%2C-0.07759%20-0.554633%2C-0.20412%20-0.789283%2C-0.374998%20-0.229831%2C-0.167369%20-0.423564%2C-0.389703%20-0.585013%2C-0.661757%20-0.161439%2C-0.272057%20-0.268276%2C-0.602936%20-0.32047%2C-0.992637%20-0.02364%2C-0.176474%20-0.03553%2C-0.472799%20-0.01155%2C-0.711759%20l%200.659598%2C-6.5565492%20m%20-0.589878%2C5.8742032%20c%20-0.187193%2C1.583809%20-1.230715%2C2.467622%20-1.732485%2C2.89409%20-0.494422%2C0.426466%20-1.0284264%2C0.639698%20-1.6020233%2C0.639698%20-0.4779982%2C0%20-0.906061%2C-0.121324%20-1.2841886%2C-0.363966%20C%207.4620121%2C14.145176%207.1536814%2C13.792241%206.9161316%2C13.336366%206.685936%2C12.880485%206.5299695%2C12.347403%206.4482322%2C11.737115%206.3684649%2C11.141534%206.3575769%2C10.538599%206.415568%2C9.9283097%206.4808963%2C9.3180219%206.6163659%2C8.7371452%206.8219532%2C8.185681%207.0348798%2C7.6342155%207.3086618%2C7.1526032%207.643265%2C6.7408424%207.9842384%2C6.3217289%208.3990431%2C5.9871737%208.8876811%2C5.7371761%209.3826873%2C5.4798256%209.9353745%2C5.3511507%2010.545738%2C5.3511507%20c%200.433877%2C0%200.834198%2C0.05147%201.200969%2C0.1544093%200.373141%2C0.095587%200.731112%2C0.2426446%201.073915%2C0.4411719%22%20%2F%3E%0A%3C%2Fsvg%3E);
}

#footer .phone::before {
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 0.8rem;
	height: 0.8rem;
	content: "";
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22stroke-linejoin%3A%20round%3B%20stroke-linecap%3A%20round%3B%20stroke-width%3A%201.2%3B%22%3E%0A%3Cpath%20style%3D%22stroke%3A%20%23707070%3B%20fill%3A%20none%22%20d%3D%22M%202.951666%2C14.752431%20C%202.646164%2C14.300228%202.383033%2C13.817047%202.167972%2C13.308584%201.737848%2C12.291657%201.5%2C11.173605%201.5%2C10%201.5%2C5.3055796%205.30558%2C1.5%2010%2C1.5%20c%204.69442%2C0%208.5%2C3.8055796%208.5%2C8.5%200%2C4.172412%20-3.006293%2C7.642668%20-6.970958%2C8.362844%20-2.933244%2C0.434205%20-4.083933%2C-1.32931%20-3.826252%2C-3.152025%22%20%2F%3E%0A%3Cpath%20style%3D%22stroke%3A%20none%3B%20fill%3A%20%23707070%22%20d%3D%22m%208.911464%2C12.953904%20c%200.391329%2C0.255902%201.17399%2C0.76771%200.33185%2C2.051588%20-0.842141%2C1.28388%20-1.624801%2C0.772073%20-2.407461%2C0.260266%20C%206.444524%2C15.009856%205.746295%2C14.247498%205.94404%2C13.306649%206.141787%2C12.3658%206.788252%2C10.953984%208.191798%2C8.8142179%209.595344%2C6.674451%2010.63314%2C5.5185395%2011.41788%2C4.9615452%20c%200.784742%2C-0.5569936%201.763683%2C-0.2225957%202.155013%2C0.033308%200.782659%2C0.5118063%201.565319%2C1.0236131%200.723179%2C2.3074921%20-0.84214%2C1.2838791%20-1.6248%2C0.7720721%20-2.016131%2C0.5161691%20C%2011.888612%2C7.5626107%2011.216569%2C7.7346674%209.813043%2C9.8744026%208.409518%2C12.014137%208.520134%2C12.698%208.911464%2C12.953904%20Z%22%20%2F%3E%0A%3C%2Fsvg%3E);
}

#filler {
	position: relative;
	height: 0;
}

#filler > div {
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-color: #f0f0f0;
}

@media (max-width: 50rem) {
	#footer .container {
		width: 100%;
	}
}

#footer .addresses,
#footer .menu {
	margin: 0 -1rem;
	display: table;
	table-layout: fixed;
	width: calc(100% + 2rem);
}

#footer .addresses > *,
#footer .menu > * {
	display: table-cell;
	vertical-align: top;
	box-sizing: border-box;
	width: 100%;
	padding: 0 1rem;
}

h1 {
	font-family: 'Titillium Web', sans-serif;
	letter-spacing: 0.08em;
	font-weight: bold;
	font-size: 2rem;
	font-weight: bold;
	position: relative;
	margin: 3rem 0;
}

h1 small {
	letter-spacing: 0;
	font-size: 80%;
}

h2, h3 {
	margin: 2rem 0;
}

.title h1 {
	font-size: 2.5rem;
}

a,
a:visited {
	color: #66851e;
}

svg .logo-green {
	fill: #99cf16;
}

.product {
	margin-left: 11rem;
	margin-bottom: 2rem;
	min-height: 12rem;
	position: relative;
}

.square {
	width: 8rem;
	height: 8rem;
	background-color: rgba(0,0,0,0.15);
	color: white;
	font-size: 2rem;
	line-height: 2rem;
	text-align: center;
}

.product .square {
	position: absolute;
	left: -10rem;
	top: 1rem;
}

.square > div {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.square::before {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transform: rotate(-8deg);
	background-color: #99cf16;
	content: '';
}

.with-image-left {
	margin-left: 8rem;
	min-height: 6rem;
	position: relative;
}

.with-image-left > .image {
	position: absolute;
	left: -8rem;
	top: 0;
	width: 6rem;
	height: 6rem;
}

.with-image-right {
	margin-left: 8rem;
	min-height: 6rem;
	position: relative;
}

.with-image-right > .image {
	position: absolute;
	left: -8rem;
	top: 0;
	width: 6rem;
	height: 6rem;
}

.product h2 a,
.product h2 a:visited,
#menu a,
#menu a:visited {
	text-decoration: none;
	color: inherit;
}

#menu a:hover {
	text-decoration: underline;
}

th {
	text-align: left;
	padding-top: 1em;
}

table tr:first-child th {
	padding-top: 0;
}

table {
	border-collapse: collapse;
}

td, th {
	padding: 0 1rem;
}

td:first-child, th:first-child {
	padding-left: 0;
}

td:last-child, th:last-child {
	padding-right: 0;
}

/*
h3 {
	position: relative;
	padding-left: 1.5em;
}

h3::before {
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7em;
	height: 0.7em;
	transform: rotate(-8deg);
	background-color: #99cf16;
	content: "";
}*/

header p {
	font-size: 180%;
}

*[class^='columns-'] {
	margin: 2rem -1rem;
	display: table;
	table-layout: fixed;
	width: calc(100% + 2rem);
}

*[class^='columns-'].margin-small {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

*[class^='columns-'] > :not([class^='bkgnd-']) {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	width: 100%;
	padding: 0 1rem;
}

*[class^='columns-'].spacing-big {
	margin: 2rem calc(-1rem - 3vw);
	width: calc(100% + 2rem + 6vw);
}

*[class^='columns-'].spacing-big > :not([class^='bkgnd-']) {
	padding: 0 calc(1rem + 3vw);
}

*[class^='columns-'].align-top > :not([class^='bkgnd-']) {
	vertical-align: top;
}

*[class^='columns-'] .img {
	text-align: center;
}

*[class^='columns-'] .img > * {
	width: 80%;
}

*[class^='columns-'] .img > *.big {
	width: 100%;
}

*[class^='columns-'] .img > *.small {
	width: 60%;
}

.screenshot {
	box-shadow: 2px 2px 10px black;
}

.border-horz td,
.border-horz th {
	border-bottom: 1px #e0e0e0 solid;
}

.margin-top {
	margin-top: 1rem;
}

.centered {
	text-align: center;
}

.bottom-links {
	margin: 4rem 0 2rem 0;
	text-align: center;
	font-size: 120%;
}

.bottom-links > div {
	vertical-align: middle;
	display: inline-block;
	width: 30%;
	min-width: 10rem;
	margin: 1rem 0;
}

.bottom-links > div object {
	pointer-events: none;
	display: block;
	margin: auto;
	width: 5rem;
}

@media (orientation: portrait) {
	#index-header {
		min-height: calc(95vh - 10rem);
	}
}

@media (max-width: 40rem) {
	#index-header {
		padding: 0 calc(10vw - 1rem);
	}
	#index-header .catchphrase span.avoidwrap {
		display: inline;
	}		
	h1 {
		font-size: calc(1.2rem + 2vw);
	}
	.title {
		font-size: calc(1.2rem + 2vw);		
	}
	.title h1 {
		font-size: calc(1.2rem + 3.25vw);
	}
	.title .square {
		left: 1.5rem;
	}
	.title > .text {
		padding-left: 8rem;
		padding-right: 1rem;
	}
	.title .subtitle {
		width: 100%;
		padding: 2rem 1rem 4rem 1rem;
	}
	.product {
		padding-top: 6.5rem;
		margin-left: 0;
		min-height: unset;
	}
	.square {
		width: 5rem;
		height: 5rem;
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	.product .square {
		left: 0;
	}
	.product .description h2 {
		padding-left: 6rem;
		position: absolute;
		top: -4rem;
		transform: translateY(-50%);
		margin: 0;
	}
	*[class^='columns-'] {
		display: block;
	}
	*[class^='columns-'] > :not([class^='bkgnd-']) {
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.skippable {
		display: none !important;
	}
}

@media (max-width: 30rem) {
	.title .square {
		top: 10rem;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.title h1 {
		margin-bottom: 0;
	}
	.title > .text {
		padding-top: 4rem;
		padding-left: 1rem;
	}
}

@media (min-width: 80rem) {
	.title .subtitle {
		width: 80%;
	}
}

#contents .catchphrase {
	font-size: 125%;
	font-style: italic;
	width: 60%;
	min-width: 20rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.foldable {
	background-color: #f0f0f0;
	padding: 0.1rem 1.2rem;
}

.foldable-container.unfolded {
	overflow: hidden;
}

.foldable-container .foldable {
	display: none;
}

.foldable-container.unfolded .foldable {
	display: block;
}

.foldable-container .unfold-link {
	position: relative;
	top: -2rem;
}

.foldable-container.unfolded .unfold-link {
	display: none;
}