@media screen and (max-width: 1200px) {

	#visual .front {
		background-position: calc(50% - 120px) center, right -5px center, center center;
	}

	.filler.filler-1,
	.filler.filler-2,
	.filler.filler-4,
	.filler.filler-5,
	.filler.filler-6 {
		display: none;
	}

}

@media screen and (max-width: 1000px) {

	#visual {
		height: 600px;
	}

	#visual .front {
		background-position: calc(50% - 100px) center, right -5px center, center center;
	}

}

@media screen and (max-width: 850px) {

	#visual {
		height: 500px;
	}

	#visual .front {
		background-position: calc(50% - 80px) center, right -5px center, center center;
	}

}

@media screen and (max-width: 700px) {

	#visual {
		height: 440px;
	}

	#visual .front {
		background-position: calc(50% - 50px) center, right -5px center, center center;
	}

	.howto ul li.arrow {
		display: none;
	}

	.howto ul {
		grid-template-columns: 1fr 1fr 1fr;
	}

}

@media screen and (max-width: 600px) {

	#visual {
		height: 440px;
	}

	#visual .front {
		background-image: url("/assets/gfx/visual-front.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 85%;
	}

	#visual p {
		bottom: 6px;
	}

}

@media screen and (max-width: 440px) {

	#visual {
		height: 400px;
	}

}

@media screen and (max-width: 950px) {

	#footer .socials {
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

	#footer .socials p {
		text-align: center;
	}

	#footer .socials .icons {
		margin-left: auto;
		margin-right: auto;
	}

	#visual img.button {
		height: auto;
		width: 250px;
		top: auto;
		bottom: 35%;
	}

	#visual h1 {
		left: 20px;
		margin-left: 0px;
		font-size: 70px;
	}

}

@media screen and (max-width: 900px) {

	#title {
		height: 120px;
	}

	#title a.logo img {
		height: 90px;
		margin-top: 20px;
	}

	#title ul li a {
		font-size: 22px;
	}

	#title ul {
		top: 25px;
	}

	.content {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	#visual img.triangle {
		height: 24%;
	}

	#visual h1 {
		font-size: 66px;
		width: calc(100% - 150px);
	}

}

@media screen and (max-width: 860px) {

	.receipt-container .upload-information {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		margin-bottom: 30px;
	}

}

@media screen and (max-width: 730px) {

	#footer ul li {
		display: inherit;
	}

	#title a.logo img {
		height: 70px;
		margin-top: 18px;
	}

	#title {
		height: 100px;
	}

	h2 {
		font-size: 36px;
	}

	h3 {
		font-size: 24px;
	}

	label {
		line-height: 1.1;
	}

	#visual img.products {
		height: 28%;
		right: -120px;
	}

	#visual h1 {
		font-size: 50px;
		width: calc(100% - 180px);
	}

	#visual img.button {
		bottom: 23%;
		width: 200px;
		right: -20px;
		margin-left: 0px;
	}

}

@media screen and (max-width: 600px) {

	#title ul li a {
		font-size: 18px;
	}

}

@media screen and (max-width: 660px) {

	body.products div.products ul {
		grid-template-columns: 1fr 1fr;
	}

	body.products div.products ul.sensations {
		grid-template-columns: 1fr 1fr;
	}

}

@media screen and (max-width: 550px) {

	#title {
		height: 90px;
	}

	#title ul {
		top: 10px;
	}

	#title ul li {
		padding-left: 4px;
		padding-right: 4px;
	}

	#title ul li a {
		font-size: 16px;
	}

	body.faq h2 {
		font-size: 26px;
	}

	body.faq h3 {
		font-size: 20px;
	}

	body.faq p {
		font-size: 14px;
	}

	#visual h1 {
		font-size: 50px;
		width: calc(100% - 40px);
		text-align: center;
	}

	#visual img.triangle {
		display: none;
	}

}

@media screen and (max-width: 500px) {

	#footer h3 {
		font-size: 22px;
	}

	#visual {
		height: auto;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}

	#visual .front {
		background-image: none;
	}

	#visual p {
		position: relative;
		left: auto;
		transform: none;
	}

	#visual img {
		display: inherit;
	}

	.howto ul {
		grid-template-columns: 1fr;
	}

	.howto ul li {
		padding-bottom: 20px;
	}

}